Separate vanilla and svelte sites

.github/workflows/require-label.yml

@@ -0,0 +1,17 @@
+name: Pull Request Labels
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled, synchronize]
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: mheap/github-action-required-labels@v5
+        with:
+          mode: minimum
+          count: 1
+          labels: |
+            documentation
+            internal
+            bug
+            enhancement

apps/docs/astro.config.mjs

@@ -13,17 +13,19 @@ export default defineConfig({
 			alias: {
 				'@assets': path.resolve(process.cwd(), './src/assets'),
 				'@components': path.resolve(process.cwd(), './src/components'),
+				'@utils': path.resolve(process.cwd(), './src/utils'),
 			},
 		},
 	},
 	integrations: [
 		starlight({
+			routeMiddleware: './src/route-data.ts',
 			components: {
 				SiteTitle: './src/components/SiteTitle.astro',
 				Hero: './src/components/Hero.astro',
 				Footer: './src/components/Footer.astro',
 			},
-			title: '@sheepdog/svelte',
+			title: '@sheepdog',
 			expressiveCode: {
 				themes: ['github-dark-default', 'github-light-default'],
 			},
@@ -60,6 +62,7 @@ export default defineConfig({
 			editLink: {
 				baseUrl: 'https://github.com/mainmatter/sheepdog/edit/main',
 			},
+			// the sidebar is updated in `route-data.ts` to prepend the correct package name
 			sidebar: [
 				{
 					label: 'Getting started',
@@ -143,4 +146,22 @@ export default defineConfig({
 	],
 	output: 'static',
 	adapter: netlify({}),
+	redirects: {
+		'/explainers/async-transform': '/svelte/explainers/async-transform',
+		'/explainers/linking-tasks': '/svelte/explainers/linking-tasks',
+		'/explainers/mid-run-cancellation': '/svelte/explainers/mid-run-cancellation',
+		'/explainers/task-modifiers': '/svelte/explainers/task-modifiers',
+		'/getting-started/installation': '/svelte/getting-started/installation',
+		'/getting-started/usage': '/svelte/getting-started/usage',
+		'/getting-started/what-is-it': '/svelte/getting-started/what-is-it',
+		'/reference/[...all]': '/svelte/reference/[...all]',
+		'/reference/default': '/svelte/reference/default',
+		'/reference/drop': '/svelte/reference/drop',
+		'/reference/enqueue': '/svelte/reference/enqueue',
+		'/reference/keep-latest': '/svelte/reference/keep-latest',
+		'/reference/restart': '/svelte/reference/restart',
+		'/reference/sheepdog-utils': '/svelte/reference/sheepdog-utils',
+		'/reference/task-instance': '/svelte/reference/task-instance',
+		'/reference/transform': '/svelte/reference/transform',
+	},
 });

apps/docs/src/components/Footer.astro

@@ -1,9 +1,9 @@
 ---
-import type { Props } from '@astrojs/starlight/props';
 import Default from '@astrojs/starlight/components/Footer.astro';
 import MainmatterLogo from '../assets/Mainmatter.astro';
+import { is_homepage } from '@utils/is-homepage';
 
-const isHomepage = Astro.locals.starlightRoute.id === '';
+const isHomepage = is_homepage(Astro.locals.starlightRoute.id);
 ---
 
 {

apps/docs/src/components/Hero.astro

@@ -5,7 +5,7 @@ import type { ImageMetadata } from 'astro';
 
 const PAGE_TITLE_ID = '_top';
 const { data } = Astro.locals.starlightRoute.entry;
-const { title = data.title ?? "Sheepdog", tagline, image, actions = [] } = data?.hero ?? {};
+const { tagline, image, actions = [] } = data?.hero ?? {};
 
 const imageAttrs = {
 	loading: 'eager' as const,
@@ -65,6 +65,40 @@ if (image) {
 			isWoofed = !isWoofed;
 		}),
 	);
+
+	const package_span = document.getElementById('package');
+
+	if (package_span) {
+		const packages = package_span?.dataset.packages?.split(',') ?? [];
+
+		let current_package = 0;
+		let current_wrote = 0;
+		let deleting = false;
+
+		function typewrite_package() {
+			if (packages[current_package]) {
+				let time = 100;
+				if (current_wrote < packages[current_package].length && !deleting) {
+					current_wrote++;
+					package_span!.innerHTML = packages[current_package].substring(0, current_wrote);
+					if (current_wrote === packages[current_package].length) {
+						deleting = true;
+						time = 2000;
+					}
+				} else if (current_wrote > 0) {
+					current_wrote--;
+					package_span!.innerHTML = packages[current_package].substring(0, current_wrote);
+					if (current_wrote === 0) {
+						deleting = false;
+						current_package = (current_package + 1) % packages.length;
+					}
+				}
+				setTimeout(typewrite_package, time);
+			}
+		}
+
+		setTimeout(typewrite_package, 100);
+	}
 </script>
 
 <div class="hero">
@@ -82,7 +116,14 @@ if (image) {
 	{rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
 	<div class="sl-flex stack">
 		<div class="sl-flex copy">
-			<h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+			<h1 id={PAGE_TITLE_ID} data-page-title>
+				{Astro.locals.starlightRoute.siteTitle}<span
+					data-woof
+					data-packages={Astro.locals.available_packages
+						.map((pkg) => `/${pkg}`)
+						.join(',')}
+					id="package"></span>
+			</h1>
 			{tagline && <div class="tagline" set:html={tagline} />}
 		</div>
 		{

apps/docs/src/components/SiteTitle.astro

@@ -1,9 +1,8 @@
 ---
-import type { Props } from '@astrojs/starlight/props';
-import Default from '@astrojs/starlight/components/SiteTitle.astro';
 import BuiltBy from '../assets/BuiltBy.astro';
+import { is_homepage } from '@utils/is-homepage.ts';
 
-const isHomepage = Astro.locals.starlightRoute.id === '';
+const isHomepage = is_homepage(Astro.locals.starlightRoute.id);
 ---
 
 {
@@ -13,16 +12,54 @@ const isHomepage = Astro.locals.starlightRoute.id === '';
 			<span class="sr-only">built by Mainmatter</span>
 		</div>
 	) : (
-		<Default {...Astro.props}>
-			<slot />
-		</Default>
+		<div class="select-wrapper">
+			<select name="library-select" id="library-select" />
+		</div>
 	)
 }
 
+<script>
+	const select = document.getElementById('library-select') as HTMLSelectElement;
+	const currentLibrary = window.location.pathname.split('/')[1];
+
+	let options = [
+		{ value: 'svelte', text: '@sheepdog/svelte' },
+		{ value: 'vanilla', text: '@sheepdog/vanilla' },
+	];
+
+	if (select) {
+		const currentPage = options.splice(
+			options.findIndex((option) => option.value === currentLibrary),
+			1,
+		)[0];
+		options.unshift(currentPage);
+		options.forEach((page) => {
+			const option = document.createElement('option');
+			option.value = page.value;
+			option.textContent = page.text;
+			select.appendChild(option);
+		});
+		select.value = currentLibrary;
+		select.addEventListener('change', function (event) {
+			const value = (event.target as HTMLSelectElement).value;
+			location.href = `/${value}/getting-started/what-is-it`;
+		});
+	}
+</script>
+
 <style>
 	.built-by > :global(svg) {
-			height: 2.5rem;
-			width: auto;
-			display: block;
+		height: 2.5rem;
+		width: auto;
+		display: block;
+	}
+
+	.select-wrapper select {
+		padding: 0.5rem 0 0.5rem 0.5rem;
+		border-radius: 0.5rem;
+		border: var(--sl-color-hairline-light) 1px solid;
+		/* -webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none; */
 	}
-</style>
+</style>