text, meta

src/components/PageMeta.astro

@@ -1,10 +1,8 @@
 ---
+import detailpage from "../../public/images/detailpage.jpg";
+
 import { getPageMeta } from "../lib/seo";
-import {
-  SITE_TITLE,
-  SITE_DESCRIPTION,
-  SITE_URL,
-} from "../config";
+import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from "../config";
 
 export interface Props {
   title?: string;
@@ -17,8 +15,8 @@ const { meta, og, twitter } = getPageMeta({
   title: title || SITE_TITLE,
   description: description || SITE_DESCRIPTION,
   baseUrl: SITE_URL,
-  ogImageAbsoluteUrl: `${SITE_URL}/images/og.png`,
-  ogImageAltText: "My fancy website",
+  ogImageAbsoluteUrl: detailpage.src,
+  ogImageAltText: "Tractor Store 2.0 - TodoMVC for Micro Frontends",
   ogImageWidth: 1200,
   ogImageHeight: 630,
 });

src/components/content/Hero.astro

@@ -22,9 +22,10 @@ import qwikLogo from "../../../public/images/tech/qwik.svg";
     </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 focus on micro frontends.
+      architectures. The idea is similar to <a href="https://todomvc.com"
+        >TodoMVC</a
+      > or <a href="https://tastejs.com/movies/">Movies</a>. Build the same
+      application, but with different technologies and integration techniques
     </p>
   </div>
   <div class="imageWrapper">

src/components/content/Implementations.astro

@@ -12,9 +12,9 @@ import question from "./../../../public/images/tech/question.svg";
     >
       Implementations
     </h2>
-    <p class="">
-      Same verticalized micro frontends application with different tech stacks
-      and integration techniques.
+    <p>
+      List of existing implementations. Look at the source code, try them out,
+      and maybe add your own.
     </p>
   </div>
 

src/components/content/TodoMVC.astro

@@ -21,23 +21,23 @@ import screen3 from "../../../public/images/screen3.svg";
       </h3>
       <div>
         <p class="my-5">
-          A micro frontends architecture can be built in many ways. Custom
-          crafted and tailored to your organization's specific needs or by
-          following the rules of a specific micro frontends meta-framework. The
-          final result is also affected by the technologies you choose and
+          A micro frontends architecture can be built in many ways.
+          Custom-crafted and tailored to your organization's specific needs or
+          by following the rules of a specific micro frontends meta-framework.
+          The final result is also affected by the technologies you choose and
           whether you want to render your application on the server and/or
           client.
         </p>
         <p class="my-5">
           Making good choices is not always easy. Being able to look at
-          real-world code and examples helps everyone involved to get a good
+          real-world code and examples helps everyone involved get a good
           understanding of your decisions and their implications.
         </p>
         <p class="my-5">
           The Tractor Store aims to be to micro frontends what TodoMVC was to
-          the advent of JavaScript Frameworks in the late 2000s: An awesome
+          the advent of JavaScript frameworks in the late 2000s: An awesome
           collection of different implementations for the same application. A
-          valuable learning resource for people new to this topic and also a
+          valuable learning resource for people new to this topic, and also a
           good basis for advanced discussions.
         </p>
 

src/config.ts

@@ -1,9 +1,8 @@
 // Place any global data in this file.
 // You can import this data from anywhere in your site by using the `import` keyword.
 
-export const SITE_TITLE = "The Tractor Store";
-export const SITE_DESCRIPTION =
-  "a non-trivial micro frontends example project";
+export const SITE_TITLE = "Tractor Store 2.0 - TodoMVC for Micro Frontends";
+export const SITE_DESCRIPTION = "a non-trivial micro frontends example project";
 export const MY_NAME = "Michael Geers";
 
 // setup in astro.config.mjs

src/layouts/Favicon.astro

@@ -1,12 +0,0 @@
----
-/* 
-  Not a layout. Just a component used in layouts.
-*/
----
-<meta name="theme-color" content="#ffffff" />
-<!-- 
-  This is an example. 
-  Use https://realfavicongenerator.net to generate the icons and manifest. 
--->
-<!-- TODO: generate and add favicon (replace favicon.ico)-->
-<link href="/favicon.ico" rel="shortcut icon" />