feat(vite-plugins): add support for overriding Footer component

extend the override-components plugin to allow customization of the Footer component. added a new `Footer` option to the `OverrideComponentsOptions` interface, updated the `load` function to export the Footer, and introduced a `resolveDefaultFooter` helper function to handle default paths based on the `defaultRoutes` option. BREAKING CHANGE: users upgrading to this version must update their `astro.config.ts` if they wish to customize the new Footer component. refer to the updated documentation for usage.
stackblitz · Nov 27, 2024 · 696ee1b · 696ee1b
1 parent 1c6f358
commit 696ee1b
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx b/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx
@@ -110,4 +110,31 @@ When overriding `HeadTags` you can place TutorialKit's default components using
 <slot name="meta" />
 {/** Add your own tags */}
 <link rel="sitemap" href="/sitemap-index.xml" />
-```
+```
+
+### Footer
+
+The `Footer` component can be overridden to customize the footer content, including legal terms, contact information, and copyrights.
+
+When overriding `Footer`, you can use the following [Astro slots](https://docs.astro.build/en/basics/astro-components/#named-slots) to customize specific parts of the default footer:
+
+- `legal-info`: Content for legal terms or disclaimers
+- `contact-info`: Contact details such as email or phone number
+- `copyright`: Copyright text for the website
+
+Example override:
+
+```jsx title="src/components/CustomFooter.astro"
+<footer>
+  <slot name="legal-info">
+    <p>Default legal info</p>
+  </slot>
+
+  <slot name="contact-info">
+    <p>Contact us at example@example.com</p>
+  </slot>
+
+  <slot name="copyright">
+    <p>© 2024 Example Company</p>
+  </slot>
+</footer>
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -21,6 +21,7 @@
     "./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",
+    "./default/components/Footer.astro": "./dist/default/components/Footer.astro",
     "./package.json": "./package.json"
   },
   "files": [

diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts
@@ -10,9 +10,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 footer: typeof import('./src/default/components/Footer.astro').default;
   const dialog: typeof import('@tutorialkit/react/dialog').default;
 
-  export { topBar as TopBar, dialog as Dialog, headTags as HeadTags };
+  export { topBar as TopBar, dialog as Dialog, footer as Footer };
 }
 
 declare const __ENTERPRISE__: boolean;

diff --git a/packages/astro/src/vite-plugins/override-components.ts b/packages/astro/src/vite-plugins/override-components.ts
@@ -72,6 +72,19 @@ export interface OverrideComponentsOptions {
    * ```
    */
   HeadTags?: string;
+
+  /**
+   * Component for overriding the footer.
+   *
+   * This component can be customized to include your own footer elements.
+   *
+   * ```jsx
+   * <footer>
+   *   <p>Custom Footer Content</p>
+   * </footer>
+   * ```
+   */
+  Footer?: string;
 }
 
 interface Options {
@@ -97,11 +110,13 @@ export function overrideComponents({ components, defaultRoutes }: Options): Vite
         const topBar = components?.TopBar || resolveDefaultTopBar(defaultRoutes);
         const headTags = components?.HeadTags || resolveDefaultHeadTags(defaultRoutes);
         const dialog = components?.Dialog || '@tutorialkit/react/dialog';
+        const footer = components?.Footer || resolveDefaultFooter(defaultRoutes);
 
         return `
           export { default as TopBar } from '${topBar}';
           export { default as Dialog } from '${dialog}';
           export { default as HeadTags } from '${headTags}';
+          export { default as Footer } from '${footer}';
         `;
       }
 
@@ -127,3 +142,12 @@ function resolveDefaultHeadTags(defaultRoutes: boolean) {
   // default `HeadTags` is used from local file when `defaultRoutes` is disabled
   return './src/components/HeadTags.astro';
 }
+
+function resolveDefaultFooter(defaultRoutes: boolean) {
+  if (defaultRoutes) {
+    return '@tutorialkit/astro/default/components/Footer.astro';
+  }
+
+  // default `Footer` is used from local file when `defaultRoutes` is disabled
+  return './src/components/Footer.astro';
+}