add vue example by alexop

Author: naltatis

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1740663581887
+		"lastUpdateCheck": 1757925690810
 	}
 }

src/components/MFExample.astro

@@ -10,6 +10,7 @@ const {
   author,
   authorUrl,
   githubUrl,
+  blogUrl,
   liveUrl,
   contribute,
 } = Astro.props;
@@ -57,27 +58,36 @@ import { Image } from "astro:assets";
         </a>
       )
     }
-    {
-      githubUrl && (
-        <a class="githubUrl" href={githubUrl} target="_blank">
-          GitHub
-        </a>
-      )
-    }
-    {
-      contribute && (
-        <a class="contribute" href="#contribute">
-          Share your approach
-        </a>
-      )
-    }
-    {
-      liveUrl && (
-        <a class="liveUrl" href={liveUrl}>
-          Live Demo
-        </a>
-      )
-    }
+    <div class="urls">
+      {
+        githubUrl && (
+          <a class="githubUrl" href={githubUrl} target="_blank">
+            GitHub
+          </a>
+        )
+      }
+      {
+        blogUrl && (
+          <a class="blogUrl" href={blogUrl} target="_blank">
+            Blog
+          </a>
+        )
+      }
+      {
+        contribute && (
+          <a class="contribute" href="#contribute">
+            Share your approach
+          </a>
+        )
+      }
+      {
+        liveUrl && (
+          <a class="liveUrl" href={liveUrl}>
+            Live Demo
+          </a>
+        )
+      }
+    </div>
   </div>
 </section>
 
@@ -161,49 +171,24 @@ import { Image } from "astro:assets";
   }
 
   .repository {
-    @media (max-width: 999px) {
-      grid-template:
-        "author" auto
-        "githubUrl" auto
-        "liveUrl" auto / 1fr;
-    }
-
-    @media screen and (min-width: 1000px) {
-      grid-template:
-        "author author" auto
-        "githubUrl liveUrl" auto / 1fr 1fr;
-    }
-
     margin-top: 1rem;
-    display: grid;
-    gap: 0.5rem;
   }
 
   a.author {
-    grid-area: author;
+    display: block;
     text-decoration: none;
+    margin-bottom: 0.5rem;
   }
 
-  .githubUrl {
-    grid-area: githubUrl;
-    justify-self: start;
-  }
-
-  .contribute {
-    grid-column: 1 / 3;
-  }
-
-  .liveUrl {
-    @media screen and (min-width: 1000px) {
-      justify-self: end;
-    }
-
-    grid-area: liveUrl;
-  }
   .bigLink,
   .bigLink:hover {
     text-decoration: none;
     display: block;
     color: inherit;
   }
+  .urls {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
 </style>

src/components/content/Implementations.astro

@@ -8,6 +8,7 @@ import webpack from "./../../../public/images/tech/webpack.svg";
 import rspack from "./../../../public/images/tech/rspack.svg";
 import question from "./../../../public/images/tech/question.svg";
 import htmx from "./../../../public/images/tech/htmx.svg";
+import vue from "./../../../public/images/tech/vue.svg";
 ---
 
 <div class="root">
@@ -110,6 +111,7 @@ import htmx from "./../../../public/images/tech/htmx.svg";
       integration="nginx SSI"
       author="inaudi tech"
       authorUrl="https://www.inauditech.com/"
+      blogUrl="https://medium.com/@alexander.heerens/radically-simple-web-architecture-a-web-application-blueprint-for-startups-and-small-enterprises-f503a5f36381"
       githubUrl="https://github.com/heerens/tractor-store-htmx-tailwind"
       liveUrl="https://tractorstore.inauditech.com/"
     />
@@ -127,6 +129,19 @@ import htmx from "./../../../public/images/tech/htmx.svg";
       liveUrl="https://latest-tractor-v2-app-zephyr-examples-zephyrcloudio-ze.zephyr-cloud.io/"
     />
 
+    <MFExample
+      title="Vue 3"
+      rendering="app shell (three SPAs), client-only"
+      lib1={vue}
+      lib2={vue}
+      lib3={vue}
+      integration="Module Federation"
+      author="Alexander Opalic"
+      authorUrl="https://alexop.dev/"
+      githubUrl="https://github.com/alexanderop/tractorStoreVueModuleFederation"
+      blogUrl="https://alexop.dev/posts/how-to-build-microfrontends-with-module-federation-and-vue/"
+    />
+
     <MFExample
       title="Your Implementation ..."
       rendering="[rendering approach]"