2021-12-18

サイトをちょっと修正した

#開発 #サイト更新

気になっていた部分を直した。

タイトルの HTML entity

このサイトの記事は Markdown で管理されている。 Markdown 上で URL の末尾に特定の文字列をくっつけると、HTML に変換する際に URL をタイトルやブログカードで置き換えられる。

しかし、プラグインの実装に問題があり、タイトルに (空白) や > といった文字が含まれていると HTML entity（&, < など）がそのまま表示されてしまう。

https://i.i.imgur.com/QN7RCZph.png|0.55 空白が & nbsp; になっている例

そこで、HTML entity は対応する文字に置き換えることにした。

実装

あまり深く考えず、文字通り HTML entity を対応する文字で置き換えることにした。既存の npm パッケージで解決できるがあまり複雑な実装ではないため自分で書いてみることにした。

HTML entity の対応表は以下のページの下部にある Official list of character entities から取得できる。また、JSON 形式へのリンクもある。
Entity - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

function decode(title){
    const re = /&\w+;/g;
    [...title.matchAll(re)].forEach(entity => {
        title = title.replace(entity, table[entity]["characters"]);
    });
    return title;
}

const table = { /* HTML entity の対応を表す JSON */ }

面倒なので JSON は別ファイルから読み込まずにハードコーディングした。正規表現で & から始まり ; で終わるような部分を取得し、ひとつづつ置き換えている。正規表現ではマッチする文字列のインデックスが取得できるので、上記のように HTML entity をひとつひとつreplace で置き換えていくのは無駄が多そうである。ただ、HTML entity の数や文字列の長さを考えると、どのような実装でも現実的な時間で終わると思うのでこれで満足することにした。

このコードをプラグインに追加し、タイトルを decode することで期待するテキストが表示されるようになった。

例） Class UrlFetchApp | Apps Script | Google Developers

タグページでタグが大文字になる

https://noy72.com/tags/Python/ をみると修正前は以下のように表示されていた。

https://i.i.imgur.com/eFosEpRm.png 全部大文字

タグに text-transform: uppercase; がついているので JavaScript は JAVASCRIPT になり Kubernetes は KUBERNETES になる。とりあえず none を指定して元の文字列をそのまま表示するようにした。

CSS で大文字小文字を変換させることができるのは知らなかった。

text-transform - CSS: Cascading Style Sheets | MDN

感想

HTML Entity は前から気になっていたので直せて満足した。

ただ、

プラグインなどの実装が JavaScript
scss が雑に書かれている
Semantic-UI を使っている（後継に Fomantic-UI がある）
サムネイルがクリックできない

と直したい部分がいくつかあったので、やる気になったらこのあたりをどうにかしたい。