Gitt One Pages
Open menu

ProseItem

apps/www/src/sections/ProseItem.astro · 31 lines · group Text & prose

ProseItem — one sub-block of a <Prose> section: a subheading, text, and optionally a picture and a link. Several of them stack inside ONE section with a normal vertical rhythm, instead of becoming sections of their own (that is what made the migrated certification pages sprawl).

In the fleet

Used on 1 site built with this engine.

Samples 1

sampleshown inside <Prose>

How a season is put together

Before the season

Stations go up while the ground is still hard: one bolt, one scan, and the thresholds from last year are already there.

During the season

The dashboard is quiet on purpose. It speaks when a field crosses a line you drew, and stays out of the way otherwise.

After the harvest

The season is exported in one click and compared with the ones before it. The stations stay where they are.

MDX of this sample
<Prose title="How a season is put together" heading="left">
  <ProseItem title="Before the season">
Stations go up while the ground is still hard: one bolt, one scan, and the thresholds from last year are already there.
  </ProseItem>
  <ProseItem title="During the season">
The dashboard is quiet on purpose. It speaks when a field crosses a line you drew, and stays out of the way otherwise.
  </ProseItem>
  <ProseItem title="After the harvest">
The season is exported in one click and compared with the ones before it. The stations stay where they are.
  </ProseItem>
</Prose>

Props

NameTypeRequiredDefaultDescription
titlestring
imagestring
linkTextstring
hrefstring

Source apps/www/src/sections/ProseItem.astro @ gitt.one

---
/**
 * ProseItem — one sub-block of a <Prose> section: a subheading, text, and
 * optionally a picture and a link. Several of them stack inside ONE section
 * with a normal vertical rhythm, instead of becoming sections of their own
 * (that is what made the migrated certification pages sprawl).
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
import Button from './_Button.astro';

interface Props {
  title?: string;
  image?: string;
  linkText?: string;
  href?: string;
}

const { title, image, linkText, href } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

<article class="not-prose mt-10 first:mt-0">
  {title && <h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl [.bg-stone-800_&]:text-white">{title}</h3>}
  <div class="prose prose-gray mt-3 max-w-none text-gray-500 [.bg-stone-800_&]:text-gray-300">
    <slot />
  </div>
  {img && <Image src={img} alt={title ?? ''} widths={[400, 840]} class="mt-6 w-full max-w-2xl rounded-lg shadow-lg" />}
  {linkText && href && <p class="mt-6"><Button href={href}>{linkText}</Button></p>}
</article>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.