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 を設定している場合はそれを考慮してパスを書く必要がある

![drag and drop on VS Code]({{ '../assets/images/favicon-32x32.png)

これでどうかなあ。壊れるかなあ -> 壊れちゃったな

![drag and drop on VS Code](/assets/images/favicon-32x32.png)

これは Liquid フィルター relative_url が効いているので、本番環境でも画像が表示されるはず

![drag and drop on VS Code](/images/favicon-32x32.png)

(注： Astro に移行したのでパスの指定の仕方は現在は違う)
![drag and drop on VS Code](/public/images/favicon-32x32.png)