diff --git a/.kronk/claude/CLAUDE.md b/.kronk/claude/CLAUDE.md new file mode 100644 index 0000000..c02ed93 --- /dev/null +++ b/.kronk/claude/CLAUDE.md @@ -0,0 +1,182 @@ +# ONYXSimple - Claude Development Guide + +This document provides context and guidelines for Claude when working on this project. + +## Project Overview + +This is a **Next.js** project managed with Kronk CMS. + +## Framework: Next.js + +### Configuration +Config file: next.config.ts + +### Content Structure +- App Router: 0 files + +### Package Manager: NPM + +### Next.js-Specific Information +Router: App Router (recommended) + +### Next.js Commands +- `npm run dev` - Start dev server +- `npm run build` - Build for production +- `npm run start` - Start production server +- `npm run lint` - Run ESLint + + +## Development Guidelines + +### Code Style + +- Follow existing code patterns and conventions in the codebase +- Use consistent naming conventions +- Write clear, self-documenting code +- Add comments only where the logic is not self-evident + +### Content Management + +- Content files use front matter for metadata (YAML format) +- Respect the existing content structure and collections +- When creating new content, use appropriate templates + +### Next.js-Specific Guidelines + +- Use App Router conventions (`app/` directory) +- Server Components by default, use 'use client' for client components +- Use `next/image` for optimized images +- API routes go in `app/api/` + +## Key Files and Directories + +``` +pages/ # Content files +app/ # Content files +src/pages/ # Content files +src/app/ # Content files +next.config.js # Configuration +next.config.mjs # Configuration +next.config.ts # Configuration +.kronk/ # Kronk CMS configuration +``` + +## Common Tasks + +When working on this project, you may be asked to: + +1. **Create new content** - Use the appropriate content directory and front matter format +2. **Modify layouts** - Follow existing patterns and component structure +3. **Update configuration** - Be careful with site-wide settings +4. **Add features** - Consider the framework's conventions and best practices + +## AI Guardrails & Design Standards + +These standards guide AI-assisted content and code generation. + +### Design Standards + +### Brand Colors + +No brand colors defined. + +### Typography + +**Font Families:** +- System UI +- sans-serif + +**Font Sizes:** 12px, 14px, 16px, 20px, 24px, 32px, 48px + +**Font Weights:** 400 (normal), 500 (medium), 700 (bold) + +**Line Heights:** 1.2, 1.5, 1.75, 2.0 + +### Spacing Scale + +**Margins:** 4px, 8px, 16px, 24px, 32px, 48px, 64px + +**Paddings:** 4px, 8px, 16px, 24px, 32px, 48px, 64px + +### Border Radius + +- Small: 2px +- Medium: 4px +- Large: 8px + +### Shadows + +- **small**: `0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)` +- **medium**: `0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)` +- **large**: `0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)` + +### Accessibility Requirements + +### WCAG Compliance Level + +Target: **WCAG Level AA** + +### Requirements + +- **Alt Text**: Required for all images +- **Minimum Contrast Ratio**: 4.5:1 +- **Keyboard Navigation**: Required for all interactive elements +- **ARIA Labels**: Required for semantic markup + +### Guidelines + +- All interactive elements must be keyboard accessible +- Color contrast must meet or exceed 4.5:1 ratio +- Semantic HTML should be used (nav, main, article, aside, etc.) +- Form inputs must have associated labels +- Focus indicators must be visible and clear + +### SEO Guidelines + +### Meta Information + +- **Meta Description Length**: 140-160 characters +- **Title Format**: `{title} | {siteName}` + +### Content Structure + +- **Heading Hierarchy**: Required (H1 → H2 → H3, no skipping levels) +- **Sitemap**: Required (sitemap.xml must be generated) +- **Structured Data**: Optional + +### Best Practices + +- Each page should have one unique H1 heading +- Meta descriptions should be compelling and include target keywords +- URLs should be descriptive and use hyphens (not underscores) +- Images should include descriptive filenames and alt text +- Internal linking should be used to connect related content + +### Performance Budgets + +### Page Performance Budgets + +- **Maximum Page Size**: 1500KB +- **Maximum Image Size**: 200KB +- **Target Load Time**: 3.0s (on 3G connection) + +### Lighthouse Score Targets + +- **Performance**: 90/100 +- **Accessibility**: 95/100 +- **Best Practices**: 95/100 +- **SEO**: 95/100 + +### Optimization Guidelines + +- Use lazy loading for images below the fold +- Minimize and compress CSS/JS assets +- Use modern image formats (WebP, AVIF) +- Implement proper caching headers +- Use a CDN for static assets +- Minimize third-party scripts +- Optimize font loading with font-display: swap + +--- + +*Generated by Kronk CMS* diff --git a/.kronk/cursor/.cursorrules b/.kronk/cursor/.cursorrules new file mode 100644 index 0000000..198aac1 --- /dev/null +++ b/.kronk/cursor/.cursorrules @@ -0,0 +1,151 @@ +# Cursor Rules for ONYXSimple + +You are working on a Next.js project managed with Kronk CMS. + +## General Rules + +- Follow existing code patterns and conventions +- Write clean, maintainable code +- Use TypeScript/JavaScript best practices where applicable +- Prefer functional programming patterns +- Keep components small and focused + +## Next.js Rules + +- Use Server Components by default +- 'use client' only when necessary +- App Router file conventions +- Use next/image for images +- Metadata API for SEO + +## Content Rules + +- Front matter must be valid YAML/TOML/JSON +- Use consistent date formats +- Tags and categories should be lowercase +- Slugs should be URL-friendly +- Images should have alt text + +## Code Patterns + +When generating code: + +- Match existing file naming conventions +- Use existing component patterns +- Follow the project's directory structure +- Include appropriate error handling +- Add types where TypeScript is used + +## Avoid + +- Breaking changes to existing content structure +- Hardcoded URLs or paths +- Inline styles (use CSS/Tailwind) +- Console.log in production code +- Committing sensitive data + +## AI Guardrails & Design Standards + +### Design Standards + +### Brand Colors + +No brand colors defined. + +### Typography + +**Font Families:** +- System UI +- sans-serif + +**Font Sizes:** 12px, 14px, 16px, 20px, 24px, 32px, 48px + +**Font Weights:** 400 (normal), 500 (medium), 700 (bold) + +**Line Heights:** 1.2, 1.5, 1.75, 2.0 + +### Spacing Scale + +**Margins:** 4px, 8px, 16px, 24px, 32px, 48px, 64px + +**Paddings:** 4px, 8px, 16px, 24px, 32px, 48px, 64px + +### Border Radius + +- Small: 2px +- Medium: 4px +- Large: 8px + +### Shadows + +- **small**: `0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)` +- **medium**: `0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)` +- **large**: `0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)` + +### Accessibility Requirements + +### WCAG Compliance Level + +Target: **WCAG Level AA** + +### Requirements + +- **Alt Text**: Required for all images +- **Minimum Contrast Ratio**: 4.5:1 +- **Keyboard Navigation**: Required for all interactive elements +- **ARIA Labels**: Required for semantic markup + +### Guidelines + +- All interactive elements must be keyboard accessible +- Color contrast must meet or exceed 4.5:1 ratio +- Semantic HTML should be used (nav, main, article, aside, etc.) +- Form inputs must have associated labels +- Focus indicators must be visible and clear + +### SEO Guidelines + +### Meta Information + +- **Meta Description Length**: 140-160 characters +- **Title Format**: `{title} | {siteName}` + +### Content Structure + +- **Heading Hierarchy**: Required (H1 → H2 → H3, no skipping levels) +- **Sitemap**: Required (sitemap.xml must be generated) +- **Structured Data**: Optional + +### Best Practices + +- Each page should have one unique H1 heading +- Meta descriptions should be compelling and include target keywords +- URLs should be descriptive and use hyphens (not underscores) +- Images should include descriptive filenames and alt text +- Internal linking should be used to connect related content + +### Performance Budgets + +### Page Performance Budgets + +- **Maximum Page Size**: 1500KB +- **Maximum Image Size**: 200KB +- **Target Load Time**: 3.0s (on 3G connection) + +### Lighthouse Score Targets + +- **Performance**: 90/100 +- **Accessibility**: 95/100 +- **Best Practices**: 95/100 +- **SEO**: 95/100 + +### Optimization Guidelines + +- Use lazy loading for images below the fold +- Minimize and compress CSS/JS assets +- Use modern image formats (WebP, AVIF) +- Implement proper caching headers +- Use a CDN for static assets +- Minimize third-party scripts +- Optimize font loading with font-display: swap + diff --git a/next-env.d.ts b/next-env.d.ts index c4b7818..9edff1c 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/package.json b/package.json index a65d50d..7d336f6 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,13 @@ "lint:fix": "cross-env NODE_OPTIONS=--no-deprecation eslint . --fix", "payload": "cross-env NODE_OPTIONS=--no-deprecation payload", "reinstall": "cross-env NODE_OPTIONS=--no-deprecation rm -rf node_modules && rm pnpm-lock.yaml && pnpm --ignore-workspace install", - "start": "cross-env NODE_OPTIONS=--no-deprecation next start", + "start": "cross-env NODE_OPTIONS=--no-deprecation next start -p 3099", "test": "pnpm run test:int && pnpm run test:e2e", "test:e2e": "cross-env NODE_OPTIONS=\"--no-deprecation --import=tsx/esm\" playwright test --config=playwright.config.ts", - "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts" + "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts", + "predeploy": "bun run build", + "deploy": "rsync -ruhvP --exclude=node_modules ./ onyxsimple@jmf-usrv-2404:/home/onyxsimple/webroot/", + "postdeploy": "ssh onyxsimple@jmf-usrv-2404 \"systemctl --user try-reload-or-restart onyxsimple-site.service\"" }, "dependencies": { "@awesome.me/kit-3dc4522338": "^1.0.4", diff --git a/public/favicon.svg b/public/favicon.svg index d7ccc5a..25ca3c5 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,23 +1,48 @@ - - - - - - - \ No newline at end of file + diff --git a/public/favicon.svg.bak b/public/favicon.svg.bak new file mode 100644 index 0000000..d7ccc5a --- /dev/null +++ b/public/favicon.svg.bak @@ -0,0 +1,23 @@ + + + + + + + \ No newline at end of file diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..885561c --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,11 @@ +# * +User-agent: * +Disallow: /admin/* + +# Host +Host: https://example.com + +# Sitemaps +Sitemap: https://example.com/sitemap.xml +Sitemap: https://example.com/pages-sitemap.xml +Sitemap: https://example.com/posts-sitemap.xml diff --git a/public/sitemap.xml b/public/sitemap.xml new file mode 100644 index 0000000..32e60e6 --- /dev/null +++ b/public/sitemap.xml @@ -0,0 +1,5 @@ + + +https://example.com/pages-sitemap.xml +https://example.com/posts-sitemap.xml + \ No newline at end of file diff --git a/src/app/(frontend)/globals.css b/src/app/(frontend)/globals.css index d20d2e4..2889eb3 100644 --- a/src/app/(frontend)/globals.css +++ b/src/app/(frontend)/globals.css @@ -231,7 +231,7 @@ html[data-theme='light'] { @layer animations { @keyframes marquee { 0% { - transform: translateX(0%); + transform: translateX(0); } 100% { transform: translateX(-50%); @@ -239,10 +239,11 @@ html[data-theme='light'] { } .animate-marquee { - animation: marquee 25s linear infinite; + animation: marquee var(--marquee-duration, 25s) linear infinite; + will-change: transform; } - .animate-marquee:hover { + .marquee-scroll:hover .animate-marquee { animation-play-state: paused; } } diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx index 1e53bf5..0bc84ca 100644 --- a/src/app/(frontend)/layout.tsx +++ b/src/app/(frontend)/layout.tsx @@ -1,34 +1,44 @@ -import type { Metadata } from 'next' +import type { Metadata } from "next"; -import { cn } from '@/utilities/ui' -import { GeistMono } from 'geist/font/mono' -import { GeistSans } from 'geist/font/sans' -import React from 'react' +import { cn } from "@/utilities/ui"; +import { GeistMono } from "geist/font/mono"; +import { GeistSans } from "geist/font/sans"; +import React from "react"; -import { AdminBar } from '@/components/AdminBar' -import { Footer } from '@/Footer/Component' -import { Header } from '@/Header/Component' -import { Providers } from '@/providers' -import { InitTheme } from '@/providers/Theme/InitTheme' -import { mergeOpenGraph } from '@/utilities/mergeOpenGraph' -import { draftMode } from 'next/headers' +import { AdminBar } from "@/components/AdminBar"; +import { Footer } from "@/Footer/Component"; +import { Header } from "@/Header/Component"; +import { Providers } from "@/providers"; +import { InitTheme } from "@/providers/Theme/InitTheme"; +import { mergeOpenGraph } from "@/utilities/mergeOpenGraph"; +import { draftMode } from "next/headers"; -import './globals.css' -import { getServerSideURL } from '@/utilities/getURL' +import "./globals.css"; +import { getServerSideURL } from "@/utilities/getURL"; -export default async function RootLayout({ children }: { children: React.ReactNode }) { - const { isEnabled } = await draftMode() +export default async function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + const { isEnabled } = await draftMode(); return ( - + - - - + + {/* */} + - + href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" + /> @@ -44,14 +54,14 @@ export default async function RootLayout({ children }: { children: React.ReactNo - ) + ); } export const metadata: Metadata = { metadataBase: new URL(getServerSideURL()), openGraph: mergeOpenGraph(), twitter: { - card: 'summary_large_image', - creator: '@payloadcms', + card: "summary_large_image", + creator: "@payloadcms", }, -} +}; diff --git a/src/app/(frontend)/posts/page.tsx b/src/app/(frontend)/posts/page.tsx index 5cf1389..5a87b79 100644 --- a/src/app/(frontend)/posts/page.tsx +++ b/src/app/(frontend)/posts/page.tsx @@ -58,6 +58,6 @@ export default async function Page() { export function generateMetadata(): Metadata { return { - title: `Payload Website Template Posts`, + title: `ONYXSimple Posts`, } } diff --git a/src/app/(frontend)/posts/page/[pageNumber]/page.tsx b/src/app/(frontend)/posts/page/[pageNumber]/page.tsx index e55131d..ac3230c 100644 --- a/src/app/(frontend)/posts/page/[pageNumber]/page.tsx +++ b/src/app/(frontend)/posts/page/[pageNumber]/page.tsx @@ -65,7 +65,7 @@ export default async function Page({ params: paramsPromise }: Args) { export async function generateMetadata({ params: paramsPromise }: Args): Promise { const { pageNumber } = await paramsPromise return { - title: `Payload Website Template Posts Page ${pageNumber || ''}`, + title: `ONYXSimple Posts Page ${pageNumber || ''}`, } } diff --git a/src/app/(frontend)/search/page.tsx b/src/app/(frontend)/search/page.tsx index 46bf2b1..5ab6e25 100644 --- a/src/app/(frontend)/search/page.tsx +++ b/src/app/(frontend)/search/page.tsx @@ -83,6 +83,6 @@ export default async function Page({ searchParams: searchParamsPromise }: Args) export function generateMetadata(): Metadata { return { - title: `Payload Website Template Search`, + title: `ONYXSimple Search`, } } diff --git a/src/components/BeforeLogin/index.tsx b/src/components/BeforeLogin/index.tsx index 8768831..5e3ee72 100644 --- a/src/components/BeforeLogin/index.tsx +++ b/src/components/BeforeLogin/index.tsx @@ -3,10 +3,10 @@ import React from 'react' const BeforeLogin: React.FC = () => { return (
-

+ {/*

Welcome to your dashboard! {' This is where site admins will log in to manage your website.'} -

+

*/}
) } diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx index 797e636..7886720 100644 --- a/src/components/Logo/Logo.tsx +++ b/src/components/Logo/Logo.tsx @@ -16,7 +16,7 @@ export const Logo = (props: Props) => { return ( /* eslint-disable @next/next/no-img-element */ Payload Logo = { format: 0, mode: 'normal', style: '', - text: 'Payload Website Template', + text: 'ONYXSimple', version: 1, }, ], @@ -81,7 +81,7 @@ export const homeStatic: RequiredDataFromCollectionSlug<'pages'> = { }, meta: { description: 'An open-source website built with Payload and Next.js.', - title: 'Payload Website Template', + title: 'ONYXSimple', }, title: 'Home', layout: [], diff --git a/src/endpoints/seed/home.ts b/src/endpoints/seed/home.ts index 5b7bef3..fef41c1 100644 --- a/src/endpoints/seed/home.ts +++ b/src/endpoints/seed/home.ts @@ -47,7 +47,7 @@ export const home: (args: HomeArgs) => RequiredDataFromCollectionSlug<'pages'> = format: 0, mode: 'normal', style: '', - text: 'Payload Website Template', + text: 'ONYXSimple', version: 1, }, ], @@ -668,7 +668,7 @@ export const home: (args: HomeArgs) => RequiredDataFromCollectionSlug<'pages'> = meta: { description: 'An open-source website built with Payload and Next.js.', image: heroImage.id, - title: 'Payload Website Template', + title: 'ONYXSimple', }, title: 'Home', } diff --git a/src/heros/HighImpact/index.tsx b/src/heros/HighImpact/index.tsx index d6b2369..40d9ffa 100644 --- a/src/heros/HighImpact/index.tsx +++ b/src/heros/HighImpact/index.tsx @@ -1,6 +1,6 @@ "use client"; import { useHeaderTheme } from "@/providers/HeaderTheme"; -import React, { useEffect } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import type { Page } from "@/payload-types"; @@ -10,18 +10,86 @@ import RichText from "@/components/RichText"; export const HighImpactHero: React.FC = ({ links, media, richText, marquee }) => { const { setHeaderTheme } = useHeaderTheme(); + const marqueeScrollRef = useRef(null); + const marqueeBaseRef = useRef(null); + const marqueeSegmentRef = useRef(null); + const [marqueeRepeatCount, setMarqueeRepeatCount] = useState(2); + const [marqueeDuration, setMarqueeDuration] = useState(42); + + const marqueeItems = useMemo(() => { + if (!marquee || typeof marquee !== "object" || !Array.isArray(marquee.marqueeItems)) { + return []; + } + + return marquee.marqueeItems; + }, [marquee]); + + const repeatedMarqueeItems = useMemo(() => { + if (marqueeItems.length === 0) { + return []; + } + + return Array.from({ length: marqueeRepeatCount }, () => marqueeItems).flat(); + }, [marqueeItems, marqueeRepeatCount]); useEffect(() => { setHeaderTheme("dark"); }); + useEffect(() => { + if (marqueeItems.length === 0) { + return; + } + + const updateMarqueeMetrics = () => { + const scrollEl = marqueeScrollRef.current; + const baseEl = marqueeBaseRef.current; + const segmentEl = marqueeSegmentRef.current; + + if (!scrollEl || !baseEl) { + return; + } + + const viewportWidth = scrollEl.clientWidth; + const baseWidth = baseEl.scrollWidth; + + if (viewportWidth <= 0 || baseWidth <= 0) { + return; + } + + const nextRepeatCount = Math.max(2, Math.ceil((viewportWidth * 1.5) / baseWidth)); + + setMarqueeRepeatCount(prev => (prev !== nextRepeatCount ? nextRepeatCount : prev)); + }; + + updateMarqueeMetrics(); + + const resizeObserver = new ResizeObserver(updateMarqueeMetrics); + + if (marqueeScrollRef.current) { + resizeObserver.observe(marqueeScrollRef.current); + } + + if (marqueeBaseRef.current) { + resizeObserver.observe(marqueeBaseRef.current); + } + + if (marqueeSegmentRef.current) { + resizeObserver.observe(marqueeSegmentRef.current); + } + + return () => { + resizeObserver.disconnect(); + }; + }, [marqueeItems, marqueeRepeatCount]); + return (
-
+
{richText && } {Array.isArray(links) && links.length > 0 && (
    @@ -41,19 +109,34 @@ export const HighImpactHero: React.FC = ({ links, media, richText, )} { - marquee && typeof marquee === "object" && Array.isArray(marquee.marqueeItems) && marquee.marqueeItems.length > 0 && ( -
    -
      - {marquee.marqueeItems.concat(marquee.marqueeItems).concat(marquee.marqueeItems).concat(marquee.marqueeItems).concat(marquee.marqueeItems).map((item, idx) => ( + marqueeItems.length > 0 && ( +
      +
        + {marqueeItems.map((item, idx) => (
      • { item.itemClassName ? ( - ) : item.itemMedia ? ( + ) : item.itemMedia ? ( ) : item.itemLabel }
        • ))}
      +
      + {[1, 2].map(i => ( +
        + {repeatedMarqueeItems.map((item, idx) => ( +
      • { + item.itemClassName ? ( + ) : item.itemMedia ? ( + ) : item.itemLabel + }
        • + ))} +
      + ))} +
      ) } diff --git a/src/plugins/index.ts b/src/plugins/index.ts index 23cb672..e68c728 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -14,7 +14,7 @@ import { Page, Post } from '@/payload-types' import { getServerSideURL } from '@/utilities/getURL' const generateTitle: GenerateTitle = ({ doc }) => { - return doc?.title ? `${doc.title} | Payload Website Template` : 'Payload Website Template' + return doc?.title ? `${doc.title} | ONYXSimple` : 'ONYXSimple' } const generateURL: GenerateURL = ({ doc }) => { diff --git a/src/utilities/generateMeta.ts b/src/utilities/generateMeta.ts index 7395c87..c35539c 100644 --- a/src/utilities/generateMeta.ts +++ b/src/utilities/generateMeta.ts @@ -27,8 +27,8 @@ export const generateMeta = async (args: { const ogImage = getImageURL(doc?.meta?.image) const title = doc?.meta?.title - ? doc?.meta?.title + ' | Payload Website Template' - : 'Payload Website Template' + ? doc?.meta?.title + ' | ONYXSimple' + : 'ONYXSimple' return { description: doc?.meta?.description, diff --git a/src/utilities/mergeOpenGraph.ts b/src/utilities/mergeOpenGraph.ts index a331a2a..f3da477 100644 --- a/src/utilities/mergeOpenGraph.ts +++ b/src/utilities/mergeOpenGraph.ts @@ -9,8 +9,8 @@ const defaultOpenGraph: Metadata['openGraph'] = { url: `${getServerSideURL()}/website-template-OG.webp`, }, ], - siteName: 'Payload Website Template', - title: 'Payload Website Template', + siteName: 'ONYXSimple', + title: 'ONYXSimple', } export const mergeOpenGraph = (og?: Metadata['openGraph']): Metadata['openGraph'] => { diff --git a/tests/e2e/frontend.e2e.spec.ts b/tests/e2e/frontend.e2e.spec.ts index 46495d5..0c59dcb 100644 --- a/tests/e2e/frontend.e2e.spec.ts +++ b/tests/e2e/frontend.e2e.spec.ts @@ -10,8 +10,8 @@ test.describe('Frontend', () => { test('can load homepage', async ({ page }) => { await page.goto('http://localhost:3000') - await expect(page).toHaveTitle(/Payload Website Template/) + await expect(page).toHaveTitle(/ONYXSimple/) const heading = page.locator('h1').first() - await expect(heading).toHaveText('Payload Website Template') + await expect(heading).toHaveText('ONYXSimple') }) })