InstanceTickerをテーマとして導入する
InstanceTickerをMastodonのテーマとして追加する手順を簡略化して記載する。
テーマを追加する際に変更が必要な箇所は概ね共通なので、同様の手順でオリジナルテーマを作成するとよい。
テーマの実体となるscssファイルをapp/javascript/stylesに作る。
既存のscssをimportして、改造する分を追加でimport。
通常はstylesフォルダに自分のテーマ専用のフォルダを作って、その中のファイルをimportする。
今回はpla.jpのcssをimportする。
code:app/javascript/styles/instance-ticker-type-0.scss
@import 'application';
タイプが複数あるので、もう一つ増やす。
code:app/javascript/styles/instance-ticker-type-1.scss
@import 'application';
今回はcssを別ドメインからimportしているので、Content Security Policyのstyle-srcにドメインを追加しておく。
code:config/initializers/content_security_policy.rb
# (中略)
p.style_src :self, :unsafe_inline, assets_host, instance_ticker_host
環境設定で出てくる選択肢の文字列(英語)
default: Mastodon (Dark)などの記載を探して、その並びにキーのアルファベット順で書く。
code:config/locales/en.yml
instance-ticker-type-0: Mastodon (Dark / Instance Ticker Type-0 alticon)
instance-ticker-type-1: Mastodon (Dark / Instance Ticker Type-1 favicon)
日本語訳だけ足しておく。可能であれば、他の言語を追加してもよい。
code:config/locales/ja.yml
instance-ticker-type-0: Mastodon (ダーク / インスタンス・ティッカー Type-0 代替アイコン)
instance-ticker-type-1: Mastodon (ダーク / インスタンス・ティッカー Type-1 Favicon)
このファイルに記載したファイルがテーマとして選択できる。default: styles/application.scssを探し、その並びにキーのアルファベット順に、最初に作成したscssファイルのパスをstyles/〜の形式で記載。
code:config/themes.yml
instance-ticker-type-0: styles/instance-ticker-type-0.scss
instance-ticker-type-1: styles/instance-ticker-type-1.scss
(v3.0.0でもそのまま使える)
cherry-pickする方法(リポジトリとブランチを指定してfetchし、該当コミットだけcherry-pickする)
code:bash
git cherry-pick cde1ca9