stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
235 stars 24 forks source link

Overriding the footer #323

Open eric-burel opened 1 week ago

eric-burel commented 1 week ago

Is your feature request related to a problem?

The webcontainer link text customization is not enough, because this footer is also the place where we may want to include legal terms, contact info and copyrights, especially when deploying a tutorial as a completely standalone website with no other content page.

Describe the solution you'd like.

Similarly to TopBar, customizing the footer.

Describe alternatives you've considered.

Customizing "webcontainerLinkText" to feed it more content is not enough, as it will be wrapped by an anchor tag.

Additional context

I am digging the code to better understand the implementation, and maybe contribute : I see that overidable components are typed in packages/astro/src/default/env-default.d.ts, which then allows to get them from a virtual import packages/astro/src/default/components/TopBarWrapper.astro. I think this system is fine, so it could be expanded to more components. Coupled with slots, it's really great because you only need to provide the relevant slots in your own version to keep similar content around.

AriPerkkio commented 1 week ago

This is great idea! Currently we only support overriding the TopBar, but the idea was that we would extend the support for other components when requests like this come up.

To see how TopBar overriding was implemented, see:

I think it would make sense to include all these components in the footer component:

So something like:

<footer>
  Some content here
  <slot name="edit-page-link" />
  and here
  <slot name="back-link" />
  here too
  <slot name="next-link" />
  here too
  <slot name="webcontainers-link" />
  and here!
</footer>