Skip to content

✨ Add the xmd plan section to the homepage #719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
taras merged 1 commit into from
Sep 2, 2026
Merged

✨ Add the xmd plan section to the homepage #719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions site/components/Prose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,21 @@ export function PageFooter() {
<footer style="border-top:var(--rule) solid var(--line);padding:1.5rem 0;margin-top:1rem;">
<div
class="container"
style={`${MONO}font-size:0.8125rem;color:var(--dim);`}
style={`${MONO}font-size:0.8125rem;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 1rem;`}
>
Made with ❤️ Effection.
<span>
Made with ❤️{" "}
<a href="https://frontside.com/effection/" rel="noopener">
Effection
</a>.
</span>
<span style="display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;">
<a href="https://github.com/taras/executable.md" rel="noopener">
GitHub ↗
</a>
<span aria-hidden="true">·</span>
<a href="https://discord.gg/r9F5QrZrP" rel="noopener">Discord ↗</a>
</span>
</div>
</footer>
);
Expand Down
116 changes: 115 additions & 1 deletion site/routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,28 @@ const PAIR =
/**
* The release-link hover inverts the base rule: it inherits the eyebrow's
* dim until hover, where it picks up the accent.
*
* The plan panels wrap rather than scroll, so every line is its own block
* instead of a newline in the source — an instruction that wraps then takes a
* 3ch hanging indent and its continuation aligns under the text rather than
* under the number. Both panels take the same treatment: the two examples
* differ only in the syntax around them.
*/
const PAGE_CSS = ".release-link{color:inherit;letter-spacing:inherit;}" +
".release-link:hover{color:var(--green);}";
".release-link:hover{color:var(--green);}" +
"#plan .code-panel pre{white-space:pre-wrap;overflow-wrap:break-word;}" +
"#plan .plan-line{display:block;}" +
"#plan .plan-step{display:block;padding-left:3ch;text-indent:-3ch;}" +
"#plan strong code{font-weight:800;}";

/** The instruction list both plan examples are built from, verbatim. */
const PLAN_STEPS = [
"1. Read package.json and CHANGELOG.md.",
"2. Ask an agent to recommend the next semantic version and explain why.",
"3. Validate the answer.",
"4. Ask me to approve it.",
"5. Write RELEASE.md.",
];

const RELEASE_MD: Tok[][] = [
[bold("# Release")],
Expand Down Expand Up @@ -425,6 +444,19 @@ const RUNTIMES: { name: string; body: string; lines: string[][] }[] = [
},
];

/** The plan instructions, one block per line. */
function PlanSteps() {
return (
<>
{PLAN_STEPS.map((step) => (
<span key={step} class="plan-step">
{step}
</span>
))}
</>
);
}

/** A terminal slab whose lines each open with a prompt. */
function Terminal(
{ lines, noWrap }: { lines: string[][]; noWrap?: boolean },
Expand Down Expand Up @@ -460,6 +492,10 @@ export default define.page(function Home({ url }) {
rel="noopener"
>
{VERSION}
</a>{" "}
·{" "}
<a class="release-link" href={GITHUB} rel="noopener">
Star on GitHub ↗
</a>
</span>

Expand Down Expand Up @@ -844,6 +880,66 @@ export default define.page(function Home({ url }) {
</div>
</section>

{/* Plan */}
<section id="plan" class="section" style="gap:1.5rem;">
<div class="section-head">
<h2>Plans are made to be followed.</h2>
</div>

{/* Same instructions, two surfaces: the row states the equivalence. */}
<div
class="grid"
style="grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:start;"
>
<div style="display:flex;flex-direction:column;gap:0.625rem;min-width:0;">
<span class="eyebrow">CLI</span>
<CodeBlock command>
<span class="plan-line">
<Prompt /> xmd plan "
</span>
<PlanSteps />
<span class="plan-line">"</span>
</CodeBlock>
</div>

<div style="display:flex;flex-direction:column;gap:0.625rem;min-width:0;">
<span class="eyebrow">XMD</span>
<CodeBlock>
<span class="plan-line">
<Source lines={[[key("<Plan>")]]} />
</span>
<PlanSteps />
<span class="plan-line">
<Source lines={[[key("</Plan>")]]} />
</span>
</CodeBlock>
</div>
</div>

<p style={P_MD}>
<strong style={STRONG}>
<Term>xmd plan</Term> is command-line shorthand for{" "}
<Term>{"<Plan>"}</Term>.
</strong>{" "}
Underneath, it expands <Term>{"<Plan>"}</Term>{" "}
with your instructions to produce an XMD program you can review,
change, commit, and run.
</p>

<p style={P_MD}>
<strong style={STRONG}>Planning is part of the language.</strong>
{" "}
<Term>{"<Plan>"}</Term> uses the components exposed by{" "}
<Term>xmd syntax</Term>, so it plans with the same vocabulary
available to you.
</p>

<p style={P_MD}>
Once the workflow says what you mean, run the program instead of
asking an agent to figure it out again.
</p>
</section>

{/* Durability */}
<section id="durability" class="section" style="gap:1.5rem;">
<div style="width:100%;max-width:720px;display:flex;flex-direction:column;gap:1.5rem;">
Expand Down Expand Up @@ -954,6 +1050,24 @@ export default define.page(function Home({ url }) {
>
Standalone binary · Deno · Node · Bun
</p>

<div
class="card"
style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;"
>
<div style="display:flex;flex-direction:column;gap:0.375rem;min-width:0;">
<span class="eyebrow">Open source · {VERSION}</span>
<p style={CLAIM}>Star the repository to follow releases.</p>
</div>
<a
class="btn push"
href={GITHUB}
rel="noopener"
style="font-size:0.875rem;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;"
>
Star on GitHub ↗
</a>
</div>
</section>
</div>

Expand Down
Loading