@bitbaum/ sitekit (英语)
网站作为数据.
一个网站是网页;一个网页是各节;各节来自 关闭 工会 在运行时Zod验证形状。 一组反光渲染器绘制 网站。 一种来源的侧车记录 每一个生成的球场都来自——所以 "我们虚构了什么"是一种断言,而不是承诺.
从 子系统主办网站 型号(2026-08). 在橙猫的ADR-0003(现场工厂)中决定.
为什么一个封闭的工会
生成器排放 数据与本方案相对应 是一个任务与
可机器校验结果; 生成器的组件不是。 每场
质量成为渲染器的属性——固定 cards 渲染器
改进所有生成的网站。 计划就是审查的地方:
validateSite() 返回时 path: message 一个模型可以直接操作错误 .
当前类型 : hero (带有可选的CTAs), prose, (中文(简体) ), stats, (中文(简体) ), meter, (中文(简体) ),
cards, (中文(简体) ), definitions, (中文(简体) ), feature (一个数字旁边的故事), contact
(地点、地址、小时——存在保护地点), faq, (中文(简体) ),
index, (中文(简体) ), table。大多数类型需要可选 anchor和计划拒绝
任何索引条目 或英雄动作 指向一个碎片... ...没有任何东西携带。 扩大工会是本协议中的一项蓄意行为——一项新的
有其计谋、制造器和试验的乐园
每个消费者在下一个版本的起落架上都得到它.
安装
pnpm add @bitbaum/sitekit
仅限无害环境管理. react >= 18 是同级依赖关系 @bitbaum/sitekit/react; 词根
导出为无框架(一个节点生成器或 CI 检查可以不用React).
使用
import { validateSite, siteNavItems, sitePageAt, pageRendersOwnHeader } from '@bitbaum/sitekit';
const result = validateSite(generatorOutput);
if (!result.success) throw new Error(result.errors.join('\n'));
const site = result.data; // fully typed SiteSpec from here on
import Link from 'next/link';
import { SiteMasthead, SiteFooter, SiteSections } from '@bitbaum/sitekit/react';
<SiteMasthead chrome={site.chrome} navItems={siteNavItems(site.pages)} currentPath={path} Link={Link} />
<SiteSections sections={page.sections} />
<SiteFooter chrome={site.chrome} />
Link 是一个框架连接: 它默认为平地 <a>,这是
各地正确; 下一个. js 应用程序通过 next/link 获取客户端
导航回来.
应用程序外壳
产品应用软件使用与应用程序相同的主头、导航和页脚
现相. 导入 @bitbaum/sitekit/styles.css 一次 一次吗 没有尾风设置
(b) 出席大会所需的会议; --sk-* 变量映射到产品共享
设计标志。 现有文件站点保持其实用类外观.
<SiteMasthead appearance="application" chrome={chrome} navItems={nav}
currentPath="analyze" mainId="main-content" Link={Link}
brand={<Brand />} actions={<AccountControl />} />
<SiteFooter appearance="application" chrome={chrome} Link={Link}
links={[{ href: '/roadmap', label: 'Roadmap' }]} extra="Beta" />
组合应用程序菜单,通过 navGroups 并行 navItems每一个
组有一个 label 财务报告和审定财务报表 items 包含 path, (中文(简体) ), label 和可选
description导入 SiteNavGroup 从 @bitbaum/sitekit/react 用于输入
配置 。 非空组将平面应用程序导航替换为
一个本地披露和一个响应面板;省略或保留空组
平地API. 集团标签,目的地和说明属于主机.
navGroups={[{ label: 'Create', items: [
{ path: 'write', label: 'Write', description: 'Start an article.' }
] }]}
运行 pnpm exec playwright install --with-deps chromium 在此之前 pnpm run verify。 。 。 .
现有的铬可以用 PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH。 。 。 .
浏览器回归使用公共渲染器和样式表,宽度为四个.
该软件包拥有响应菜单, 它的原生无贾瓦脚本倒置, 逃出/外出/路由解雇、跳过链接、活动状态、接触目标以及 页脚布局. 产品供应标签、导航数据、身份和账户 插槽 。 将共享的铬固定在这里,然后释放并更新消费者通过其 常规依赖性检查和部署管道.
证明——"虚无事实"背后的检查
一个封闭的图案邀请完成:一个模型交给了一个 stats 区域想要
数字在里面。 故缺为一等并打出. 发电机发出a
由 JSON 路径键入的侧车 :
import { assertDeliverable, notFoundPaths } from '@bitbaum/sitekit';
const provenance = {
'chrome.name': { kind: 'scraped', url: 'https://cafe-beispiel.ch/' },
'pages.0.sections.1.paragraphs.0':{ kind: 'operator' }, // a human typed it
'pages.0.sections.4.cards.0.meta':{ kind: 'inferred' }, // a model invented it
'pages.0.sections.7.rows.0.1': { kind: 'not-found' }, // we looked; it isn't public
};
assertDeliverable(provenance); // throws: names the inferred path
notFoundPaths(provenance); // the honest gaps — in a pitch, these ARE the pitch
not-found 是两者的区别 不详 财务报告和审定财务报表 空: 它记录到
我们无法发现的是
关于你"诚实的句子而不是借口.
设计合同
造物主们 语义工具类, 其他的 - 没有颜色,
脸,或者这个包裹里的光线飞船。 每个消费者都定义了标志
五十个站点共享一个渲染器 而不像一个公司.
(除美学外,到处统一. 不要指向消费者
@fleet/design-tokens 价值——使事情看起来像舰队;
继承 形状,选择自己的价值。 )
分类渲染器使用, 由消费者的 Tailwind 主题定义:
| 组 | 类 |
|---|---|
| 文本 | text-fg-primary text-fg-secondary text-fg-tertiary text-fg-muted |
| 表面 | bg-surface-page bg-surface-raised |
| 边框 | border-subtle border-strong divide-subtle |
| 浓度状态( S) | bg-accent decoration-accent bg-status-positive bg-status-warning bg-status-negative |
| 类型 | font-heading font-mono tracking-caps tracking-display |
| 版式 | max-w-shell max-w-prose scrollbar-hide |
以 Tailwind 4 定义为 @theme 变量(--color-fg-primary, (中文(简体) ),
--font-heading,并添加软件包到内容扫描中:
@import 'tailwindcss';
@source '../node_modules/@bitbaum/sitekit/dist';
苏斯特拉塔 app/globals.css 是合同的参考执行.
不在此软件包中
- 没有设计标志. 见上文——这就是问题所在.
- 没有刮刀.
siteFromUrl()(从现场取出,与 原产地)是计划中的下个模块;计划是它的目标. - 没有HTTP,没有框架. 和舰队的每件包裹一样.
校验
pnpm run verify # lint + typecheck + build + test — same command CI runs
测试导入软件包 名称 (单位:千美元)@bitbaum/sitekit, (中文(简体) ), @bitbaum/sitekit/react),所以一个断了
exports 地图在 CI 失败, 不是在第一个消费者 .
部分 位点 开放的AI-本土产品 在苏黎世建造的基础设施。 这里的每个软件包都列出使用该软件的应用程序: 使用 sitekit 的应用程序。 。 。 .
应用程序页脚可以通过 groups: [{ label, links: [{ href, label }] }] 页:1
语义导航组. 现有单位 links 继续支持。 消费者
可以配置 --sk-header-height, (中文(简体) ), --sk-mobile-header-height, (中文(简体) ),
--sk-display-weight, (中文(简体) ), --sk-display-leading, (中文(简体) ), --sk-display-tracking 财务报告和审定财务报表
--sk-footer-gap 通过它们的主题适配器,而不替换共享的标记.
移动标签栏
SiteTabBar 为小屏幕(隐藏于
48rem上,由桅杆头导航接管. 传出 3-5 { path, label, icon }
条目和当前路径;它使自己的空间器不隐藏内容.
使用 SiteIcon 对于图标—— { icon: <SiteIcon name="write" /> } - 不是一个
unicode glyph: 集绘制于 currentColor图标和标签
颜色和当前标签是一条规则。 名称 : SITE_ICON_NAMES。通过
tabBar 改为 SiteMasthead 在同一页上 所以桅杆头 放下菜单
按钮,而不是重复标签栏的目的地 :
<SiteMasthead appearance="application" tabBar navItems={nav} … />
<SiteTabBar items={nav.map((n) => ({ ...n, icon: <SiteIcon name={n.icon} /> }))} … />