Skip to content

Commit 71d1b20

Browse files
RhysSullivanclaude
RhysSullivan
and
claude
committed
marketing: blog on the rail layout; one shared shell for home, pricing, and blog
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
1 parent 6bd5775 commit 71d1b20

6 files changed

Lines changed: 233 additions & 415 deletions

File tree

‎apps/marketing/src/layouts/BlogPostLayout.astro‎

Lines changed: 27 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import Layout from "./Layout.astro";
2+
import RailLayout from "./RailLayout.astro";
33
44
interface Props {
55
title: string;
@@ -11,17 +11,9 @@ interface Props {
1111
authorAvatar: string;
1212
}
1313
14-
const {
15-
title,
16-
description,
17-
date,
18-
author,
19-
authorHandle,
20-
authorRole,
21-
authorAvatar,
22-
} = Astro.props;
14+
const { title, description, date, author, authorHandle, authorRole, authorAvatar } =
15+
Astro.props;
2316
24-
const GH = "https://github.com/UsefulSoftwareCo/executor";
2517
const authorX = `https://x.com/${authorHandle}`;
2618
2719
const formattedDate = date.toLocaleDateString("en-US", {
@@ -36,147 +28,29 @@ const formattedDate = date.toLocaleDateString("en-US", {
3628
const isoDate = date.toISOString();
3729
---
3830

39-
<Layout title={`${title} — Executor`} description={description}>
40-
<main class="bg-soft relative min-h-dvh antialiased">
41-
{/* Graph-paper pattern + fade behind the header, matching the homepage */}
42-
<div
43-
class="pattern-bg pattern-graph"
44-
style="position:absolute;top:0;left:0;right:0;height:60vh;z-index:1;pointer-events:none;"
45-
>
31+
<RailLayout title={`${title} — Executor`} description={description} current="blog">
32+
<article class="doc">
33+
<header class="doc__intro doc__intro--post">
34+
<a href="/blog" class="doc__crumb">← Writing</a>
35+
<h1 class="doc__title">{title}</h1>
36+
<p class="doc__lede">{description}</p>
37+
<a href={authorX} target="_blank" rel="noopener noreferrer" class="doc__sig doc__sig--post">
38+
<img src={authorAvatar} alt="" width="40" height="40" loading="lazy" />
39+
<span class="doc__sig-b">
40+
<strong>{author}</strong>
41+
<span>{authorRole} · <time datetime={isoDate}>{formattedDate}</time></span>
42+
</span>
43+
</a>
44+
</header>
45+
46+
<div class="blog-prose doc__prose">
47+
<slot />
4648
</div>
47-
<div
48-
style="position:absolute;top:0;left:0;right:0;height:60vh;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 0%,transparent 55%,var(--color-surface) 100%);"
49-
>
50-
</div>
51-
52-
<div class="relative z-10">
53-
{/* ─── NAV ─── */}
54-
<nav>
55-
<div
56-
class="mx-auto flex h-14 max-w-[1200px] items-center justify-between px-6 sm:px-10"
57-
>
58-
<a href="/" class="flex items-center gap-2.5">
59-
<img src="/favicon-192.png" alt="" class="h-5 w-5" />
60-
<span class="text-[15px] font-semibold tracking-[-0.01em] text-ink"
61-
>executor</span
62-
>
63-
</a>
64-
<div class="flex items-center gap-5">
65-
<a
66-
href="/blog"
67-
class="text-[14px] font-medium text-ink-2 transition-colors hover:text-ink"
68-
>Blog</a
69-
>
70-
<a
71-
href="https://executor.sh/docs"
72-
class="hidden text-[14px] font-medium text-ink-2 transition-colors hover:text-ink sm:inline"
73-
>Docs</a
74-
>
75-
<a
76-
href={GH}
77-
class="text-[14px] font-medium text-ink-2 transition-colors hover:text-ink"
78-
>GitHub</a
79-
>
80-
<a href="/#install" class="btn-primary">Get started →</a>
81-
</div>
82-
</div>
83-
</nav>
84-
85-
{/* ─── HEADER ─── */}
86-
<section class="px-6 pt-16 pb-10 sm:px-10 sm:pt-24 sm:pb-14">
87-
<div class="mx-auto max-w-[720px]">
88-
<a
89-
href="/blog"
90-
class="eyebrow inline-flex items-center gap-1.5 transition-colors hover:text-ink-2"
91-
>← Blog</a
92-
>
93-
<h1
94-
class="mt-5 text-[clamp(2.2rem,5vw,3.6rem)] font-semibold leading-[1.05] tracking-[-0.025em] text-ink text-balance"
95-
>
96-
{title}
97-
</h1>
98-
<p class="mt-5 text-[17px] leading-[1.6] text-ink-2 text-pretty">
99-
{description}
100-
</p>
101-
<div class="mt-8 flex items-center gap-3">
102-
<a
103-
href={authorX}
104-
target="_blank"
105-
rel="noopener noreferrer"
106-
class="shrink-0"
107-
aria-label={`${author} on X`}
108-
>
109-
<img
110-
src={authorAvatar}
111-
alt={author}
112-
width="44"
113-
height="44"
114-
loading="lazy"
115-
class="h-11 w-11 rounded-full object-cover ring-1 ring-rule"
116-
/>
117-
</a>
118-
<div class="min-w-0">
119-
<a
120-
href={authorX}
121-
target="_blank"
122-
rel="noopener noreferrer"
123-
class="text-[15px] font-semibold text-ink transition-colors hover:text-accent"
124-
>{author}</a
125-
>
126-
<div class="mt-0.5 text-[13px] leading-snug text-ink-3">
127-
{authorRole} · <time datetime={isoDate}>{formattedDate}</time>
128-
</div>
129-
</div>
130-
</div>
131-
</div>
132-
</section>
13349

134-
{/* ─── ARTICLE ─── */}
135-
<section class="px-6 pt-2 pb-20 sm:px-10 sm:pb-28">
136-
<article class="blog-prose mx-auto max-w-[720px]">
137-
<slot />
138-
</article>
139-
</section>
140-
141-
{/* ─── BOTTOM CTA ─── */}
142-
<section class="border-t border-rule py-16 sm:py-20">
143-
<div class="mx-auto max-w-[720px] px-6 text-center sm:px-10">
144-
<h2 class="section-title mx-auto mb-7 max-w-[20ch]">
145-
Connect any agent to <span class="serif-italic">everything</span>.
146-
</h2>
147-
<div class="flex flex-wrap items-center justify-center gap-3">
148-
<a href="/#install" class="btn-primary btn-primary--hero"
149-
>Get started →</a
150-
>
151-
<a href={GH} class="btn-secondary">Star on GitHub</a>
152-
</div>
153-
</div>
154-
</section>
155-
156-
{/* ─── FOOTER ─── */}
157-
<footer class="border-t border-rule py-10">
158-
<div
159-
class="mx-auto flex max-w-[1200px] flex-col items-start justify-between gap-6 px-6 sm:flex-row sm:items-center sm:px-10"
160-
>
161-
<div class="flex items-center gap-2.5">
162-
<img src="/favicon-192.png" alt="" class="h-4 w-4 opacity-80" />
163-
<span class="text-[13px] font-medium text-ink-2">executor</span>
164-
<span class="ml-2 text-[12px] text-ink-3"
165-
>© {new Date().getFullYear()}</span
166-
>
167-
</div>
168-
<div class="flex items-center gap-6 text-[13px] text-ink-2">
169-
<a href="/blog" class="transition-colors hover:text-ink">Blog</a>
170-
<a
171-
href="https://executor.sh/docs"
172-
class="transition-colors hover:text-ink">Docs</a
173-
>
174-
<a href={GH} class="transition-colors hover:text-ink">GitHub</a>
175-
<a href="/privacy" class="transition-colors hover:text-ink">Privacy</a>
176-
<a href="/terms" class="transition-colors hover:text-ink">Terms</a>
177-
</div>
178-
</div>
179-
</footer>
180-
</div>
181-
</main>
182-
</Layout>
50+
<section class="doc__section">
51+
<p class="doc__quiet-p">
52+
<a href="/blog">More writing</a> · <a href="/">Back to Executor</a>
53+
</p>
54+
</section>
55+
</article>
56+
</RailLayout>

‎apps/marketing/src/layouts/RailLayout.astro‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
// The site shell: sticky rail on the left, one centred frame, footer at the
3+
// bottom of the body column. The homepage, pricing, and blog all use it.
4+
// Prerendered pages resolve the star count once at build time.
5+
import Layout from "./Layout.astro";
6+
import RailB from "../components/variants/rail-b.astro";
7+
import { getStars, formatStars } from "../lib/github";
8+
import "../styles/variants/doc.css";
9+
10+
interface Props {
11+
title: string;
12+
description: string;
13+
current?: "home" | "pricing" | "blog";
14+
}
15+
const { title, description, current = "home" } = Astro.props;
16+
17+
const GH = "https://github.com/UsefulSoftwareCo/executor";
18+
const stars = await getStars();
19+
---
20+
21+
<Layout title={title} description={description}>
22+
<main class="bg-soft min-h-dvh relative antialiased">
23+
<div class="relative z-10 page">
24+
<div class="page__rail page__rail--b">
25+
<RailB stars={stars != null ? formatStars(stars) : null} current={current} />
26+
</div>
27+
<div class="page__body">
28+
<slot />
29+
30+
<footer class="border-t border-rule py-10">
31+
<div class="max-w-[1200px] mx-auto px-6 sm:px-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
32+
<div class="flex items-center gap-2.5">
33+
<img src="/favicon-192.png" alt="" class="w-4 h-4 opacity-80" />
34+
<span class="text-[13px] font-medium text-ink-2">executor</span>
35+
<span class="text-[12px] text-ink-3 ml-2">© {new Date().getFullYear()}</span>
36+
</div>
37+
<div class="flex items-center gap-6 text-[13px] text-ink-2">
38+
<a href="https://executor.sh/docs" class="hover:text-ink transition-colors">Docs</a>
39+
<a href="/blog" class="hover:text-ink transition-colors">Blog</a>
40+
<a href={GH} class="hover:text-ink transition-colors">GitHub</a>
41+
<a href="/privacy" class="hover:text-ink transition-colors">Privacy</a>
42+
<a href="/terms" class="hover:text-ink transition-colors">Terms</a>
43+
</div>
44+
</div>
45+
</footer>
46+
</div>
47+
</div>
48+
</main>
49+
</Layout>

0 commit comments

Comments
 (0)