feat(astro): add support for footer override

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 [email protected]</p>
+  </slot>
+
+  <slot name="copyright">
+    <p>© 2024 Example Company</p>
+  </slot>
+</footer>

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

packages/astro/src/default/components/Footer.astro

@@ -0,0 +1,11 @@
+<nav class="bg-tk-elements-footer-backgroundColor border-t border-tk-elements-app-borderColor flex justify-between p-4">
+  <div class="flex-1">
+    <slot name="terms" />
+  </div>
+  <div class="flex-1">
+    <slot name="contact-info" />
+  </div>
+  <div class="flex-1">
+    <slot name="copyright" />
+  </div>
+</nav>

packages/astro/src/default/components/FooterWrapper.astro

@@ -0,0 +1,14 @@
+---
+// FooterWrapper.astro
+import { Footer } from 'tutorialkit:override-components';
+import Terms from './Terms.astro';
+import ContactInfo from './ContactInfo.astro';
+
+const currentYear = new Date().getFullYear();
+---
+
+<Footer>
+  <Terms slot="terms" />
+  <ContactInfo slot="contact-info" />
+  <p slot="copyright">© {currentYear} Your Company. All rights reserved.</p>
+</Footer>

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;

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

packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap

@@ -236,6 +236,8 @@ exports[`create and eject a project 1`] = `
   "src",
   "src/components",
   "src/components/DownloadButton.tsx",
+  "src/components/Footer.astro",
+  "src/components/FooterWrapper.astro",
   "src/components/HeadTags.astro",
   "src/components/LoginButton.tsx",
   "src/components/Logo.astro",