Federated Computer — Hugo Site

A Hugo template for the Federated Computer site, laid out like supermemory.ai: a sticky left rail (logo, the site's pages, Start Now / Sign In, and an "On this page" index of the current page's sections) beside a single narrow reading column. White page, near-black ink, one electric blue (#0562ef), hairline rules, square corners, no shadows. The product's four layers (Federated Core → Software Library → Agent Sandbox → Data & Controls) recur as stacked bars — in the blue hero "field", the layer-fit panels, and the closing call to action.

Requirements

Hugo (extended version). Tested on v0.123.7.

Running it locally

hugo server

Then open http://localhost:1313/.

Building for production

hugo --minify

Output goes to public/.

How pages are built

Every page's content lives in its front matter as a sections: list — each section has a type (e.g. hero, text, layers, stats, quote, table, checklist, features, steps, faq, callout, founder, diagram, final-cta, divider, paths, matrix, split, app-directory, pricing, savings) plus whatever fields that type needs. layouts/partials/render-sections.html loops the list and hands each section to its matching partial in layouts/partials/sections/.

This keeps content and layout separate: to change copy, edit the content/*.md files; to change how a section type looks, edit the one partial in layouts/partials/sections/.

Common section options

Any section can take:

id: "some-id" — anchor for links (e.g. /start-now/#pricing). Without one, the id is made from toc, kicker, or headline.
toc: "Short label" — the label for the rail's "On this page" index (defaults to the kicker, then the headline). Sections without any of these, plus hero, divider, and final-cta, are left out of the index.

Every section opens on a hairline rule, so the older bordered, tinted, and dark options are accepted but no longer change the look. final-cta always renders as the dark closing plate.

Customer paths (Solutions)

The site speaks to four customer types, each with its own page under content/solutions/, plus an overview with a side-by-side comparison:

Page	Customer	Layers
`open-source-apps.md`	Wants open-source apps only	Core, Library
`apps-and-ai-development.md`	Wants the apps plus AI development	Core, Library, Data & Controls
`ai-for-your-apps.md`	Wants Federated AI on open-source apps they host themselves	Core, Data & Controls (Library: their own)
`full-stack.md`	Wants apps, AI development, and to run agents on Federated	All four

Which layers a path uses is set with a fit map, e.g. fit: { core: "yes", library: "own", sandbox: "no", controls: "yes" }. States are yes (Included), own (Your own), and no (Add anytime). Layer names, order, and links come from data/layers.yaml.

New section types:

paths — list of customer paths, each with its layer fit (home, Solutions). strip: true pins a four-layer strip above the list that lights up the hovered path's layers — and the rows of any layers section on the page (mouse devices only)
matrix — capability-by-path comparison table; cells take yes / own / no or free text
split — two titled columns of short lists
app-directory — browsable app catalog; categories, each with a name and a list of apps (name, optional description, optional url which renders a "Learn more." link). Renders as collapsible <details> groups, no JS (Software Library)
pricing — plan groups behind a CSS-only switch (e.g. "You host" / "We host"; up to four). groups, each with a label, optional id (so /pricing/#hosted opens that tab) and lede, plus any of: tiers (name, price, unit, note, intro, features), includes (headline, items, note), addons (headline, lede, items of name/price/unit/body), apps (headline, lede, items of name/category/body/price), and ctas (Pricing)
savings — a bar comparison (bars: name, amount, highlight) and a savings calculator (apps: name, cost, perSeat, selected; compared with federatedAnnual) (Pricing)
stats values that start with a number ("80%+", "100+") count up when scrolled into view
quote takes one text/cite, or several as items. With cards: true, items render as a two-column testimonial grid: text, name, optional role and photo (initials show when there's no photo). Customer headshots live in static/images/customers/ (home page). savings: adds a compact savings calculator below the quotes: it picks the named apps (and ticks selected) out of the savings section on the page at from (e.g. /pricing), so app prices live in one place; more links to the full calculator
app-directory items can also take page: — the app's own page on this site
hero accepts log: — a list of lines (tag + text; think: true for a greyed reasoning step with a spinner and a pause; done: true to close the run) typed out in a fixed-height console window that scrolls like a terminal, as an agent's activity log (home page). Without JS or with reduced motion, all lines show at once. logTitle sets the window's title; logImage puts a photo behind the console in place of the blue field (home: Pikes Peak, static/images/hero-pikes-peak.jpg), and logCaption adds a small credit in its corner
hero accepts fit: to show the layer panel under the actions (in place of the blue field); bars: false drops the field; compact: true makes the field shorter

Every section type now renders kicker, headline, and an optional lede through partials/sections/head.html.

App pages and legal pages

Some pages are long-form Markdown rather than a sections: list:

content/apps/*.md — one page per app, rendered by layouts/apps/single.html. Front matter holds the facts (eyebrow, headline, dek, replaces, plans, price, projectUrl); each sets url: to keep the old site's address (e.g. /jitsi/). Screenshots live in static/images/apps/.
privacy-policy.md and terms-and-conditions.md use layout: "legal" (layouts/_default/legal.html), with effective: for the date.

Site-wide links live in hugo.toml: params.demoUrl (the booking page), params.supportUrl (the help portal), and the footer_social / footer_legal menus.

The "Apps + AI" wall

The rail ends with a slowly scrolling grid of app tiles, pinned to the bottom of the column on screens wider than 1000px and taller than 720px. Tiles come from data/app_wall.yaml (name, url, optional icon). Icons are symbols in the sprite static/images/app-icons.svg (from Simple Icons, CC0; DocuSeal from its own repo). A tile without an icon shows its first letter. The scroll pauses on hover and focus, and stops for reduced motion.

Adding a new page

Create content/your-page.md with a sections: list in the front matter, following the patterns already in content/*.md.
It will render through layouts/_default/single.html automatically, which just runs render-sections.html. Add a link to it in hugo.toml's [[menu.main]] (give it [menu.main.params] dropdown = "menu-name" to render a dropdown from another menu) (and footer_* menus) if it should appear in nav.
If a page needs a layout the section system doesn't cover — like sign-in.md, which uses a real <form> — set layout: "your-layout" in its front matter and add layouts/_default/your-layout.html.

Structure

content/
  _index.md                  Home
  product/
    _index.md                Product overview
    federated-core.md
    software-library.md
    agent-sandbox.md
    data-controls.md
  solutions/
    _index.md                Solutions overview + comparison matrix
    open-source-apps.md
    apps-and-ai-development.md
    ai-for-your-apps.md
    full-stack.md
  ai-privacy-advantage.md
  pricing.md
  start-now.md
  about.md
  sign-in.md
layouts/
  _default/baseof.html       Base HTML shell
  _default/single.html       Generic page (renders sections)
  _default/sign-in.html      Sign-in form page
  index.html                 Home page (renders sections)
  product/list.html          Product overview (renders sections)
  partials/
    head.html, footer.html
    header.html              The rail (nav, actions, "On this page")
    render-sections.html     Dispatches each section to its partial
    section-id.html          Anchor id shared by sections and the rail index
    sections/*.html          One partial per section type
static/
  css/style.css              The whole design system
hugo.toml                    Site config + nav/footer menus

Design notes

Layout: .page is a two-column grid — the rail (layouts/partials/header.html) and the column (main.col, which also holds the footer). Below 1000px the rail becomes a one-line top bar with a Menu toggle.
Type: Geist (reading) and Geist Mono (caps labels, numbers, buttons), loaded from Google Fonts in layouts/partials/head.html.
Color tokens are CSS custom properties at the top of static/css/style.css (--ink, --ink-68, --rule, --paper, --blue, etc.) — change the palette there and it cascades everywhere.
Buttons: CTA style: primary is the solid blue button with an arrow tile, ghost the pale blue one with corner ticks, text a quiet link. A trailing → in a label is dropped; the arrow is drawn for you.
JS is optional. A small inline script in baseof.html fades sections in and highlights the current "On this page" entry. Without it everything still shows; the mobile menu, FAQ, and app directory use native <details>.

9.8 KiB Raw Blame History