とは夏果とは
🔖️AI🔖️browser🔖️event🔖️film🔖️JS🔖️museum🔖️Rust🔖️stroll🔖️tourism🔖️VTuber🔖️Wasm🔖️Wired🔖️Zola
GitHubのContributionを模倣   
2023.07.02 🔖️JS 🔖️Zola

モチベーション

GitHubのContributionが埋まっている人はかっこいいが,コンスタントにプログラムを書くわけでも無いので真似もできない.代わりにツイートで実装すれば良いのではと思い作り始めた.
GitHub Contributions Chartを参考にJavaScriptで実装し,あとはTwitterからツイートを取得するのみに迫った頃,Twitter APIの実質的な終了が言い渡され全てが泡沫の如く消えた.
読書記録などにしようか,いや普通の読書記録アプリさえも続かないのに,などと2ヶ月程度考えた末に当ブログの更新記録にしてみるかと考え,Zolaでの実装を始めた.

制作物

ソースコード

JavaScriptの方についてはDOM操作に慣れている人はGitHub Contributions Chartをそのまま置き換えただけだとわかると思う.更新した瞬間にDOM操作が行われるため画面が乱れるという欠点がある.
Zolaの方については関数としてmacroを使っているが,配列を出力出来ないため,カンマ区切りの文字列を介して返している.また,条件文に括弧を使えないため他の言語なら1つのif文で書けるものもTeraでは2重で書くしかない.以上を抑えておけばmacros.htmlを読んで理解できると思う.
デザインについてはJavaScriptの方はGitHubのものをそのまま,Zolaの方は当ブログに合う感じにした.色の濃度が無いのは1日に1記事より多く更新するとは思えないため.

処理

行ヘッダー

getWeek()で月が何週間あるかを計算しcolspanで間隔を空ける.

get_date_on_weekday()で1年間の全てのn曜日を取得している.
HTMLのtableが列で構成できたらもっと楽だったはずなのですが.

閏年判定

JavaScriptではDate()が便利で必要が無いが,Teraには無いので,last_day()で計算している.

所感

Teraを書くのが大変だった.とはいえ言語の目的に適していないことを行っているのだから当然ではある.
せっかくブログ更新のContributionを作ったのだから定期的に記事を更新していきたいが,継続的な行動が苦手なので厳しいのではないかなと思っている.