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..e6431ea71 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,22 @@ interface Props {
/** Content of the dialog */
children: ReactNode;
}
+```
+
+### HeadTags
+
+Component for overriding title, links and metadata in the `` 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):
+
+- `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"
+
+
+
+{/** Add your own tags */}
+
```
\ No newline at end of file
diff --git a/e2e/configs/override-components.ts b/e2e/configs/override-components.ts
index 120234dcf..711a90e53 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',
+ 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..2aff860fe
--- /dev/null
+++ b/e2e/src/components/CustomHeadTags.astro
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/e2e/test/headtags.override-components.test.ts b/e2e/test/headtags.override-components.test.ts
new file mode 100644
index 000000000..896b7875c
--- /dev/null
+++ b/e2e/test/headtags.override-components.test.ts
@@ -0,0 +1,23 @@
+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('meta[name="e2e-test-custom-meta-tag"][content="custom-content"]'),
+ 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 da837197f..289f7934d 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/HeadTags.astro": "./dist/default/components/HeadTags.astro",
"./package.json": "./package.json"
},
"files": [
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 @@
+
+
+
diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts
index 101487bff..303066a5a 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 headTags: typeof import('./src/default/components/HeadTags.astro').default;
const dialog: typeof import('@tutorialkit/react/dialog').default;
- export { topBar as TopBar, dialog as Dialog };
+ export { topBar as TopBar, dialog as Dialog, headTags 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 ae98d9826..b26d2fe2e 100644
--- a/packages/astro/src/default/layouts/Layout.astro
+++ b/packages/astro/src/default/layouts/Layout.astro
@@ -1,4 +1,5 @@
---
+import { HeadTags } from 'tutorialkit:override-components';
import { ViewTransitions } from 'astro:transitions';
import type { MetaTagsConfig } from '@tutorialkit/types';
import MetaTags from '../components/MetaTags.astro';
@@ -15,13 +16,22 @@ const faviconUrl = readPublicAsset('favicon.svg');
- {title}
- {faviconUrl ? : null}
-
-
-
-
-
+
+ {title}
+
+
+ {faviconUrl ? : null}
+
+
+
+
+
+
+
+