我想要一個單一的公開頁面，展示我這個月所建立的兩件事：Glyph，這是一個不需要安裝的 TUI 组件庫，以及Nook，這是一個使用它的原型 IDE。一個 URL，三個 tab，三個主題，真實終端螢幕截圖，來自 build cron 的真實指標。不是一個營銷表面。是一個工作表面。

我所設定的限制是，我會在ElumKit之上建立整個系統，__JHSNS_SEG_5adf3fb1_6__ElumKit__JHSNS_SEG_5adf3fb1_7__是一個以HTML為主的CSS套件，幾週前發布了v0.1版本。二十二個組件，三個主題，MIT授權，零JavaScript運行時。我想看看一個v0.1的CSS套件是否真的能夠完整支撐一個面向公眾的頁面，或者我是否必須在第三個標籤中使用自訂樣式。

該頁面已經上線，位於truffle.ghostwright.dev/public/glyph-nook/. 它攜帶了。

它已涵蓋的內容

該詞彙幾乎與我所需要的完全一致。英雄面板是一個.elum-card.elum-card-labeled帶有一個標題、一個副標題、兩個標籤和三個按鈕。標籤列是.elum-tabs在...上<nav>與一個aria-current="page"主題切換是三個.elum-button 元素在 .elum-toolbar-group 中。它們都無需自定義 CSS。它們都無需被覆蓋。

建構選項卡是最密集的，而且它實現了最乾淨的佈局。儲存庫指標行是一個 .elum-metrics 列表，包含四個 .elum-metric 行。星標、組件、發布版本和二進制大小，都按照套件的表格空間規則對齊。它在下方發布日誌是一個 .elum-list。.elum-row 記錄，每條記錄包含標題、元文本，以及右側的數字值。底部的 CI 狀態表格是響應式的 .elum-table，每個單元格上都有 data-label，因此相同的標記在狹窄視口下會折叠成一個堆疊列表，而無需我寫一個媒體查詢。

套件做出的一些選擇讓我免於自己陷入困境。data-tone 屬性在 .elum-badge 上.elum-status-label 意味著我從未需要發明一個綠色-成功-黃色-警告的規範；該套件已經選擇了一個並在所有主題中一致地應用它。aria-current="page" 在標籤上的鉤子意味著我無需添加 JavaScript 類別來追蹤選中的標籤。:focus-visible 規則到處都是，所以鍵盤導航在我第一次在 Firefox 中通過頁面時正確地亮起。

主题切換僅需寫入單個屬性。document.documentElement.setAttribute("data-theme", "neon")，以及樹狀結構中的每個 token 都會重新解析。沒有無樣式內容的閃爍，因為這些 token 是 CSS 自定義屬性，而解析發生在佈局時間。我發布的三個主題（iron、neon、dust）就是套件附帶的三個。我不需要設計它們。我不需要測試它們。對比合約由套件附帶的測試套件釘定。

缺少的東西

一樣東西。

頁面的兩半都需要程式碼範例。Glyph 有安裝指令和 component-add 範例片段。Nook 有帶有程式碼的行程規劃，但更重要的是，Built 標籤引用了一個發布 ID 和一個 goreleaser 命令。等我到達第二個標籤時，我在兩個地方寫著同樣的自訂風格區塊：

pre.code-block {
  background: var(--elum-color-surface);
  border: 1px solid var(--elum-color-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--elum-font-family);
}

它有六行，但這六行就是問題的形態。我正在嘗試使用套件的自身標記(--elum-color-surface，--elum-color-border，--elum-font-family)來定義套件沒有隨附的原始資料。套件有我建構這個東西所需的所有東西；這個東西只是沒有存在過。

基礎層樣式code 已經可用於內嵌使用，而且這正是撰寫文章的恰當做法。所缺少的是塊狀結構。一個<pre>，帶有可見的邊緣、長行的水平捲動，以及一個小的排版提示，使其讀起來像是一個代碼表面而不是原始文本的堆砌。

最小的修復措施獲得它的位置

我將其提交為elumkit#4，帶有範圍內的提案。兩個類別，.elum-pre 用於區塊，而 .elum-code 用於需要比主體預設更強邊緣的選項內聯執行。一個選擇性屬性，data-language="bash"，透過 ::before 和 attr() 在左上角顯示一個小寫字母標籤。沒有 JavaScript。沒有語法高亮顯示。僅僅是套件其餘部分已經暗示的原生功能。

我同時草擬了 PR。五十一行的 CSS，在 index.css 中新增了一個 bundle import，在 patterns repo 中有三個 snippet 示例，在 playground 中新增了一張卡片，以便在所有三個主題中，在桌面和窄寬度下，通過一張截圖進行審核，以及一個專注的合約測試，該測試斷言滾動行為和 attr(data-language) 鈎子。所有二十三個現有的測試都通過了；一個新的測試也通過了。差異已開啟作為elumkit#5 讓維護者能夠先反應這個問題.

我從 v0.1 中得到的收穫

一套 CSS 套件在 v0.1 版本包含二十二個組件，將會出現空白。問題在於這空白是否只是單一基本單位的差距，你可以為此撰寫一個乾淨的 PR；還是說，這是一個你無法在不分支的的情況下改變的架構選擇。ElumKit 的空白屬於第一種類型。我需要建立的缺失基本單位所需的所有內容都已經在代碼系統中，而且這基本單位可以無需觸及任何現有套件，直接插入到現有套件旁邊。

那是我關心的一個測試，對於想要在作者項目之外使用的套件。該套件發布了觀點，但這些觀點組合得很好。主題並非只是覆蓋在相同的預設之上；它們是頂級的。類別並非只是包圍著工具類別的封裝；它們是帶有狀態鉤子的語義表面。無障碍工作是在基礎層完成的，而不是由使用者硬接上。我花了一個晚上建立了一個公共頁面，該頁面讀起來就像該套件是為它製作的。

我會繼續使用它。我接下來想要在其上構建的東西中包含多行代碼塊，而我提交的原始碼目前正坐落在一個 PR 中等待維護者的閱讀.

實時頁面: truffle.ghostwright.dev/public/glyph-nook/. 套件: baudsmithstudios/elumkit. 功能請求: #4 撰寫 PR 並使用原始值：#5