HeadLinks -> more general HeadTags + e2e tests

eric-burel · eric-burel · commit c0d0464c15b1 · 2024-10-15T20:06:10.000+02:00
diff --git 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" />
 ```
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git a/packages/astro/src/default/components/HeadTags.astro 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
@@ -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
@@ -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
@@ -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';
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<slot name="title" />`
	`2`	`+<slot name="links" />`
	`3`	`+<slot name="meta" />`