refactor: update Astro configuration and add custom header component

- Changed the title in the Astro configuration to match the new site name "tutorials.angular.courses".
- Introduced a new custom header component for improved navigation and branding.
- Updated favicon and logo SVG files for better visual representation.
- Added a new font "Geist" for enhanced typography across the site.
- Adjusted global styles to reflect the new design elements and improve theme consistency.

Author: geromegrignon

astro.config.mjs

@@ -10,11 +10,8 @@ export default defineConfig({
   site: "https://tutorials.angular.courses",
   integrations: [
     starlight({
-      title: "Angular Tutorials",
+      title: "tutorials.angular.courses",
       favicon: "/public/favicon.svg",
-      logo: {
-        src: "/public/logo.svg",
-      },
       social: [
         {
           icon: "github",
@@ -27,6 +24,9 @@ export default defineConfig({
           href: "https://www.dolmen.tools/en/angular/angie/chat",
         },
       ],
+      components: {
+        Header: "./src/components/ui/CustomHeader.astro",
+      },
       sidebar: [
         {
           label: "Getting Started",

public/favicon.svg

@@ -0,0 +1,21 @@
+---
+import Search from "@astrojs/starlight/components/Search.astro";
+import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
+import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
+---
+
+<nav class="flex items-center justify-between">
+<h1 class="font-[Geist] text-xl flex items-center">
+     <span>tutorials.</span>
+    <span class="text-[#02BCFF]">angular.</span>
+    <span>courses</span>
+</h1>
+<Search />
+<div class="flex items-center gap-6">
+    <div class="flex items-center gap-4">
+    <SocialIcons />
+    </div>
+    <hr class="h-4 w-px bg-gray-400 dark:bg-gray-500" />
+    <ThemeSelect />
+</div>
+</nav>

public/fonts/Geist-Bold.ttf

@@ -6,12 +6,10 @@ hero:
   title: |
     <span class="font-[BungeeHairline]">Start learning</span>
     <span
-      class="text-7xl text-[var(--sl-color-accent)] uppercase font-bold font-[BungeeInline]">
+      class="text-7xluppercase font-bold font-[BungeeInline]">
       Angular
     </span>
   tagline: Discover Angular with our community tutorial
-  image:
-    file: /public/favicon.svg
   actions:
     - text: Getting Started
       link: en/getting-started/introduction
@@ -22,14 +20,11 @@ hero:
       variant: minimal
 ---
 
-<div class="flex items-end text-3xl font-bold">
-  <span class="font-[BungeeHairline] ">Angular Courses</span>
-  <span class="text-[var(--sl-color-accent)] ml-2 font-[BungeeInline]">
-    Lab
-  </span>
-  <span class="ml-2 text-base font-normal">Initiative</span>
+<div class="flex items-end text-3xl font-[Geist]">
+  <span class="text-[#02BCFF]">angular.</span>
+  <span>courses</span>
 </div>
 
-This tutorial is part of the **Angular Courses Lab** initiative - a community-driven effort to create comprehensive, hands-on learning experiences for Angular developers of all skill levels. Our mission is to provide practical, real-world tutorials that bridge the gap between Angular concepts and actual application development.
+This tutorial is part of the **angular.courses** initiative - a community-driven effort to create comprehensive, hands-on learning experiences for Angular developers of all skill levels. Our mission is to provide practical, real-world tutorials that bridge the gap between Angular concepts and actual application development.
 
 Through this initiative, we're building a collection of interactive tutorials that cover everything from basic Angular concepts to advanced patterns, helping developers master Angular through guided, project-based learning.

public/logo.svg

@@ -21,41 +21,12 @@
   font-display: swap;
 }
 
-/* Dark mode colors. */
-:root {
-  --sl-color-accent-low: hwb(21 1% 73%);
-  --sl-color-accent: #e4832a;
-  --sl-color-accent-high: #e4832a;
-  --sl-color-white: #ffffff;
-  --sl-color-gray-1: #cad5e2;
-  --sl-color-gray-2: #8fa1b9;
-  --sl-color-gray-3: #62748e;
-  --sl-color-gray-4: #46556c;
-  --sl-color-gray-5: #324158;
-  --sl-color-gray-6: #1e2938;
-  --sl-color-bg-nav: #1e2938;
-  --sl-color-bg-sidebar: #1e2938;
-  --sl-color-bg-inline-code: #1e2938;
-  --sl-color-hairline: #18181b;
-}
-/* Light mode colors. */
-:root[data-theme="light"] {
-  --sl-color-accent-low: #fef3c7;
-  --sl-color-accent: #e4832a;
-  --sl-color-accent-high: #451a03;
-  --sl-color-white: #1c1425;
-  --sl-color-gray-1: #2f1c42;
-  --sl-color-gray-2: #412e55;
-  --sl-color-gray-3: #614e78;
-  --sl-color-gray-4: #9581ae;
-  --sl-color-gray-5: #c7bdd5;
-  --sl-color-gray-6: #f2e9fd;
-  --sl-color-gray-7: #f8f4fe;
-  --sl-color-black: #ffffff;
-  --sl-color-bg-nav: #f9fafc;
-  --sl-color-bg-sidebar: #f9fafc;
-  --sl-color-bg-inline-code: #f9fafc;
-  --sl-color-hairline: #ffffff;
+@font-face {
+  font-family: "Geist";
+  src: url("/fonts/Geist-Bold.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 :root:not([data-theme="light"]) .expressive-code .frame pre {
@@ -79,5 +50,5 @@ https://tailwindcss.com/docs/adding-custom-styles#using-custom-css
 */
 
 .site-title {
-  font-family: "BungeeInline", sans-serif;
+  font-family: "Geist", sans-serif;
 }