qubyte codes

量子位元組程式碼

此儲存庫包含靜態網站產生器和 https://qubyte.codes 的內容。

發電機

生成器主要包含在index.js 中。大部分繁重的工作是由自訂圖形建立系統和標記完成的，該系統會取得 Markdown 檔案並將其處理為 HTML 內容。但它並不完美，一些猴子補丁是必要的。 lib/render.js 模組進行此修補，並新增語法突出顯示和數學公式的格式。

serve.js 是一個開發伺服器。當檔案變更時，建置圖的某些部分將重新運行以取得更新的輸出。

來源檔案包含在 src 和 content 目錄中。建置時，會建立一個公共目錄，並複製其中一些原始檔案（不需要編譯的文件，例如 Service Worker）。其他檔案必須產生並在建立時放置在公共目錄中。

netlify.toml 是 Netlify 的配置，它託管我的部落格（我強烈推薦它）。在撰寫本文時，此文件僅包含標頭配置。它們針對安全性和 CSS 的瀏覽器快取進行了最佳化。最初我使用 NGINX 在 DigitalOcean Droplet 上託管此部落格。其配置仍然是此儲存庫 nginx.conf 的一部分。

CSS

我使用postcss來編譯CSS。原則上，沒有它也可以使用CSS。大多數情況下，postcss 用於連接和縮小 CSS。輸出 CSS 被散列，散列成為 CSS 檔案名稱的一部分。這是為了快取破壞，因為 CSS 被賦予了較長或不確定的快取時間，以避免它在載入一次後阻塞頁面載入。

除了語法突出顯示之外，該網站很大程度上避免使用 HTML 中的類別作為 CSS 的掛鉤，而是斷言語義標記為 CSS 提供了足夠的上下文來堅持。

圖示

該部落格是一個漸進式網頁應用程式（PWA），並相應地具有各種尺寸的圖示。其中之一也是圖標。

貼文（內容）

目錄包含已發佈貼文的 Markdown 來源。每個帖子都有一個包含各種元資料的 JSON 序言：

姓名	描述
日期時間	貼文的發佈時間戳記。如果這是在將來，那麼該帖子將不會被渲染。
標題	貼文的標題。
描述	帖子的描述。這將作為元描述和元 twitter 描述新增至 HTML 頭部。 Twitter 使用後者來填充 Twitter 卡。
草稿	如果為 true，則不會呈現該貼文。
標籤	標籤列表。這些顯示在每個條目的頂部，並且在透過每個貼文底部的連結分享到 Twitter 和 Mastodon 時也會使用。
網路提及	其他部落格中的網路提及清單。
腳本	帶有href欄位的物件列表。這些將作為模組類型腳本新增至帖子的頭部。

範本

我使用把手模板將內容渲染到頁面中。其中一些是包含頁面，另一些是頁面的公共元件。他們是相當老派的人，但做得很好。

Service Worker 和清單

Service Worker 和清單是使該部落格能夠充當 PWA 的檔案。在大多數情況下，這提供了自訂快取。它還允許在 Android 上「安裝」此部落格（儘管我對此功能並不真正感興趣）。