merge

src/components/Footer.astro

@@ -9,41 +9,39 @@
     typeof="foaf:Image"
     class="mr-4 size-10 float-left"
   />
-  <p class="mt-1 float-left">
-    the tractore store reference implementations <br />
-    a <a
-      class="bg-clip-text text-neuland"
-      href={"https://www.neuland-bfi.de/"}
-      target="_blank"
-    >
-      neuland
-    </a> initiative
-  </p>
+  <div class="mt-1 float-left">
+    <p>
+      the tractore store reference implementations <br />
+      a <a
+        class="bg-clip-text text-neuland"
+        href="https://www.neuland-bfi.de/"
+        target="_blank"
+      >
+        neuland
+      </a> initiative
+    </p>
+    <p class="mt-2">
+      Need help with your project? <a class="bg-clip-text text-neuland" href="mailto:[email protected]">Get in contact.</a>
+    </p>
+  </div>
   <div class="text-right">
     <a
       class="bg-clip-text text-black"
-      href={"https://github.com/neuland"}
-      target="_blank"
-    >
-      all projects
-    </a><br />
-    <a
-      class="bg-clip-text text-black"
-      href={"https://blueprint.the-tractor.store"}
+      href="https://www.neuland-bfi.de/impressum"
       target="_blank"
     >
-      blue print project
+      legal notice
     </a><br />
     <a
       class="bg-clip-text text-black"
-      href={"https://www.neuland-bfi.de/impressum"}
+      href="https://blueprint.the-tractor.store"
       target="_blank"
     >
-      legal notice
+      blueprint project
     </a><br />
     <a
       class="bg-clip-text text-black"
-      href={"https://micro-frontends.org/"}
+      href="https://micro-frontends.org/"
       target="_blank"
     >
       micro-frontends.org

src/components/MFExample.astro

@@ -8,11 +8,13 @@ const { lib3 } = Astro.props;
 ---
 
 <section class="mfexample">
-  <div
-    class="absolute py-1 transform rotate-45 text-center text-xs right-[-30px] top-[10px] w-[120px] drop-shadow-sm c-border z-20"
-  >
-    {rendering}
-  </div>
+  {rendering ?
+    <div
+      class="absolute py-1 transform rotate-45 text-center text-xs right-[-30px] top-[10px] w-[120px] drop-shadow-sm c-border z-20 text-xs"
+    >
+      {rendering}
+    </div>
+  : null}
 
   <p class="pb-3 font-bold text-xs">{title}</p>
 
@@ -26,7 +28,7 @@ const { lib3 } = Astro.props;
     <div class="element">
       <img src={lib3} typeof="foaf:Image" class="m-auto size-6" />
     </div>
-    <div class="element integration">
+    <div class="element integration text-xs">
       {integration}
     </div>
   </div>

src/components/content/Hero.astro

@@ -6,17 +6,15 @@
     <h1
       class="pt-4 mb-10 m-auto font-bold text-text-heading text-2xl md:text-4xl"
     >
-      <span data-annotate="underline">
+      <span>
         a non-trivial<br /> micro frontends<br /> example project
       </span>
     </h1>
     <p>
       The Tractor Store is a template to experiment with micro frontend
       architecture. Goal is to create a real world application where developers
       can experiment with different integration techniques. The idea is similar
-      to TodoMVC or Movies, but with a <span data-annotate="highlight">
-        focus on micro frontends.
-      </span>
+      to TodoMVC or Movies, but with a focus on micro frontends.
     </p>
   </div>
   <img
@@ -58,47 +56,3 @@
     transform: translateZ(0);
   }
 </style>
-
-<script type="module">
-  import { annotate } from "https://unpkg.com/rough-notation?module";
-  const observer = new IntersectionObserver(handleIntersection, {
-    threshold: [1],
-  });
-
-  Array.from(document.querySelectorAll("[data-annotate]")).forEach(
-    (element) => {
-      observer.observe(element);
-    }
-  );
-
-  function handleIntersection(entries, observer) {
-    entries.forEach((entry) => {
-      const element = entry.target;
-      if (entry.isIntersecting) {
-        showAnnotation(element);
-      }
-    });
-  }
-
-  function showAnnotation(element) {
-    const type = element.getAttribute("data-annotate");
-    if (!type) {
-      return;
-    }
-    let color = "#ebeee2";
-    if (document.documentElement.classList.contains("dark")) {
-      color = "#FF5A55";
-    }
-    annotate(element, {
-      type,
-      color,
-      iterations: 2,
-      multiline: true,
-      animationDuration: 3000,
-      animationDelay: 5000,
-    }).show();
-    element.removeAttribute("data-annotate");
-  }
-
-  // TODO: add dark mode colors
-</script>

src/components/content/Implementations.astro

@@ -17,30 +17,27 @@ import MFExample from "../MFExample.astro";
 
   <div class="examples">
     <MFExample
-      title="Module Federation with ..."
-      lib1="images/lib.svg"
-      lib2="images/lib.svg"
-      lib3="images/lib.svg"
-      integration="Single SPA"
-      rendering="SSR"
+      title="Blueprint (vanilla, no frameworks)"
+      lib1="images/tech/html.svg"
+      lib2="images/tech/html.svg"
+      lib3="images/tech/html.svg"
+      integration="Modular Monolith"
     />
 
     <MFExample
-      title="Svelte Example"
-      lib1="images/svelte.svg"
-      lib2="images/svelte.svg"
-      lib3="images/svelte.svg"
-      integration="SSI"
-      rendering="CSR"
+      title="Preact (universal rendering)"
+      lib1="images/tech/preact.svg"
+      lib2="images/tech/preact.svg"
+      lib3="images/tech/preact.svg"
+      integration="ESI, Web Components"
     />
 
     <MFExample
-      title="React & Vue Example"
-      lib1="images/react.svg"
-      lib2="images/react.svg"
-      lib3="images/vue.svg"
-      integration="Tailor"
-      rendering="SSR"
+      title="Your implementation ..."
+      lib1="images/tech/question.svg"
+      lib2="images/tech/question.svg"
+      lib3="images/tech/question.svg"
+      integration="[...]"
     />
 
     <div>

src/components/content/Similarities.astro

@@ -4,7 +4,6 @@
 <div class="mb-8">
   <h3
     class="font-bold text-text-heading text-2xl md:text-3xl pt-4 mb-8 w-fit overflow-hidden"
-    data-annotate="underline"
   >
     What do all implementations have in common?
   </h3>