
当ブログにリンクカードを実装しました！

https://github.com/markdown-it/markdown-it

直書きのURLに対してリンクカードを生成するようにしております。  
なかなか調べても情報が少なかったので、  
catnoseさんのzenn-editorのコードで勉強させていただきました。

https://github.com/zenn-dev/zenn-editor/blob/canary/packages/zenn-markdown-html/src/utils/md-linkify-to-card.ts

誰かの参考にしていただけたら嬉しいです！

<br>

## 使用するもの

- markdown-it
  - markdownからhtmlにパースする
- [open-graph-scraper](https://www.npmjs.com/package/open-graph-scraper)
  - OGP情報を簡単にスクレイピングして取得できるライブラリです

<br>

## ロジック(このサイト)

1. マークダウンデータから直書きリンクを探す
2. OGP情報を取得
3. markdown-it用のプラグインを自作する
4. markdown-itでのパース時に、自作したプラグインを読みこむ
5. 1,2,4をサーバー側で読み込む

<br>

## 1. マークダウンデータから直書きリンクを探す

このブログはマークダウンデータをDBに保存しています。  
データから直書きリンクを正規表現で抽出し配列に入れます。

```typescript
export function extractLinks(md: string) {
  const regFloatLink =
    /(?<!\()https?:\/\/[-_.!~*\\'()a-zA-Z0-9;\\/?:\\@&=+\\$,%#]+/g;
  const floatLinks = md.match(regFloatLink);

  return floatLinks ?? [];
}
```

<br>

## 2. OGP情報を取得

1で取得したリンクを元に、open-graph-scraperを使用し直書きリンクからOGP情報を取得します。  
これは、リンクカードを表示するときのテキストやfavicon, ogp画像を使用するためです。

```typescript
export async function getOgpData(
  autolink: string[],
): Promise<OgpDataRes[] | undefined> {
  let res: any = [];

  if (autolink.length === 0) {
    return res;
  }
  if (!autolink) return;

  await Promise.all(
    autolink.map(async (link) => {
      const { error, html, result, response } = await ogs({
        url: link,
        timeout: 5000,
      });

      // エラー時とデータ取得失敗の際
      if (error || !result.success) {
        if (error) {
          console.error('ogp取得エラー1', error);
        } else if (!result.success) {
          console.error('ogp取得エラー2', result.success);
        }

        return response;
      }

      // OGPデータ取得に成功;
      res.push(result);
    }),
  );

  return res;
}
```

<br>

無事、OGPデータを取得できると下記のように情報が返ってきます。  
いくつか情報が返ってきますが、  
このサイトで使用しているのは下記になります。

- ogSiteName
- ogTitle
- favicon
- ogImageのurl, alt

<br>

## 3. markdown-it用のプラグインを自作する

プラグインの作成に関しては、下記の記事を参考にさせていただきました。

https://zenn.dev/mkizka/articles/9d4954d83b8862

```typescript
export function linkCard(md: MarkdownIt, ogpDatas: OgpDataRes[]) {
  md.core.ruler.after('replacements', 'link_card', ({ tokens }) => {
    // https://から始まるリンクのみが対象
    const linkRegex = /^https:\/\//;

    tokens.forEach((token, i) => {
      // 直書きリンクはinlineのchildrenにのみ存在するのでそれ以外は除外
      if (token.type !== 'inline') return;
      if (!token.children) return;

      // リンクカードの生成
      token.children.forEach((child) => {
        if (
          child.content &&
          child.type === 'text' &&
          child.markup !== 'linkify' &&
          linkRegex.test(child.content)
        ) {
          // ogpDataのリンクと同じ場合htmlを生成する
          const ogpData = ogpDatas.find((data) => {
            return data.ogUrl === child.content;
          });
          console.log(ogpData);

          if (ogpData) {
            child.content = `
              <section class="md-link-card">
                <div class="og-text">
                  <h1>${ogpData.ogTitle}</h1>
                  <div class="og-text__icon">
                    ${
                      ogpData.favicon
                        ? `<img src="${ogpData.favicon ?? 'リンクカードのfaviconです'}" />`
                        : ``
                    }
                    <p>${ogpData.ogSiteName}</p>
                  </div>
                </div>
                <div class="og-img">
                  <img src="${ogpData.ogImage[0].url}" alt="${ogpData.ogImage[0].alt ?? 'リンクカードのイメージです'}">
                </div>
              </section>
            `;
            child.type = 'html_block';
          }
        }
      });
    });
  });

  return true;
}
```

<br>

## 4.markdown-itでのパース時に、自作したプラグインを読みこむ

3で作成した`linkCard`プラグインをパース時に動くように読み込みます。

```typescript
import MarkdownIt from 'markdown-it';
import { linkCard } from './linkCard';

export function changeHtml(markdown: string, ogpDatas?: any) {
  // オプションが別途必要な場合はlinkifyの後に書けばOK
  const md: MarkdownIt = MarkdownIt({
    html: true,
    linkify: true,
  });

  // 自作プラグインを読み込み取得したOGP情報を渡す
  if (ogpDatas) {
    md.use(linkCard, ogpDatas);
  }

  return md.render(markdown);
}
```

<br>

## 5. 1,2,4をサーバー側で読み込む

これで準備ができたので、Next.jsの`getStaticProps`で実行します。  
SSR, ISRでも同様で大丈夫だと思います。

```typescript
export const getStaticProps: GetStaticProps = async () => {
  // response.notice.contentの中にマークダウンデータが入っています。

  --- 省略 ---

  // リンクカード生成
  const floatLink = extractLinks(response.notice.content ?? '');
  const ogpDatas = await getOgpData(floatLink);

  // マークダウンをhtmlに変換
  const htmlContent = changeHtml(response.notice.content ?? '', ogpDatas);

  --- 省略 ---
}
```

<br>

あとはCSSで装飾すればリンクカードが完成します！  
当ブログはGithubで公開しておりますので、  
コードの全般は下記のリンクカードからご覧いただければと思います。

<br>

https://github.com/zaki-app/zaki-dev


【Next.js】markdown-itでリンクカードを作成する


## はじめに

このブログはNext.jsで作っています。
Next.js便利だなと思っている反面、他にいいものはないかなと調べていたら、、

<br>

https://www.epicweb.dev/why-i-wont-use-nextjs

<br>

こういう記事を目にすることがあり、  
ちょっとRemixを触ってみようという気になったので、  
すごい初歩のRemixクイックスタートの記事を書いてみました！

<br>

https://remix.run/docs/en/main/start/quickstart

<br>

## CLIを使用する場合

下記のように進むとRemixがテンプレートを作ってくれる。

```bash
npx create-remix@latest

# 質問
Where should we create your new project?
.

Initialize a new git repository? (recommended)
No

Install dependencies with npm? (recommended)
Yes

```

ちょっと、npmで構成している時間が1分くらいあったので遅いかなと感じました。

なので、今回は公式にもあるように一から進めてみようと思います。

<br>

## 一から作っていく場合

```bash
mkdir remix-app && cd remix-app
npm init -y

# remixをインストール
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
# typescript使用時
npm i -D @types/node @types/react @types/react-dom typescript

# ビルドツールはviteを使用
npm i -D @remix-run/dev vite vite-tsconfig-paths
```

どうやら、RemixはViteを使用しておりプラグインが充実している。  
こちらも公式に沿ってViteの設定をする。  
他にもViteより10倍早いと言われている`Turbopack`もあるがRemixのプラグインにあるか調べきれてないので、  
とりあえず、Viteで進める。

```javascript:vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
  plugins: [ remix(), tsconfigPaths()],
  server: {
    port: 3001,
  },
  build: {
    outDir: "build"
  }
});
```

このファイルでポートを任意の番号に変更できる。

<br>

## ルートを作成

```bash
mkdir app
touch app/root.tsx
```

```typescript:root.tsx
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react"
import { ReactNode } from "react";
import "@/styles/global.scss"

export function Layout({children}: {children: ReactNode}) {
  return (
    <html lang="ja">
      <head>
        <meta charSet="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />;
}
```

これが大元を司っているファイル。  
`ScrollRestoration`は、ブラウザのスクロール位置を覚えておき、  
ブラウザバックで戻ってきたときに、同じ位置で表示してくれる。

<br>

# viteの設定ファイルを作成

```typescript:vite.config.js
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
  plugins: [ remix(), tsconfigPaths()],
  server: {
    port: 3001,
  },
  build: {
    outDir: "build"
  }
});
```

package.jsonに追記。

```shell
"dev": "remix vite:dev",
"build": "remix vite:build"
```

無事に`localhost:3001`で起動した！

このコマンドは、  
`Cloudflare Workers、Netlify、Vercel、Fastly、AWS、Deno、Azure、Fastify、Firebase`などどの環境でも動作するようにできている。

また独自のサーバーを組み込むことも可能。  
しかし、RemixはViteを推しているようなのでこのままViteを使ってみる。

<br>

## Tailwindを入れてみる

せっかくなので、TailwindCssを導入してみる。

```
npm i tailwindcss postcss autoprefixer sass
```

個人的にcssよりsassの方が好きなのでここで一緒に入れておく。

### 設定ファイルを生成

```
npx tailwindcss init -p
```

### tailwind.config.js

上記のコマンドで`tailwind.config.js`ファイルが作成されている。  
appディレクトリ以下に適用させるように設定。

```javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### グローバルscssファイルで読み込む

```css:global.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
```

これで無事にTailwindのスタイルが適用された！

<br>

## まとめ

Next.jsを使用していると、結構ブラックボックスになる部分が個人的にはあると思っていたので、  
ゼロイチのような感じで構築できていけるのは書いてて楽しい気がする😇  
ちょっとハマりそうなので、今後ルーティングやサーバー側の処理の内容を書けたらなって思っている！

<br>

https://github.com/zaki-app/remix-app

<br>


【Typescript】Remixクイックスタート


## プロジェクトのセットアップ

<br>

1. まず下記からアカウントを作成します。  
   https://sentry.io/signup/

<br>

2. プロジェクトのセットアップ  
   アカウント作成後、下記のような画面になるので  
   一度`Skip onboarding.`でダッシュボードを開きます。
   ![Welcome to Sentry](https://zaki-dev-image-bucket.s3.ap-northeast-1.amazonaws.com/article-images/sentry/1.png 'Welcome to Sentry')

    <br>

   下記のような画面に遷移するので、`Create project`をクリックします。

   ![Create Project](https://zaki-dev-image-bucket.s3.ap-northeast-1.amazonaws.com/article-images/sentry/2.png 'Create Project')

    <br>

   画面に表示された質問に対して答えていきます。

   ```
   1. Choose your platform
   Next.js

   2. Set your alert frequency
   Alert me on every new issue

   3. Name your project and assign it a team
   Project nameに任意のプロジェクト名を入力
   ```

<br>

3. Next.js SDK

下記の画面に遷移するので、Sentryウィザード(自動でSentryの設定ファイルなどを作ってくれる)を使用して構成します。

```shell
npx @sentry/wizard@latest -i nextjs
```

下記のように進めていきます。

```shell
Need to install the following packages:
@sentry/wizard@3.22.1
Ok to proceed? (y) y


Are you using Sentry SaaS or self-hosted Sentry?
│  ● Sentry SaaS (sentry.io)
│  ○ Self-hosted/on-premise/single-tenant

# Yesを選択後Sentryにログインします
Do you already have a Sentry account?
│  ● Yes / ○ No

# プロジェクト選択後、@sentry/nextjsがインストールされます
Select your Sentry project.
│  ● 設定したプロジェクト名

# Noを選択下記のファイルがルート直下に作成されnext.config.mjsにsentryの設定が入っていきます。
# sentry.server.config.ts
# entry.client.config.ts
# sentry.edge.config.ts
Do you want to route Sentry requests in the browser through your NextJS server to avoid ad blockers?
│  ○ Yes
│  ● No (Browser errors and events might be blocked by ad blockers before being sent to Sentry)
```

<br>

すでに、`_error.ts`がある場合`captureUnderscoreErrorException`を追加するように言われます。

```typescript:_error.ts
ErrorPage.getInitialProps = async (context: NextPageContext) => {
  const { res, err } = context;
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

  if (err) {
    // このページに来た例外をキャプチャ
    await Sentry.captureUnderscoreErrorException(context);
  }

  return { statusCode };
};
```

質問の続き

```shell
Did you modify your src/pages/_error.tsx file as described above?
● Yes / ○ No, get me out of here

# 下記でサンプルを作成すると`pages/api/sentry-example-api.js`とpages/sentry-example-page.jsx`が作成されます。
◇  Do you want to create an example page ("/sentry-example-page") to test your Sentry setup?
│  Yes
```

<br>

## ダッシュボードからモニタリング

プロジェクトのセットアップが終わったので、  
サンプルの`/sentry-example-page.jsx`にアクセスし例外を発生させてみます。

<br>

下記の画面のように発生したエラーが表示され、  
詳細を見てみると下記の情報を確認することができます。

![Dashboard](https://zaki-dev-image-bucket.s3.ap-northeast-1.amazonaws.com/article-images/sentry/3.png 'Dashboard')

<br>

例外が発生したユーザーのIPアドレスや使用ブラウザなど詳細に確認することができます。

<br>

## Vercelとの連携

当ブログはVercelにデプロイしているので連携します。  
やり方はSentryのドキュメントにあるのでこちらにそって連携します。

<br>

https://docs.sentry.io/product/integrations/deployment/vercel/

<br>

1. Sentryのマーケットプライスへ接続
   https://vercel.com/integrations/sentry

`Add Integration`をクリックし、  
VercelとSentryの対象のプロジェクトをそれぞれ選択します。

自動的にSentryで必要な下記の環境変数が設定されます。

```shell
SENTRY_AUTH_TOKEN
VERCEL_GIT_COMMIT_SHA
NEXT_PUBLIC_SENTRY_DSN
SENTRY_PROJECT
SENTRY_ORG
```

読み込む対象の環境は必要に応じて変更します。

2. Sentryファイルから環境変数で管理するところを修正

```javascript:next.config.mjs
export default withSentryConfig(
  {
    silent: true,
    org: process.env.SENTRY_ORG,
    project: process.env.SENTRY_PROJECT,
  },
  ...省略
)
```

<br>

`sentry.client.config.ts`
`sentry.edge.config.ts`
`sentry.client.config.ts`の`dsn`を環境変数に変更
プラス、`environment`を追加し、現在のステージがどこか分かりやすくする。

```typescript:〇〇.config.ts
// dnsを修正
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  ...省略
})
```

<br>

ここまで設定が終わったら、再度デプロイ後、  
例外発生ページの`/sentry-example-page`から例外を発生させれば  
Sentryの画面上で確認できるようになる。

<br>

## 引用リンク

https://zenn.dev/keitakn/articles/add-sentry-to-nextjs-vercel


Zaki-dev

Typescriptの記事

【Next.js】markdown-itでリンクカードを作成する

【Typescript】Remixクイックスタート

当ブログにSentryを導入した【Next.js page router】