Skip to content

feat: access current lesson from Astro.locals #398

New issue

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

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

Already on GitHub? # to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

eric-burel
Copy link
Contributor

@eric-burel eric-burel commented Oct 28, 2024

This PR introduces a way to access the current lesson frontmatter / collection entry from any component, using Astro.locals as a server context.

I've tried to find simpler alternatives:

  • frontmatter object accessible in Markdown files can help avoiding repetitions when a component needs the current lesson title etc. However it won't enjoy the parsing logic from TutorialKit getTutorial function in packages/astro/src/default/utils/content.ts
  • We can't seem to pass props to the rendered <Markdown /> component in packages/astro/src/default/components/TutorialContent.astro. I didn't actually try but found no documentation regarding such an usage, all the more that Astro.render() has already been called to generate this component so I suspect that even it was possible, it would be too late to pass it some props.
  • Markdown layout are great and can access a lot of context like the current page URL... but they are layouts. You can't access a similar context within a component. I've tried accessing the url value in a MDX page but it points to the file and not the actual URL (it had no chance to work since using a collection decorelates the URL and the entry). We can only access the frontmatter prop

I needed to pass an additional entrySlug to be able to call getEntry later on. I focused on lessons at the moment.

Use cases would be crafting reusable lesson-specific component, that are able to figure the lesson URL, reuse the frontmatter config etc. For instance I am trying to wrap up a "Share on Bluesky" component.

Copy link

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

@eric-burel eric-burel marked this pull request as draft October 28, 2024 17:55
@eric-burel eric-burel changed the title access current lesson from Astro.locals feat: access current lesson from Astro.locals Oct 28, 2024
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.

I think this is currently possible via TutorialKit APIs: https://tutorialkit.dev/guides/how-to-use-tutorialkit-api/

You could create a custom component that accesses the lesson:

import tutorialStore from 'tutorialkit:store';

export function CustomComponent() {
  const lesson = tutorialStore.lesson;

  console.log(lesson);

  return <></>;
}

@eric-burel
Copy link
Contributor Author

eric-burel commented Nov 5, 2024

Alright ! So the TutorialStore is a stateful singleton as far as I can tell from the code.

However I see setLesson being called only in WorkspacePanelWrapper in a useEffect hook: is this value available in server-side Astro components as well? I feel like it only works in islands, and is strongly tied to the WorkspacePanel component loading first.

@eric-burel eric-burel force-pushed the feature/ambiant-entry branch from 9cd894d to a26419b Compare November 5, 2024 15:48
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants