@jtakeit/astro 0.1.0

package/template/src/lib/photos.ts

@@ -0,0 +1,168 @@
+import type { ImageMetadata } from 'astro';
+import { isUpload, uploaded } from './uploads';
+
+/**
+ * The site's photographs.
+ *
+ * The file name in src/assets is the slot: replacing a photo is dropping a file
+ * with the same name and rebuilding — no code change, no page edit.
+ *
+ * Every slot is registered here with alt text in the site's language, because a
+ * photo with no alt text is a photo a screen reader announces as its file name,
+ * and these sites are mostly photographs.
+ *
+ * **A missing file is never a build error.** `photo()` returns undefined and
+ * `<Shot>` renders a labelled placeholder that keeps the frame's proportions.
+ * That is what lets stage 1 proceed while the client is still finding their
+ * photographs.
+ */
+
+export interface Photo {
+  /** File base name in src/assets, without the extension. */
+  readonly name: string;
+  readonly alt: string;
+  /** Portrait-shaped files can be given a taller cell by a gallery. */
+  readonly tall?: boolean;
+  /**
+   * This is the person the business *is* — their face, not their hands, their
+   * room or their work.
+   *
+   * It is registered because it changes what may be done to the picture. A
+   * treatment that replaces skin colour — `duotone`, `press` — makes a face
+   * look like stock art, and on a one-person business that face is the thing
+   * being chosen. `<Shot>` refuses to apply one to a photo marked here, and
+   * fails the build rather than shipping it. The gentle treatments still work.
+   */
+  readonly person?: boolean;
+}
+
+/**
+ * What may be done to a photograph, beyond framing it.
+ *
+ * Client photographs arrive as a feed: twenty pictures in twenty lights, shot
+ * on three phones over two years, with white balance disagreeing between every
+ * pair. Cropping them well leaves them still disagreeing, and a page of
+ * photographs that disagree reads as a page nobody art-directed — which is
+ * exactly what it is.
+ *
+ * A treatment is what makes them one set. It is CSS over the picture, in the
+ * variant's own tokens: no build step, no second copy of any file, nothing to
+ * re-run when a photo is replaced, and it degrades to the untouched photograph
+ * anywhere the blend modes do not land.
+ *
+ * The table of what each one is for is in `docs/photos.md` of @jtakeit/astro. Two rules travel with them: **one treatment per site**,
+ * because two is the look of a demo rather than a design, and **never a strong
+ * one on their face**.
+ */
+export type Treatment = 'none' | 'grade' | 'duotone' | 'film' | 'press' | 'recede';
+
+export const TREATMENTS: readonly Treatment[] = [
+  'none',
+  'grade',
+  'duotone',
+  'film',
+  'press',
+  'recede',
+];
+
+/** Treatments that replace skin colour, and so may not touch a person. */
+export const STRONG: readonly Treatment[] = ['duotone', 'press'];
+
+export const PHOTOS: readonly Photo[] = [
+  // { name: 'hero', alt: '' },
+];
+
+// Resolved by Vite at build time: files that do not exist simply never appear.
+const modules = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/*.{jpg,jpeg,JPG,JPEG,png,PNG,webp,WEBP,avif,AVIF}',
+  { eager: true },
+);
+
+const byName = new Map<string, ImageMetadata>();
+const metaByName = new Map<string, Photo>();
+
+for (const [path, mod] of Object.entries(modules)) {
+  const base = path
+    .split('/')
+    .pop()!
+    .replace(/\.[^.]+$/, '')
+    .toLowerCase();
+  // First file wins, so hero.jpg and hero.webp cannot fight over one slot.
+  if (!byName.has(base)) byName.set(base, mod.default);
+}
+
+for (const p of PHOTOS) metaByName.set(p.name, p);
+
+/**
+ * The picture behind a name.
+ *
+ * A name is one of two things and this resolves both: a slot in `src/assets`,
+ * which is the developer's, or a key like `media/<site>/<hash>.jpg`, which is
+ * the owner's and was downloaded into `src/assets/media/` before the build. A
+ * component never has to know which it was given — that is the whole point,
+ * because a photograph the owner replaced in the admin has to land in exactly
+ * the frame the developer's one was in.
+ */
+export function photo(name: string): ImageMetadata | undefined {
+  if (isUpload(name)) return uploaded(name);
+  return byName.get(name.toLowerCase());
+}
+
+/** What the photograph actually is, before a frame is chosen for it. */
+export interface Shape {
+  readonly width: number;
+  readonly height: number;
+  /** width / height. 0.8 for a 4:5 phone portrait, 1.78 for 16:9. */
+  readonly ratio: number;
+  readonly orientation: 'portrait' | 'landscape' | 'square';
+}
+
+/**
+ * Measure before placing.
+ *
+ * A frame is a decision about which part of a photograph nobody will ever see,
+ * and made by feel it is made wrong: client photos arrive in every orientation,
+ * and the 4:5 portrait that carries the whole business loses more than half of
+ * itself to a 16:9 band. A page that asks this first can pick the frame from
+ * the picture instead of cropping the picture to the frame.
+ *
+ *   const owner = shape('owner');
+ *   <Shot name="owner" ratio={owner?.orientation === 'portrait' ? '4 / 5' : '3 / 2'} />
+ */
+export function shape(name: string): Shape | undefined {
+  const src = photo(name);
+  if (!src) return undefined;
+  const ratio = src.width / src.height;
+  return {
+    width: src.width,
+    height: src.height,
+    ratio,
+    // A little tolerance: a phone crop is rarely exactly square.
+    orientation: ratio > 1.05 ? 'landscape' : ratio < 0.95 ? 'portrait' : 'square',
+  };
+}
+
+/**
+ * Whether this slot holds the face of the person the business is.
+ *
+ * Unregistered means no — a photo nobody described is not asserted to be
+ * anybody. The check is deliberately one-way: it can stop a treatment reaching
+ * a face somebody registered, and it cannot know about one nobody did.
+ */
+export function isPerson(name: string): boolean {
+  return metaByName.get(name)?.person === true;
+}
+
+/**
+ * Whether this picture came from the admin rather than from the repository.
+ *
+ * Worth asking in one place: a treatment is a decision about the site's own
+ * photographs, and an owner who swapped one in has not agreed to have it
+ * duotoned. Nothing enforces that — it is here for a component that wants to.
+ */
+export { isUpload } from './uploads';
+
+/** Registered alt text, or a neutral fallback so alt is never empty. */
+export function altFor(name: string): string {
+  return metaByName.get(name)?.alt ?? '';
+}

package/template/src/lib/under.ts

@@ -0,0 +1,32 @@
+/**
+ * Where this build is served from, and how to write an address inside it.
+ *
+ * ── the bug this exists to make impossible ──────────────────────────────────
+ *
+ * A site is served two ways and the difference is a path. On its own host it
+ * is at the root, so `/preise/` and `/favicon.png` mean what they say. In the
+ * studio's preview the same build is served under `https://preview…/p/<slug>/`,
+ * where the root is not the site: every one of those addresses leaves it. What
+ * a person sees is a page with no stylesheet, no pictures and navigation that
+ * 404s — which reads as a broken build rather than as a wrong prefix, and has
+ * cost three separate afternoons to diagnose from that symptom.
+ *
+ * Astro's `base` fixes what *it* emits — the bundled CSS, the optimised
+ * images — and it cannot fix a string somebody typed. So every internal
+ * address written by hand goes through `under()`, and `fl-catalogue` fails a
+ * repository that writes one straight.
+ *
+ * A build for a real host has a base of `/`, where `under()` changes nothing.
+ * That is the point: one way to write an address, correct in both places.
+ */
+
+/** The path this build is served under, always with its trailing slash. */
+export function base(): string {
+  const at = import.meta.env.BASE_URL ?? '/';
+  return at.endsWith('/') ? at : `${at}/`;
+}
+
+/** A site-absolute path — `/preise/` — served under wherever this build is. */
+export function under(path: string): string {
+  return `${base()}${path.replace(/^\//, '')}`;
+}

package/template/src/lib/uploads.ts

@@ -0,0 +1,85 @@
+import type { ImageMetadata } from 'astro';
+
+/**
+ * The pictures the owner uploaded, as local files.
+ *
+ * ── the two places a picture can be ─────────────────────────────────────────
+ *
+ * `src/assets/hero.jpg` is the developer's: it is in the repository, it is
+ * chosen by whoever built the site, and `photos.ts` resolves it by slot name.
+ * This is the other half — a photograph somebody put in through the admin,
+ * which arrives as a key like `media/<site>/<hash>.jpg` inside the content
+ * document.
+ *
+ * **They are both local files by the time this runs.** The build's second step
+ * downloads every key the content names into `src/assets/`, before `npm run
+ * build`, precisely so that a photograph from the admin goes through
+ * `astro:assets` exactly as one from the repository does: variants, `srcset`,
+ * width hints, the lot. Nothing here fetches anything.
+ *
+ * That matters more than it sounds. A gallery of thirty-seven pictures served
+ * as uploaded is fifteen megabytes; the same gallery through the image pipeline
+ * is under two. The difference is not visible to anybody building the site — it
+ * is visible to somebody on a phone, on a train, deciding whether to wait.
+ *
+ * ── on a laptop, before any of that ─────────────────────────────────────────
+ *
+ * There are no downloaded files while a developer is building the site, so
+ * every lookup here answers undefined and `<Shot>` draws its labelled
+ * placeholder. That is the same behaviour as a missing slot, and it is what lets
+ * a site be built, checked and pushed before it has ever been attached.
+ */
+
+/**
+ * Anything under `src/assets/media/` — which is only ever what the build put
+ * there, keyed by the key itself.
+ *
+ * `import.meta.glob` needs a literal pattern, so this cannot be narrowed by the
+ * site id; the map is small (a site's own pictures) and built once.
+ */
+const pictures = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/media/**/*.{jpg,jpeg,JPG,JPEG,png,PNG,webp,WEBP,avif,AVIF}',
+  { eager: true },
+);
+
+/**
+ * Clips, as URLs rather than as metadata.
+ *
+ * `astro:assets` optimises pictures and has nothing to do to a video, so a clip
+ * takes the ordinary asset path: Vite emits the file and hands back its final
+ * address, hashed and cacheable. The clips are already small — `fl-clips` cuts
+ * them to a tenth of a megabyte — so there is nothing to gain by doing more.
+ */
+const clips = import.meta.glob<string>('/src/assets/media/**/*.{mp4,webm}', {
+  eager: true,
+  query: '?url',
+  import: 'default',
+});
+
+const PREFIX = '/src/assets/';
+
+function keyed<T>(modules: Record<string, T>): Map<string, T> {
+  const out = new Map<string, T>();
+  for (const [path, value] of Object.entries(modules)) {
+    out.set(path.slice(PREFIX.length), value);
+  }
+  return out;
+}
+
+const byKey = keyed(pictures);
+const clipsByKey = keyed(clips);
+
+/** Whether a value from the content document is a key rather than a slot. */
+export function isUpload(value: string): boolean {
+  return value.startsWith('media/');
+}
+
+/** An uploaded photograph, ready for `<Image>`. */
+export function uploaded(key: string): ImageMetadata | undefined {
+  return byKey.get(key)?.default;
+}
+
+/** An uploaded clip's address in the built site. */
+export function uploadedClip(key: string): string | undefined {
+  return clipsByKey.get(key);
+}

package/template/src/pages/[...entry].astro

@@ -0,0 +1,207 @@
+---
+/**
+ * One entry of one collection — a blog post, a work, a job.
+ *
+ * ── one file for every collection, and why it is a starting point ───────────
+ *
+ * This route generates every entry of every collection the site declares, so a
+ * new collection is an entry in `COLLECTIONS` and its listing page, and never a
+ * second copy of this file. What it renders is deliberately plain: a heading, a
+ * picture where there is one, and the body. Exactly like `Blocks.astro`, it is
+ * the thing that makes a site buildable on the first commit, not the design.
+ *
+ * **The design pass replaces what is inside `<article>`. What must survive it
+ * is the annotation.** Every field the owner may edit carries its
+ * `data-jtk-path`, `annotation-lint.mjs` fails the build without one, and an
+ * element that loses its path stops opening the editor *silently*.
+ *
+ * An entry's document opens with the post — its title, its date, its cover and
+ * its prose, always at `blocks[0].<field>`. Everything after it is whatever the
+ * collection lets a post hold (the platform's wiki/30), and its paths are
+ * `blocks[N].<field>` exactly as on any other page.
+ *
+ * ── a hidden entry is built ─────────────────────────────────────────────────
+ *
+ * `getStaticPaths` does **not** filter by `visible`. That is on purpose: an
+ * entry nobody has finished still has to be looked at before it is finished,
+ * and the studio's edge serves such a page only to a session that is editing
+ * the site. Every place that *lists* entries filters — see `src/lib/entries.ts`
+ * — and this one renders.
+ */
+import { everyEntry, rendered } from '../lib/entries';
+import { Image } from 'astro:assets';
+import Layout from '../layouts/Layout.astro';
+import { COLLECTIONS } from '../content/blocks';
+import { isUpload, uploaded } from '../lib/uploads';
+import { photo } from '../lib/photos';
+
+export async function getStaticPaths() {
+  const paths = [];
+
+  for (const collection of COLLECTIONS) {
+    const entries = await everyEntry(collection.name);
+    for (const entry of entries) {
+      paths.push({
+        params: { entry: `${collection.prefix.replace(/^\//, '')}/${entry.id}` },
+        props: { entry, collection },
+      });
+    }
+  }
+  return paths;
+}
+
+const { entry } = Astro.props;
+const data = entry.data as Record<string, unknown>;
+const { Content } = await rendered(entry);
+
+/**
+ * A value from a document as a list of records.
+ *
+ * A function rather than a cast written where it is needed, because a `as
+ * Record<string, unknown>[]` **inside a `{ }` expression in the template** is
+ * not valid Astro: the compiler turns the template into TSX and the cast is
+ * read as a comparison, which produced nine errors starting with "Generic type
+ * 'Record' requires 2 type argument(s)" and cascading to the end of the file.
+ * Casts belong in the frontmatter; the template calls this.
+ *
+ * It also answers for a document that holds something other than a list, which
+ * a hand-edited one can.
+ */
+function records(value: unknown): Record<string, unknown>[] {
+  return Array.isArray(value) ? (value as Record<string, unknown>[]) : [];
+}
+
+/** Everything after the post itself, in the order the owner put it in. */
+const rest = records(data.rest);
+
+const title = typeof data.title === 'string' ? data.title : '';
+const excerpt = typeof data.excerpt === 'string' ? data.excerpt : '';
+const cover = typeof data.cover === 'string' && data.cover !== ''
+  ? (isUpload(data.cover) ? uploaded(data.cover) : photo(data.cover))
+  : undefined;
+
+/**
+ * The entry as a thing search engines and assistants can quote.
+ *
+ * `datePublished` is the field the catalogue reserves, which is why it may be
+ * read by name here: the five keys of an entry are the admin's vocabulary and
+ * not a site's to rename.
+ */
+/**
+ * What a search result says, where somebody wrote it.
+ *
+ * The admin has a card for these two — the title in a result list and the
+ * sentence under it — and they appear nowhere on the page, which is exactly why
+ * they are edited in a form rather than by tapping. Empty, a post is found by
+ * its own heading and its announcement, so this is a fallback and never a
+ * second pair of fields that must be filled in.
+ */
+const seo = (data.seo ?? {}) as Record<string, unknown>;
+const said = (key: string): string =>
+  typeof seo[key] === 'string' ? (seo[key] as string).trim() : '';
+
+const schema = {
+  '@type': 'Article',
+  headline: title,
+  datePublished: typeof data.date === 'string' ? data.date : undefined,
+  description: excerpt || undefined,
+};
+---
+
+<Layout title={said('title') || title} description={said('description') || excerpt} schema={schema}>
+  <main id="content">
+    <article class="entry">
+      <h1 data-jtk-path="blocks[0].title">{title}</h1>
+
+      {
+        cover && (
+          <Image
+            src={cover}
+            alt={title}
+            data-jtk-path="blocks[0].cover"
+            widths={[640, 1280, 1920]}
+            sizes="(min-width: 900px) 60rem, 92vw"
+            layout="none"
+          />
+        )
+      }
+
+      {/*
+        One element for the whole body, because the body is one field. The
+        editor opens it full screen — nine hundred words is not a popover — and
+        what is inside is markdown Astro rendered, pictures and all.
+      */}
+      <div class="entry-body" data-jtk-path="blocks[0].body"><Content /></div>
+
+      {/*
+        And the rest of the post, in the order the owner put it in.
+
+        A post is a *sequence*: its opening prose above, then runs of prose and
+        whatever else it holds, interleaved. A post is written rather than
+        designed, so the owner arranges these in the admin — but *which* types
+        may be in one is this repository's to say, in `COLLECTIONS[].body`, and
+        `text` must be among them or the writing cannot be broken by anything.
+
+        A gallery arrives with the arrangement it is in — `block.view`, always
+        one of the ones its type declares. Draw each one differently: that menu
+        is the whole reason the owner may choose, and a `view` that changes
+        nothing on the page is a choice this repository lied about offering.
+
+        Plain on purpose, exactly like `Blocks.astro`: what the design pass
+        replaces is what is inside, and what must survive it is the
+        `data-jtk-path` on every field the owner may edit.
+      */}
+      {
+        rest.map((block, offset) => {
+          const at = offset + 1;
+
+          /*
+           * A run of prose. A post is a sequence — prose, a gallery, more
+           * prose — and this is what the runs after the first are. Rendered by
+           * the loader, because Astro renders one body per entry and knows
+           * nothing about a second.
+           */
+          if (block.type === 'text') {
+            return (
+              <div
+                class="entry-body"
+                data-jtk-path={`blocks[${at}].body`}
+                set:html={String(block.html ?? '')}
+              />
+            );
+          }
+
+          const pictures = records(block.work ?? block.items);
+
+          return (
+            <div class="entry-wall" data-view={String(block.view ?? '')}>
+              {pictures.map((picture, index) => {
+                /*
+                 * The same two answers the cover has, for the same reason: a
+                 * value is either a key in the studio's bucket, which the build
+                 * downloaded, or the name of a photograph this repository
+                 * ships. Reading only the first renders nothing at all for the
+                 * second, with no error until the build refuses the undefined.
+                 */
+                const src = String(picture.src ?? '');
+                const file = isUpload(src) ? uploaded(src) : photo(src);
+                if (!file) return null;
+
+                return (
+                <Image
+                  src={file}
+                  alt={String(picture.alt ?? '')}
+                  data-jtk-path={`blocks[${at}].work[${index}].src`}
+                  widths={[640, 1280]}
+                  sizes="(min-width: 900px) 30rem, 92vw"
+                  layout="none"
+                />
+                );
+              })}
+            </div>
+          );
+        })
+      }
+    </article>
+  </main>
+</Layout>

package/template/src/pages/[...feed].xml.ts

@@ -0,0 +1,64 @@
+import type { APIRoute } from 'astro';
+import { COLLECTIONS, words } from '../content/blocks';
+import { INDEXABLE, canonicalFor } from '../data/site';
+import { allListed, href } from '../lib/entries';
+
+/**
+ * One feed per collection, at `/blog/rss.xml`.
+ *
+ * Written by hand rather than through `@astrojs/rss`, for the same reason
+ * `sitemap.xml.ts` is: it is thirty lines, it has no dependency, and what goes
+ * in it is a decision rather than a default.
+ *
+ * Hidden entries are absent, because `allListed` is the only way anything here
+ * enumerates them. Empty while INDEXABLE is false — a preview announcing itself
+ * to a reader is a preview competing with the site it previews.
+ */
+export async function getStaticPaths() {
+  return COLLECTIONS.map((collection) => ({
+    params: { feed: `${collection.prefix.replace(/^\//, '')}/rss` },
+    props: { name: collection.name },
+  }));
+}
+
+export const GET: APIRoute = async ({ props }) => {
+  const name = (props as { name: string }).name;
+  const all = await allListed();
+  const found = all.find((one) => one.collection.name === name);
+  const entries = INDEXABLE && found ? found.entries : [];
+
+  const items = entries
+    .map((entry) => {
+      const data = entry.data as Record<string, unknown>;
+      const link = canonicalFor(href(found!.collection, entry));
+      return `    <item>
+      <title>${escapeXML(String(data.title ?? ''))}</title>
+      <link>${link}</link>
+      <guid isPermaLink="true">${link}</guid>
+      ${data.date ? `<pubDate>${new Date(String(data.date)).toUTCString()}</pubDate>` : ''}
+      ${data.excerpt ? `<description>${escapeXML(String(data.excerpt))}</description>` : ''}
+    </item>`;
+    })
+    .join('\n');
+
+  const body = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>${escapeXML(words(found?.collection.label) || name)}</title>
+    <link>${canonicalFor(found?.collection.prefix ?? '/')}</link>
+    <description>${escapeXML(words(found?.collection.label) || name)}</description>
+${items}
+  </channel>
+</rss>
+`;
+
+  return new Response(body, { headers: { 'content-type': 'application/xml; charset=utf-8' } });
+};
+
+function escapeXML(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

package/template/src/pages/index.astro

@@ -0,0 +1,90 @@
+---
+/**
+ * The landing page.
+ *
+ * A deliberately plain starting point: the structure and every visual decision
+ * come from the brief, through the frontend-design skill, one variant at a
+ * time. Nothing here is a design suggestion — it is a page that builds, with a
+ * correct <head>, a working form, a photo slot and every section of the content
+ * document rendered, so the first commit of a new project is already deployable
+ * and a generated one is already viewable.
+ *
+ * ── data-jtk-path, and why it is here from the first commit ──────────────────
+ *
+ * The studio's admin edits this site by tapping the text on it. That works
+ * because every element whose content comes from `jtk/content/index.json`
+ * carries the path of the field it came from, and `flPath` builds those from
+ * the document rather than from anything written by hand.
+ *
+ * The build fails without them — `annotation-lint.mjs` compares the published
+ * content against the generated HTML and refuses a page that dropped one. It is
+ * a gate rather than a convention, because an element that loses its path stops
+ * opening the editor **silently**, and nobody finds out for a week.
+ *
+ * So: whatever a variant does to this page, every field it renders keeps its
+ * `data-jtk-path={flPath(...)}`.
+ *
+ * ── the hero's ground ───────────────────────────────────────────────────────
+ *
+ * `jtk/design.json` holds the palette and which of the ten fields to
+ * paint. It is a document rather than props written into this file for the same
+ * reason the copy is: it can then be changed without an agent, and the studio
+ * bar's live accent drives the same tokens. With the document empty — a fresh
+ * `fl-init`, before anything has been designed — the hero is a plain section on
+ * the kit's own ground, which is what a scaffold should be.
+ *
+ * ── the surface ─────────────────────────────────────────────────────────────
+ *
+ * The same document's `surface` block holds the other three choices: the ground
+ * the page is printed on, the edge its blocks are drawn with, and how they
+ * arrive. Empty means none, and none is a real choice rather than a missing
+ * one — on a page carrying strong photographs it is usually the right one. See
+ * `docs/surface.md` of @jtakeit/astro.
+ */
+import Layout from '../layouts/Layout.astro';
+import Hero from '../components/Hero.astro';
+import Blocks from '../components/Blocks.astro';
+import HeroField from '../components/motion/HeroField.astro';
+import Pattern from '../components/surface/Pattern.astro';
+import { HOME } from '../copy/{{LOCALE}}';
+import design from '../../jtk/design.json';
+
+const painted =
+  design.field !== '' && Array.isArray(design.colors) && design.colors.length === 4;
+
+const surface = design.surface ?? {};
+const grounded = Boolean(surface.pattern);
+---
+
+<Layout title={HOME.title} description={HOME.description} suffix={false}>
+  {
+    grounded && (
+      <Pattern
+        pattern={surface.pattern as never}
+        scope={(surface.scope || 'page') as never}
+        size={surface.size || undefined}
+        weight={surface.weight || undefined}
+        opacity={surface.opacity || undefined}
+        draw={surface.draw === true}
+      />
+    )
+  }
+
+  <main id="content">
+    {painted ? (
+      <HeroField
+        field={design.field as never}
+        ground="var(--fl-ground)"
+        colors={['var(--fl-c1)', 'var(--fl-c2)', 'var(--fl-c3)', 'var(--fl-c4)']}
+        scrim={design.scrim !== false}
+        class="hero"
+      >
+        <Hero />
+      </HeroField>
+    ) : (
+      <section class="hero"><Hero /></section>
+    )}
+
+    <Blocks />
+  </main>
+</Layout>