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:	`1c6f358`
Status:	✅ Deploy successful!
Preview URL:	https://84aefd36.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

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

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

1c6f358

…ooter

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

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

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

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

edited

Loading