feat: support overriding TopBar

[AriPerkkio]

Adds support for overriding TopBar component. In future we can add support for more component overrides.

import tutorialkit from '@tutorialkit/astro';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
    tutorialkit({
      components: {
        TopBar: './CustomTopBar.astro',
      },
    }),
  ],
});

Users may still want to utilize TutorialKit's default <Logo> and <ThemeSwitch>. These are accessible through slots:

// ./CustomTopBar.astro
<nav style="display: flex; align-items: center; gap: 2rem; padding: 1rem;">
  Some content here
  <slot name="logo" />
  and here
  <slot name="theme-switch" />
  here too
  <slot name="login-button" />
  and here!
</nav>

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

These docs are highly inspired by Starlight: https://starlight.astro.build/guides/overriding-components/

[AriPerkkio]

I spent some time trying to set up tests for this kind of features but it seemed a bit bigger task than I expected. I don't think there are any existing tests where this feature could be easily tested..? Let's build good testing setup in separate PR later.

Next I'll look into adding overrides for other components so that rest of the feature requests can be filled. For example the bottom-left corners "Edit this page" link.

[Nemikolh]

Let's build good testing setup in separate PR later.

I totally agree. In particular I think this would be easy to test if we had playwright or puppeteer configured.

[AriPerkkio]

I totally agree. In particular I think this would be easy to test if we had playwright or puppeteer configured.

Yep! I had something like this in mind:

import { fileURLToPath } from "node:url";
import { beforeAll, expect, test } from "vitest";
import { type Browser, chromium } from "playwright";
import { dev } from "astro";

let browser: Browser;

beforeAll(async () => {
  // Start server
  const server = await dev({
    configFile: false,
    root: fileURLToPath(new URL("./fixtures", import.meta.url)),
    integrations: [
      tutorialkit({
        components: {
          TopBar: "./src/components/CustomTopBar.astro",
        },
      }),
    ],
  });

  // Open browser
  browser = await chromium.launch({ headless: true });

  // Close server
  return async function cleanup() {
    await server.stop();
  };
});

test("custom top bar is visible", async () => {
  const page = await browser.newPage();
  await page.goto("http://localhost:4321/");

  await page.getByRole("heading", {
    level: 1,
    name: "Custom top bar",
  });
});

But TutorialKit had some issues when used from Astro's Node API and changing root.

[Nemikolh]

Looks pretty good and the docs are top notch!! 🤩

Left a few comments, the more important being to consider the impact of doing an eject.

[d3lm]

Nice one!

[AriPerkkio]

Tests on Windows CI were failing but it's fixed now. ✅

[Nemikolh]

Nice, really good work on this!! 🤩