astroidjs 0.1.2 → 0.2.0

package/src/components/sections/Media.astro

@@ -0,0 +1,44 @@
+---
+// A single full-width image, with an optional heading and caption.
+//
+// The alt/caption resolution is the point of `<Sections>`' one-query media
+// lookup: the section's own `alt` is a per-usage override, and an empty one
+// falls back to what the editor typed against the asset in the media library.
+// So fixing alt text is one edit that reaches every page showing that image.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, mediaAlt, mediaCaption, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+import MediaSlot from "../MediaSlot.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit, mediaMeta } = Astro.props;
+
+const heading = field(item, "heading");
+const image = field(item, "image");
+const caption = mediaCaption(mediaMeta, image, field(item, "caption"));
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto max-w-5xl px-6">
+    {heading && (
+      <Editable as="h2" base={base} field="heading" edit={edit} class="mb-6 text-3xl font-bold">
+        {heading}
+      </Editable>
+    )}
+    {image && (
+      <MediaSlot
+        src={image}
+        alt={mediaAlt(mediaMeta, image, field(item, "alt"))}
+        width={1600}
+        sizes="(max-width: 64rem) 100vw, 64rem"
+        ratio="16/9"
+      />
+    )}
+    {caption && (
+      <Editable as="p" base={base} field="caption" edit={edit} class="mt-3 text-sm opacity-70">
+        {caption}
+      </Editable>
+    )}
+  </div>
+</section>

package/src/components/sections/PricingTiers.astro

@@ -0,0 +1,79 @@
+---
+// Pricing tiers. Each tier's feature list is a nested array, so a feature's
+// marker path is `<base>.items.<i>.features.<j>.text` — two levels of position,
+// which the client's path parser handles because it splits on `.` and coerces
+// every numeric segment.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, itemField, list, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit } = Astro.props;
+
+const heading = field(item, "heading");
+const tiers = list(item, "items");
+
+/** A tier's nested feature rows. Untrusted like any stored array. */
+const featuresOf = (row: Record<string, unknown>) =>
+  Array.isArray(row.features)
+    ? row.features.filter(
+        (f): f is Record<string, unknown> =>
+          typeof f === "object" && f !== null && !Array.isArray(f),
+      )
+    : [];
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto max-w-6xl px-6">
+    {heading && (
+      <Editable as="h2" base={base} field="heading" edit={edit} class="mb-10 text-3xl font-bold">
+        {heading}
+      </Editable>
+    )}
+    <div class="grid gap-6 md:grid-cols-3">
+      {tiers.map((row, i) => (
+        <div
+          class:list={[
+            "card bg-base-100 text-base-content shadow-sm",
+            itemField(row, "featured") === "yes" && "ring-2 ring-primary",
+          ]}
+        >
+          <div class="card-body">
+            <Editable as="h3" sfield={`${base}.items.${i}.name`} edit={edit} class="card-title">
+              {itemField(row, "name")}
+            </Editable>
+            <p class="mt-2">
+              <Editable as="span" sfield={`${base}.items.${i}.price`} edit={edit} class="text-3xl font-bold">
+                {itemField(row, "price")}
+              </Editable>
+              <Editable as="span" sfield={`${base}.items.${i}.period`} edit={edit} class="opacity-70">
+                {itemField(row, "period")}
+              </Editable>
+            </p>
+            <ul class="mt-4 grid gap-2">
+              {featuresOf(row).map((feature, j) => (
+                <li>
+                  <Editable
+                    as="span"
+                    sfield={`${base}.items.${i}.features.${j}.text`}
+                    edit={edit}
+                  >
+                    {itemField(feature, "text")}
+                  </Editable>
+                </li>
+              ))}
+            </ul>
+            {itemField(row, "ctaLabel") && (
+              <a class="btn btn-primary mt-6" href={itemField(row, "ctaHref") || "#"}>
+                <Editable as="span" sfield={`${base}.items.${i}.ctaLabel`} edit={edit}>
+                  {itemField(row, "ctaLabel")}
+                </Editable>
+              </a>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>

package/src/components/sections/ProductGrid.astro

@@ -0,0 +1,73 @@
+---
+// A grid of products as authored content.
+//
+// Deliberately NOT a live catalog read. A section is stored content that an
+// editor curates; the commerce mirror has its own loader (`readCatalog`) with
+// its own freshness story. A site that wants the live catalog renders it in a
+// page, not through the page-builder — mixing the two would make a section's
+// stored value and what it displays disagree, and the editor would be editing
+// something that isn't there.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, itemField, list, mediaAlt, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+import MediaSlot from "../MediaSlot.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit, mediaMeta } = Astro.props;
+
+const heading = field(item, "heading");
+const items = list(item, "items");
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto max-w-6xl px-6">
+    {heading && (
+      <Editable as="h2" base={base} field="heading" edit={edit} class="mb-8 text-3xl font-bold">
+        {heading}
+      </Editable>
+    )}
+    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      {items.map((row, i) => {
+        const src = itemField(row, "image");
+        const href = itemField(row, "href");
+        return (
+          <article class="card bg-base-100 text-base-content shadow-sm">
+            {/* The link wraps the media only; the name and price stay outside it
+                so they remain in-place editable rather than being swallowed by
+                a navigation target. */}
+            {src && (
+              href ? (
+                <a href={href}>
+                  <MediaSlot
+                    src={src}
+                    alt={mediaAlt(mediaMeta, src, itemField(row, "alt"))}
+                    width={640}
+                    sizes="(max-width: 40rem) 100vw, 20rem"
+                    ratio="1/1"
+                  />
+                </a>
+              ) : (
+                <MediaSlot
+                  src={src}
+                  alt={mediaAlt(mediaMeta, src, itemField(row, "alt"))}
+                  width={640}
+                  sizes="(max-width: 40rem) 100vw, 20rem"
+                  ratio="1/1"
+                />
+              )
+            )}
+            <div class="card-body">
+              <Editable as="h3" sfield={`${base}.items.${i}.name`} edit={edit} class="card-title text-base">
+                {itemField(row, "name")}
+              </Editable>
+              <Editable as="p" sfield={`${base}.items.${i}.price`} edit={edit} class="opacity-80">
+                {itemField(row, "price")}
+              </Editable>
+            </div>
+          </article>
+        );
+      })}
+    </div>
+  </div>
+</section>

package/src/components/sections/SplitImage.astro

@@ -0,0 +1,61 @@
+---
+// Image beside copy. Which side the image sits on is a `_layout` token, so an
+// editor flips it from the inspector and Louise stores `"imageEnd"` — never a
+// class name. The mapping from token to CSS is here, where it belongs.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, mediaAlt, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+import MediaSlot from "../MediaSlot.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit, mediaMeta } = Astro.props;
+
+const heading = field(item, "heading");
+const body = field(item, "body");
+const image = field(item, "image");
+const ctaLabel = field(item, "ctaLabel");
+const ctaHref = field(item, "ctaHref");
+
+// `imageStart` is the default. An unknown/absent token lands here too, so a
+// hand-edited layout can't produce an unstyled row.
+const imageEnd = item._layout === "imageEnd";
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto grid max-w-6xl items-center gap-10 px-6 md:grid-cols-2">
+    {image && (
+      <div class:list={[imageEnd && "md:order-2"]}>
+        <MediaSlot
+          src={image}
+          alt={mediaAlt(mediaMeta, image, field(item, "alt"))}
+          width={800}
+          sizes="(max-width: 48rem) 100vw, 32rem"
+          ratio="4/3"
+        />
+      </div>
+    )}
+    <div>
+      <Editable as="h2" base={base} field="heading" edit={edit} class="text-3xl font-bold">
+        {heading}
+      </Editable>
+      {body && (
+        <Editable
+          as="div"
+          base={base}
+          field="body"
+          type="richtext"
+          edit={edit}
+          class="prose mt-4 max-w-none"
+        >
+          <Fragment set:html={body} />
+        </Editable>
+      )}
+      {ctaLabel && (
+        <a class="btn btn-primary mt-6" href={ctaHref || "#"}>
+          <Editable as="span" base={base} field="ctaLabel" edit={edit}>{ctaLabel}</Editable>
+        </a>
+      )}
+    </div>
+  </div>
+</section>

package/src/components/sections/Steps.astro

@@ -0,0 +1,58 @@
+---
+// A numbered sequence — "how it works", a commission process, an onboarding
+// flow. The number is generated from position rather than stored, so reordering
+// steps in the inspector renumbers them with no content edit.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, itemField, list, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit } = Astro.props;
+
+const heading = field(item, "heading");
+const items = list(item, "items");
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto max-w-4xl px-6">
+    {heading && (
+      <Editable as="h2" base={base} field="heading" edit={edit} class="mb-10 text-3xl font-bold">
+        {heading}
+      </Editable>
+    )}
+    <ol class="grid gap-8">
+      {items.map((row, i) => (
+        <li class="flex gap-5">
+          {/* aria-hidden: the marker duplicates the <ol> semantics a screen
+              reader already conveys, so announcing "1" twice is noise. */}
+          <span
+            aria-hidden="true"
+            class="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-content font-bold"
+          >
+            {i + 1}
+          </span>
+          <div>
+            <Editable
+              as="h3"
+              sfield={`${base}.items.${i}.title`}
+              edit={edit}
+              class="text-lg font-semibold"
+            >
+              {itemField(row, "title")}
+            </Editable>
+            <Editable
+              as="p"
+              sfield={`${base}.items.${i}.body`}
+              edit={edit}
+              multiline
+              class="mt-1 opacity-80"
+            >
+              {itemField(row, "body")}
+            </Editable>
+          </div>
+        </li>
+      ))}
+    </ol>
+  </div>
+</section>

package/src/components/sections/Testimonial.astro

@@ -0,0 +1,51 @@
+---
+// A single quote with optional portrait.
+//
+// <blockquote> + <figcaption> rather than styled divs: the attribution is
+// semantically tied to the quote, which is what a screen reader needs to say
+// who said it.
+import type { SectionRenderProps } from "../sections.js";
+import { alignClass, colorwayClass, field, mediaAlt, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+import MediaSlot from "../MediaSlot.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit, mediaMeta } = Astro.props;
+
+const quote = field(item, "quote");
+const attribution = field(item, "attribution");
+const role = field(item, "role");
+const image = field(item, "image");
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <figure
+    class:list={[
+      "mx-auto flex max-w-3xl flex-col gap-6 px-6",
+      alignClass(setting(item, "align", "center")),
+    ]}
+  >
+    {image && (
+      <MediaSlot src={image} alt={mediaAlt(mediaMeta, image, field(item, "alt"))} shape="circle" size={80} />
+    )}
+    <blockquote>
+      <Editable as="p" base={base} field="quote" edit={edit} multiline class="text-2xl italic">
+        {quote}
+      </Editable>
+    </blockquote>
+    {(attribution || role) && (
+      <figcaption class="opacity-80">
+        <Editable as="span" base={base} field="attribution" edit={edit} class="font-semibold">
+          {attribution}
+        </Editable>
+        {role && (
+          <>
+            {attribution && <span aria-hidden="true"> — </span>}
+            <Editable as="span" base={base} field="role" edit={edit}>{role}</Editable>
+          </>
+        )}
+      </figcaption>
+    )}
+  </figure>
+</section>