qubyte codes
1.0.0
このリポジトリには、静的サイト ジェネレーターと https://qubyte.codes のコンテンツの両方が含まれています。
ジェネレーターのほとんどは、index.js に含まれています。重労働のほとんどはカスタム グラフ ビルド システムによって実行され、マークダウン ファイルを取得して HTML コンテンツに処理します。ただし、完璧ではなく、いくつかのモンキーパッチが必要でした。 lib/render.js モジュールはこのパッチを実行し、構文の強調表示と数式の書式設定を追加します。
serve.js は開発サーバーです。ファイルが変更されると、ビルド グラフの一部が再実行され、更新された出力が取得されます。
ソース ファイルは、src ディレクトリと content ディレクトリに含まれています。ビルド時にパブリック ディレクトリが作成され、これらのソース ファイルの一部 (Service Worker など、コンパイルが必要ないファイル) がコピーされます。他のファイルは生成する必要があり、作成時にパブリック ディレクトリに配置されます。
netlify.toml は、私のブログをホストする Netlify の構成です (強くお勧めします)。執筆時点では、このファイルにはヘッダーの構成のみが含まれています。これらは、セキュリティと CSS のブラウザ キャッシュのために最適化されています。当初、私は NGINX を使用して DigitalOcean ドロップレットでこのブログをホストしていました。そのための構成は、まだこのリポジトリ nginx.conf の一部です。
CSSのコンパイルにはpostcssを使用します。原則として、CSS はなくても使用できます。ほとんどの場合、postcss は CSS の連結と縮小に使用されます。出力 CSS はハッシュされ、ハッシュは CSS ファイル名の一部になります。これはキャッシュを無効にするためです。CSS には、一度読み込まれた後にページの読み込みがブロックされるのを避けるために、長いキャッシュ時間または無期限のキャッシュ時間が与えられるからです。
このサイトは、構文の強調表示を除いて、HTML 内のクラスを CSS のフックとして使用することをほとんど避けており、その代わりに、セマンティック マークアップが CSS が固執するのに十分なコンテキストを提供すると主張しています。
このブログは Progressive Web App (PWA) であり、それに応じてさまざまなサイズのアイコンがあります。ファビコンもその 1 つです。
このディレクトリには、公開された投稿のマークダウン ソースが含まれています。各投稿には、さまざまなメタデータを含む JSON プリアンブルがあります。
| 名前 | 説明 |
|---|---|
| 日時 | 投稿の公開タイムスタンプ。これが将来の場合、投稿は表示されません。 |
| タイトル | 投稿のタイトル。 |
| 説明 | 投稿の説明。これは、メタ ディスクリプションおよびメタ twitter ディスクリプションとして HTML ヘッドに追加されます。後者は、twitter カードにデータを入力するために twitter によって使用されます。 |
| 下書き | true の場合、投稿は表示されません。 |
| タグ | タグのリスト。これらは各エントリの上部に表示され、各投稿の下部にあるリンクを介して Twitter や Mastodon に共有するときにも使用されます。 |
| ウェブメンション | 他のブログからのウェブメンションのリスト。 |
| スクリプト | hrefフィールドを持つオブジェクトのリスト。これらはモジュール タイプのスクリプトとして投稿の先頭に追加されます。 |
ハンドルバー テンプレートを使用して、コンテンツをページにレンダリングします。これらの一部にはページが含まれており、その他はページの共通コンポーネントです。彼らはかなり古い学校ですが、良い仕事をします。
Service Worker とマニフェストは、このブログが PWA として動作できるようにするファイルです。ほとんどの場合、これによりカスタム キャッシュが提供されます。また、このブログを Android に「インストール」することもできます (ただし、私はこの機能にはあまり興味がありません)。
