feat: add dedicated home page and automatic dark mode

site/tests/browser/fonts.spec.ts

@@ -31,7 +31,7 @@ test('self-hosted Lyth Mono and EB Garamond load with the configured base', asyn
   expect(external).toEqual([]);
   await page.keyboard.press('Escape');
   await expect(page.locator('[data-landing-stage]')).toHaveAttribute('data-phase', 'complete');
-  await expect(page.locator('[data-selected-content] h1')).toHaveText('1. コンセプト');
+  await expect(page.locator('[data-selected-content]').getByRole('heading', { level: 1, name: 'WIP', exact: true })).toBeVisible();
   expect(await page.locator('[data-selected-content]').evaluate((element) => getComputedStyle(element).fontFamily)).toContain('EB Garamond');
   await page.locator('[data-selected-content]').screenshot({ path: testInfo.outputPath('eb-garamond-selected-content.png') });
   const tree = await page.locator('.tree-pane').elementHandle();
@@ -96,6 +96,25 @@ test.describe('static font and tree rendering', () => {
       expect(columns.slice(gapStart, gapEnd).every((ink) => ink > 710), JSON.stringify(columns)).toBe(true);
     }
   });
+  test('node names start exactly one space after the branch', async ({ page }) => {
+    await page.goto('./');
+    await page.evaluate(() => document.fonts.ready);
+    const spacing = await page.locator('.demo-node:not(.root-mark)').evaluateAll((nodes) => nodes.map((node) => {
+      const svg = node.parentElement!.querySelector<SVGSVGElement>('.branch-vector')!;
+      const width = svg.viewBox.baseVal.width;
+      const cell = Number(svg.dataset.cellWidth);
+      const matrix = svg.getScreenCTM()!;
+      const branchEnd = new DOMPoint(width - cell, 12).matrixTransform(matrix).x;
+      const prefixEnd = new DOMPoint(width, 12).matrixTransform(matrix).x;
+      const label = node.querySelector('.node-label')!.getBoundingClientRect();
+      return { padding: getComputedStyle(node).paddingLeft, gap: label.left - branchEnd, space: prefixEnd - branchEnd };
+    }));
+    expect(spacing.length).toBeGreaterThan(0);
+    for (const { padding, gap, space } of spacing) {
+      expect(padding).toBe('0px');
+      expect(Math.abs(gap - space)).toBeLessThan(.1);
+    }
+  });
   test('the same SVG trunk and Lyth Mono joins are visible without JavaScript', async ({ page }, testInfo) => {
     await page.goto('./');
     await expect(page.locator('html')).not.toHaveAttribute('data-landing');
@@ -106,7 +125,7 @@ test.describe('static font and tree rendering', () => {
     await expect(page.locator('.branch-prefix').first().locator('use')).toHaveCount(3);
     await expect(page.locator('.branch-prefix').first().locator('.branch-spine use')).toHaveAttribute('href', '#tree-glyph-9492');
     await expect(page.locator('.tree-glyphs defs path')).toHaveCount(5);
-    await expect(page.getByRole('link', { name: 'Book', exact: true })).toBeVisible();
+    await expect(page.locator('.site-header').getByRole('link', { name: 'Book', exact: true })).toBeVisible();
     expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
     await page.screenshot({ path: testInfo.outputPath('lyth-mono-static.png') });
   });