From 8df90f4cdedb8de43405e962b0b9c0ed6c06e79f Mon Sep 17 00:00:00 2001
From: eric-burel <eb@lbke.fr>
Date: Tue, 15 Oct 2024 16:55:04 +0200
Subject: [PATCH 01/13] can ovewrite default head links

---
 .../docs/guides/overriding-components.mdx     | 11 +++++++++
 e2e/configs/override-components.ts            |  1 +
 packages/astro/package.json                   |  1 +
 .../src/default/components/HeadLinks.astro    |  1 +
 packages/astro/src/default/env-default.d.ts   |  3 ++-
 .../astro/src/default/layouts/Layout.astro    | 16 +++++++++----
 .../src/vite-plugins/override-components.ts   | 24 +++++++++++++++++++
 7 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 packages/astro/src/default/components/HeadLinks.astro

diff --git a/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx b/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
index 52c09114f..fdcc3f18b 100644
--- a/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
@@ -89,4 +89,15 @@ interface Props {
   /** Content of the dialog */
   children: ReactNode;
 }
+```
+
+### HeadLinks
+
+Component for overriding links in the head tag.
+
+When overriding `HeadLinks` you can place TutorialKit's default links using the `default-links` [Astro slot](https://docs.astro.build/en/basics/astro-components/#named-slots).
+
+```jsx title="src/components/CustomHeadLinks.astro"
+<slot name="default-links" />
+<link rel="sitemap" href="/sitemap-index.xml" />
 ```
\ No newline at end of file
diff --git a/e2e/configs/override-components.ts b/e2e/configs/override-components.ts
index 120234dcf..ad3a81311 100644
--- a/e2e/configs/override-components.ts
+++ b/e2e/configs/override-components.ts
@@ -10,6 +10,7 @@ export default defineConfig({
       components: {
         Dialog: './src/components/Dialog.tsx',
         TopBar: './src/components/TopBar.astro',
+        HeadLinks: './src/components/HeadLinks.astro',
       },
     }),
   ],
diff --git a/packages/astro/package.json b/packages/astro/package.json
index da837197f..642731453 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -20,6 +20,7 @@
     "./default/pages/index.astro": "./dist/default/pages/index.astro",
     "./default/pages/[...slug].astro": "./dist/default/pages/[...slug].astro",
     "./default/components/TopBar.astro": "./dist/default/components/TopBar.astro",
+    "./default/components/HeadLinks.astro": "./dist/default/components/HeadLinks.astro",
     "./package.json": "./package.json"
   },
   "files": [
diff --git a/packages/astro/src/default/components/HeadLinks.astro b/packages/astro/src/default/components/HeadLinks.astro
new file mode 100644
index 000000000..6cc2df642
--- /dev/null
+++ b/packages/astro/src/default/components/HeadLinks.astro
@@ -0,0 +1 @@
+<slot name="default-links" />
diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts
index 101487bff..370b7c8dd 100644
--- a/packages/astro/src/default/env-default.d.ts
+++ b/packages/astro/src/default/env-default.d.ts
@@ -9,9 +9,10 @@ interface WebContainerConfig {
 
 declare module 'tutorialkit:override-components' {
   const topBar: typeof import('./src/default/components/TopBar.astro').default;
+  const headLinks: typeof import('./src/default/components/HeadLinks.astro').default;
   const dialog: typeof import('@tutorialkit/react/dialog').default;
 
-  export { topBar as TopBar, dialog as Dialog };
+  export { topBar as TopBar, dialog as Dialog, headLinks as HeadLinks };
 }
 
 declare const __ENTERPRISE__: boolean;
diff --git a/packages/astro/src/default/layouts/Layout.astro b/packages/astro/src/default/layouts/Layout.astro
index ae98d9826..777c5934a 100644
--- a/packages/astro/src/default/layouts/Layout.astro
+++ b/packages/astro/src/default/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { HeadLinks } from 'tutorialkit:override-components';
 import { ViewTransitions } from 'astro:transitions';
 import type { MetaTagsConfig } from '@tutorialkit/types';
 import MetaTags from '../components/MetaTags.astro';
@@ -18,10 +19,17 @@ const faviconUrl = readPublicAsset('favicon.svg');
     <title>{title}</title>
     {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
     <MetaTags meta={meta} />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
+    <HeadLinks>
+      <Fragment slot="default-links">
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
+      </Fragment>
+    </HeadLinks>
     <ViewTransitions />
     <script is:inline>
       setTutorialKitTheme();
diff --git a/packages/astro/src/vite-plugins/override-components.ts b/packages/astro/src/vite-plugins/override-components.ts
index b71a2ea8a..aca21d4b1 100644
--- a/packages/astro/src/vite-plugins/override-components.ts
+++ b/packages/astro/src/vite-plugins/override-components.ts
@@ -18,6 +18,7 @@
  *       components: {
  *         TopBar: './CustomTopBar.astro',
  *         Dialog: './CustomDialog.tsx',
+ *         HeadLinks: './CustomHeadLinks.astro',
  *       },
  *     }),
  *   ],
@@ -54,6 +55,18 @@ export interface OverrideComponentsOptions {
    * It will receive same props that `@tutorialkit/react/dialog` supports.
    */
   Dialog?: string;
+
+  /**
+   * Component for overriding links in the head tag.
+   *
+   * It will receive TutorialKit default links within the "default-links" slot.
+   *
+   * ```jsx
+   * <slot name="default-links"></slot>
+   * <link rel="sitemap" href="/sitemap-index.xml" />
+   * ```
+   */
+  HeadLinks: string;
 }
 
 interface Options {
@@ -77,11 +90,13 @@ export function overrideComponents({ components, defaultRoutes }: Options): Vite
     async load(id) {
       if (id === resolvedId) {
         const topBar = components?.TopBar || resolveDefaultTopBar(defaultRoutes);
+        const headLinks = components?.HeadLinks || resolveDefaultHeadLinks(defaultRoutes);
         const dialog = components?.Dialog || '@tutorialkit/react/dialog';
 
         return `
           export { default as TopBar } from '${topBar}';
           export { default as Dialog } from '${dialog}';
+          export { default as HeadLinks } from '${headLinks}';
         `;
       }
 
@@ -98,3 +113,12 @@ function resolveDefaultTopBar(defaultRoutes: boolean) {
   // default `TopBar` is used from local file when `defaultRoutes` is disabled
   return './src/components/TopBar.astro';
 }
+
+function resolveDefaultHeadLinks(defaultRoutes: boolean) {
+  if (defaultRoutes) {
+    return '@tutorialkit/astro/default/components/HeadLinks.astro';
+  }
+
+  // default `HeadLinks` is used from local file when `defaultRoutes` is disabled
+  return './src/components/HeadLinks.astro';
+}

From c0d0464c15b17c93ffbf1bb50b688efff5c9b449 Mon Sep 17 00:00:00 2001
From: eric-burel <eb@lbke.fr>
Date: Tue, 15 Oct 2024 20:06:10 +0200
Subject: [PATCH 02/13] HeadLinks -> more general HeadTags + e2e tests

---
 .../docs/guides/overriding-components.mdx     | 13 +++++++++---
 e2e/configs/override-components.ts            |  2 +-
 e2e/src/components/CustomHeadTags.astro       |  4 ++++
 e2e/test/headtags.override-components.test.ts | 20 +++++++++++++++++++
 packages/astro/package.json                   |  2 +-
 .../src/default/components/HeadLinks.astro    |  1 -
 .../src/default/components/HeadTags.astro     |  3 +++
 packages/astro/src/default/env-default.d.ts   |  4 ++--
 .../astro/src/default/layouts/Layout.astro    | 14 ++++++-------
 .../src/vite-plugins/override-components.ts   | 14 ++++++-------
 10 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 e2e/src/components/CustomHeadTags.astro
 create mode 100644 e2e/test/headtags.override-components.test.ts
 delete mode 100644 packages/astro/src/default/components/HeadLinks.astro
 create mode 100644 packages/astro/src/default/components/HeadTags.astro

diff --git a/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx b/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
index fdcc3f18b..20df08e9b 100644
--- a/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
@@ -91,13 +91,20 @@ interface Props {
 }
 ```
 
-### HeadLinks
+### HeadTags
 
 Component for overriding links in the head tag.
 
-When overriding `HeadLinks` you can place TutorialKit's default links using the `default-links` [Astro slot](https://docs.astro.build/en/basics/astro-components/#named-slots).
+When overriding `HeadTags` you can place TutorialKit's default components using following [Astro slots](https://docs.astro.build/en/basics/astro-components/#named-slots):
+
+- `title`: The page title
+- `links`: Links for the favicon, fonts and other assets
+- `meta`:  Metadata and Open Graph tags
 
 ```jsx title="src/components/CustomHeadLinks.astro"
-<slot name="default-links" />
+<slot name="title" />
+<slot name="links" />
+<slot name="meta" />
+{/** Add your own tags */}
 <link rel="sitemap" href="/sitemap-index.xml" />
 ```
\ No newline at end of file
diff --git a/e2e/configs/override-components.ts b/e2e/configs/override-components.ts
index ad3a81311..711a90e53 100644
--- a/e2e/configs/override-components.ts
+++ b/e2e/configs/override-components.ts
@@ -10,7 +10,7 @@ export default defineConfig({
       components: {
         Dialog: './src/components/Dialog.tsx',
         TopBar: './src/components/TopBar.astro',
-        HeadLinks: './src/components/HeadLinks.astro',
+        HeadTags: './src/components/CustomHeadTags.astro',
       },
     }),
   ],
diff --git a/e2e/src/components/CustomHeadTags.astro b/e2e/src/components/CustomHeadTags.astro
new file mode 100644
index 000000000..774ecc2ae
--- /dev/null
+++ b/e2e/src/components/CustomHeadTags.astro
@@ -0,0 +1,4 @@
+<slot name="title" />
+<slot name="links" />
+<slot name="meta" />
+<link rel="sitemap" href="/sitemap-index.xml" />
diff --git a/e2e/test/headtags.override-components.test.ts b/e2e/test/headtags.override-components.test.ts
new file mode 100644
index 000000000..0f70af08c
--- /dev/null
+++ b/e2e/test/headtags.override-components.test.ts
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test('developer can override HeadTags', async ({ page }) => {
+  await page.goto('/');
+
+  const defaultElems = [
+    page.locator('title'),
+    page.locator('meta[name="og:title"]'),
+    page.locator('link[rel="stylesheet"]').first(),
+  ];
+  const customElems = [page.locator('link[rel="sitemap"]')];
+
+  for (const e of defaultElems) {
+    await expect(e).toBeAttached();
+  }
+
+  for (const e of customElems) {
+    await expect(e).toBeAttached();
+  }
+});
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 642731453..289f7934d 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -20,7 +20,7 @@
     "./default/pages/index.astro": "./dist/default/pages/index.astro",
     "./default/pages/[...slug].astro": "./dist/default/pages/[...slug].astro",
     "./default/components/TopBar.astro": "./dist/default/components/TopBar.astro",
-    "./default/components/HeadLinks.astro": "./dist/default/components/HeadLinks.astro",
+    "./default/components/HeadTags.astro": "./dist/default/components/HeadTags.astro",
     "./package.json": "./package.json"
   },
   "files": [
diff --git a/packages/astro/src/default/components/HeadLinks.astro b/packages/astro/src/default/components/HeadLinks.astro
deleted file mode 100644
index 6cc2df642..000000000
--- a/packages/astro/src/default/components/HeadLinks.astro
+++ /dev/null
@@ -1 +0,0 @@
-<slot name="default-links" />
diff --git a/packages/astro/src/default/components/HeadTags.astro b/packages/astro/src/default/components/HeadTags.astro
new file mode 100644
index 000000000..70983d763
--- /dev/null
+++ b/packages/astro/src/default/components/HeadTags.astro
@@ -0,0 +1,3 @@
+<slot name="title" />
+<slot name="links" />
+<slot name="meta" />
diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts
index 370b7c8dd..1400272f5 100644
--- a/packages/astro/src/default/env-default.d.ts
+++ b/packages/astro/src/default/env-default.d.ts
@@ -9,10 +9,10 @@ interface WebContainerConfig {
 
 declare module 'tutorialkit:override-components' {
   const topBar: typeof import('./src/default/components/TopBar.astro').default;
-  const headLinks: typeof import('./src/default/components/HeadLinks.astro').default;
+  const headLinks: typeof import('./src/default/components/HeadTags.astro').default;
   const dialog: typeof import('@tutorialkit/react/dialog').default;
 
-  export { topBar as TopBar, dialog as Dialog, headLinks as HeadLinks };
+  export { topBar as TopBar, dialog as Dialog, headLinks as HeadTags };
 }
 
 declare const __ENTERPRISE__: boolean;
diff --git a/packages/astro/src/default/layouts/Layout.astro b/packages/astro/src/default/layouts/Layout.astro
index 777c5934a..23db7bbb6 100644
--- a/packages/astro/src/default/layouts/Layout.astro
+++ b/packages/astro/src/default/layouts/Layout.astro
@@ -1,5 +1,5 @@
 ---
-import { HeadLinks } from 'tutorialkit:override-components';
+import { HeadTags } from 'tutorialkit:override-components';
 import { ViewTransitions } from 'astro:transitions';
 import type { MetaTagsConfig } from '@tutorialkit/types';
 import MetaTags from '../components/MetaTags.astro';
@@ -16,11 +16,10 @@ const faviconUrl = readPublicAsset('favicon.svg');
 <!doctype html>
 <html lang="en" transition:animate="none" class="h-full overflow-hidden">
   <head>
-    <title>{title}</title>
-    {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
-    <MetaTags meta={meta} />
-    <HeadLinks>
-      <Fragment slot="default-links">
+    <HeadTags>
+      <title slot="title">{title}</title>
+      <Fragment slot="links">
+        {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
@@ -29,7 +28,8 @@ const faviconUrl = readPublicAsset('favicon.svg');
         />
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
       </Fragment>
-    </HeadLinks>
+      <MetaTags slot="meta" meta={meta} />
+    </HeadTags>
     <ViewTransitions />
     <script is:inline>
       setTutorialKitTheme();
diff --git a/packages/astro/src/vite-plugins/override-components.ts b/packages/astro/src/vite-plugins/override-components.ts
index aca21d4b1..8678b83e2 100644
--- a/packages/astro/src/vite-plugins/override-components.ts
+++ b/packages/astro/src/vite-plugins/override-components.ts
@@ -18,7 +18,7 @@
  *       components: {
  *         TopBar: './CustomTopBar.astro',
  *         Dialog: './CustomDialog.tsx',
- *         HeadLinks: './CustomHeadLinks.astro',
+ *         HeadTags: './CustomHeadLinks.astro',
  *       },
  *     }),
  *   ],
@@ -66,7 +66,7 @@ export interface OverrideComponentsOptions {
    * <link rel="sitemap" href="/sitemap-index.xml" />
    * ```
    */
-  HeadLinks: string;
+  HeadTags: string;
 }
 
 interface Options {
@@ -90,13 +90,13 @@ export function overrideComponents({ components, defaultRoutes }: Options): Vite
     async load(id) {
       if (id === resolvedId) {
         const topBar = components?.TopBar || resolveDefaultTopBar(defaultRoutes);
-        const headLinks = components?.HeadLinks || resolveDefaultHeadLinks(defaultRoutes);
+        const headLinks = components?.HeadTags || resolveDefaultHeadLinks(defaultRoutes);
         const dialog = components?.Dialog || '@tutorialkit/react/dialog';
 
         return `
           export { default as TopBar } from '${topBar}';
           export { default as Dialog } from '${dialog}';
-          export { default as HeadLinks } from '${headLinks}';
+          export { default as HeadTags } from '${headLinks}';
         `;
       }
 
@@ -116,9 +116,9 @@ function resolveDefaultTopBar(defaultRoutes: boolean) {
 
 function resolveDefaultHeadLinks(defaultRoutes: boolean) {
   if (defaultRoutes) {
-    return '@tutorialkit/astro/default/components/HeadLinks.astro';
+    return '@tutorialkit/astro/default/components/HeadTags.astro';
   }
 
-  // default `HeadLinks` is used from local file when `defaultRoutes` is disabled
-  return './src/components/HeadLinks.astro';
+  // default `HeadTags` is used from local file when `defaultRoutes` is disabled
+  return './src/components/HeadTags.astro';
 }

From 3e01ef1fab889f9d2c3c25181689bb455b440b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:17:36 +0300
Subject: [PATCH 03/13] test: update snapshots

---
 packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
index 37e16ce34..dd6190482 100644
--- a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
+++ b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
@@ -235,6 +235,7 @@ exports[`create and eject a project 1`] = `
   "public/logo.svg",
   "src",
   "src/components",
+  "src/components/HeadTags.astro",
   "src/components/LoginButton.tsx",
   "src/components/Logo.astro",
   "src/components/MainContainer.astro",

From 831fa1fec69b92d8c19d560a1f32620f59d42a9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:32:38 +0300
Subject: [PATCH 04/13] chore: review

---
 .../src/content/docs/guides/overriding-components.mdx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx b/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
index 20df08e9b..e6431ea71 100644
--- a/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
@@ -93,7 +93,7 @@ interface Props {
 
 ### HeadTags
 
-Component for overriding links in the head tag.
+Component for overriding title, links and metadata in the `<head>` tag.
 
 When overriding `HeadTags` you can place TutorialKit's default components using following [Astro slots](https://docs.astro.build/en/basics/astro-components/#named-slots):
 

From 119a46874de0f176a80b0a49949f22ce4c518010 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:32:47 +0300
Subject: [PATCH 05/13] chore: review

---
 packages/astro/src/default/env-default.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts
index 1400272f5..d4613e8d3 100644
--- a/packages/astro/src/default/env-default.d.ts
+++ b/packages/astro/src/default/env-default.d.ts
@@ -9,7 +9,7 @@ interface WebContainerConfig {
 
 declare module 'tutorialkit:override-components' {
   const topBar: typeof import('./src/default/components/TopBar.astro').default;
-  const headLinks: typeof import('./src/default/components/HeadTags.astro').default;
+  const headTags: typeof import('./src/default/components/HeadTags.astro').default;
   const dialog: typeof import('@tutorialkit/react/dialog').default;
 
   export { topBar as TopBar, dialog as Dialog, headLinks as HeadTags };

From bf4df2abe104b539741350d13d5907b45a18d9fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:32:55 +0300
Subject: [PATCH 06/13] chore: review

---
 packages/astro/src/default/env-default.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts
index d4613e8d3..303066a5a 100644
--- a/packages/astro/src/default/env-default.d.ts
+++ b/packages/astro/src/default/env-default.d.ts
@@ -12,7 +12,7 @@ declare module 'tutorialkit:override-components' {
   const headTags: typeof import('./src/default/components/HeadTags.astro').default;
   const dialog: typeof import('@tutorialkit/react/dialog').default;
 
-  export { topBar as TopBar, dialog as Dialog, headLinks as HeadTags };
+  export { topBar as TopBar, dialog as Dialog, headTags as HeadTags };
 }
 
 declare const __ENTERPRISE__: boolean;

From 3096435bc0f4588d760c0144f9fb13e674095eec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:33:02 +0300
Subject: [PATCH 07/13] chore: review

---
 packages/astro/src/default/layouts/Layout.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/astro/src/default/layouts/Layout.astro b/packages/astro/src/default/layouts/Layout.astro
index 23db7bbb6..7bcfc2115 100644
--- a/packages/astro/src/default/layouts/Layout.astro
+++ b/packages/astro/src/default/layouts/Layout.astro
@@ -18,6 +18,7 @@ const faviconUrl = readPublicAsset('favicon.svg');
   <head>
     <HeadTags>
       <title slot="title">{title}</title>
+
       <Fragment slot="links">
         {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
         <link rel="preconnect" href="https://fonts.googleapis.com" />

From cdeadad0cd6445bda5ab64ef62d9e7d0cb501c47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:33:08 +0300
Subject: [PATCH 08/13] chore: review

---
 packages/astro/src/default/layouts/Layout.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/astro/src/default/layouts/Layout.astro b/packages/astro/src/default/layouts/Layout.astro
index 7bcfc2115..b26d2fe2e 100644
--- a/packages/astro/src/default/layouts/Layout.astro
+++ b/packages/astro/src/default/layouts/Layout.astro
@@ -29,6 +29,7 @@ const faviconUrl = readPublicAsset('favicon.svg');
         />
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
       </Fragment>
+
       <MetaTags slot="meta" meta={meta} />
     </HeadTags>
     <ViewTransitions />

From 4e8d9882145d85301047561a93df43c4fe41ba95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:33:14 +0300
Subject: [PATCH 09/13] chore: review

---
 packages/astro/src/vite-plugins/override-components.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/vite-plugins/override-components.ts b/packages/astro/src/vite-plugins/override-components.ts
index 8678b83e2..f733c5aca 100644
--- a/packages/astro/src/vite-plugins/override-components.ts
+++ b/packages/astro/src/vite-plugins/override-components.ts
@@ -90,7 +90,7 @@ export function overrideComponents({ components, defaultRoutes }: Options): Vite
     async load(id) {
       if (id === resolvedId) {
         const topBar = components?.TopBar || resolveDefaultTopBar(defaultRoutes);
-        const headLinks = components?.HeadTags || resolveDefaultHeadLinks(defaultRoutes);
+        const headTags = components?.HeadTags || resolveDefaultHeadTags(defaultRoutes);
         const dialog = components?.Dialog || '@tutorialkit/react/dialog';
 
         return `

From c37e9224ec8734bb63073677e1a7e20993e09823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:33:20 +0300
Subject: [PATCH 10/13] chore: review

---
 packages/astro/src/vite-plugins/override-components.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/vite-plugins/override-components.ts b/packages/astro/src/vite-plugins/override-components.ts
index f733c5aca..e5e5ea486 100644
--- a/packages/astro/src/vite-plugins/override-components.ts
+++ b/packages/astro/src/vite-plugins/override-components.ts
@@ -96,7 +96,7 @@ export function overrideComponents({ components, defaultRoutes }: Options): Vite
         return `
           export { default as TopBar } from '${topBar}';
           export { default as Dialog } from '${dialog}';
-          export { default as HeadTags } from '${headLinks}';
+          export { default as HeadTags } from '${headTags}';
         `;
       }
 

From 59b8846fbd850aa2e6ca3370919aaac0ceff8fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:33:26 +0300
Subject: [PATCH 11/13] chore: review

---
 packages/astro/src/vite-plugins/override-components.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/src/vite-plugins/override-components.ts b/packages/astro/src/vite-plugins/override-components.ts
index e5e5ea486..d54fb63cf 100644
--- a/packages/astro/src/vite-plugins/override-components.ts
+++ b/packages/astro/src/vite-plugins/override-components.ts
@@ -114,7 +114,7 @@ function resolveDefaultTopBar(defaultRoutes: boolean) {
   return './src/components/TopBar.astro';
 }
 
-function resolveDefaultHeadLinks(defaultRoutes: boolean) {
+function resolveDefaultHeadTags(defaultRoutes: boolean) {
   if (defaultRoutes) {
     return '@tutorialkit/astro/default/components/HeadTags.astro';
   }

From 23773316e8021db2bb7a807a4bd6716a56ee406c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:36:19 +0300
Subject: [PATCH 12/13] docs: update jsdoc

---
 .../astro/src/vite-plugins/override-components.ts   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/astro/src/vite-plugins/override-components.ts b/packages/astro/src/vite-plugins/override-components.ts
index d54fb63cf..62ae788a4 100644
--- a/packages/astro/src/vite-plugins/override-components.ts
+++ b/packages/astro/src/vite-plugins/override-components.ts
@@ -57,13 +57,18 @@ export interface OverrideComponentsOptions {
   Dialog?: string;
 
   /**
-   * Component for overriding links in the head tag.
+   * Component for overriding title, links and metadata in the `<head>` tag.
    *
-   * It will receive TutorialKit default links within the "default-links" slot.
+   * This component has slots that are used to pass TutorialKit's default tags:
+   *
+   * - `title`: The page title
+   * - `links`: Links for the favicon, fonts and other assets
+   * - `meta`:  Metadata and Open Graph tags
    *
    * ```jsx
-   * <slot name="default-links"></slot>
-   * <link rel="sitemap" href="/sitemap-index.xml" />
+   * <slot name="title" />
+   * <slot name="links" />
+   * <slot name="meta" />
    * ```
    */
   HeadTags: string;

From aa18822787be9372db51465bf8706ee435d9cada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Oct 2024 09:43:41 +0300
Subject: [PATCH 13/13] test: verify one more element

---
 e2e/src/components/CustomHeadTags.astro       | 1 +
 e2e/test/headtags.override-components.test.ts | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/e2e/src/components/CustomHeadTags.astro b/e2e/src/components/CustomHeadTags.astro
index 774ecc2ae..2aff860fe 100644
--- a/e2e/src/components/CustomHeadTags.astro
+++ b/e2e/src/components/CustomHeadTags.astro
@@ -1,4 +1,5 @@
 <slot name="title" />
 <slot name="links" />
 <slot name="meta" />
+<meta name="e2e-test-custom-meta-tag" content="custom-content" />
 <link rel="sitemap" href="/sitemap-index.xml" />
diff --git a/e2e/test/headtags.override-components.test.ts b/e2e/test/headtags.override-components.test.ts
index 0f70af08c..896b7875c 100644
--- a/e2e/test/headtags.override-components.test.ts
+++ b/e2e/test/headtags.override-components.test.ts
@@ -8,7 +8,10 @@ test('developer can override HeadTags', async ({ page }) => {
     page.locator('meta[name="og:title"]'),
     page.locator('link[rel="stylesheet"]').first(),
   ];
-  const customElems = [page.locator('link[rel="sitemap"]')];
+  const customElems = [
+    page.locator('meta[name="e2e-test-custom-meta-tag"][content="custom-content"]'),
+    page.locator('link[rel="sitemap"]'),
+  ];
 
   for (const e of defaultElems) {
     await expect(e).toBeAttached();