From 542c7ae3b3b31fe7269419648bf37f44b1dcb7ed Mon Sep 17 00:00:00 2001 From: August Cayzer Date: Wed, 21 Oct 2026 11:41:35 +0100 Subject: [PATCH 1/8] feat(site): simplify the header and footer, tighten copy and type --- AGENTS.md | 2 +- src/components/Footer.astro | 19 ++----------- src/components/Header.astro | 57 +++++++++++++++++++++++++++++++------ src/pages/about.astro | 46 ++++++++++++++---------------- src/pages/index.astro | 32 +++++++++++---------- src/styles/global.css | 28 +++++++++--------- 6 files changed, 105 insertions(+), 79 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 4c37a66..d26dd5c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -16,7 +16,7 @@ The source of the public site at `withmarfa.com`: Astro, built to static files a - `src/pages/`: one file per page. `404.astro` is what Cloudflare serves for a missing path. - `src/layouts/Base.astro`: the document head, the header, the column and the footer, used by every page. -- `src/components/`: the header (the Docs pill, and the way home on every other page), the footer (About, Contact and GitHub), and the question that opens. +- `src/components/`: the header (the WithMarfa wordmark, which leads home, a GitHub icon and the Docs pill), the footer (the copyright and About), and the question that opens. - `src/styles/global.css`: the color tokens, shared with the docs site's canvas and text colors. Light and dark follow the system; there is no toggle. - `src/lib/analytics.ts`: PostHog, loaded after the page. - `public/`: copied as is. `_headers` sets the security headers and the Content Security Policy. diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 737965c..1c10dcc 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -4,25 +4,17 @@ const path = Astro.url.pathname.replace(/(\/index)?\.html$/, '') || '/'; diff --git a/src/components/Header.astro b/src/components/Header.astro index c164dfb..5618de1 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,16 +1,26 @@ --- -/** The docs, and on every page but home, the way back home. */ +/** The wordmark, which leads home, and the two ways out: GitHub and the docs. */ const path = Astro.url.pathname.replace(/(\/index)?\.html$/, '') || '/'; ---
- {path === '/' ? : Marfa} - - Docs - - + WithMarfa +
diff --git a/src/pages/index.astro b/src/pages/index.astro index 3c895a0..d7c5138 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,40 +5,42 @@ import Question from '../components/Question.astro';

Introducing Marfa

- Marfa is a shared, typed data layer for your apps. You define the kinds of things you keep and how they relate, - and every app, agent or script you allow works from the same data. + Marfa is a shared data layer for your apps. You decide what kinds of things you keep and how they connect, and + every app, script or AI agent you allow works from the same data.

- Most apps keep their own copy of your data, in their own shape. With Marfa, apps become views onto data you - already own: one app writes something, another shows it differently, a third combines it with something else. You - can swap an app, or build one for yourself, without moving anything. + Most apps keep their own copy of your data, in their own shape. With Marfa, an app is a view onto data you already + own: one writes something, another shows it differently, and you can switch apps or build your own without moving + anything.

- Marfa runs on your own Mac or on Railway, and Marfa Cloud will be an optional way to reach it from anywhere. The - apps WithMarfa makes are native, starting on Mac, iPhone and iPad. Marfa is free and open source. + You run Marfa yourself, on your Mac or on Railway. It’s free and open source, and WithMarfa’s own apps are native, + starting with Mac, iPhone and iPad.

- +

- An app asks for the types it needs, you approve, and it sees those and nothing else. Several apps can work on - the same data, each in its own way, and none of them owns it. + Development versions are out now, for anyone happy to run them from the code. Marfa 0.1, the first semi-stable + release, follows in late October, and the Mac and iOS apps reach TestFlight in November. The + About page has the timeline.

- On your own Marfa, which runs on your own Mac or on Railway. Marfa Cloud will be an optional way to reach it - from anywhere, and it holds none of your data. + On your own Marfa, on your Mac or on Railway. Each app asks for the kinds of data it needs, and once you + approve, it sees those and nothing else. Marfa Cloud will later be an optional way to reach your Marfa from anywhere, and it won’t + hold your data.

- Yes, on the same open API that WithMarfa’s apps use. There are Swift and TypeScript SDKs, a command-line tool - for scripts and agents, and connectors that bring in data from GitHub, Todoist, Readwise and RSS. + Yes. WithMarfa’s apps use the same open API as anything you build. There are Swift and TypeScript SDKs, a + command-line tool for scripts and agents, and connectors for GitHub, Todoist, Readwise and RSS.

diff --git a/src/styles/global.css b/src/styles/global.css index cdbb1c7..e5c3601 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -12,12 +12,13 @@ /* Type and spacing, smaller on phones (below). */ --gutter: 24px; - --text-size: 17px; - --text-leading: 1.65; - --small-size: 16px; - --title-size: 28px; - --gap: 20px; - --top: 56px; + --text-size: 16px; + --text-leading: 1.6; + --small-size: 15px; + --title-size: 26px; + --gap: 18px; + --top: 48px; + --end: 40px; --header-top: 24px; /* Lets an opening question animate to its natural height where supported. */ @@ -38,11 +39,12 @@ :root { --gutter: 20px; --text-size: 15px; - --text-leading: 1.6; - --small-size: 15px; - --title-size: 24px; + --text-leading: 1.55; + --small-size: 14px; + --title-size: 22px; --gap: 14px; --top: 24px; + --end: 16px; --header-top: 10px; } } @@ -78,11 +80,11 @@ body { } main { - padding: var(--top) 0 48px; + padding: var(--top) 0 var(--end); } h1 { - margin: 0 0 calc(var(--gap) + 8px); + margin: 0 0 calc(var(--gap) + 4px); font-size: var(--title-size); line-height: 1.2; font-weight: 600; @@ -91,8 +93,8 @@ h1 { } h2 { - margin: calc(var(--gap) * 1.8) 0 calc(var(--gap) * 0.7); - font-size: var(--text-size); + margin: calc(var(--gap) * 1.6) 0 calc(var(--gap) * 0.6); + font-size: var(--small-size); line-height: 1.4; font-weight: 600; } From 2c87c0379c00f59bebd327aced21c44179583c74 Mon Sep 17 00:00:00 2001 From: August Cayzer Date: Wed, 21 Oct 2026 11:47:23 +0100 Subject: [PATCH 2/8] feat(site): add the Marfa mark, open one question at a time, fix dropped spaces --- AGENTS.md | 2 +- astro.config.mjs | 4 ++++ public/favicon.svg | 10 ++++++++++ src/components/Header.astro | 37 ++++++++++++++++++++++++----------- src/components/Question.astro | 27 +++++++++++++++++-------- src/layouts/Base.astro | 3 ++- src/pages/about.astro | 12 +++++++++--- src/pages/index.astro | 2 +- src/styles/global.css | 27 +++++++++++++++++-------- 9 files changed, 91 insertions(+), 33 deletions(-) create mode 100644 public/favicon.svg diff --git a/AGENTS.md b/AGENTS.md index d26dd5c..7f223df 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -16,7 +16,7 @@ The source of the public site at `withmarfa.com`: Astro, built to static files a - `src/pages/`: one file per page. `404.astro` is what Cloudflare serves for a missing path. - `src/layouts/Base.astro`: the document head, the header, the column and the footer, used by every page. -- `src/components/`: the header (the WithMarfa wordmark, which leads home, a GitHub icon and the Docs pill), the footer (the copyright and About), and the question that opens. +- `src/components/`: the header (the Marfa mark, which leads home, a GitHub icon and the Docs pill), the footer (the copyright and About), and the question that opens. - `src/styles/global.css`: the color tokens, shared with the docs site's canvas and text colors. Light and dark follow the system; there is no toggle. - `src/lib/analytics.ts`: PostHog, loaded after the page. - `public/`: copied as is. `_headers` sets the security headers and the Content Security Policy. diff --git a/astro.config.mjs b/astro.config.mjs index 5d7c45a..190f08f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -4,6 +4,10 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ site: 'https://withmarfa.com', output: 'static', + // Astro 7's default ('jsx') drops a line break before an inline element, + // so prose wrapped in the source loses its space ("TheAbout"). + // `true` compresses without changing what renders. + compressHTML: true, trailingSlash: 'never', build: { // `about.html` rather than `about/index.html`, so Cloudflare serves diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..ea8fd4c --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,10 @@ + + Marfa + + + + + + + + diff --git a/src/components/Header.astro b/src/components/Header.astro index 5618de1..201a06a 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,10 +1,21 @@ --- -/** The wordmark, which leads home, and the two ways out: GitHub and the docs. */ +/** + * The Marfa mark, which leads home, and the two ways out: GitHub and the docs. + * The mark is the docs' favicon.svg, drawn in the page's colors. + */ const path = Astro.url.pathname.replace(/(\/index)?\.html$/, '') || '/'; ---
- WithMarfa + + +