From d3dbe48e431280972e02b506fed5477626da0a61 Mon Sep 17 00:00:00 2001 From: RonithManikonda Date: Thu, 7 Nov 2024 16:04:43 -0600 Subject: [PATCH 1/8] feat(dev): add support for footer override adds support for overriding the footer component, similar to the TopBar override setup. Users can now customize footer content such as legal terms, contact info, and copyrights. this change introduces `Footer.astro` and `FooterWrapper.astro` files to allow flexible slotting of footer items, improving customization for standalone tutorial deployments close #323 --- packages/astro/src/default/components/Footer.astro | 13 +++++++++++++ .../src/default/components/FooterWrapper.astro | 14 ++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 packages/astro/src/default/components/Footer.astro create mode 100644 packages/astro/src/default/components/FooterWrapper.astro diff --git a/packages/astro/src/default/components/Footer.astro b/packages/astro/src/default/components/Footer.astro new file mode 100644 index 000000000..2031bf86e --- /dev/null +++ b/packages/astro/src/default/components/Footer.astro @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/packages/astro/src/default/components/FooterWrapper.astro b/packages/astro/src/default/components/FooterWrapper.astro new file mode 100644 index 000000000..34b053a74 --- /dev/null +++ b/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(); +--- + + \ No newline at end of file From 7878c48c36d47374ca4af0e3b7d0bc3b28508d99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Fri, 22 Nov 2024 17:59:24 +0200 Subject: [PATCH 2/8] chore: run `pnpm run lint --fix` --- packages/astro/src/default/components/Footer.astro | 6 ++---- packages/astro/src/default/components/FooterWrapper.astro | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/astro/src/default/components/Footer.astro b/packages/astro/src/default/components/Footer.astro index 2031bf86e..ce585ca20 100644 --- a/packages/astro/src/default/components/Footer.astro +++ b/packages/astro/src/default/components/Footer.astro @@ -1,6 +1,4 @@ - diff --git a/packages/astro/src/default/components/FooterWrapper.astro b/packages/astro/src/default/components/FooterWrapper.astro index 34b053a74..d59cac298 100644 --- a/packages/astro/src/default/components/FooterWrapper.astro +++ b/packages/astro/src/default/components/FooterWrapper.astro @@ -11,4 +11,4 @@ const currentYear = new Date().getFullYear();

© {currentYear} Your Company. All rights reserved.

- \ No newline at end of file + From 40f7f2e1bc2607085d6208bf03430182d8ed671d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Fri, 22 Nov 2024 18:06:21 +0200 Subject: [PATCH 3/8] chore: run `pnpm run test -u` in `packages/cli` --- packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap index dd6190482..765c2c4ef 100644 --- a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap +++ b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap @@ -235,6 +235,8 @@ exports[`create and eject a project 1`] = ` "public/logo.svg", "src", "src/components", + "src/components/Footer.astro", + "src/components/FooterWrapper.astro", "src/components/HeadTags.astro", "src/components/LoginButton.tsx", "src/components/Logo.astro", From 696ee1b465c4a53e83e6a106fa60c03e39affefe Mon Sep 17 00:00:00 2001 From: RonithManikonda Date: Wed, 27 Nov 2024 10:35:56 -0600 Subject: [PATCH 4/8] 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. --- .../docs/guides/overriding-components.mdx | 29 ++++++++++++++++++- packages/astro/package.json | 1 + packages/astro/src/default/env-default.d.ts | 3 +- .../src/vite-plugins/override-components.ts | 24 +++++++++++++++ 4 files changed, 55 insertions(+), 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 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" +
+ +

Default legal info

+ + + +

Contact us at example@example.com

+ + + +

© 2024 Example Company

+ +
\ No newline at end of file diff --git a/packages/astro/package.json b/packages/astro/package.json index a0d6d3d93..b2a6d90b0 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/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 + *
+ *

Custom Footer Content

+ *
+ * ``` + */ + 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'; +} From 0cc38a6c7d7693d144221871d2f54971e10658fb Mon Sep 17 00:00:00 2001 From: RonithManikonda Date: Thu, 16 Jan 2025 15:26:00 -0600 Subject: [PATCH 5/8] feat(astro): add slot-based footer customization adds support for overriding the footer component via named slots (edit-page-link, lesson-links, webcontainers-link) in Footer.astro, enabling flexible customization of footer content in FooterWrapper.astro. updated TutorialContent.astro to use FooterWrapper.astro for rendering footer elements, aligning with the new slot-based structure. this change ensures consistent and modular handling of footer elements across tutorials. close #423 --- .../default/components/FooterWrapper.astro | 3 + .../default/components/TutorialContent.astro | 57 ++++++++++--------- 2 files changed, 34 insertions(+), 26 deletions(-) diff --git a/packages/astro/src/default/components/FooterWrapper.astro b/packages/astro/src/default/components/FooterWrapper.astro index d59cac298..de3be5919 100644 --- a/packages/astro/src/default/components/FooterWrapper.astro +++ b/packages/astro/src/default/components/FooterWrapper.astro @@ -8,6 +8,9 @@ const currentYear = new Date().getFullYear(); ---
+ + +

© {currentYear} Your Company. All rights reserved.

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} + +
From 09903b33adc8aa03f496d8327962bc194691a9cf Mon Sep 17 00:00:00 2001 From: RonithManikonda Date: Thu, 10 Apr 2025 15:39:43 -0500 Subject: [PATCH 6/8] removed unnecessary import statements --- packages/astro/src/default/components/FooterWrapper.astro | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/astro/src/default/components/FooterWrapper.astro b/packages/astro/src/default/components/FooterWrapper.astro index de3be5919..eb127b8c5 100644 --- a/packages/astro/src/default/components/FooterWrapper.astro +++ b/packages/astro/src/default/components/FooterWrapper.astro @@ -1,8 +1,6 @@ --- // FooterWrapper.astro import { Footer } from 'tutorialkit:override-components'; -import Terms from './Terms.astro'; -import ContactInfo from './ContactInfo.astro'; const currentYear = new Date().getFullYear(); --- From c6291d1f0f604211d79d6372c7806731137d8293 Mon Sep 17 00:00:00 2001 From: RonithManikonda Date: Wed, 30 Apr 2025 23:12:14 -0500 Subject: [PATCH 7/8] fix(astro): replace Fragment with div in Layout.astro The Fragment component was causing a linter error when used with slots in Astro. Replaced it with a div element which is properly supported. closes #323 --- .../src/default/components/ContactInfo.astro | 9 +++++ .../astro/src/default/components/Footer.astro | 38 ++++++++++++++----- .../default/components/FooterWrapper.astro | 14 +++++-- .../astro/src/default/components/Terms.astro | 9 +++++ packages/astro/src/default/env-default.d.ts | 8 ++-- .../astro/src/default/layouts/Layout.astro | 4 +- 6 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 packages/astro/src/default/components/ContactInfo.astro create mode 100644 packages/astro/src/default/components/Terms.astro diff --git a/packages/astro/src/default/components/ContactInfo.astro b/packages/astro/src/default/components/ContactInfo.astro new file mode 100644 index 000000000..fcd7c1ae0 --- /dev/null +++ b/packages/astro/src/default/components/ContactInfo.astro @@ -0,0 +1,9 @@ +--- +// ContactInfo.astro +--- + +
+ Contact Us + • + GitHub +
\ No newline at end of file diff --git a/packages/astro/src/default/components/Footer.astro b/packages/astro/src/default/components/Footer.astro index ce585ca20..db023430a 100644 --- a/packages/astro/src/default/components/Footer.astro +++ b/packages/astro/src/default/components/Footer.astro @@ -1,11 +1,29 @@ - +
diff --git a/packages/astro/src/default/components/FooterWrapper.astro b/packages/astro/src/default/components/FooterWrapper.astro index eb127b8c5..f26efad8c 100644 --- a/packages/astro/src/default/components/FooterWrapper.astro +++ b/packages/astro/src/default/components/FooterWrapper.astro @@ -1,6 +1,8 @@ --- // FooterWrapper.astro import { Footer } from 'tutorialkit:override-components'; +import Terms from './Terms.astro'; +import ContactInfo from './ContactInfo.astro'; const currentYear = new Date().getFullYear(); --- @@ -9,7 +11,13 @@ const currentYear = new Date().getFullYear(); - - -

© {currentYear} Your Company. All rights reserved.

+ + + + + + + +

© {currentYear} Your Company. All rights reserved.

+ diff --git a/packages/astro/src/default/components/Terms.astro b/packages/astro/src/default/components/Terms.astro new file mode 100644 index 000000000..391497f98 --- /dev/null +++ b/packages/astro/src/default/components/Terms.astro @@ -0,0 +1,9 @@ +--- +// Terms.astro +--- + +
+ Terms of Service + • + Privacy Policy +
\ No newline at end of file diff --git a/packages/astro/src/default/env-default.d.ts b/packages/astro/src/default/env-default.d.ts index 3ba660296..1793ac23c 100644 --- a/packages/astro/src/default/env-default.d.ts +++ b/packages/astro/src/default/env-default.d.ts @@ -8,12 +8,12 @@ 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 topBar: typeof import('./components/TopBar.astro').default; + const headTags: typeof import('./components/HeadTags.astro').default; + const footer: typeof import('./components/Footer.astro').default; const dialog: typeof import('@tutorialkit/react/dialog').default; - export { topBar as TopBar, dialog as Dialog, footer as Footer }; + export { topBar as TopBar, dialog as Dialog, footer as Footer, headTags as HeadTags }; } declare const __ENTERPRISE__: boolean; diff --git a/packages/astro/src/default/layouts/Layout.astro b/packages/astro/src/default/layouts/Layout.astro index 3e3109449..1b128e02c 100644 --- a/packages/astro/src/default/layouts/Layout.astro +++ b/packages/astro/src/default/layouts/Layout.astro @@ -20,7 +20,7 @@ const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toStri {title} - +
{canonicalUrl && } {faviconUrl ? : null} @@ -30,7 +30,7 @@ const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toStri rel="stylesheet" /> - +
From 67a5d3e308d677cc5eb257728633a2e7763f718d Mon Sep 17 00:00:00 2001 From: RonithManikonda Date: Wed, 30 Apr 2025 23:17:00 -0500 Subject: [PATCH 8/8] chore(prettier): fix formatting errors --- packages/astro/src/default/components/ContactInfo.astro | 2 +- packages/astro/src/default/components/Footer.astro | 2 +- packages/astro/src/default/components/Terms.astro | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/astro/src/default/components/ContactInfo.astro b/packages/astro/src/default/components/ContactInfo.astro index fcd7c1ae0..893dbb556 100644 --- a/packages/astro/src/default/components/ContactInfo.astro +++ b/packages/astro/src/default/components/ContactInfo.astro @@ -6,4 +6,4 @@ Contact Us • GitHub - \ No newline at end of file + diff --git a/packages/astro/src/default/components/Footer.astro b/packages/astro/src/default/components/Footer.astro index db023430a..f215d484b 100644 --- a/packages/astro/src/default/components/Footer.astro +++ b/packages/astro/src/default/components/Footer.astro @@ -11,7 +11,7 @@ - +
diff --git a/packages/astro/src/default/components/Terms.astro b/packages/astro/src/default/components/Terms.astro index 391497f98..572c2dba9 100644 --- a/packages/astro/src/default/components/Terms.astro +++ b/packages/astro/src/default/components/Terms.astro @@ -6,4 +6,4 @@ Terms of Service • Privacy Policy -
\ No newline at end of file +