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 c7751a2ba..2289bb174 100644 --- 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 {/** Add your own tags */} -``` \ No newline at end of file +``` + +### 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" + \ No newline at end of file diff --git a/packages/astro/package.json b/packages/astro/package.json index da3f365f2..8c45e3ba3 100644 --- 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/components/Footer.astro b/packages/astro/src/default/components/Footer.astro new file mode 100644 index 000000000..ce585ca20 --- /dev/null +++ b/packages/astro/src/default/components/Footer.astro @@ -0,0 +1,11 @@ + diff --git a/packages/astro/src/default/components/FooterWrapper.astro b/packages/astro/src/default/components/FooterWrapper.astro new file mode 100644 index 000000000..eb127b8c5 --- /dev/null +++ b/packages/astro/src/default/components/FooterWrapper.astro @@ -0,0 +1,15 @@ +--- +// FooterWrapper.astro +import { Footer } from 'tutorialkit:override-components'; + +const currentYear = new Date().getFullYear(); +--- + + diff --git a/packages/astro/src/default/components/TutorialContent.astro b/packages/astro/src/default/components/TutorialContent.astro index 8c77b9fe8..ac5f6932f 100644 --- a/packages/astro/src/default/components/TutorialContent.astro +++ b/packages/astro/src/default/components/TutorialContent.astro @@ -1,6 +1,8 @@ --- +// TutorialContent.astro import type { AstroComponentFactory } from 'astro/runtime/server/index.js'; import type { Lesson } from '@tutorialkit/types'; +import FooterWrapper from './FooterWrapper.astro'; import NavCard from './NavCard.astro'; interface Props { @@ -16,33 +18,36 @@ const { Markdown, editPageLink, prev, next } = lesson; - { - editPageLink && ( -
- - - {lesson.data.i18n!.editPageText} - -
- ) - } + + { + editPageLink && ( +
+ + + {lesson.data.i18n!.editPageText} + +
+ ) + } -
-
- {prev && } -
-
- {next && } +
+
+ {prev && } +
+
+ {next && } +
-
- - {lesson.data.i18n!.webcontainerLinkText} - + + {lesson.data.i18n!.webcontainerLinkText} + +
diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts index 303066a5a..3ba660296 100644 --- 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 index a389acb6d..92605f837 100644 --- 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?: 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'; +} diff --git a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap index 5560ad7dd..7c611dac3 100644 --- a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap +++ b/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",