monologue

開発上のルール

をまとめます
このブログは静的サイトです。

これは私ひとりのブログなので、この`rule.md`を人様に見られたらなんだか恥ずかしいですね。
どのように開発してるのかバレバレです。ご容赦ください。

ディレクトリ構成

monologue/
  - index.html
  - 404.html
  - pages.json
  - favicon.ico
  - _config.yml(サイトマップ生成)
  - README.md
  - google????????.html(GoogleSearchConsole認証用)
  - [その他gitignoreしたもの]
  - pages/
      - [ページのフォルダ名]/
          - index.html
          - style.css(任意)
          - script.js(任意)
          - images/(任意)
              - [画像ファイル]
      - 0template/
          - index.html
  - general/
      - html/
          - header.html
          - footer.html
      - css/
          - common.css
      - js/
          - common.js
          - search.js
          - search-allpages.js
          - search-category.js
          - search-tag.js
      - images/
          - [画像ファイル]
      - sidebar/
          - sidebar.html
          - sidebar.js
      - page-search/
          - allpages.html
          - category.html
          - tag.html ## monologue(root)/ #### index.html ホーム。サイト全体の紹介と自己紹介。 #### 404.html ページが見つからない場合にgithub pagesが自動で表示するページ。 #### pages.json 全ページの情報を管理する。最重要。 #### favicon.ico 全ページに適用されるアイコン。 #### _config.yml Jekyllがサイトマップを生成する為の設定ファイル。   これを置くことで`sitemap.xml`がJekyllによって自動生成される。   google検索でヒットするようにするにはこれが必要である。 (Jekyllがあるなら_posts/を使えばいいって話はおいとく。結局私はフレームワーク等に頼らない。) #### README.md github用のREADME。

pages/

0template/index.html

記事を書く際の基本のテンプレート。
このindex.htmlをコピーして使用する。

[ページのフォルダ名]/

一意であり、ページの意味が分かる名前を入力すること。

index.html

ページ本体。

style.css

ページ固有のcss。

script.js

ページ固有のスクリプト。

images/[画像ファイル]

ページで使用する画像フォルダ。
頻繁に使い回すものは(/monologue)/general/images/から使うこと。

general/

html/

header.html

全ページ共通のヘッダー。

footer.html

全ページ共通のフッター。

css/

common.css

全ページ共通のスタイルシート。
メディアクエリで表示位置を操作する。
サイドバー・ヘッダ・フッタのスタイルもここで設定する。
(light-dark()があってもいいかも)

js/

common.js

全ページ共通のスクリプト。
これによりサイドバーの読み込みをする。
ESM

search.js

検索処理の共通処理。 ESM

search-allpages.js

全検索の個別処理。 ESM

search-category.js

カテゴリ検索の個別処理。 ESM

search-tag.js

タグ検索の個別処理。 ESM

images/[画像ファイル]

頻繁に使う画像のフォルダ。

全ページ共通の、他ページのリンクなどを表示するサイドバー。
widthが小さい場合はサイト最下部に移動する。

sidebar.html

サイドバーのhtml。

sidebar.js

サイドバーに表示する内容をpages.jsonから取得する。
ESM

page-search/

様々な方法のページ検索ページ。並び替えができたら美しい。
URLに検索する内容を含める。

allpages.html

全ページを検索する。

category.html

カテゴリ内で検索する。
url末尾は?search=[検索カテゴリ]
urlが無効の場合は全てのカテゴリを列挙する。

tag.html

タグ内で検索する。 url末尾は?search=[検索タグ]
urlが無効の場合は全てのタグを列挙する。

共通事項

pages.json

これは現時点では手動での設定になる。
いずれは全自動で…

ここに書いていない記事は存在しないに等しい。
(完全に隠されているわけではないため、プライベート記事は/hidden-pages/へ)

ページのhtml

記事作成チェックリスト

記事更新チェックリスト

common.css

common.js

注意事項 : type="module"による影響

この属性はこの<script>がESモジュールであることを表す。
そのためCORS制約を考慮する必要がある。

ROOT調整

ローカル環境ではコンテキストパスのルートが/、github pages環境ではルートが/monologue/になるため、<head>内の<meta name="local-env">を読み取り、その存在によってルートを置き換える。

header・footer・sidebarを表示

fetchしてそれぞれ、
header : <body>の開始直後
footer : <body>の終了直前
sidebar : #containerの終了直前
に配置する。

ページ情報を作成

カテゴリ・タグ・作成日・更新日をメインの始めに表示する。
pages.jsonをfetchし、そのJSONのurlが現在のページのURLと完全一致したものから取得する。

モバイル用のツールチップ

titleのついている<abbr>, <dfn>要素にタップでtitle要素と同一の文章を表示する。
要素付近の上部にボックスを表示。画面内に収まるような調節をする。

脚注(footnote)

<sup class="footnote"></sup>で囲んだ文章を補遺文章としてページ最下部に生成する。(innerHTML)
囲んだ文章は脚注番号に置き換える。
参照箇所と脚注に相互リンクを作成する。

目次(TOC)

<main>に記述した全ての<h*>要素に対してのリンクを<h1>直下もしくはページ最上部に表示する。
リンクを通すためのidをつけるため、全ての<h*>要素の直前に空の<span id="h-index-$">を挿入し、それに対してリンクする。

sidebar.js

同一の注意事項

最新の更新をリストする

最も新しい更新日(でなければ作成日)の10件をリスト
同一の日付はグルーピングする。表示される中で最も古いグループが2つ以上の記事を持ち、それを含めると10件を超えてしまう場合は、そのまま10件を超えて表示する。

search.js