@timmo001 / docs-kit
为我的文档站点共享品牌、布局和配置。
根导出呈现品牌图像，不依赖于文档工具。这个
blume Export持有 布卢姆 组成部分：一个配置助手，一个
主页横幅，标题GitHub链接和布局样式表。如果网站
离开Blume后，根导出保留下来，新工具有了自己的入口点。
安装
bun add -E @timmo001/docs-kit
这个 blume 出口需要 blume 版本 peerDependencies.
布卢姆
配置
docsConfig 从站点详细信息返回完整的Blume配置。通过什么
否则布鲁姆就和他们一起接受；它将覆盖它所替换的默认值，并且
markdown， navigation 和 seo 合并一层深。
import { docsConfig } from "@timmo001/docs-kit/blume";
import { defineConfig } from "blume";
export default defineConfig(
docsConfig({
title: "Triage",
description: "Pull request triage from the terminal.",
site: "triage.timmo.dev",
github: { owner: "timmo001", repo: "triage" },
navigation: {
sidebar: ["/", "/getting-started"],
},
}),
);
默认值:
- 浅色和深色标志来自
public/logo-light.svg和public/logo-dark.svg， 以标题作为徽标文本。 - 内容
src/content/docs，最后修改日期从git和外部链接 在新选项卡中打开。 - GitHub的高对比度的代码主题，因为默认的错过WCAG AA on
注释和关键字。集
markdown.code.theme去改变他们。 - Cloudflare部署到
https://<site>. llms.txt， MCP端点为/mcp， WebMCP和代理的可读性。问 AI和页面反馈关闭。- GitHub
branch设置为main和dir来docs，加上头存储库 链接。 - 生成的共享卡使用
src/assets/logo.svg，以及组织标志，网址为/logo.png(见 品牌形象）。
组件
布卢姆读取 components.ts 在不运行它的情况下，在那里导入组件
直接:
import HeaderSearch from "@timmo001/docs-kit/blume/header-search.astro";
import HomeBanner from "@timmo001/docs-kit/blume/home-banner.astro";
import { defineComponents } from "blume";
export default defineComponents({
layout: {
PageHeader: HomeBanner,
Search: HeaderSearch,
},
});
HomeBanner显示标识、标题和描述，横跨首页的顶部 页面并隐藏页面本身的标题和引页。其他页面什么也没有呈现。HeaderSearch保持Blume的搜索，并在它之后添加GitHub链接 Config有一个存储库。
两者都使用有作用域的CSS，所以它们不依赖于顺风扫描 node_modules.
主题
导入布局样式从网站的 theme.css：
@import "@timmo001/docs-kit/blume/theme.css";
这样可以在大屏幕上扩大内容栏，并保持“在此页上” 铁轨旁边的内容。横幅的全宽布局依赖于这些 列。
然后导入应用程序的基础主题的网站文档，如Base， 玻璃、测量、石板、桥梁或障碍：
@import "@timmo001/docs-kit/blume/themes/bridge.css";
它将Blume的颜色、半径和字体设置为浅色、深色和黑色
更暗，所以离开 theme.accent 的 blume.config.ts． 字体是堆叠的，
加载主题的字体文件 theme.css 还有，比如
@import "@fontsource-variable/inter";． 使用Base直到应用程序有一个主题
自己的。
HeaderSearch 在blme的明暗切换旁边增加了一个模式选择器
浅色，深色和深色。为了让读者也能选择主题，导入每一个
主题后的站点默认设置，并将主题传递给 HeaderSearch 从一个
包装组件:
@import "@timmo001/docs-kit/blume/themes/base.css";
@import "@timmo001/docs-kit/blume/themes/all.css";
---
import HeaderSearch from "@timmo001/docs-kit/blume/header-search.astro";
const themes = [
{ id: "base", name: "Base" },
{ id: "bridge", name: "Bridge" },
];
---
<HeaderSearch {...Astro.props} themes={themes} defaultTheme="base" />
设置这些 theme.css 改变横幅：
.home-banner {
--home-banner-logo-size: 20rem;
--home-banner-height: 30rem;
--home-banner-background: #e4e4e7;
--home-banner-background-dark: #09090b;
}
品牌形象
writeBrandImages 从带有。的方形SVG徽标渲染png viewBox:打开
图形和GitHub社交预览卡，512px徽标和苹果触摸图标。
留下一个输出以跳过它。
import { writeBrandImages } from "@timmo001/docs-kit";
await writeBrandImages({
logo: "src/assets/logo.svg",
title: "Triage",
tagline: ["Pull request triage", "from the terminal."],
site: "triage.timmo.dev",
background: "#18181b",
accent: "#d97706",
outputs: {
socialPreview: "../.github/social-preview.png",
logo: "public/logo.png",
appleTouchIcon: "public/apple-touch-icon.png",
},
});
Blume制作了自己的每页分享卡，所以一个Blume网站只需要 og 用于
文档外的链接。GitHub不读取社交预览
库;在存储库设置下上传它。
开发
看到 库的自述.