feat(astro): add support for footer override #423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Open

RonithManikonda wants to merge 11 commits into main

from ronith/overriding-footer

Open

feat(astro): add support for footer override #423

RonithManikonda wants to merge 11 commits into main from ronith/overriding-footer

Conversation

@RonithManikonda

Copy link

Collaborator

@RonithManikonda RonithManikonda commented Nov 21, 2024

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

@RonithManikonda


 feat(dev): add support for footer override

d3dbe48

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

@bolt-new-by-stackblitz

Copy link

bolt-new-by-stackblitz bot commented Nov 21, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@AriPerkkio AriPerkkio changed the title ~~(削除) feat(dev): add support for footer override (削除ここまで)~~ (追記) feat(astro): add support for footer override (追記ここまで)

Nov 22, 2024

@AriPerkkio


 chore: run pnpm run lint --fix

7878c48

@cloudflare-workers-and-pages

Copy link

cloudflare-workers-and-pages bot commented Nov 22, 2024 •

edited

Loading

Deploying tutorialkit-demo-page with Cloudflare Pages Cloudflare Pages

Latest commit: 67a5d3e

Status: ✅ Deploy successful!

Preview URL: https://c80e370a.tutorialkit-demo-page.pages.dev

Branch Preview URL: https://ronith-overriding-footer.tutorialkit-demo-page.pages.dev

View logs

@AriPerkkio


 chore: run pnpm run test -u in packages/cli

40f7f2e

AriPerkkio

AriPerkkio requested changes

Nov 22, 2024

View reviewed changes

Copy link

Member

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @RonithManikonda, looks good so far! 💯

There are still couple of places we need to update:

Add the entrypoint here:

tutorialkit/packages/astro/package.json

Lines 16 to 25 in 2740bc9

"exports": {

".": "./dist/index.js",

"./types": "./types.d.ts",

"./default-theme.css": "./dist/default/styles/variables.css",

"./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/HeadTags.astro": "./dist/default/components/HeadTags.astro",

"./package.json": "./package.json"

Mention the component here in the documentation:

tutorialkit/docs/tutorialkit.dev/src/content/docs/guides/overriding-components.mdx

Line 12 in 04ea97f

## Configuration

Add types here:

tutorialkit/packages/astro/src/default/env-default.d.ts

Lines 10 to 15 in 04ea97f

declare module 'tutorialkit:override-components' {

const topBar: typeof import('./src/default/components/TopBar.astro').default;

const dialog: typeof import('@tutorialkit/react/dialog').default;

export { topBar as TopBar, dialog as Dialog };

}

Add component here:

tutorialkit/packages/astro/src/vite-plugins/override-components.ts

Lines 1 to 129 in 2740bc9

/**

* A plugin that lets users override TutorialKit's components.

* The virtual module can be imported as:

* ```ts

* import { TopBar } from 'tutorialkit:override-components';

* <TopBar />

* ```

* User can override the components in `astro.config.ts`:

* ```ts

* export default defineConfig({

* integrations: [

* tutorialkit({

* components: {

* TopBar: './CustomTopBar.astro',

* Dialog: './CustomDialog.tsx',

* HeadTags: './CustomHeadLinks.astro',

* },

* }),

* ],

* });

* ```

import type { VitePlugin } from '../types.js';

export interface OverrideComponentsOptions {

/**

* Component for overriding the top bar.

* This component has slots that are used to pass TutorialKit's default components:

* - `logo`: Logo of the application

* - `open-in-stackblitz-link`: Link for opening current lesson in StackBlitz

* - `theme-switch`: Switch for changing the theme

* - `login-button`: For StackBlitz Enterprise user, the login button

* Usage:

* ```jsx

* <slot name="logo" />

* <slot name="open-in-stackblitz-link" />

* <slot name="theme-switch" />

* <slot name="login-button" />

* ```

TopBar?: string;

/**

* Component for overriding confirmation dialogs.

* This component has to be a React component and be the default export of that module.

* It will receive same props that `@tutorialkit/react/dialog` supports.

Dialog?: string;

/**

* Component for overriding title, links and metadata in the `<head>` tag.

* This component has slots that are used to pass TutorialKit's default tags:

* - `title`: The page title

* - `links`: Links for the favicon, fonts and other assets

* - `meta`: Metadata and Open Graph tags

* ```jsx

* <slot name="title" />

* <slot name="links" />

* <slot name="meta" />

* ```

HeadTags?: string;

}

interface Options {

components?: OverrideComponentsOptions;

defaultRoutes: boolean;

}

const virtualModuleId = 'tutorialkit:override-components';

const resolvedId = `0円${virtualModuleId}`;

export function overrideComponents({ components, defaultRoutes }: Options): VitePlugin {

return {

name: 'tutorialkit-override-components-plugin',

resolveId(id) {

if (id === virtualModuleId) {

return resolvedId;

}

return undefined;

async load(id) {

if (id === resolvedId) {

const topBar = components?.TopBar || resolveDefaultTopBar(defaultRoutes);

const headTags = components?.HeadTags || resolveDefaultHeadTags(defaultRoutes);

const dialog = components?.Dialog || '@tutorialkit/react/dialog';

return `

export { default as TopBar } from '${topBar}';

export { default as Dialog } from '${dialog}';

export { default as HeadTags } from '${headTags}';

}

return undefined;

};

}

function resolveDefaultTopBar(defaultRoutes: boolean) {

if (defaultRoutes) {

return '@tutorialkit/astro/default/components/TopBar.astro';

}

// default `TopBar` is used from local file when `defaultRoutes` is disabled

return './src/components/TopBar.astro';

}

function resolveDefaultHeadTags(defaultRoutes: boolean) {

if (defaultRoutes) {

return '@tutorialkit/astro/default/components/HeadTags.astro';

}

// default `HeadTags` is used from local file when `defaultRoutes` is disabled

return './src/components/HeadTags.astro';

}

AriPerkkio and others added 2 commits

November 22, 2024 18:20

@AriPerkkio


 Merge remote-tracking branch 'upstream/main' into ronith/overriding-f...

1c6f358

...ooter

@RonithManikonda


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

696ee1b

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.

AriPerkkio

AriPerkkio requested changes

Nov 29, 2024

View reviewed changes

Copy link

Member

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The FooterWrapper.astro should have following elements:

tutorialkit/packages/astro/src/default/components/TutorialContent.astro

Lines 19 to 47 in 0e7cf3c

{

editPageLink && (

href={editPageLink}

class="inline-flex flex-items-center text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover hover:underline"

<span>{lesson.data.i18n!.editPageText}</span>

</a>

</div>

)

}

{prev && <NavCard lesson={prev} type="prev" />}

</div>

{next && <NavCard lesson={next} type="next" />}

</div>

class="inline-block mt-auto font-size-3.5 underline text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover"

href="https://webcontainers.io/"

{lesson.data.i18n!.webcontainerLinkText}

</a>

These should be passed to Footer with following named slots:

edit-page-link
lesson-link
webcontainers-link

So for example the Edit Page -link becomes something like

-<div class="pb-4 mt-8 border-b border-tk-border-secondary">
+<div slot="edit-page-link" class="pb-4 mt-8 border-b border-tk-border-secondary">
 <a
 href={editPageLink}
 class="inline-flex flex-items-center text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover hover:underline"

Then in Footer.astro we would have those slots like:

<footer>
 <slot name="edit-page-link" />
 <slot name="lesson-links" />
 <slot name="webcontainers-link" />
</footer>

Then the FooterWrapper.astro should be used in TutorialContent.astro.

RonithManikonda and others added 6 commits

January 16, 2025 15:26

@RonithManikonda


 feat(astro): add slot-based footer customization

0cc38a6

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

@RonithManikonda


 Merge branch 'main' into ronith/overriding-footer

257871c

@RonithManikonda


 removed unnecessary import statements

09903b3

@RonithManikonda


 Merge branch 'ronith/overriding-footer' of https://github.com/stackbl...

e58f612

...itz/tutorialkit into ronith/overriding-footer

@RonithManikonda


 fix(astro): replace Fragment with div in Layout.astro

c6291d1

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

@RonithManikonda


 chore(prettier): fix formatting errors

67a5d3e

Labels

None yet

3 participants

@RonithManikonda @AriPerkkio

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(astro): add support for footer override #423

Are you sure you want to change the base?

feat(astro): add support for footer override #423

Uh oh!

Conversation

@RonithManikonda RonithManikonda commented Nov 21, 2024

Uh oh!

bolt-new-by-stackblitz bot commented Nov 21, 2024

Uh oh!

cloudflare-workers-and-pages bot commented Nov 22, 2024 •

edited

Loading

Uh oh!

Deploying tutorialkit-demo-page with Cloudflare Pages Cloudflare Pages

Uh oh!

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

Uh oh!

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(astro): add support for footer override #423

Are you sure you want to change the base?

feat(astro): add support for footer override #423

Uh oh!

Conversation

@RonithManikonda RonithManikonda commented Nov 21, 2024

Uh oh!

bolt-new-by-stackblitz bot commented Nov 21, 2024

Uh oh!

cloudflare-workers-and-pages bot commented Nov 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying tutorialkit-demo-page with Cloudflare Pages Cloudflare Pages

Uh oh!

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

Uh oh!

@AriPerkkio AriPerkkio left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cloudflare-workers-and-pages bot commented Nov 22, 2024 •

edited

Loading