diff --git a/DESIGN.md b/DESIGN.md index 7b1a830..a4702b2 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -184,10 +184,13 @@ of the typographic work: names and section titles are 700, everything else is 400 to 600. Expression mode is where a more characterful display face belongs. BotKit's own -sites may pair Inter with an expressive display typeface for headlines. That -face is a brand asset for those surfaces and is not bundled with the library. +sites pair Inter with [Space Grotesk] for headlines, used with restraint. Space +Grotesk is loaded only on those surfaces, self-hosted as woff2 rather than +pulled from a font CDN so a visitor's IP is never handed to a third party; it is +not bundled with the library and never reaches a hosted bot's pages. [Inter]: https://rsms.me/inter/ +[Space Grotesk]: https://fonts.google.com/specimen/Space+Grotesk ### Space and geometry @@ -354,13 +357,23 @@ Expression mode is BotKit's own voice, for BotKit's own surfaces. It is not part of the shipped library; it is recorded here so BotKit-branded work stays consistent. - - *Mark.* BotKit's mark is a bracketed node: a small circular node held - between two brackets, evoking an addressable actor on the network. It is a - brand element for BotKit's surfaces and does not appear on hosted bot pages. - - - *Type.* Expression mode may pair Inter with an expressive display typeface - for headlines, used with restraint. Where Canvas mode keeps a single quiet - face, Expression mode is allowed one confident one. + - *Mark.* BotKit's mascot is a dinosaur, and the logo presents that dinosaur + as an unassembled plastic model kit: the character sits inside a sprue + frame, still attached to the runner by small gates, with a labeled tab in + one corner. The “Kit” in BotKit is literal: it is a kit of parts you + assemble into a bot. The frame doubles as the bracketed node of the earlier + mark, evoking an addressable actor on the network. It is a brand element + for BotKit's own surfaces and does not appear on hosted bot pages. + + - *Type.* Expression mode pairs Inter with Space Grotesk for headlines, used + with restraint. Where Canvas mode keeps a single quiet face, Expression mode + is allowed one confident one. + + - *Motif.* The sprue frame is the repeating device on BotKit's own surfaces. + A hero presents the dinosaur on its runner as the one bold element, and a + small gate node sitting on a hairline separates sections, echoing parts held + on a runner (and, loosely, the edges between actors on the network). The + project site's landing page is built from this motif. - *Color.* Expression mode still draws from the same twenty-name palette, but may use it more boldly, including BotKit's own signature accent. diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 0668c9e..a50b84d 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -114,9 +114,12 @@ export default defineConfig({ ariaLabel: "npm", }, { - icon: "discord", - link: "https://discord.gg/bhtwpzURwd", - ariaLabel: "Discord", + icon: { + svg: + 'Matrix', + }, + link: "https://matrix.to/#/#fedify:matrix.org", + ariaLabel: "Matrix", }, { icon: { @@ -155,14 +158,25 @@ export default defineConfig({ href: "/favicon-32x32.png", }, ], + [ + "meta", + { property: "og:image", content: "https://botkit.fedify.dev/og.png" }, + ], + ["meta", { property: "og:image:width", content: "1200" }], + ["meta", { property: "og:image:height", content: "630" }], + ["meta", { property: "og:image:type", content: "image/png" }], [ "meta", { - property: "og:image", - content: - "https://repository-images.githubusercontent.com/913141583/852a1091-14d5-46a0-b3bf-8d2f45ef6e7f", + property: "og:image:alt", + content: "BotKit: fediverse bots, as standalone servers.", }, ], + ["meta", { name: "twitter:card", content: "summary_large_image" }], + [ + "meta", + { name: "twitter:image", content: "https://botkit.fedify.dev/og.png" }, + ], [ "meta", { diff --git a/docs/.vitepress/og-image.html b/docs/.vitepress/og-image.html new file mode 100644 index 0000000..5d56a80 --- /dev/null +++ b/docs/.vitepress/og-image.html @@ -0,0 +1,206 @@ + + + + + + + + + + +
+
+
+
A Fedify project
+
BotKit
+
Fediverse bots, as standalone servers.
+
A TypeScript framework for the fediverse, built by the Fedify team.
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
botkit.fedify.dev
+
+ + diff --git a/docs/.vitepress/theme/components/BotKitLanding.vue b/docs/.vitepress/theme/components/BotKitLanding.vue new file mode 100644 index 0000000..2989655 --- /dev/null +++ b/docs/.vitepress/theme/components/BotKitLanding.vue @@ -0,0 +1,1349 @@ + + + + + diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 959beb9..ba3c578 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -5,13 +5,17 @@ import "virtual:group-icons.css"; import type { EnhanceAppContext, Theme } from "vitepress"; import DefaultTheme from "vitepress/theme"; import { h } from "vue"; +import BotKitLanding from "./components/BotKitLanding.vue"; import "./style.css"; export default { extends: DefaultTheme, Layout: () => { return h(DefaultTheme.Layout, null, { + // The custom landing renders inside the full-width `.VPHome` container, + // keeping the default top nav and footer. // https://vitepress.dev/guide/extending-default-theme#layout-slots + "home-hero-before": () => h(BotKitLanding), }); }, enhanceApp({ app, router, siteData }: EnhanceAppContext) { diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index ef18dd8..af291e8 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -3,6 +3,37 @@ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ +/** + * Fonts + * + * Space Grotesk (the Expression-mode display face) is self-hosted so the docs + * site never sends a visitor's IP to a third-party font CDN. The Canvas-mode + * Inter is already bundled by VitePress. The two subsets and their + * unicode-ranges mirror Google Fonts' own slicing. + * -------------------------------------------------------------------------- */ + +@font-face { + font-family: "Space Grotesk"; + font-style: normal; + font-weight: 300 700; + font-display: swap; + src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, + U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: "Space Grotesk"; + font-style: normal; + font-weight: 300 700; + font-display: swap; + src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, + U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, + U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + /** * Colors * @@ -44,10 +75,13 @@ * -------------------------------------------------------------------------- */ :root { - --vp-c-green-1: #5f8027; - --vp-c-green-2: #688d2a; - --vp-c-green-3: #6a922b; - --vp-c-green-soft: rgba(82, 53, 33, 0.14); + /* BotKit brand greens, taken from the logo (dinosaur model kit). + -1 is the accessible link/ink green on light surfaces; -3 is the solid + fill that carries white text. */ + --vp-c-green-1: #33790f; + --vp-c-green-2: #398712; + --vp-c-green-3: #3f950f; + --vp-c-green-soft: rgba(57, 135, 18, 0.14); --vp-c-default-1: var(--vp-c-gray-1); --vp-c-default-2: var(--vp-c-gray-2); @@ -75,6 +109,33 @@ --vp-c-danger-soft: var(--vp-c-red-soft); } +/* On dark surfaces the ink green lifts so links and text stay legible. */ +.dark { + --vp-c-green-1: #7ec93b; + --vp-c-green-2: #6bbb2a; + --vp-c-green-3: #4eb31b; + --vp-c-green-soft: rgba(120, 200, 70, 0.16); +} + +/** + * Typography + * + * Body and UI stay on Inter (the bundled Canvas-mode face). Headlines use + * Space Grotesk, BotKit's Expression-mode display face. + * -------------------------------------------------------------------------- */ + +:root { + --bk-font-display: "Space Grotesk", "Inter", var(--vp-font-family-base); +} + +.VPHomeHero .name, +.VPHomeHero .text, +.vp-doc h1, +.vp-doc h2 { + font-family: var(--bk-font-display); + letter-spacing: -0.015em; +} + /** * Component: Button * -------------------------------------------------------------------------- */ diff --git a/docs/index.md b/docs/index.md index ed4a0d5..124657a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,53 +1,12 @@ --- -# https://vitepress.dev/reference/default-theme-home-page +# The landing page is rendered by the BotKitLanding component, injected into the +# home layout's `home-hero-before` slot (see .vitepress/theme/index.ts). layout: home - -hero: - name: BotKit by Fedify - text: Simple ActivityPub bot framework - tagline: A framework for creating your fediverse bots - image: - src: /logo.svg - alt: BotKit by Fedify - actions: - - theme: brand - text: Getting started - link: /start.md - - theme: alt - text: What is BotKit? - link: /intro.md - - theme: alt - text: Examples - link: /examples.md - -features: -- title: Standalone - icon: 🔋 - details: >- - Using BotKit, you can create standalone ActivityPub bots rather than - Mastodon/Misskey bots. Hence, you are free from the constraints of - the existing platforms. -- title: Easy to use - icon: 🧩 - details: >- - BotKit is designed to be easy to use. You can create your bot with - just a few lines of code. It's also fully written in TypeScript, - so you can enjoy the type safety. -- title: Easy to deploy - icon: 🚀 - details: >- - BotKit is designed to be easy to deploy, with minimal dependencies. - You can deploy your bot on Deno Deploy, Fly.io, Railway, or any other - virtual servers. -- title: Powered by Fedify - icon: - src: /fedify.svg - alt: Fedify - width: 36 - height: 36 - details: >- - BotKit is powered by Fedify, a lower-level rock-solid ActivityPub framework. - No worries about the underlying protocol or the compatibility with other - ActivityPub implementations. +title: Standalone ActivityPub bots in TypeScript +titleTemplate: BotKit by Fedify +description: >- + BotKit is a TypeScript framework for building standalone ActivityPub bots for + the fediverse: its own server, not a Mastodon or Misskey account. Built by + the Fedify team. --- diff --git a/docs/public/fonts/space-grotesk-latin-ext.woff2 b/docs/public/fonts/space-grotesk-latin-ext.woff2 new file mode 100644 index 0000000..e3aa61c Binary files /dev/null and b/docs/public/fonts/space-grotesk-latin-ext.woff2 differ diff --git a/docs/public/fonts/space-grotesk-latin.woff2 b/docs/public/fonts/space-grotesk-latin.woff2 new file mode 100644 index 0000000..7b0e76a Binary files /dev/null and b/docs/public/fonts/space-grotesk-latin.woff2 differ diff --git a/docs/public/og.png b/docs/public/og.png new file mode 100644 index 0000000..d77ffe1 Binary files /dev/null and b/docs/public/og.png differ