docs: add SQLStack parent branding to website (#1285)

Amp-Thread-ID: https://ampcode.com/threads/T-01a1970a-5e2e-7369-bbfe-0ff96af3a22f

Author: kvlonge

.github/workflows/website.yml

@@ -44,6 +44,12 @@ jobs:
       - name: Check links
         run: python3 scripts/check_links.py dist
 
+      - name: Install browser
+        run: npx playwright install --with-deps chromium
+
+      - name: Check branding and responsive navigation
+        run: npm test
+
       - name: Upload site
         if: github.event_name != 'pull_request'
         uses: actions/upload-pages-artifact@v3

website/.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 dist/
 .astro/
+test-results/
+playwright-report/

website/README.md

@@ -6,6 +6,7 @@ The SQLBuild website: the homepage at `/` and the documentation at `/docs/`, bui
 - `src/content/docs/docs/`: the documentation pages (MDX), first ported from the Mintlify docs and now edited here. `src/navigation.mjs` holds the sidebar and redirects.
 - `src/components/`: the page layout, header and page title, replacing Starlight's defaults. `src/components/mintlify/` has drop-in versions of the Mintlify components the pages use (`Card`, `CardGroup`, `Frame`, `Note`, `Warning`).
 - `public/fonts/`: self-hosted fonts, each with its licence.
+- `public/brand.css`: shared SQLStack attribution styling for the homepage and docs. The SQLStack symbols in `public/assets/sqlstack*.png` are unchanged copies from `sqlstack-io/sqlstack` at revision `9b37b9e128d36930e1fe0c5880606525100b228b` (`assets/icons/sqlstack.png` and `sqlstack-dark.png`).
 
 Search uses Pagefind, and `llms.txt`, `llms-small.txt` and `llms-full.txt` are generated at build time.
 

website/astro.config.mjs

@@ -18,6 +18,7 @@ export default defineConfig({
 			},
 			favicon: '/favicon.png',
 			head: [
+				{ tag: 'link', attrs: { rel: 'stylesheet', href: '/brand.css' } },
 				{ tag: 'meta', attrs: { property: 'og:image', content: 'https://sqlbuild.com/assets/og-sqlbuild-docs.png' } },
 				{ tag: 'meta', attrs: { property: 'og:image:width', content: '1200' } },
 				{ tag: 'meta', attrs: { property: 'og:image:height', content: '630' } },
@@ -35,6 +36,7 @@ export default defineConfig({
 				SiteTitle: './src/components/SiteTitle.astro',
 				Pagination: './src/components/Pagination.astro',
 				ThemeSelect: './src/components/ThemeSelect.astro',
+				Footer: './src/components/Footer.astro',
 			},
 			customCss: ['./src/styles/fonts.css', './src/styles/sqlbuild.css'],
 			expressiveCode: {

website/package-lock.json

@@ -8,13 +8,17 @@
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "test": "playwright test"
   },
   "dependencies": {
     "@astrojs/starlight": "^0.42.4",
     "@lucide/astro": "^1.48.0",
     "astro": "^7.3.5",
     "sharp": "^0.35.4",
     "starlight-llms-txt": "^0.12.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.64.1"
   }
 }

website/package.json

@@ -0,0 +1,14 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	testDir: './tests',
+	use: {
+		baseURL: process.env.SITE_URL || 'http://127.0.0.1:4174',
+		deviceScaleFactor: 2,
+		launchOptions: process.env.CHROME_PATH ? { executablePath: process.env.CHROME_PATH } : {},
+	},
+	webServer: process.env.SITE_URL ? undefined : {
+		command: 'npm run preview -- --host 127.0.0.1 --port 4174 --ignore-lock',
+		url: 'http://127.0.0.1:4174',
+	},
+});

website/playwright.config.mjs

@@ -0,0 +1,67 @@
+/* Shared attribution for the static homepage and Starlight documentation. */
+.brand-group {
+	display: grid;
+	flex-shrink: 0;
+}
+
+.brand-byline {
+	display: flex;
+	align-items: center;
+	min-height: 24px;
+	/* The wordmark starts at x=447 in the unchanged 1626px-wide lockup. */
+	margin-inline-start: 27.5%;
+	color: var(--sqb-muted, var(--muted-foreground));
+	font-size: 11px;
+	line-height: 14px;
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.sqlstack-family {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	margin-top: 20px;
+	padding-top: 20px;
+	border-top: 1px solid var(--sqb-line, var(--inner-line));
+	font-size: 13px;
+}
+
+.sqlstack-parent {
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.sqlstack-parent img {
+	width: 28px;
+	height: auto;
+}
+
+.sqlstack-for-dark,
+:root[data-theme='dark'] .sqlstack-for-light {
+	display: none;
+}
+
+:root[data-theme='dark'] .sqlstack-for-dark {
+	display: block;
+}
+
+.sqlstack-products {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 20px;
+}
+
+.sqlstack-family a {
+	color: var(--sqb-muted, var(--muted-foreground));
+	text-decoration: none;
+}
+
+.brand-byline:hover,
+.sqlstack-family a:hover {
+	color: var(--sqb-fg, var(--foreground));
+	text-decoration: underline;
+}