Moved json data to own component

package.json

@@ -14,7 +14,7 @@
     "@astrojs/vue": "^7.0.1",
     "@tailwindcss/vite": "^4.3.2",
     "@vueuse/core": "^14.3.0",
-    "astro": "^7.0.6",
+    "astro": "^7.0.7",
     "astro-compressor": "^1.3.0",
     "tailwindcss": "^4.3.2",
     "vue": "^3.5.39"

src/components/HeadSchema.astro

@@ -0,0 +1,107 @@
+<script type="application/ld+json" is:inline>
+  {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "Person",
+        "email": "contact@alexcreates.fr",
+        "jobTitle": "Front-end engineer",
+        "name": "Alexis Pelé",
+        "url": "https://agence-polux.fr/",
+        "description": "Front-end engineer specializing in TypeScript and Vue.js, building performant, accessible web applications.",
+        "sameAs": [
+          "https://gitea.peacock-wyrm.ts.net/Joururi",
+          "https://fr.linkedin.com/in/alexis-pel%C3%A9-b27958159",
+          "https://github.com/AlexisNP"
+        ],
+        "knowsAbout": [
+          "TypeScript",
+          "Vue.js",
+          "Nuxt.js",
+          "JavaScript",
+          "Front-End Development",
+          "Web Performance Optimization",
+          "REST APIs",
+          "Pinia",
+          "Vite",
+          "Docker",
+          "Docker Composer",
+          "Angular",
+          "PHP",
+          "Wordpress",
+          "Aria",
+          "Accessibility",
+          "Tailscale"
+        ],
+        "knowsLanguage": [
+          {
+            "@type": "Language",
+            "name": "French",
+            "alternateName": "fr"
+          },
+          {
+            "@type": "Language",
+            "name": "English",
+            "alternateName": "en"
+          }
+        ],
+        "worksFor": {
+          "@type": "Organization",
+          "name": "Agence Polux",
+          "url": "https://agence-polux.fr/"
+        },
+        "nationality": {
+          "@type": "Country",
+          "name": "France"
+        },
+        "pronouns": "he/him"
+      },
+      {
+        "@type": "ItemList",
+        "@id": "https://alexcreates.fr/#projects",
+        "name": "Featured Projects",
+        "itemListElement": [
+          {
+            "@type": "ListItem",
+            "position": 1,
+            "item": {
+              "@type": "CreativeWork",
+              "name": "Leim Maps",
+              "description": "A Vue 3 + TypeScript application for X.",
+              "url": "https://maps.alexcreates.fr",
+              "sameAs": "https://gitea.peacock-wyrm.ts.net/Joururi/leim-maps",
+              "image": "https://alexcreates.fr/images/project-one.jpg",
+              "creator": {
+                "@id": "https://alexcreates.fr/#person"
+              },
+              "keywords": "Vue 3, TypeScript, Astro, Vite, Leaflet"
+            }
+          }
+        ]
+      },
+      {
+        "@type": "WebSite",
+        "@id": "https://alexcreates.fr/#website",
+        "url": "https://alexcreates.fr",
+        "name": "Alexis Pelé | Front-End Engineer",
+        "description": "Portfolio of Alexis Pelé, a front-end engineer.",
+        "publisher": {
+          "@id": "https://alexcreates.fr/#person"
+        },
+        "inLanguage": "en-US"
+      },
+      {
+        "@type": "BreadcrumbList",
+        "@id": "https://alexcreates.fr/#breadcrumb",
+        "itemListElement": [
+          {
+            "@type": "ListItem",
+            "position": 1,
+            "name": "Home",
+            "item": "https://alexcreates.fr/"
+          }
+        ]
+      }
+    ]
+  }
+</script>

src/components/Navbar.astro

@@ -20,7 +20,7 @@ const onHome = Astro.url.pathname === "/"
   class="absolute top-0 left-0 pt-6 w-full z-10"
 >
   <nav class="container text-[.8em]" aria-label="Primary">
-    <menu class="px-6 py-2 bg-slate-900/50 rounded-xl backdrop-blur flex gap-6">
+    <menu class="px-6 py-2 bg-slate-800/40 rounded-xl backdrop-blur flex gap-6">
       <li>
         <a
           href="/"

src/layouts/HomeLayout.astro

@@ -4,6 +4,7 @@ import '../../assets/css/main.css'
 import BgGrid from '../components/BgGrid.astro'
 import HeadFavicon from './HeadFavicon.astro'
 import Navbar from "../components/Navbar.astro";
+import HeadSchema from '../components/HeadSchema.astro';
 interface Props {
 	title?: string
   description?: string
@@ -31,112 +32,6 @@ const websiteDomain = "alexcreates.fr"
 <html lang="en">
 	<head>
     <title>{ renderedTitle }</title>
-    <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@graph": [
-          {
-            "@type": "Person",
-            "email": "contact@alexcreates.fr",
-            "jobTitle": "Front-end engineer",
-            "name": "Alexis Pelé",
-            "url": "https://alexcreates.fr/",
-            "description": "Front-end engineer specializing in TypeScript and Vue.js, building performant, accessible web applications.",
-            "sameAs": [
-              "https://gitea.peacock-wyrm.ts.net/Joururi",
-              "https://fr.linkedin.com/in/alexis-pel%C3%A9-b27958159",
-              "https://github.com/AlexisNP"
-            ],
-            "knowsAbout": [
-              "TypeScript",
-              "Vue.js",
-              "Nuxt.js",
-              "JavaScript",
-              "Front-End Development",
-              "Web Performance Optimization",
-              "REST APIs",
-              "Pinia",
-              "Vite",
-              "Docker",
-              "Docker Composer",
-              "Angular",
-              "PHP",
-              "Wordpress",
-              "Aria",
-              "Accessibility"
-            ],
-            "knowsLanguage": [
-              {
-                "@type": "Language",
-                "name": "French",
-                "alternateName": "fr"
-              },
-              {
-                "@type": "Language",
-                "name": "English",
-                "alternateName": "en"
-              }
-            ],
-            "worksFor": {
-              "@type": "Organization",
-              "name": "Agence Polux",
-              "url": "https://agence-polux.fr/"
-            },
-            "nationality": {
-              "@type": "Country",
-              "name": "France"
-            },
-            "pronouns": "he/him"
-          },
-          {
-            "@type": "ItemList",
-            "@id": "https://alexcreates.fr/#projects",
-            "name": "Featured Projects",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "item": {
-                  "@type": "CreativeWork",
-                  "name": "Leim Maps",
-                  "description": "A Vue 3 + TypeScript application for X.",
-                  "url": "https://maps.alexcreates.fr",
-                  "sameAs": "https://gitea.peacock-wyrm.ts.net/Joururi/leim-maps",
-                  "image": "https://alexcreates.fr/images/project-one.jpg",
-                  "creator": {
-                    "@id": "https://alexcreates.fr/#person"
-                  },
-                  "keywords": "Vue 3, TypeScript, Astro, Vite, Leaflet"
-                }
-              }
-            ]
-          },
-          {
-            "@type": "WebSite",
-            "@id": "https://alexcreates.fr/#website",
-            "url": "https://alexcreates.fr",
-            "name": "Alexis Pelé | Front-End Engineer",
-            "description": "Portfolio of Alexis Pelé, a front-end engineer.",
-            "publisher": {
-              "@id": "https://alexcreates.fr/#person"
-            },
-            "inLanguage": "en-US"
-          },
-          {
-            "@type": "BreadcrumbList",
-            "@id": "https://alexcreates.fr/#breadcrumb",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "name": "Home",
-                "item": "https://alexcreates.fr/"
-              }
-            ]
-          }
-        ]
-      }
-    </script>
 
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -162,6 +57,24 @@ const websiteDomain = "alexcreates.fr"
     <meta name="twitter:domain" content={websiteDomain} />
 
     <meta property="og:type" content="website" />
+
+    <HeadSchema />
+
+    <!-- Matomo -->
+    <script is:inline>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//stats.alexcreates.fr/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '1']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
 	</head>
 
 	<body class="h-screen relative bg-background text-body px-3 md:px-12 overflow-hidden">

src/layouts/Layout.astro

@@ -4,6 +4,7 @@ import BgParticles from '../components/BgParticles.astro'
 import BgGrid from '../components/BgGrid.astro'
 import HeadFavicon from './HeadFavicon.astro'
 import Navbar from "../components/Navbar.astro";
+import HeadSchema from '../components/HeadSchema.astro';
 interface Props {
 	title?: string
   description?: string
@@ -53,113 +54,23 @@ const websiteDomain = "alexcreates.fr"
 
     <meta property="og:type" content="website" />
 
-    <script type="application/ld+json">
+    <HeadSchema />
-      {
+
-        "@context": "https://schema.org",
+    <!-- Matomo -->
-        "@graph": [
+    <script is:inline>
-          {
+      var _paq = window._paq = window._paq || [];
-            "@type": "Person",
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-            "email": "contact@alexcreates.fr",
+      _paq.push(['trackPageView']);
-            "jobTitle": "Front-end engineer",
+      _paq.push(['enableLinkTracking']);
-            "name": "Alexis Pelé",
+      (function() {
-            "url": "https://alexcreates.fr/",
+        var u="//stats.alexcreates.fr/";
-            "description": "Front-end engineer specializing in TypeScript and Vue.js, building performant, accessible web applications.",
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
-            "sameAs": [
+        _paq.push(['setSiteId', '1']);
-              "https://gitea.peacock-wyrm.ts.net/Joururi",
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-              "https://fr.linkedin.com/in/alexis-pel%C3%A9-b27958159",
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-              "https://github.com/AlexisNP"
+      })();
-            ],
-            "knowsAbout": [
-              "TypeScript",
-              "Vue.js",
-              "Nuxt.js",
-              "JavaScript",
-              "Front-End Development",
-              "Web Performance Optimization",
-              "REST APIs",
-              "Pinia",
-              "Vite",
-              "Docker",
-              "Docker Composer",
-              "Angular",
-              "PHP",
-              "Wordpress",
-              "Aria",
-              "Accessibility",
-              "Tailscale"
-            ],
-            "knowsLanguage": [
-              {
-                "@type": "Language",
-                "name": "French",
-                "alternateName": "fr"
-              },
-              {
-                "@type": "Language",
-                "name": "English",
-                "alternateName": "en"
-              }
-            ],
-            "worksFor": {
-              "@type": "Organization",
-              "name": "Agence Polux",
-              "url": "https://agence-polux.fr/"
-            },
-            "nationality": {
-              "@type": "Country",
-              "name": "France"
-            },
-            "pronouns": "he/him"
-          },
-          {
-            "@type": "ItemList",
-            "@id": "https://alexcreates.fr/#projects",
-            "name": "Featured Projects",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "item": {
-                  "@type": "CreativeWork",
-                  "name": "Leim Maps",
-                  "description": "A Vue 3 + TypeScript application for X.",
-                  "url": "https://maps.alexcreates.fr",
-                  "sameAs": "https://gitea.peacock-wyrm.ts.net/Joururi/leim-maps",
-                  "image": "https://alexcreates.fr/images/project-one.jpg",
-                  "creator": {
-                    "@id": "https://alexcreates.fr/#person"
-                  },
-                  "keywords": "Vue 3, TypeScript, Astro, Vite, Leaflet"
-                }
-              }
-            ]
-          },
-          {
-            "@type": "WebSite",
-            "@id": "https://alexcreates.fr/#website",
-            "url": "https://alexcreates.fr",
-            "name": "Alexis Pelé | Front-End Engineer",
-            "description": "Portfolio of Alexis Pelé, a front-end engineer.",
-            "publisher": {
-              "@id": "https://alexcreates.fr/#person"
-            },
-            "inLanguage": "en-US"
-          },
-          {
-            "@type": "BreadcrumbList",
-            "@id": "https://alexcreates.fr/#breadcrumb",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "name": "Home",
-                "item": "https://alexcreates.fr/"
-              }
-            ]
-          }
-        ]
-      }
     </script>
+    <!-- End Matomo Code -->
 	</head>
 
 	<body class="h-screen relative bg-slate-950 text-white">