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

RonithManikonda · 2024-11-21T21:30:29Z

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

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

stackblitz · 2024-11-21T21:30:32Z

Run & review this pull request in StackBlitz Codeflow.

cloudflare-workers-and-pages · 2024-11-22T15:59:40Z

Deploying tutorialkit-demo-page with Cloudflare Pages

Latest commit:	`696ee1b`
Status:	✅ Deploy successful!
Preview URL:	https://fe31838d.tutorialkit-demo-page.pages.dev
Branch Preview URL:	https://ronith-overriding-footer.tutorialkit-demo-page.pages.dev

View logs

AriPerkkio

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

…ooter

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

The FooterWrapper.astro should have following elements:

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

Lines 19 to 47 in 0e7cf3c

    
           { 
        
             editPageLink && ( 
        
               <div 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" 
        
                 > 
        
                   <span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2" /> 
        
                   <span>{lesson.data.i18n!.editPageText}</span> 
        
                 </a> 
        
               </div> 
        
             ) 
        
           } 
        
           <div class="grid grid-cols-[1fr_1fr] gap-4 mt-8 mb-6"> 
        
             <div class="flex"> 
        
               {prev && <NavCard lesson={prev} type="prev" />} 
        
             </div> 
        
             <div class="flex"> 
        
               {next && <NavCard lesson={next} type="next" />} 
        
             </div> 
        
           </div> 
        
           <a 
        
             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.

AriPerkkio changed the title ~~feat(dev): add support for footer override~~ feat(astro): add support for footer override Nov 22, 2024

chore: run pnpm run lint --fix

7878c48

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

40f7f2e

AriPerkkio requested changes Nov 22, 2024

View reviewed changes

AriPerkkio and others added 2 commits November 22, 2024 18:20

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

1c6f358

…ooter

AriPerkkio requested changes Nov 29, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

RonithManikonda commented Nov 21, 2024

stackblitz bot commented Nov 21, 2024

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

edited

Loading

AriPerkkio left a comment

AriPerkkio left a comment

	"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"
	},

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

	/**
	* 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';
	}

	{
	editPageLink && (
	<div 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"
	>
	<span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2" />
	<span>{lesson.data.i18n!.editPageText}</span>
	</a>
	</div>
	)
	}

	<div class="grid grid-cols-[1fr_1fr] gap-4 mt-8 mb-6">
	<div class="flex">
	{prev && <NavCard lesson={prev} type="prev" />}
	</div>
	<div class="flex">
	{next && <NavCard lesson={next} type="next" />}
	</div>
	</div>

	<a
	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>

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

Conversation

RonithManikonda commented Nov 21, 2024

stackblitz bot commented Nov 21, 2024

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

Deploying tutorialkit-demo-page with Cloudflare Pages

AriPerkkio left a comment

Choose a reason for hiding this comment

AriPerkkio left a comment

Choose a reason for hiding this comment

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

edited

Loading