2024-09-28
2024-09-28
isSameOrgin
記事中に記載されたリンクは
- 他サイトへのリンクなら
- アイコン(font-awesome) が付与されて、クリックすると別タブで開く
- 同一サイトのリンクなら
- アイコン(font-awesome) は付与されず、クリックすると遷移する
というふうにしたい。JavaScript で実装する
こちらの記事を見つけた。 protocol, host, port を比較している
https://www.30secondsofcode.org/js/s/is-same-origin/
（当然この記事も別タブで開いて欲しい）
origin で比較するのが手軽っぽいなあ https://developer.mozilla.org/ja/docs/Web/API/URL/origin
const isSameOrigin = (origin, destination) => origin.origin === destination.origin;
// 現在のサイトの URLと渡されたリンクが同一オリジンかどうか
isSameOrigin(window.location, validUrl);
試しにローカルでの他記事へのリンクを置いてみる
ローカルサーバーで動かしている場合に、これが別タブで開かないようになるといい
http://localhost:4000/2024/09/21/learn-all-about-frontend-testing-from-unit-test-to-e2e-encraft.html
⬇️ GitHub UI 上のエディタから画像をうpしてみた。リポジトリの assets/images に画像を置くのもいいが、こちらのほうが手軽かなあ
欠点としては一旦記事をアップロードしてから編集しないといけない点
いっそのこと GitHub UI 上から新規記事を書いても良いのだがうーむ
VS Code なら assets/images に置いている画像を、ドラッグアンドドロップで記事に挿入できる
https://code.visualstudio.com/docs/languages/markdown#_inserting-images-and-links-to-files
⬇️ 同じ画像だがドラッグアンドドロップで記事に挿入してみた
だが単なる相対パスだと本番環境で参照できない。 baseUrl を設定している場合はそれを考慮してパスを書く必要がある
これでどうかなあ。壊れるかなあ -> 壊れちゃったな
これは Liquid フィルター relative_url が効いているので、本番環境でも画像が表示されるはず
