トップのタイトルはブログを投稿するごとに色が変わって、各記事を見てるときのタイトルは記事ごとに色が違うことになる。透明度も含めて変えているので、運が良ければブログタイトルがめっちゃ薄いときもありそう。編集画面のプレビューで確認できてしまうので、良い色を求めてタイトルを変えてしまうおそれがある状態。
1秒ごととか日付ごとに変わるようにしてもよかったのだけど、何かに基づいて変わっている感はほしいので、いったん記事タイトルだけを使っている。
TextEncoder とか ArrayBuffer とかあたりはひと手間感あるなと思っていたけど、使ってみるとちゃんと道具が揃っていて便利な気がする。
const entryTitleText = document.querySelector('.entry-title-link').textContent;
const encodedText = new TextEncoder().encode(entryTitleText);
crypto.subtle.digest('SHA-1', encodedText).then(digest => {
const rgba = Array.from(new Uint8Array(digest)).slice(0, 4);
const blogTitle = document.querySelector('#title a');
blogTitle.style.color = `rgba(${rgba.join(', ')})`;
});
(追記) その後やっぱりブログタイトルはやめてカラーバーみたいなことにした。せっかく桁がいっぱいあるので、 2色とってグラデーションにしたらちょっと綺麗でよい。グラデーションの角度はハッシュを数値にして合計している (360度を超えても、自然と何回転でもしてくれるので便利)。
const entryTitleText = document.querySelector('.entry-title-link').textContent;
const encodedText = new TextEncoder().encode(entryTitleText);
crypto.subtle.digest('SHA-1', encodedText).then(digest => {
const digestArrray = Array.from(new Uint8Array(digest));
const rgba1 = digestArrray.slice(0, 4);
const rgba2 = digestArrray.slice(4, 8);
const deg = digestArrray.reduce((cur, sum) => cur + sum);
const target = document.querySelector('.entry-date');
target.style.background = `linear-gradient(${deg}deg, rgba(${rgba1.join(', ')}), rgba(${rgba2.join(', ')}))`;
});