From 2381a2e34e7eeb6bf524e13f60774f573e17be43 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 15 Aug 2024 16:40:50 +0200
Subject: [PATCH] added two new implementations

---
 .astro/settings.json                         |  2 +-
 public/images/tech/rspack.svg                |  1 +
 public/images/tech/vite.svg                  |  1 +
 public/images/tech/webpack.svg               |  1 +
 src/components/MFExample.astro               | 44 ++++++++++++--------
 src/components/content/Implementations.astro | 41 +++++++++++++++---
 6 files changed, 65 insertions(+), 25 deletions(-)
 create mode 100644 public/images/tech/rspack.svg
 create mode 100644 public/images/tech/vite.svg
 create mode 100644 public/images/tech/webpack.svg

diff --git a/.astro/settings.json b/.astro/settings.json
index 51c3770..a8c1cb1 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1721731441251
+		"lastUpdateCheck": 1723730422042
 	}
 }
\ No newline at end of file
diff --git a/public/images/tech/rspack.svg b/public/images/tech/rspack.svg
new file mode 100644
index 0000000..962d38a
--- /dev/null
+++ b/public/images/tech/rspack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path fill="currentColor" d="M269.03 60.03C168.74 59.907 68.5 103.35 19.564 202.563c58.543-9.985 113.65 6.082 165.75 34c70.184-39.588 144.73-44.868 214.5-18.875c10.514-41.038 42.6-63.99 89.468-74.5c-54.013-53.032-137.15-83.052-220.25-83.156zm72.126 163.407c-11.402 0-20.594 9.247-20.594 21.094c0 11.85 9.193 21.096 20.594 21.096c11.4 0 20.594-9.246 20.594-21.094c0-11.846-9.192-21.093-20.594-21.093zm-82.812 4.188c-11.402 0-20.594 9.246-20.594 21.094c0 11.845 9.193 21.092 20.594 21.092c11.4 0 20.594-9.247 20.594-21.094c0-11.85-9.192-21.095-20.594-21.095zm201.47 4.188c-4.164.11-8.78 1.334-13.94 3.812c-11.792 5.665-25.755 18.744-38.624 40.813L404 282l-6.344-1.063c-27.112-4.514-46.836-.19-64.062 11.813c-13.355 9.305-25.297 23.88-36.594 43.375c21.91-4.96 44.527-8.67 68.5-8.313l1.625.032c7.183-5.527 14.684-12.313 22.75-20.813c-5.452 13.003-10.846 26.15-17.938 37.91c-.017.032-.044.06-.062.092c-10.86 19.943-33.42 36.072-55.594 49.72c30.027 21.8 61.94 26.562 90 18.906c31.256-8.527 57.875-32.584 70.565-67.656c10.892-30.1 14.177-55.068 12.562-73.625c-1.614-18.557-8.06-30.293-15.47-35.875c-3.703-2.79-7.76-4.426-12.373-4.656a22 22 0 0 0-1.75-.03zM52.31 268.406c-16.702.463-26.298 6.886-31.28 17.25c-5.316 11.055-5.09 28.77 4.812 50.906c9.902 22.137 29.235 48.22 59.843 74.938c35.545 31.025 79.76 41.25 119.563 31.28c36.588-9.163 69.667-35.298 89.125-79.905c-20.686-.45-39.67-1.264-56.656-6.28c-.13-.03-.25-.065-.376-.095c-30.142-7.197-48.195-22.108-71.22-44.906c17.366 9.184 32.465 14.25 46 16.594l.127-.063c25.762-15.026 38.305-20.79 59.5-27.156c-48.484-31.7-90.278-26.67-129.22-3.284l-2.218 1.344h-5.344l-2.314-1.467c-31.643-20.31-58.067-28.794-76.906-29.157a76 76 0 0 0-3.438 0z"/></svg>
\ No newline at end of file
diff --git a/public/images/tech/vite.svg b/public/images/tech/vite.svg
new file mode 100644
index 0000000..d886259
--- /dev/null
+++ b/public/images/tech/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m8.286 10.578l.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55l-.123.19a.3.3 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887l2.077-.4a.8.8 0 0 1 .84.369a.8.8 0 0 1 .034.783L12.9 19.93l-.013.025l-.015.023l-.122.19a.8.8 0 0 1-.672.37a.83.83 0 0 1-.634-.302a.8.8 0 0 1-.16-.67l1.029-4.981l-1.12.34a.81.81 0 0 1-.86-.262a.8.8 0 0 1-.165-.67l.63-3.08l-2.027.468a.81.81 0 0 1-.768-.233a.8.8 0 0 1-.217-.6l.389-6.57l-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9"/></svg>
\ No newline at end of file
diff --git a/public/images/tech/webpack.svg b/public/images/tech/webpack.svg
new file mode 100644
index 0000000..66630eb
--- /dev/null
+++ b/public/images/tech/webpack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22.199 18.498L12.429 24v-4.285l6.087-3.334zm.668-.603V6.388l-3.575 2.055v7.396zm-21.066.603L11.571 24v-4.285L5.484 16.38zm-.668-.603V6.388l3.575 2.055v7.396zm.418-12.251L11.571 0v4.143L5.152 7.66l-.049.028zm20.898 0L12.429 0v4.143l6.419 3.516l.049.028zM11.57 18.74l-6.005-3.287V8.938l6.005 3.453zm.858 0l6.005-3.287V8.938l-6.005 3.453zM5.972 8.185l6.03-3.302l6.028 3.302l-6.029 3.466z"/></svg>
\ No newline at end of file
diff --git a/src/components/MFExample.astro b/src/components/MFExample.astro
index 1e0f904..842aea6 100644
--- a/src/components/MFExample.astro
+++ b/src/components/MFExample.astro
@@ -25,25 +25,27 @@ import { Image } from "astro:assets";
     ) : null
   }
 
-  <p class="pb-3 px-1 text-xs">
-    <strong>{title}</strong><br />
-    {rendering}
-  </p>
-
-  <div class="elements c_shadow">
-    <div class="element vertical">
-      <Image src={lib1} alt="lib1" class="m-auto size-6" />
-    </div>
-    <div class="element vertical">
-      <Image src={lib2} alt="lib1" class="m-auto size-6" />
-    </div>
-    <div class="element vertical">
-      <Image src={lib3} alt="lib1" class="m-auto size-6" />
-    </div>
-    <div class="element integration text-xs">
-      {integration}
+  <a href={githubUrl} class="bigLink" target="_blank">
+    <p class="pb-3 px-1 text-xs">
+      <strong>{title}</strong><br />
+      {rendering}
+    </p>
+
+    <div class="elements c_shadow">
+      <div class="element vertical">
+        <Image src={lib1} alt="lib1" class="m-auto size-6" />
+      </div>
+      <div class="element vertical">
+        <Image src={lib2} alt="lib1" class="m-auto size-6" />
+      </div>
+      <div class="element vertical">
+        <Image src={lib3} alt="lib1" class="m-auto size-6" />
+      </div>
+      <div class="element integration text-xs">
+        {integration}
+      </div>
     </div>
-  </div>
+  </a>
 
   <div class="repository text-xs px-1">
     {
@@ -198,4 +200,10 @@ import { Image } from "astro:assets";
 
     grid-area: liveUrl;
   }
+  .bigLink,
+  .bigLink:hover {
+    text-decoration: none;
+    display: block;
+    color: inherit;
+  }
 </style>
diff --git a/src/components/content/Implementations.astro b/src/components/content/Implementations.astro
index 5a50dae..78f50bc 100644
--- a/src/components/content/Implementations.astro
+++ b/src/components/content/Implementations.astro
@@ -3,6 +3,9 @@ import MFExample from "../MFExample.astro";
 import html from "./../../../public/images/tech/html.svg";
 import preact from "./../../../public/images/tech/preact.svg";
 import react from "./../../../public/images/tech/react.svg";
+import vite from "./../../../public/images/tech/vite.svg";
+import webpack from "./../../../public/images/tech/webpack.svg";
+import rspack from "./../../../public/images/tech/rspack.svg";
 import question from "./../../../public/images/tech/question.svg";
 ---
 
@@ -22,7 +25,7 @@ import question from "./../../../public/images/tech/question.svg";
   <div class="examples">
     <MFExample
       title="Blueprint"
-      rendering="vanilla, no frameworks"
+      rendering="no frameworks, server-only"
       lib1={html}
       lib2={html}
       lib3={html}
@@ -35,7 +38,7 @@ import question from "./../../../public/images/tech/question.svg";
 
     <MFExample
       title="Preact"
-      rendering="universal rendering"
+      rendering="MPA (three SPAs), universal"
       lib1={preact}
       lib2={preact}
       lib3={preact}
@@ -47,7 +50,7 @@ import question from "./../../../public/images/tech/question.svg";
 
     <MFExample
       title="Piral & React"
-      rendering="SPA, app shell"
+      rendering="app shell (three SPAs), client-only"
       lib1={react}
       lib2={react}
       lib3={react}
@@ -60,20 +63,46 @@ import question from "./../../../public/images/tech/question.svg";
 
     <MFExample
       title="Picard.js & Preact"
-      rendering="SPA, Native Federation"
+      rendering="app shell (three SPAs), client-only"
       lib1={preact}
       lib2={preact}
       lib3={preact}
-      integration="Picard.js"
+      integration="Picard.js, Native Federation"
       author="smapiot"
       authorUrl="https://smapiot.com/"
       githubUrl="https://github.com/picardjs/picard/tree/develop/examples/13-spa-tractor-v2-full"
       liveUrl="https://picard-tractor.munichjs.org"
     />
 
+    <MFExample
+      title="Webpack & React"
+      rendering="app shell (three SPAs), client-only"
+      lib1={react}
+      lib2={react}
+      lib3={react}
+      integration="Module Federation"
+      author="Kent.Li"
+      authorUrl="https://github.com/teabyii"
+      githubUrl="https://github.com/teabyii/tractor-store-react"
+      liveUrl="https://tractor-store-react.pages.dev"
+    />
+
+    <MFExample
+      title="Webpack, Vite & Rspack"
+      rendering="app shell (three SPAs), client-only"
+      lib1={webpack}
+      lib2={vite}
+      lib3={rspack}
+      integration="Module Federation"
+      author="smapiot"
+      authorUrl="https://smapiot.com/"
+      githubUrl="https://github.com/FlorianRappl/module-federation-tractor-v2"
+      liveUrl="https://module-federation-tractor-v2.florian-rappl.de"
+    />
+
     <MFExample
       title="Your Implementation ..."
-      rendering="[description]"
+      rendering="[rendering approach]"
       lib1={question}
       lib2={question}
       lib3={question}