Merge pull request #32 from K-tecchan/blog

astro-mdx-anchor

.vscode/settings.json

@@ -6,4 +6,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2
   },
+  "[markdown]": {
+    "editor.formatOnSave": false,
+  }
 }

src/components/Anchor.astro

@@ -1,7 +1,19 @@
 ---
-const props = Astro.props;
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
 ---
 
-<a {...props} target="_blank" rel="noopener noreferrer">
-  <slot />
-</a>
+{
+  href.startsWith("https://kamewalk.com") ? (
+    <a href={href}>
+      <slot />
+    </a>
+  ) : (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      <slot />
+    </a>
+  )
+}

src/content/post/astro-mdx-anchor.mdx

@@ -0,0 +1,102 @@
+---
+title: MDX 中のリンクを別タブで開く
+published: 2024-01-27
+description: Astro で MDX のリンクを別タブで開く方法を紹介します。閲覧中のタブでリンクを開かれるのが許せない人はぜひ。
+tags: [astro, mdx]
+---
+
+import Anchor from "@components/Anchor.astro";
+export const components = { a: Anchor };
+
+技術記事とかを読んでいると参考リンクが気になること、ありますよね。
+「おっ、こっちの記事もよさそう」となったときにリンクをクリックすると元々記事を見ていたタブでリンクを開いてしまい、舌打ちをしながら元のページに戻って、右クリックして新規タブを開く……みたいなことをしている人は多いのではないでしょうか。僕は毎日やっています。
+
+サイト内のリンクであれば全然問題ないのですが、別サイトに飛ぶときに同じタブで開かれるのは許せません。
+
+そんなことを思っているくせに、このブログでも記事中のリンクをクリックすると元々のタブでリンクを開いてしまっていたダブスタ人間が僕です。
+しかし、ついに別タブで開けるようになりました。
+
+### やり方
+
+[Astro のこちらのページ][1]に書かれていますが、カスタムコンポーネントを目的のタグに割り当てればいいだけです。
+今回の場合はとりあえず以下のようなコンポーネントを作成します。
+
+```jsx
+---
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<a href={href} target="_blank" rel="noopener noreferrer">
+    <slot />
+</a>
+```
+
+このコンポーネントを mdx ファイルにインポートして`a`タグに割り当てます。
+コンポーネント名やファイルパスは適当なので自分の場合に置き換えてください。
+
+```jsx
+---
+---
+
+import Anchor from "./Anchor.astro";
+export const components = { a: Anchor };
+
+// このファイル中のリンクは別タブで開かれる
+```
+
+これでリンクを別タブで開くのは実現できました。
+
+僕の場合は自分のブログ内のリンクは同じタブで開きたかったので、コンポーネントファイルで以下のように条件分岐させています。
+
+```jsx
+---
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+{
+  href.startsWith("https://kamewalk.com") ? (
+    <a href={href}>
+      <slot />
+    </a>
+  ) : (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      <slot />
+    </a>
+  )
+}
+```
+
+かなり雑な感じもしますが、動くのでヨシとしましょう。
+
+- [ブログ内リンク](https://kamewalk.com)
+- [ブログ外リンク](http://abehiroshi.la.coocan.jp/)
+
+こんな感じでちゃんと機能していますね。
+
+
+### まとめ
+
+要はカスタムコンポーネントを作って、mdx ファイルにインポートしてやればよいです。
+新しく記事を書く度にカスタムコンポーネントをインポートする手間はありますが、そのくらいは仕方ないですよね。
+jsx ぽく書くほうが個人的には手間だったので、マークダウンの書き味を保ったままリンクを別タブで開けるのは嬉しいです。
+
+今回は`a`タグに絞って紹介しましたが、[他のタグのカスタマイズもできる][2]のでそのうちやってみたいです。
+また、mdx であれば Astro ではなく react とかでも同じことはできるはずなので、Astro 使ってない方もやってみてください。
+
+この世から外部サイトを同じタブで開くサイトが１つでも減ることを願っています。
+
+### リンク
+
+- [MarkdownとMDX | Docs][1]
+- [Components | MDX][2]
+
+[1]: https://docs.astro.build/ja/guides/markdown-content/#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92html%E8%A6%81%E7%B4%A0%E3%81%AB%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6%E3%82%8B
+[2]: https://mdxjs.com/table-of-components/

tsconfig.json

@@ -1,3 +1,10 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@assets/*": ["src/assets/*"],
+    }
+  }
 }