Hugoを使用しているサイトでmermaidを記述できるようにする

最近読んだGoF本を記事としてまとめたくて、このサイト内でmermaidを記述したかったので組み込みました。その時の備忘録です。 ※「エラーを出さずに動くようにする」をメインに進めていったので、「こっちの方がいい」「これやらない方がいい」等もあるかもです。適宜読み替えて実施してください。 手順 mermaidのUNPKGから、mermaild.min.jsとmermaild.min.js.mapをダウンロードする static/jsあたりに取得した2つのファイルを置く 適宜リネームしてください。私はVersion情報を入れてmermaild.min.9.2.jsにしました layouts/shortcodes/mermaid.htmlを作成する。 <script src="{{"js/mermaid.min.9.2.js" | relURL}}" defer></script> <div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}"> {{ safeHTML .Inner }} </div> (ローカルで確認するときは)ビルド&devサーバ立ち上げ 記事内に{{<mermaid>}} mermaidの記述 {{< /mermaid >}}と記述することで、図として表示されるようになります。 結果 これは試しに入れてみた公式ドキュメントの例: (ダークモードだとちょっと見づらいかも) sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you?...

<span title='2022-12-14 19:20:31 +0900 +0900'>12月 14, 2022</span>

VSCodeで開いているファイルをgithubで表示する

前置き 今更何を言っているんだ感が凄まじいんですが、最近「ここ見たらわかりやすいですよ」とファイルのURL(できればgithub上の)を投げたい事があって、VScodeでファイル探す→githubのURLに直して渡すの流れが億劫だった(絶対VSCode上で出来るだろうにその時テンパってて見つけられなかった)のを真面目に探したら数分で発見したので備忘録として書いておきます。 結論 拡張機能:GitLensのコマンドで出来ます。 GitLens: Open File on Remote # ブラウザで開く GitLens: Copy Remote File Url # URLコピーする(便利) コマンドを実行する前に範囲選択しておくと、その行が選択された状態のURLになります。便利だ……。 反省 「不便だな」と思ったことを手数で誤魔化してそのままにしないこと。

<span title='2022-11-02 11:27:17 +0900 +0900'>11月 2, 2022</span>

日記 2022-09-15

...

<span title='2022-09-15 21:36:09 +0900 +0900'>9月 15, 2022</span>

TOEICを受けてきました

...

<span title='2022-09-13 19:07:16 +0900 +0900'>9月 13, 2022</span>

日記(2022/06/25)

...

<span title='2022-06-25 13:08:08 +0900 +0900'>6月 25, 2022</span>

気をつけるべきだなと思ったこと

...

<span title='2022-06-23 21:29:26 +0900 +0900'>6月 23, 2022</span>

[TIL] display: contents;

...

<span title='2022-06-20 19:54:19 +0900 +0900'>6月 20, 2022</span>

基本情報に受かりました

...

<span title='2022-05-16 21:41:51 +0900 +0900'>5月 16, 2022</span>

docker for Macが更新できない

...

<span title='2022-01-10 12:45:25 +0900 +0900'>1月 10, 2022</span>

初めてのOSS Contribute【First Contributions編】

https://firstcontributions.github.io/ Make your first open source contribution in 5 minutes. 君も5分でOSSコントリビューターだ!(意訳) 「OSS活動への貢献してみたいけど、まずどうすれば良いのかよくわからないな」と思って調べていた時に発見した上記のありがたいプロジェクトで、OSSコントリビュータデビューさせてもらった時の備忘録です。 OSSにPR出してみたいけどぶっつけ本番は緊張する、貢献したいOSSとかまだあんまり決まってない(けどやりたいとは思ってる)人がもしいれば、このプロジェクトの胸を借りることをお勧めします。 流れのまとめ First ContributionsのリポジトリでPRを出す流れを体験させてもらう サイトのプロジェクトリストを参考に作業するリポジトリを探す ↑のREADMEやContribute.mdなどでルールを確認(大事) 1.の要領でPRを作成、修正、マージ PRの手順 基本的にはリポジトリのREADMEに沿って進めるだけです。5分もかかりませんでした。 (様々な言語で翻訳されていて、コミュニティの大きさを感じます) 簡単な手順は以下の通り。 リポジトリをフォーク フォークしたリポジトリをクローンしてくる ブランチを作成 コードを変更してコミット Push PRを送る(githubで自分のリポジトリに行くとCompare & pull requestボタンが表示される) これで完了です! 記念すべき人生初OSSコミットがこちら 練習が終わったら本番 PRを出すまでの流れを実際に体験できたので、いよいよ他のOSSにPR出していくぞ!という流れなのですが、貢献したいコミュニティが最初から決まっている場合を除くとどこのリポジトリにどういう作業をさせてもらおうか悩む、というか目星をつけられなくて困ると思います。少なくとも私は困りました。 ですがその辺りもFirst Contributionsはカバーしてくれていて、ネクストステップとして取り組みやすいプロジェクトのリストを用意してくれています。(一番最初に貼ったURLと同じです) https://firstcontributions.github.io/ ここで自分で使っている言語や諸々で絞り込んで、気になったリポジトリのissue等を見ていくと、すぐに取り組めるタスクがあったりします。 (もしくは実際に使ってみて、気になる箇所があればissueやそれに対するPRを立てたりもできます) 私の場合は、興味があったリポジトリに誰でも取り組んで良い「ファイルごとのテストカバレッジを100%にする」issueが立っていたのでそれに着手しました。 大体のリポジトリはREADMEやContribute.mdなどに貢献の方法やルールが明記されているのでまずはそれを見て、しっかりそれらを守りつつ作業することを心がけましょう(自戒)。 記念すべき人生二度目OSSコミットがこちら 余談 OSSコントリビューションというと花形のPRに目が行きがちですが、issueでのエラー報告も立派な貢献になるみたいです。言われてみれば確かに、実装中エラーに当たった時OSSのissueにはいつもお世話になってます。 カタカナ表記の場合、リポジトリ派閥とレポジトリ派閥があることに気がつきました。IT用語辞典などでも併記されているので、完全に好みの問題みたいです。 軽い気持ちでやったFirst Contributionsさんのお試しPRでしたが、大きな声では言えないですがこれひとつでfindyさんの偏差値が結構上がりました(!)。OSSへの貢献はエンジニアのハードルの一つなのかも知れないですね。

<span title='2022-01-05 20:34:34 +0900 +0900'>1月 5, 2022</span>&nbsp;·&nbsp;Sawa