2.7 KiB
2.7 KiB
1. Content Files
- 1.1 Create
src/content/en.jsonwith top-levelmetakey:siteName,defaultTitle,defaultDescription,defaultOgImage(empty string) - 1.2 Create
src/content/nl.jsonwith samemetashape, Dutch values fordefaultTitleanddefaultDescription - 1.3 Create
src/content/i18n.tsexportinggetContent(locale: string)using static imports of both JSON files; fall back to EN for unknown locales
2. Stub Components
- 2.1 Create
src/components/Nav.astroas an empty stub (renders nothing — filled in step 003) - 2.2 Create
src/components/Footer.astroas an empty stub (renders nothing — filled in a later step)
3. BaseLayout Component
- 3.1 Create
src/layouts/BaseLayout.astrowith props:title,description,locale(default"en"),canonicalUrl,alternateUrl,ogImage(optional),jsonLd(optionalRecord<string, unknown>) - 3.2 Add
<head>content:<meta charset="utf-8">,<meta name="viewport">,<title>,<link rel="icon">for both SVG and ICO favicons - 3.3 Add three Archia font preload tags in
<head>: Regular (400), SemiBold (600), Bold (700) woff2 files only - 3.4 Add
<link rel="canonical">and three hreflang<link rel="alternate">tags (en,nl,x-default) usingcanonicalUrlandalternateUrlprops - 3.5 Add OG meta tags (
og:type,og:url,og:title,og:description,og:site_name); addog:imageonly whenogImageis truthy - 3.6 Add Twitter card meta tags (
twitter:card,twitter:title,twitter:description); addtwitter:imageonly whenogImageis truthy - 3.7 Add JSON-LD script tag in
<head>rendered fromjsonLdprop when provided (set:html={JSON.stringify(jsonLd)}) - 3.8 Add
<slot name="jsonld" />inside<head>for additional JSON-LD blocks - 3.9 Add
<body class="bg-midnight text-snow font-archia">with<Nav />, default<slot />, and<Footer />in order
4. Update Index Page
- 4.1 Update
src/pages/index.astroto import and useBaseLayout, passingtitle,description,canonicalUrl="https://qumo.io/",alternateUrl="https://qumo.io/nl", andlocale="en"; remove manual<html>/<head>/<body>shell
5. Verification
- 5.1 Run
cd website && npm run build— build must succeed with zero errors - 5.2 View page source in browser (
npm run dev): confirm<head>contains charset, viewport, title, favicon links, three font preload tags, canonical, three hreflang links, OG tags, Twitter card tags - 5.3 Confirm body has
bg-midnight text-snow font-archiaclasses and smoke-test content still renders correctly - 5.4 Confirm no
og:imageortwitter:imagetag appears (sinceogImageis not passed)