docs: add github icon on top of demo.tutorialkit.dev TopBar

[Charan167]

• Add Github icon link on top of demo.tutorialkit.dev TopBar

Recording.2024-09-19.214117.mp4

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

Great work @Charan167!

This PR should only make changes to docs/demo/** files. Couple of changes below:

• move the Github.tsx to docs/demo/src/components/Github.tsx
• add docs/demo/src/components/TopBar.tsx with following:

  ---
  import Github from "./Github";
  ---
  
  <nav
    class="bg-tk-elements-topBar-backgroundColor transition-theme border-b border-tk-elements-app-borderColor flex max-w-full items-center p-3 px-4 min-h-[56px]"
  >
    <div class="flex flex-1">
      <slot name="logo" />
    </div>
    <div class="mr-2">
      <slot name="open-in-stackblitz-link" />
    </div>
  
    <Github />
  
    <div>
      <slot name="theme-switch" />
    </div>
    <div>
      <slot name="login-button" />
    </div>
  </nav>

• define components.TopBar in docs/demo/astro.config.ts like this: https://github.com/AriPerkkio/tutorial-vite-plugin/pull/7/files#diff-baf06eda15601b59413c77e1f18884403033204061e6c9408cd9a3bb5bc6e586R10-R12

Now you should see the icon when running pnpm dev in docs/demo directory.

[Charan167]

• Moved Github.tsx to docs/demo/src/components/Github.tsx
• Defined components.TopBar in docs/demo/astro.config.ts

[AriPerkkio]

Looks good, thanks @Charan167! 🎉

If you want to work more on improving the demo site, good next task would be to add editPageLink there: https://tutorialkit.dev/reference/configuration/#editpagelink.

[Charan167]

@AriPerkkio Sure!!! I've made the changes by adding editpagelink in the lesson’s frontmatter block. Please confirm if it's supposed to work like this.

Recording.2024-09-20.215159.mp4

[AriPerkkio]

Yes, that's the intention. But it looks like the link is not working. Maybe the URL is not correct?

Here's Tutorial that has correctly working edit page link: https://tutorial-vite-plugin.pages.dev

[Charan167]

@AriPerkkio Thank you for your help!!! I missed the demo part again 😅. I've made the necessary changes and created a PR.