@colorreefventures/ site (英语)

珊瑚礁公共网站的外壳构建于:每个页面共享框架(skip链接、页眉、主页脚) 区域与分块布局,关闭的动作呼叫,截图框,状态标签,社交卡构建器, 元数据帮助器和仅服务器测试帮助器。 一切都是服务器组件: 这里没有客户端 模块或导入一个,所以在它上建起的一页完全无法传送脚本。 曼汀从未被导入; shell 读取 主题的 CSS 变量 (--mantine-primary-color-*, radi,字体大小)和站点本身的标志.

漂流线 apps/site 开始是Strevlane的拷贝, 两个漂移。 网站之间的区别是什么 产品差异(名称、URL、导航、动作、页脚行、品牌标记、牌等)是一种 SiteConfig 产品经过一次;由于漂移的不同,在这里定居,一种方式,最后列出.

用这个

将外壳绑入一个模块中的站点配置,并从中导入:

// lib/site.tsx
import { createSite } from "@coralreefventures/site";
import { Lockup } from "@/components/brand/Lockup";
import { socialMark } from "@/components/brand/social-mark";
import { brand } from "@streamlane/theme";

export const site = createSite({
  name: "Streamlane",
  url: "https://streamlane.app",
  description: "Docs, work, ideas, and delivery in one place. Delivery state comes from GitHub, never from a person.",
  nav: [
    { key: "product", label: "Product", href: "/product/" },
    { key: "docs", label: "Docs", href: "/docs/" },
    // ...
  ],
  lockup: <Lockup height={24} />,
  actions: [
    { label: "Sign in", href: "https://app.streamlane.app", kind: "link", hideBelow: "md" },
    { label: "Start free", href: "/pricing/", kind: "primary" },
  ],
  // Optional: something in the bar that is not a link, such as a color-scheme control.
  headerTools: <SchemeControl />,
  footer: {
    maker: <>Streamlane · made by <a href="https://coralreefventures.com/">Coral Reef Ventures</a> · source on <a href="...">GitHub</a></>,
    links: [{ label: "Docs", href: "/docs/" }, { label: "Changelog", href: "/changelog/" } /* ... */],
    trademarks: ["Jira", "Confluence", "Linear", "Notion", "GitLab", "Plane"],
  },
  cards: { "/": { headline: "...", sentence: "..." }, "/pricing/": { headline: "..." } },
  socialCard: { background: brand.ink, text: brand.white, muted: brand.paper, accent: brand.signal, mark: socialMark },
  icons: { icon: [{ url: "/brand/favicon-32.png", sizes: "32x32", type: "image/png" }] },
  themeColor: brand.ink,
});

export const { SiteFrame, pageMetadata } = site;

// app/(site)/pricing/page.tsx
import { page, Section } from "@coralreefventures/site";
import { pageMetadata, SiteFrame } from "@/lib/site";

export const metadata = pageMetadata({ title: "Pricing", description: "...", path: "/pricing/" });

const PricingPage = () => (
  <SiteFrame active="pricing">
    <Section size="hero">
      <h1 className={page.title}>One plan.</h1>
    </Section>
  </SiteFrame>
);

headerTools (可选的,因为0.3.0)是用于标题中不是链接的东西,例如色彩方案 控制系统。 它在动作组后和折叠菜单按钮前,垂直地居中 64 px 栏, 在每个宽度上: 从不隐藏在断点下, 也从未复制到折叠菜单中 。 头部保持一个 服务器组件; 元素是产品本身的,也可能是其客户端组件之一. 没有它,头部 标记是球场存在之前的状态, 一个测试持有这一点.

stickyHeader (可选,自0.7.0起)将页眉保留在屏幕上方作为页卷. 在电话上 栏为56px,而不是64;在30em高的屏幕上(电话接通了侧道),头部又卷走 页面的锚和重点控制其下方的土地(scroll-padding-top 在根上,内部折叠的菜单滚动 屏幕,跳过链接坐在上面.

SubNav (自0.7.0起)是栏下一行分页作为一行分页的一行分页,传递到框上作为 subnav,所以这个 坐在信头里面,用它来粘住, 每一页的页面都是一闪一闪的:

<SiteFrame active="product" subnav={<SubNav items={areaTabs} current="delivery" label="Product areas" />}>

排从不包. 在宽于屏幕的地方,它卷起侧面,没有卷轴条,边缘则更多 选项卡会逐渐淡出(滚动时间线,所以一个适合永不淡出),和一个内行脚本,按行运行 解析后,将当前标签滚动到视图中。 把标签短,一个字可以放在哪里, 所以行适合 在笔记本电脑上. AreaPage是因为 nav 对将区域放置于此的场地来说是可选的.

active 输入到配置的导航键。 根布局需要 site.rootMetadata() 财务报告和审定财务报表 site.rootViewport()· ; app/robots.ts 返回时 site.robots(), (中文(简体) ), app/sitemap.ts 返回时 site.sitemap() (增加了文件页数,用于: (b) 拥有这些设施的网站 app/og/[...card]/route.tsx 保留其两字并取其余:

export const dynamic = "force-static";
export const dynamicParams = false;
export const { generateStaticParams, GET } = site.socialCardRoute();

导入 @coralreefventures/site/base.css 在站点本身之前的根版式中 globals.css它携带 共享规则(身体,内含链接,焦点环,跳过链接)和布局符; globals.css 保留颜色 : --site-text, (中文(简体) ), --site-muted, (中文(简体) ), --site-border, (中文(简体) ), --site-paper, (中文(简体) ), --site-link-underline, (中文(简体) ), --site-shadow,用于 状态标签的注意声调 --site-attention-tint, (中文(简体) ), --site-attention-edge, (中文(简体) ), --site-attention-text。 。 。 .

产品领域

自0.6.0起,产品页的区域,因为这两个网站都呈现: AreaCards,概览的卡片,每个链接 它的模糊和可选 tag (Streamlane的"计划"),当前填充; AreaNav,一行药片在 a. 每个区域页上方;以及 AreaPage,区域页面模板:行、状态、标题和与 在他们下面的第一屏蔽,每个索赔的一节, 屏幕在交替的侧面和理由, 什么是尚未在这里, 和关闭乐队。 区和副本是站点通过的数据;行和收盘是元素.

// components/product/AreaPage.tsx in a site
import { AreaNav, AreaPage, CtaBand } from "@coralreefventures/site";
import { areas, overview, type AreaCopy } from "@/lib/areas";

export const ProductArea = ({ area }: { area: AreaCopy }) => (
  <AreaPage
    area={area}
    nav={<AreaNav areas={[overview, ...areas]} current={area.key} />}
    status={(status) => <AreaStatus status={status} />}
    closing={<CtaBand title="..." text="..." actions={<>{/* the site's buttons */}</>} />}
  />
);

status 在站点本身的音符中绘制一个状态( 默认情况下为被注意的音符) Status),以及 screen 绘制屏幕 从标题和形状(默认标记为 Screenshot, 16 / 8 并同时装入, 16 / 10 一个拥有自己的网站. AreaCopy 在网站状态中是通用的。 这个 标题和段落是带有页面类型尺度的平面元素,其中网站的拷贝使用Mantine的 Title 财务报告和审定财务报表 Text,所以页面读取相同,没有曼汀的风格给他们.

安装

船舶类型Script和CSS模块作为源 exports 指点 src/,没有建设步骤。 添加到下一个 transpilePackages 除了产品的主题:

transpilePackages: ["@streamlane/theme", "@coralreefventures/site"],

react, (中文(简体) ), react-dom, (中文(简体) ), next 财务报告和审定财务报表 @mantine/core 在两个网站使用的版本中都是同行。 这里没有进口的 Maintine; 端点表示样式表所期望的主题变量 .

只有服务器的规则

@coralreefventures/site/testing 出口 clientReach(entry, { root })步行两地 server-only.test.ts 运行: 每一个“ 使用客户端” 模块和每一个客户端软件包的导入( x)@mantine/*, (中文(简体) ), next/link, (中文(简体) ), next/image, (中文(简体) ), next/script, (中文(简体) ), next/dynamic从一个条目可以到达。 产品测试一直坚持 根是空的 版式和404页,对于使用Mantine的页面,不为空。 这个软件包的测试在每一个文件上进行 内 src/。 。 。 .

已经解决了,两个地点漂了

• 状态标签默认为普通 attention 调子( 分解线) , 而不是总有颜色 (史记. 流线的 InsightCount 作为 <Status tone="attention">9 insights · 4 companies</Status>。 。 。 .
• 标题的主要动作可以在电话上离开酒吧(hideBelow: "sm",漂流线加长 标签); 任何隐藏动作被列出于折叠菜单中,所以它仍然可以被达到. 流线的"开始免费"适合和 留下来.
• 行动的最后呼吁 tone="band" 在一条规则下漂流线的有色地; Strevlane的平地.
• 社交卡头条包装为920 px,漂流线后期为宽;流线为880.
• 页脚的商标列表由 Intl.ListFormat,如"漂流";"流线"的手写列表为: 同样的.
• 社交卡的字体缓存是 .next/cache/coral-reef/fonts,共享,因为两者都设置了诺托桑斯.