聚管

Polytope是研究者在网络上发布的设计系统:个人学术网站,每篇论文的一页,以及随行的小互动演示. 它作为平地 CSS, Astro 组件,和一个 Python 主题,全部从一个符号文件中编译,所以纸上的数字与主机的页面相匹配.

文件和现场实例: https://dario-loi.github.io/polytope/ 互联网档案馆的存檔,存档日期2013-12-21

看起来像什么

视觉语言取自1961年为IBM设计的数学展览"Charles"和"Ray Eames". 页面为白色墙壁,有黑色展板和重规则. 标题被设定在"Ultra"中,一种脂肪的木质型平板. 你读到的一切都在"利布尔·富兰克林"中,代码在"JetBrains Mono"中. 红色标记一个移动的东西 或你所在的地方,芥末 持有笔记,而tal是链接.

每页都有一个工作模式。 徽为一Vieworis-Rips复合体:随机点会结合到边缘并填入三角形时拖出半径. 文档随从光点增长而打开,主页图案将其作为头图. 概率机,是一款将真正的随机球倒入铃道曲线的Galton板,以"原理"(principles)运行并双倍作为加载指标. 这两作都没有JavaScript,在读者要求减少运动时显示其最终状态.

包括什么

• 大约30个CSS组件,从按钮和表单到纸头,引用,定理环境,一个出版列表,演示铬,以及用静态Pagefind索引进行站点搜索. 光和暗的主题自动切换.
• 35 印出同样标记的Astro组件,以及 <Seo>,它会写入搜索结果的头标签,Google Scholar,并链接预览.
• 作为定制要素的两种工作模式, <ply-machine> 财务报告和审定财务报表 <ply-complex>和地图集, <ply-atlas>:一个CV中位置的地球,该地球会转至您所读的每个条目.
• 一个由8个颜色组成的图表调色板,检查两个主题的色彩视觉缺陷,其中有taplotlib,有图案,Gradio,以及使用它的Streamlit主题.
• 导出 Tailwind v4, Sass, LaTeX (xcolor and a pgfplots cycle list), TypeScript, Figma 令牌插件, 以及 Shiki和 VS 代码的代码主题 .
• 文件网站本身,有四个完整的例子页:一个主页,一个纸页,一个演示,和一个CV.

安装

npm install @dario-loi/polytope

然后在您的布局中导入样式表 :

import "@dario-loi/polytope/css";

没有构建步骤的页面可以链接主机文件 :

<link rel="stylesheet" href="https://dario-loi.github.io/polytope/kit/polytope.css">
<script type="module" src="https://dario-loi.github.io/polytope/kit/js/all.js"></script>

Python主题 在PyPI上:

pip install "polytope-theme[matplotlib,plotly]"

使用 Polytope 与 impecable 设备

无瑕疵 从 DESIGN.md 财务报告和审定财务报表 .impeccable/design.jsonPolytope舰只都复制到一个地点:

npx @dario-loi/polytope            # copies DESIGN.md and .impeccable/design.json into the site
npx @dario-loi/polytope --check    # fails if the copies are older than the installed Polytope

在安装了Polytope的工程中,npx运行该副本. 命令不会取代另一个系统的 DESIGN.md 除非你通过 --force。 。 。 .

没有npm的站点(例如由Python所建的静态站点)可以取取被绑在放行上相同的文件,并在其模板中链接主机样式表:

curl -fsSLo DESIGN.md https://raw.githubusercontent.com/dario-loi/polytope/v0.7.2/DESIGN.md
mkdir -p .impeccable && curl -fsSLo .impeccable/design.json https://raw.githubusercontent.com/dario-loi/polytope/v0.7.2/.impeccable/design.json

无论哪种方式,新页面被构建在 Polytope 内部,设计检查器标记系统以外的任何东西。 运行 /impeccable init 一旦网站有了它 PRODUCT.md,每次升级 Polytope 时再次复制文件.

首页

与 Astro 连接 :

---
import "@dario-loi/polytope/css";
import { TopBar, Mast, Machine, Note } from "@dario-loi/polytope/astro";
---
<TopBar brand="John Doe" links={[{ label: "Research", href: "/" }]} />
<Mast title="Research" lede="Graph learning and the shapes data comes in.">
  <Machine slot="exhibit" interactive />
</Mast>
<main class="ply-container ply-prose">
  <Note>Results are averaged over five seeds.</Note>
</main>

有了matplotlib,所以纸上的数字与页面相匹配:

import matplotlib.pyplot as plt
import polytope_theme as ply

ply.use("light")
fig, ax = plt.subplots()
ax.plot(epochs, accuracy, label="GCN")
fig.savefig("figure.pdf")

Polytope方面的工作

git clone https://github.com/dario-loi/polytope
cd polytope
npm install              # installs the build dependencies
npm run build            # rebuilds dist/ and the generated Python files; commit the result
npm run docs:dev         # rebuilds the kit and serves the docs locally
npm run check:contrast   # fails if any text pair drops below WCAG AA
npm run check:prose      # fails on any en or em dash in the sources or the built docs
cd python && pytest      # tests for the Python theme

设计决定由 tokens/tokens.json 样式 css/src/。该建筑写了其他一切,包括 dist/ 和生成的 Python 文件, 因此编辑源代码并运行 npm run build并履行它所写的. dist/ 被故意执行 : 从 GitHub 安装后不运行安装脚本, CI 如果从新建筑漂移则失败 . DESIGN.md 将系统记录为已建系统及其背后的规则.

状态

这是0.5版本。 核心组成部分在文件、工作模型、地图集、研究组成部分、, <Seo>,演示铬是实验性的,可能在1.0之前改变。 Docs网站上的更改日志列出了不同版本之间的变化.

信贷和许可证

Polytope由东北大学的Dario Loi制作并被Apache许可证2.0发行. 见 LICENSE 财务报告和审定财务报表 NOTICE。 。 。 .

捆绑的字体保留自己的许可证,在字体文件旁边发运:由Apache许可证2.0下的Astigmatic所发;由SIL开放字体许可证1.1下发运的Libre Franklin和JetBrains Mono. 文件遵循的设计系统的定义来自 SBB 设计系统。 。 。 .