站点基特

每个Caltho网站都用什么建造,出版到npm @caltho/site-kit。每个客户的网站是它的 自 己 的 仓库 及其 设计 , 始于 站点启动器。 。 。 . 工具包不是设计系统。 是合同让CalOS管理其中任何一个网站 他们每个人都需要管道.

这个想法

一个网站的内容(它的页面和上面的内容)生活在 CalOS 系统,所有者在那里编辑. 在 CalOS 的出版用该内容重建网站:没有人推码来更改一页. 这个 设计,意思是块的外观 和什么样的块, 是网站自己的代码.

CalOS要编辑一个它没有看过的网站,这个网站 宣布可编辑的内容这一切需要:

// content/schema.ts
import { defineSite, image, link, text, z } from "@caltho/site-kit/content";

export default defineSite({
  hero: z.object({ heading: text, text: text.optional(), image: image.optional(), actions: z.array(link).default([]) }),
  faq: z.object({ heading: text, items: z.array(z.object({ q: text, a: text })).min(1) }),
  // …whatever this site's design has
});

• 一个页面是 path, (中文(简体) ), title, (中文(简体) ), description,可选 menu 标签和列表 块一个块是 地点申报的种类之一 和它申报的田地.
• site-kit prepare 检查内容与此相对应, 在每一个建筑, 并说每一个问题在哪里 实为(pages[0] (/) › blocks[1] (faq) › items[0] › q) (中文(简体) ). 一个建筑从不出版一个有漏洞的网页.
• 还写着: .site/schema.json宣布为JSON Schema. CalOS 绘制其编辑表 从此: 文本框、取相器(附有必要的说明)、添加、重排和 删除 在一个站点上添加一种块,它出现在CalOS中,没有在CalOS的一侧工作.
• 新的一页是列表中包含路径的新条目;该网站的call-all-route使它成为.

在页面上编辑. 一个网站给 CalOS 一个页面 /calos-preview 与 网站的自有组件,如CalOS发送的(SitePreview 从 @caltho/site-kit/next/preview:

// app/calos-preview/page.tsx
import { previewOrigins } from "@caltho/site-kit/next";
import { Preview } from "@/components/Preview"; // "use client": <SitePreview origins={origins} render={(page) => <SitePage page={page} />} />
export default function CalosPreview() { return <Preview origins={previewOrigins()} />; }

仅通过工具包阅读内容(site(), (中文(简体) ), image()),因此,相同的组件绘制 已建页面(来自 .site/prepared.json)和草稿(来自CalOS). 点击预览匹配 回到球场,它意味着没有增加任何组件。 点击哪个块 页面的准确位置 <BlockMark at={i} /> (从) @caltho/site-kit/next在每块块块之前 绘图:然后一个块可能绘制出任何内容(一个列表,其中尚无任何内容)或几个元素。 它画 现场没有 没有标记,在 main孩子们的话 当没有每个。 只有企业自己的CalOS 地址,其构建与内容一起,可以设置页面框或发送任何信息.

表格是单独和可选的。 块可以发送到任何地址(一个 CalOS 格式,另一个服务,或者没有); 工具箱只检查它是一个 URL.

里面有什么东西

节

任何站点都可以使用, 在此建过一次( 可访问, 每个屏幕大小, 在内容内) 安全政策),所以一个网站会让他们得到一个工具包更新而不是自己的代码. CalOS 提议 它们像网站的编辑器一样 卡尔可以加一个 现日: 画廊 (图片在网格, 每个都带有可选标题,打开最大副本; 2 至 4 横跨,平面,地貌,肖像 (或已采用)和 幻灯片放映 (一一相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

你自己的部门 (单位:千美元)own) 是在 CalOS 而不是在代码中构建的:一个标题和一个到 4个栏(或一个宽一栏相接一个窄一栏),每个分块列表(标题,文字,相片,按钮, 列表、引用、一行中的事实、价格、网格中的照片、幻灯片放映、空间、表格、图标、标志、视频), 左或中,平地或以品牌颜色。 列可被划为牌 (card: true) (中文(简体) ). 内容 部分穿站台自有的课,因此所建站台的外观类似站台.

• 图表:2至5列(第一列超越行的标签,其标题可能是""), 1至20行, 选定栏(highlight,从标签后 1 开始计数 。 单元格"是"或"否"是一滴 或一分,读出作为单词。 640px上方的正表;下面,每行有一张小牌.
• 图标:工具包的一行图标名取而代之(ICON_NAMES:检查,日历,时钟,用户,.), 以品牌颜色来划入,分小,中或大.
• 标志:2至12,一行为灰色,若有上行.
• 视频: YouTube 或 Vimeo 地址和视频是什么(其标题,用于屏幕阅读器),显示 在YouTube的无饼干玩家 或Vimeo的追踪关闭. finish 让玩家进入 (单位:千美元)frame-src)只显示一页,并在预览中。 一个又被通缉的被拯救 内容中的名称 saved 列表中,CalOS在网站本身的种类之外提供.

Slideshow (从) @caltho/site-kit/next)也是一个站点自己的路段使用的构件:SCV's 英雄通过它的照片移动到它的文字背后 <Slideshow fill label="…">{photos}</Slideshow>。 。 。 . 它等待着它关闭屏幕, 指向或集中, 永远不动的人 谁要求少 动作,并有一个按钮停止它 和每张照片一个.

一个站点接住他们一次,三行:

// content/schema.ts: the kit's sections beside the site's own (one of its own by the same name is kept)
import { sections } from "@caltho/site-kit/sections";
export const blocks = { ...sections, hero, about /* … */ };

// the site's page: every block after its mark, framed when it has a background, the kit drawing
// whatever kind the site's own `render` leaves (returns null for)
<KitBlocks blocks={page.blocks} render={(block, i) => <Block s={block} />} level={(i) => (i === 0 ? 1 : 2)} />

// app/layout.tsx
import "@caltho/site-kit/sections.css";

部分业务本身有背景(tone平地、软地、品牌或黑暗,来自 看着 --look-*,与 --look-page 财务报告和审定财务报表 --look-ink 从看 background 财务报告和审定财务报表 ink页:1 以上和以下职等spacing:紧身,平正,有室相)并可以后有相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相background下页 a. 在软的,品牌的或黑暗 它是一个卡套 在内容的宽度 在主题的角落 (单位:千美元)shape: "card",默认值)或横跨页面的波段(shape: "band") (中文(简体) ). 在品牌上, 黑暗或相片, 包保持它的文字和按钮 可以在网站自己阅读 颜色课. presets (从) @caltho/site-kit/sections)是现成的(开场白,单词 照片上,三个原因,一个客户的言语,价格, 呼叫联系,联系,常见 问题、照片和文字、一行的事实、比较、与图标的特征、标志条、 视频),每个 own 块来添加和编辑.

从那时起,每节增加一个工具箱到达现场 cal sites kit update画了 从网站的“看”(--look-*: 其类型尺度、颜色、按钮、宽度和间距),不需要 (b) 某一网站仍可自行提供其任何部分,以取代该工具包: <KitBlocks … classes={{ headingLarge: "font-display text-3xl" }} />。 。 。 .

主题

Look是网站的主题. 除了它的字体,品牌和口音颜色,角和按钮,它有 页面的颜色按角色排列( n)page, (中文(简体) ), ink, (中文(简体) ), muted, (中文(简体) ), line, (中文(简体) ), soft),该站点自有名色 (单位:千美元)palette),类型比例(type:显示出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出入出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出, 在em和一行高处跟踪,内容 width 编辑 space 在两节之间。 一个网站 look 选项是其目前的设计(默认 CalOS 显示);其 CSS 读取变量 (单位:千美元)--look-page, (中文(简体) ), --look-swatch-sand, (中文(简体) ), --look-type-h2-size, (中文(简体) ), --look-width, (中文(简体) ), --look-section-pad,则 在 src/content/ look.ts (src/content/Look.ts) 中的完整列表,所以 CalOS 的更改可以到达每一页. --look-gutter 这是 内容的两侧间距(网站的 gutter 在宽屏幕上的 px 选项, 40 除非说, 一半的电话:一个网站的包装 读它,所以它的章节 和工具包的行.

CalOS 中编辑的菜单可以在链接下有链接(children,最多8个级别: menuOf 返回它们,然后站点头部画出它们(启动器:宽屏幕上倒下,缩进) 电话菜单上. blockLabel(block, kindTitle) (单位:千美元)@caltho/site-kit/schema是一个街区 在列表中被调用: 它的标题, a own 部分的第一个标题, 其它类型的.

每节布局( E)placement,除非一个站点设置 placement: false拥有一个 背景情况(单位:千美元) 颜色(一个角色,或一个站点的自有由它的弹子)和一幅被遮蔽的照片. KitBlocks 画成 围绕该节的框(frameClass),其文字在颜色或相片为暗时会发光 (单位:千美元)backgroundIsDark,从 Look's 值在构建和预览中。 网站的图谋 携带现成的部件 own 类型需要,如 x-presets 在它的根部.

共享卡

每页都共享(Open Graph)1200×630卡片,用其字面:标题和 说明,或 共享标题 财务报告和审定财务报表 共享文本 拥有者可以在 CalOS 的页面设置中设置, 使用 企业的名字。 每所出版作品都会重建网站,所以一张卡片总是说出网页上所说的. A 类 共享图片 选择的页面则使用.

站点设置卡片的外观 content/schema.ts数字 :

export default defineSite(blocks, {
  share: {
    background: "#13262f", color: "#ffffff", muted: "#b8c7cf", accent: "#f2b134",
    backgroundImage: "public/og.png",       // drawn behind, stretched to 1200×630
    logo: "public/logo.svg",                // instead of the business's name in words
    fonts: [{ name: "Brand Sans", path: "assets/fonts/BrandSans-Bold.woff", weight: 700 }],
    prefer: "picture",                      // a page's first picture before its card
    render: (card, h) => h.el({ width: "100%", height: "100%", padding: 72 }, card.title), // a card of its own
  },
});

share: false 关闭卡片:页面与它们的照片共享。 该套装有DM Sans(SIL) 打开字体许可证, src/fonts/OFL.txt),用于不命名自有字体的卡片.

一个建筑

site-kit prepare     # before: content checked, schema written, pictures ready
next build           # the framework, reading .site/prepared.json
site-kit finish out  # after: security policy, _headers, _redirects
site-kit check out   # then: the browser check

这是一个网站和 CalOS 的整个合同: 内容在建, 声明在外, 重定向 在建筑中,文件出。 另一个框架中的站点使用相同的 prepare 财务报告和审定财务报表 finish 读取 .site/prepared.json 自己的办法.

prepare 读取 content/schema.ts 直接,所以它需要 节点22.18或以后。 。 。 .

处理中

bun install
bun run typecheck && bun test src && bun run build

在发布网站前 bun pm pack,然后在现场 bun add file:/path/to/caltho-site-kit-<version>.tgz。 。 。 .

释放: 提高 version 在包.json和合并到主机。 出版工作流程查看一个版本 还没有在npm,检查和建造它 阶段 它与 npm 的可信任的出版( 没有符号是 )),储存在任何地方. 然后一个人批准,这是2FA步骤: npm stage list,则 npm stage approve <id> (或在npmjs.com上批准). 只有那时它才有直播,一个网站的"Dependabot"把它捡起. 设定到软件包上一次: 设置 QQ 信任的出版商 QQ GitHub Actions: organization trycaltho, (中文(简体) ), 仓库 site-kit工作流程 publish.yml,允许"舞台发布".