can ovewrite default head links

Author: eric-burel

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" />
 ```

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',
       },
     }),
   ],

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": [

packages/astro/src/default/components/HeadLinks.astro

@@ -0,0 +1 @@
+<slot name="default-links" />

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;

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();

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';
+}