Skip to content

feat: add 'Open in StackBlitz'-button #219

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

Merged
merged 7 commits into from
Aug 7, 2024

Conversation

AriPerkkio
Copy link
Member

Adds an button on top bar that can be used to open current lesson and template code in separate StackBlitz project. Current code from editor is applied on top of the files.

Users can disable showing this button by defining openInStackBlitzLink: false in frontmatter metada. By default it's always visible.

Copy link

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

@AriPerkkio AriPerkkio changed the title feat: Add 'Open in StackBlitz'-button feat: add 'Open in StackBlitz'-button Aug 6, 2024
Comment on lines 16 to 17
// initialize handlers on each page load as it's possible some pages disable openInStackBlitzLink
document.addEventListener('astro:page-load', onInit);
Copy link
Member Author

@AriPerkkio AriPerkkio Aug 6, 2024

Choose a reason for hiding this comment

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

This is required even when transition:persist is used due to:

  • Disable openInStackBlitzLink on a single lesson
  • Open that lesson in fresh browser tab. The element is not mounted and scripts are not run.
  • Navigate to a page that doesn't have openInStackBlitzLink disabled. Script tags are not run (due to ViewTransition I think), handler is not attached.

Using page-load works always.

@AriPerkkio AriPerkkio requested a review from Nemikolh August 6, 2024 14:25
@Nemikolh
Copy link
Member

Nemikolh commented Aug 6, 2024

Really cool PR! A few things we should do:

  • Move the logic of taking the snapshot that get sent to StackBlitz in a takeSnapshot function on the TutorialRunner class. Then the TutorialStore could also expose the same function calling the underlying _tutorialRunner.
  • Skip non-text files for now. I don't know if this is supported by the SDK. We can always revisit that later.

The rest is really great! I really love the idea of generating a "start" command in the package.json that does the same as the current lesson. The logo is perfect, I love it ❤️

@AriPerkkio
Copy link
Member Author

Added takeSnapshot to runner that prepares files. The lesson data wasn't available there so title and description are resolved in button component as before. Let me know what you think!

Copy link
Member

@Nemikolh Nemikolh left a comment

Choose a reason for hiding this comment

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

I like where this is going! Still a few things to fix and it should be good to go 🙌

Copy link
Member

@Nemikolh Nemikolh left a comment

Choose a reason for hiding this comment

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

YAY!! Love this! Really good work on this front! 🤩 🥳

Copy link
Member

@Nemikolh Nemikolh left a comment

Choose a reason for hiding this comment

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

Good job on this! 🤩

@Nemikolh Nemikolh merged commit af428c8 into stackblitz:main Aug 7, 2024
9 checks passed
@AriPerkkio AriPerkkio deleted the feat/open-in-stackblitz branch August 7, 2024 08:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add "Open in StackBlitz" button
2 participants