ProseAside
apps/www/src/sections/ProseAside.astro · 26 lines · group Text & prose
ProseAside — a card floated beside the text of a <Prose>: a quote, a picture, a callout. The text flows around it. Parent: <Prose> only — put it right after the opening <Prose> tag and give the section width="wide", or the pair will not fit. Children: what the card holds — typically one <Quote …/>, or markdown (a paragraph, a picture written as markdown). Side: right by default; side="left" floats it left. Why a tag and not a named slot: `slot="aside"` does not reach `Astro.slots.has()` from MDX, so content written by hand could never turn the two-column shape on. A tag works from MDX and from Astro alike.
In the fleet
Used on 1 site built with this engine.
Samples 1
<Prose>WHY WE BUILT IT
A thermometer is not a decision
Growers used to choose between a thermometer that told them nothing and a research mast nobody could afford.
Nordvind sits in between: the sensors that change a decision, and none of the ones that only look good on a datasheet.
- Frost, wind, rain and leaf wetness — inside the crop
- One battery per season, one bolt per station
- Readings exported as CSV, PDF or through the API
MDX of this sample
<Prose kicker="WHY WE BUILT IT" title="A thermometer is not a decision">
Growers used to choose between a thermometer that told them nothing and a research mast nobody could afford.
Nordvind sits in between: the sensors that change a decision, and none of the ones that only look good on a datasheet.
* Frost, wind, rain and leaf wetness — inside the crop
* One battery per season, one bolt per station
* Readings exported as CSV, PDF or through the API
</Prose>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| side | 'right' | 'left' | 'right' | which side of the text the card floats to |
Source apps/www/src/sections/ProseAside.astro @ gitt.one
---
/**
* ProseAside — a card floated beside the text of a <Prose>: a quote, a
* picture, a callout. The text flows around it.
*
* Parent: <Prose> only — put it right after the opening <Prose> tag and give
* the section width="wide", or the pair will not fit.
* Children: what the card holds — typically one <Quote …/>, or markdown (a
* paragraph, a picture written as markdown).
* Side: right by default; side="left" floats it left.
*
* Why a tag and not a named slot: `slot="aside"` does not reach
* `Astro.slots.has()` from MDX, so content written by hand could never turn
* the two-column shape on. A tag works from MDX and from Astro alike.
*/
interface Props {
/** which side of the text the card floats to */
side?: 'right' | 'left';
}
const { side = 'right' } = Astro.props;
---
<aside class:list={['not-prose mb-8 lg:mb-4 lg:w-[42%] lg:max-w-xl', side === 'left' ? 'lg:float-left lg:mr-12' : 'lg:float-right lg:ml-12']}>
<slot />
</aside>Source links point to engine-astro@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.