fix(content): improve projects (#293)

* CaptionedImage component

Component for captioned images

* dreammall in-product image

padding in-product image

* Ocelot images

- Use Logo as main image for ocelot
- Have a captioned in-product image
- Fix some texts regarding ocelot

docs/.vuepress/client.ts

@@ -8,6 +8,7 @@ import ProcessStep from './components/ProcessStep.vue'
 import ProjectCard from './components/ProjectCard.vue'
 import ServiceCard from './components/ServiceCard.vue'
 import TeamMember from './components/TeamMember.vue'
+import CaptionedImage from './components/CaptionedImage.vue'
 
 export default defineClientConfig({
   enhance({ app }) {
@@ -18,7 +19,7 @@ export default defineClientConfig({
     app.component('ProjectCard', ProjectCard)
     app.component('TeamMember', TeamMember)
     app.component('ServiceCard', ServiceCard)
-
+    app.component('CaptionedImage', CaptionedImage)
   },
   setup() {
     setupTransparentNavbar({ type: "homepage" });

docs/.vuepress/components/CaptionedImage.vue

@@ -0,0 +1,17 @@
+<template>
+  <figure>
+    <img :src="src" alt="" :width="width"/>
+    <figcaption>{{ caption }}</figcaption>
+  </figure>
+</template>
+<script>
+export default {
+  props: ['src', 'caption', 'width'],
+}
+</script>
+
+<style lang="scss">
+figcaption {
+    font-style: italic;
+}
+</style>

docs/.vuepress/config/theme.ts

@@ -44,7 +44,7 @@ export default hopeTheme({
           link: '/projekte/democracy.app'
         },
         {
-          text: 'Ocelot-Social',
+          text: 'Ocelot.Social',
           link: '/projekte/ocelot.social'
         },
         {

docs/index.md

@@ -143,7 +143,7 @@ layout: BlankLayout
     <ProjectCard
       title="Ocelot.Social"
       description="Ocelot.social ist eine Open-Source Alternative für soziale Netzwerke wie Facebook, Instagram oder TikTok"
-      image="./images/projects/ocelot-newsfeed.png"
+      image="./images/projects/ocelot.png"
       :tags="['Social Media']"
       href="/projekte/ocelot.social.html"
     />

docs/projekte/dreammall.md

@@ -6,6 +6,10 @@
 
 Das zentrale Element des Projektes ist eine *Sternenkarte*, welche die einzelnen Akteure und Projekte an einen fiktiven Sternenhimmel projiziert. Jeder Nutzer kann in Austausch mit Anderen gehen, in dem er seinen Raum öffnet und andere dazu einläd. Ein Raum ist eine Videokonferenz mit Chatfunktion, Bildschirmfreigabe, gemeinsamen Notizen, Whiteboard, Unterräumen und Vielem mehr.
 
+<br/>
+
+<CaptionedImage src="/images/projects/dreammall-starmap.png" caption="Bild: Die Sternenkarte von DreamMall" width="500px"/>
+
 Das Projekt befindet sich noch in Entwicklung.
 
 Für die Zukunft sind weitere Features zur Unterstützung der DreamMall Akteure bei Kommunikation und Projektumsetzung angedacht, z.B. 
@@ -16,7 +20,6 @@ Für die Zukunft sind weitere Features zur Unterstützung der DreamMall Akteure
 Mehr Infos auf [DreamMall.earth](https://dreammall.earth) und [GitHub](https://github.com/dreammall-earth/dreammall.earth).
 
 ## Techstack
-
 *DreamMall.earth* basiert auf der *Node.js*-Technologie. Es kommen *Vue*, *Vike*, *Vuetify*, *Apollo*, *GraphQL* und *Prisma* zum Einsatz. Die Video Konferenzen werden mit *BigBlueButton* realisiert.
 
 Für die konzeptionelle Arbeit an dem Projekt kommt *Figma* zum Einsatz.

docs/projekte/ocelot.social.md

@@ -1,13 +1,16 @@
 # Ocelot.Social
-
-![Ocelot.Social](/images/projects/ocelot-newsfeed.png)
+![Ocelot.Social](/images/projects/ocelot.png)
 
 Dieses Projekt begann unter dem Namen Human Connection.
 Die Idee war, eine Alternative für soziale Netzwerke wie Facebook, Instagram oder TikTok zu schaffen, bei der die Nutzer nicht das Produkt sind.
 Nach der Schließung des Netzwerks von Human Connection wurde die Open-Source-Software weiterentwickelt.
 
 *Ocelot.social* kann durch beliebige Betreiber auf eigenen Servern gehostet, mit eigenem Branding und zu eignen Nutzungsbedingungen angeboten werden.
-Es kann individuell konfiguriert werden und ist skalierbar sowie erweiterbar, .
+Es kann individuell konfiguriert werden und ist skalierbar sowie erweiterbar.
+
+<br/>
+
+<CaptionedImage src="/images/projects/ocelot-newsfeed.png" caption="Bild: Ein Newsfeed in Ocelot.social" width="500px"/>
 
 Teste die [Demoversion](https://ocelot.social/de/get-started/).