add Playwright to the website and unify styles (#4222)

* Downgrade Tailwind to 3.4.17 to fix the website

* Add Playwright config

* Move metadata to another file because Next loads layout modules out of order now

* Add Hive fonts

* Use HiveLayout

* Assert website renders

* Make the logo match designs

* Bump Tailwind again

* Prevent dedupe

* Fix lint errors

---------

Co-authored-by: Arda TANRIKULU <[email protected]>

Author: hasparus

pnpm-lock.yaml

@@ -1,3 +1,5 @@
 .next/
 public/sitemap*.xml
 public/_redirects
+.playwright-artifacts/
+playwright-report/

website/.gitignore

@@ -10,7 +10,8 @@
     "dev": "next --turbopack",
     "pagefind": "pagefind --site .next/server/app --output-path out/_pagefind",
     "postbuild": "next-sitemap && tsx scripts/sitemap-ci && pnpm pagefind",
-    "start": "next start"
+    "start": "next start",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@theguild/components": "9.10.0",
@@ -23,6 +24,7 @@
     "unist-util-visit-parents": "^6.0.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.1",
     "@theguild/tailwind-config": "0.6.4",
     "@types/node": "24.7.1",
     "@types/react": "19.2.2",

website/package.json

@@ -0,0 +1,34 @@
+import { resolve } from 'node:path';
+import { defineConfig, devices } from '@playwright/test';
+
+const __dirname = new URL('.', import.meta.url).pathname;
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: resolve(__dirname, 'test/e2e'),
+  outputDir: resolve(__dirname, 'test/e2e/output'),
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

website/playwright.config.ts

@@ -14,7 +14,7 @@ import {
   ToolsAndLibrariesCards,
   YogaIcon,
 } from '@theguild/components';
-import { metadata as rootMetadata } from '../layout';
+import { rootMetadata } from '../metadata';
 import { PracticeYogaSection } from './practice-yoga-section';
 // import FAQ from './faq.mdx';
 import { ReachZenQuickerWithYoga } from './reach-zen-quicker-with-yoga';

website/src/app/(landing-pages)/page.tsx

@@ -0,0 +1,7 @@
+.light ::selection {
+  @apply !bg-blue-500/20;
+}
+
+body {
+  --nextra-content-width: 92rem;
+}

website/src/app/global.css

@@ -1,28 +1,45 @@
 import { FC, ReactNode } from 'react';
-import { GitHubIcon, PaperIcon, PencilIcon, PRODUCTS } from '@theguild/components';
-import { getDefaultMetadata, getPageMap, GuildLayout } from '@theguild/components/server';
+import localFont from 'next/font/local';
+import {
+  Anchor,
+  GitHubIcon,
+  HiveFooter,
+  HiveNavigation,
+  ListIcon,
+  PaperIcon,
+  PencilIcon,
+  PRODUCTS,
+  YogaIcon,
+} from '@theguild/components';
+import { getPageMap, HiveLayout } from '@theguild/components/server';
 import '@theguild/components/style.css';
 import { pageMap as changelogsPageMap } from './changelogs/[...slug]/page';
+import { rootMetadata, websiteDescription } from './metadata';
 import { pageMap as v2PageMap } from './v2/[[...slug]]/page';
 import { pageMap as v3PageMap } from './v3/[[...slug]]/page';
 import { pageMap as v4PageMap } from './v4/[[...slug]]/page';
 import { VersionDropdown } from './version-dropdown.client';
 import { VersionedSearch } from './versioned-search';
+import './global.css';
+import { Metadata } from 'next';
 
-const description = PRODUCTS.YOGA.title;
-const websiteName = 'Yoga';
+export const metadata: Metadata = rootMetadata;
 
-export const metadata = getDefaultMetadata({
-  description,
-  websiteName,
-  productName: 'YOGA',
+const neueMontreal = localFont({
+  src: [
+    { path: '../fonts/PPNeueMontreal-Regular.woff2', weight: '400' },
+    { path: '../fonts/PPNeueMontreal-Medium.woff2', weight: '500' },
+    // Medium is actually 530, so we use it both for 500 and 600
+    { path: '../fonts/PPNeueMontreal-Medium.woff2', weight: '600' },
+    { path: '../fonts/PPNeueMontreal-SemiBold.woff2', weight: '700' },
+  ],
 });
 
 const RootLayout: FC<{
   children: ReactNode;
 }> = async ({ children }) => {
-  let [meta, ...pageMap] = await getPageMap();
-  pageMap = [
+  let [meta, ..._pageMap] = await getPageMap();
+  _pageMap = [
     {
       data: {
         // @ts-expect-error -- ignore
@@ -33,56 +50,71 @@ const RootLayout: FC<{
         v4: { type: 'page', title: 'Yoga 4 Docs' },
       },
     },
-    ...pageMap,
+    ..._pageMap,
     { route: '/changelogs', name: 'changelogs', children: changelogsPageMap },
     { route: '/v4', name: 'v4', children: v4PageMap },
     { route: '/v3', name: 'v3', children: v3PageMap },
     { route: '/v2', name: 'v2', children: v2PageMap },
   ];
+
   return (
-    <GuildLayout
-      htmlProps={{
-        // Override nav width
-        className: '[&>.light_#h-navmenu-container]:max-w-[1392px]',
-      }}
-      websiteName={websiteName}
-      description={description}
-      logo={<PRODUCTS.YOGA.logo className="w-8 h-auto" />}
-      layoutProps={{
-        docsRepositoryBase: 'https://github.com/graphql-hive/graphql-yoga/tree/main/website',
-      }}
-      pageMap={pageMap}
-      navbarProps={{
-        navLinks: [{ href: '/tutorial', children: 'Tutorial' }],
-        developerMenu: [
-          {
-            href: '/docs',
-            icon: <PaperIcon />,
-            children: 'Documentation',
-          },
-          {
-            href: 'https://the-guild.dev/graphql/hive/blog',
-            icon: <PencilIcon />,
-            children: 'Blog',
-          },
-          {
-            href: 'https://github.com/graphql-hive/graphql-yoga',
-            icon: <GitHubIcon />,
-            children: 'GitHub',
-          },
-          {
-            href: '/changelog',
-            icon: null,
-            children: 'Changelog',
-          },
-        ],
-        children: <VersionDropdown />,
-      }}
-      search={<VersionedSearch />}
+    <HiveLayout
+      className="[&>.light_#h-navmenu-container]:max-w-[1392px]"
+      fontFamily={neueMontreal.style.fontFamily}
+      docsRepositoryBase="https://github.com/graphql-hive/graphql-yoga/tree/main/website"
+      head={null}
       lightOnlyPages={['/']}
+      navbar={
+        <HiveNavigation
+          productName={PRODUCTS.YOGA.name}
+          logo={
+            <Anchor href="/" className="hive-focus -m-2 flex items-center rounded-md p-2 gap-2">
+              <YogaIcon className="size-8 shrink-0" />
+              <span className="text-2xl font-medium tracking-[-0.16px]">Yoga</span>
+            </Anchor>
+          }
+          navLinks={[{ href: '/tutorial', children: 'Tutorial' }]}
+          developerMenu={[
+            {
+              href: '/docs',
+              icon: <PaperIcon />,
+              children: 'Documentation',
+            },
+            {
+              href: 'https://the-guild.dev/graphql/hive/blog',
+              icon: <PencilIcon />,
+              children: 'Blog',
+            },
+            {
+              href: '/changelog',
+              icon: <ListIcon />,
+              children: 'Changelog',
+            },
+            {
+              href: 'https://github.com/graphql-hive/graphql-yoga',
+              icon: <GitHubIcon />,
+              children: 'GitHub',
+            },
+          ]}
+          search={<VersionedSearch />}
+        >
+          <VersionDropdown />
+        </HiveNavigation>
+      }
+      footer={
+        <HiveFooter
+          logo={
+            <div className="flex gap-2">
+              <YogaIcon className="size-8 shrink-0" />
+              <span className="text-2xl font-medium tracking-[-0.16px]">Yoga</span>
+            </div>
+          }
+          description={websiteDescription}
+        />
+      }
     >
       {children}
-    </GuildLayout>
+    </HiveLayout>
   );
 };
 

website/src/app/layout.tsx

@@ -0,0 +1,11 @@
+import { PRODUCTS } from '@theguild/components/products';
+import { getDefaultMetadata } from '@theguild/components/server';
+
+export const websiteName = 'Yoga';
+export const websiteDescription = PRODUCTS.YOGA.title;
+
+export const rootMetadata = getDefaultMetadata({
+  description: websiteDescription,
+  websiteName,
+  productName: 'YOGA',
+});