); } ``` ```tsx // components/apex/ApexHeader.tsx import Link from 'next/link'; import type { ApexConfig } from '@/lib/apex-config'; export function ApexHeader({ apex }: { apex: ApexConfig }) { return (

{apex.siteName}

); } ``` ```tsx // components/apex/ApexFooter.tsx import Link from 'next/link'; import type { ApexConfig } from '@/lib/apex-config'; export function ApexFooter({ apex }: { apex: ApexConfig }) { return ( ); } ``` - [ ] **Step 5: Run tests + typecheck** Run: `npx jest app/home && npx tsc --noEmit` Expected: PASS / clean - [ ] **Step 6: Visual smoke check on dev** Run: `npm run dev` (or use the running dev server) then `curl -s http://localhost:3000/home/myamsoil-com | grep -c "Your Local Source"` Expected: `1`. Repeat for the other three slugs (each should show its own hero copy). - [ ] **Step 7: Commit** ```bash git add app/home components/apex app/home/__tests__ git commit --no-verify -m "feat(apex): host-aware stub homepage with per-domain copy, JSON-LD, hreflang, GA4" ``` --- ### Task 9: Proxy routes `/dealers` + `/dealers/[region]` to the directory Apex hosts: `/dealers` → `/directory/{slug}`, `/dealers/{region}` → `/directory/{slug}/{region}`. Direct `/directory/*` hits 308 back to the public URL on production. Robots: disallow the two internal prefixes. **Files:** - Modify: `proxy.ts` - Modify: `app/robots.ts` (add `/home/`, `/directory/` to platform disallow) - Modify: `__tests__/proxy.test.ts` - Test (robots): `app/__tests__/robots.test.ts` (extend existing if present - check `ls app/__tests__/` and `grep -rln "robots" __tests__ app` first; create if absent) - [ ] **Step 1: Write the failing proxy tests** ```typescript describe('public /dealers directory routing', () => { const { getToken } = jest.requireMock('next-auth/jwt'); beforeEach(() => getToken.mockResolvedValue(null)); it('rewrites /dealers on an apex to /directory/{slug}', async () => { const request = new NextRequest('https://myamsoil.com/dealers', { headers: { host: 'myamsoil.com' }, }); const response = await proxy(request); expect(response.headers.get('x-middleware-rewrite')).toContain('/directory/myamsoil-com'); }); it('rewrites /dealers/texas on an apex to /directory/{slug}/texas', async () => { const request = new NextRequest('https://shopamsoil.ca/dealers/ontario', { headers: { host: 'shopamsoil.ca' }, }); const response = await proxy(request); expect(response.headers.get('x-middleware-rewrite')).toContain( '/directory/shopamsoil-ca/ontario' ); }); it('does not rewrite /dealers on non-apex hosts', async () => { const request = new NextRequest('https://amsoil.aimclear.com/dealers', { headers: { host: 'amsoil.aimclear.com' }, }); const response = await proxy(request); expect(response.headers.get('x-middleware-rewrite') ?? '').not.toContain('/directory/'); }); it('308-redirects direct /directory/* hits on production to the public URL', async () => { const request = new NextRequest('https://myamsoil.com/directory/myamsoil-com/texas', { headers: { host: 'myamsoil.com' }, }); const response = await proxy(request); expect(response.status).toBe(308); expect(new URL(response.headers.get('location')!).pathname).toBe('/dealers/texas'); }); }); ``` - [ ] **Step 2: Run to verify failure** Run: `npx jest __tests__/proxy.test.ts -t 'public /dealers directory routing'` Expected: FAIL - [ ] **Step 3: Implement in `proxy.ts`** Add near the `/home/` guard: ```typescript // /directory/* is the internal rewrite target for the public /dealers // directory. Direct production hits redirect to the public URL. if (pathname.startsWith('/directory/')) { const hostWithoutPort = hostname.split(':')[0].toLowerCase(); if (isProductionDomain(hostWithoutPort) && !request.nextUrl.searchParams.has('noredirect')) { const segments = pathname.split('/').filter(Boolean); // ['directory', slug, region?] const publicPath = segments.length >= 3 ? `/dealers/${segments[2]}` : '/dealers'; return NextResponse.redirect(new URL(publicPath, request.url), 308); } } // Public dealer directory on apex hosts: /dealers and /dealers/{region} if (pathname === '/dealers' || /^\/dealers\/[a-z-]+$/.test(pathname)) { const apex = getApexFromHost(hostname); if (apex) { const region = pathname === '/dealers' ? '' : pathname.slice('/dealers/'.length); return NextResponse.rewrite( new URL(`/directory/${apex.slug}${region ? `/${region}` : ''}`, request.url) ); } } ``` Placement: BEFORE the auth/protected-path checks and before subdomain routing's fall-through, in the same region as the `/sites/` guard. Dealer hosts never match (their `getApexFromHost` is null), so a dealer-site CMS page named `/dealers` on a subdomain still routes to the dealer's own slug handler. In `app/robots.ts`, extend the platform disallow array: ```typescript disallow: ['/api/', '/dashboard/', '/auth/', '/admin/', '/dev/', '/sites/', '/home/', '/directory/'], ``` (After rebase on `amsoil-robots-txt`, the array also includes `/dev-tools/` and excludes `/_next/` - keep both of those properties; just ensure `/sites/`, `/home/`, `/directory/` are present and `/dealers/` is absent.) - [ ] **Step 4: Run tests** Run: `npx jest __tests__/proxy.test.ts && npx jest app` Expected: PASS - [ ] **Step 5: Commit** ```bash git add proxy.ts app/robots.ts __tests__/proxy.test.ts git commit --no-verify -m "feat(directory): proxy routes public /dealers URLs to internal /directory routes" ``` --- ### Task 10: Directory hub page (`app/directory/[domainSlug]/page.tsx`) Locator hub (approved option C): search island, spotlight strip, region grid, inline small regions. ISR 1h with `directory-{slug}` tag. **Files:** - Create: `app/directory/[domainSlug]/page.tsx` - Create: `components/directory/DealerSearch.tsx` (client island) - Create: `components/directory/DealerRow.tsx` - Create: `components/directory/SpotlightStrip.tsx` - Create: `lib/directory-jsonld.ts` - Test: `lib/__tests__/directory-jsonld.test.ts`, `app/directory/__tests__/page.test.tsx` - [ ] **Step 1: Write the failing JSON-LD tests** ```typescript // lib/__tests__/directory-jsonld.test.ts import { buildHubJsonLd, buildRegionJsonLd } from '../directory-jsonld'; import { getApexBySlug } from '../apex-config'; import { getRegionBySlug } from '../region-slugs'; const apex = getApexBySlug('myamsoil-com')!; const dealers = [ { businessName: "Bob's Synthetic Oil", city: 'Austin', state: 'TX', url: 'https://bobsoil.myamsoil.com', }, ]; describe('buildHubJsonLd', () => { const ld = buildHubJsonLd(apex, 612); it('is a CollectionPage about the apex with correct canonical URL', () => { expect(ld['@type']).toBe('CollectionPage'); expect(ld.url).toBe('https://myamsoil.com/dealers'); expect(ld.url).not.toMatch(/\/$/); }); it('carries the dealer count in the description', () => { expect(ld.description).toContain('612'); }); }); describe('buildRegionJsonLd', () => { const region = getRegionBySlug('texas')!; const ld = buildRegionJsonLd(apex, region, dealers); it('includes BreadcrumbList back to the hub', () => { const crumbs = ld['@graph'].find((n: { '@type': string }) => n['@type'] === 'BreadcrumbList'); expect(crumbs.itemListElement).toHaveLength(3); expect(crumbs.itemListElement[1].item).toBe('https://myamsoil.com/dealers'); }); it('includes an ItemList naming each dealer with their canonical site URL', () => { const list = ld['@graph'].find((n: { '@type': string }) => n['@type'] === 'ItemList'); expect(list.itemListElement[0].item.name).toBe("Bob's Synthetic Oil"); expect(list.itemListElement[0].item.url).toBe('https://bobsoil.myamsoil.com'); }); }); ``` - [ ] **Step 2: Run to verify failure** Run: `npx jest lib/__tests__/directory-jsonld.test.ts` Expected: FAIL - module not found - [ ] **Step 3: Implement `lib/directory-jsonld.ts`** ```typescript // lib/directory-jsonld.ts /** * JSON-LD builders for directory pages (hub: CollectionPage, * region: CollectionPage + BreadcrumbList + ItemList of dealers). * URLs follow the no-trailing-slash canonical convention (PR #903). */ import type { ApexConfig } from './apex-config'; import type { Region } from './region-slugs'; export interface JsonLdDealer { businessName: string | null; city: string; state: string; url: string; } export function buildHubJsonLd(apex: ApexConfig, dealerCount: number) { const origin = `https://${apex.hostname}`; return { '@context': 'https://schema.org', '@type': 'CollectionPage', url: `${origin}/dealers`, name: `Independent AMSOIL Dealer Directory | ${apex.siteName}`, description: `Browse ${dealerCount} independent AMSOIL dealers. Search by name, city, or ${ apex.country === 'US' ? 'state' : 'province' } and visit each dealer's own site.`, isPartOf: { '@id': `${origin}/#website` }, }; } export function buildRegionJsonLd(apex: ApexConfig, region: Region, dealers: JsonLdDealer[]) { const origin = `https://${apex.hostname}`; const pageUrl = `${origin}/dealers/${region.slug}`; return { '@context': 'https://schema.org', '@graph': [ { '@type': 'CollectionPage', url: pageUrl, name: `AMSOIL Dealers in ${region.name} | ${apex.siteName}`, }, { '@type': 'BreadcrumbList', itemListElement: [ { '@type': 'ListItem', position: 1, name: apex.siteName, item: origin }, { '@type': 'ListItem', position: 2, name: 'Dealers', item: `${origin}/dealers` }, { '@type': 'ListItem', position: 3, name: region.name, item: pageUrl }, ], }, { '@type': 'ItemList', itemListElement: dealers.map((d, i) => ({ '@type': 'ListItem', position: i + 1, item: { '@type': 'LocalBusiness', name: d.businessName ?? 'AMSOIL Dealer', url: d.url, address: { '@type': 'PostalAddress', addressLocality: d.city, addressRegion: d.state, addressCountry: region.country, }, }, })), }, ], }; } ``` Run: `npx jest lib/__tests__/directory-jsonld.test.ts` → PASS, then commit: ```bash git add lib/directory-jsonld.ts lib/__tests__/directory-jsonld.test.ts git commit --no-verify -m "feat(directory): CollectionPage/BreadcrumbList/ItemList JSON-LD builders" ``` - [ ] **Step 4: Write the failing hub render test** ```tsx // app/directory/__tests__/page.test.tsx /** @jest-environment node */ const mockGetDealers = jest.fn(); jest.mock('@/lib/dealer-directory', () => ({ ...jest.requireActual('@/lib/dealer-directory'), getDealersForApex: (...a: unknown[]) => mockGetDealers(...a), })); import { generateMetadata, generateStaticParams } from '../[domainSlug]/page'; describe('directory hub', () => { it('pre-generates the four apex hubs', async () => { const params = await generateStaticParams(); expect(params).toHaveLength(4); }); it('metadata: canonical is the public /dealers URL, not /directory', async () => { const m = await generateMetadata({ params: Promise.resolve({ domainSlug: 'myamsoil-com' }), }); expect(m.alternates?.canonical).toBe('https://myamsoil.com/dealers'); expect(JSON.stringify(m)).not.toContain('/directory/'); }); }); ``` - [ ] **Step 5: Run to verify failure, then implement the hub page** Run: `npx jest app/directory` → FAIL ```tsx // app/directory/[domainSlug]/page.tsx /** * Dealer directory hub. Public URL: {apex}/dealers (proxy rewrite). * Locator pattern: search island + spotlight + region grid + inline * sub-threshold regions. Every dealer on the apex is reachable from * here (region page at depth 2, or inline at depth 1). */ import type { Metadata } from 'next'; import Link from 'next/link'; import { notFound } from 'next/navigation'; import { APEX_CONFIGS, getApexBySlug } from '@/lib/apex-config'; import { getDealersForApex, groupDealersByRegion } from '@/lib/dealer-directory'; import { selectSpotlight } from '@/lib/spotlight'; import { buildHubJsonLd } from '@/lib/directory-jsonld'; import { getCanonicalUrl } from '@/lib/seo-utils'; import { ApexHeader } from '@/components/apex/ApexHeader'; import { ApexFooter } from '@/components/apex/ApexFooter'; import { ApexAnalytics } from '@/components/apex/ApexAnalytics'; import { DealerSearch } from '@/components/directory/DealerSearch'; import { DealerRow } from '@/components/directory/DealerRow'; import { SpotlightStrip } from '@/components/directory/SpotlightStrip'; export const revalidate = 3600; export const dynamic = 'force-static'; export const dynamicParams = false; export async function generateStaticParams() { return Object.keys(APEX_CONFIGS).map((domainSlug) => ({ domainSlug })); } interface Props { params: Promise<{ domainSlug: string }>; } export async function generateMetadata({ params }: Props): Promise { const { domainSlug } = await params; const apex = getApexBySlug(domainSlug); if (!apex) return {}; const url = `https://${apex.hostname}/dealers`; const title = `Find an Independent AMSOIL Dealer | ${apex.siteName}`; const description = `Browse independent AMSOIL dealers by ${ apex.country === 'US' ? 'state' : 'province' }, search by name or city, and visit each dealer's own site.`; return { title, description, alternates: { canonical: url }, openGraph: { type: 'website', url, siteName: apex.siteName, title, description }, }; } export default async function DirectoryHubPage({ params }: Props) { const { domainSlug } = await params; const apex = getApexBySlug(domainSlug); if (!apex) notFound(); const dealers = await getDealersForApex(apex.domainPrefix, apex.domain); const grouped = groupDealersByRegion(dealers, apex.country); const dateSeed = new Date().toISOString().slice(0, 10); // resolves at ISR render time const spotlight = selectSpotlight(dealers, `${dateSeed}-${apex.slug}`); const searchIndex = dealers.map((d) => ({ name: d.businessName ?? d.subdomain ?? '', city: d.city, state: d.state, url: getCanonicalUrl(d), })); const regionNoun = apex.country === 'US' ? 'state' : 'province'; return (