【Gatsby】コードブロックとリンクカードをデザインする
個人ブログを運用しています。
詳細はブログ作成時に投稿した記事をご覧ください。
Zenn や Qiita、はてなブログなどに投稿するほどではない内容をのもの（技術メモなど）は個人ブログに上げています。
個人ブログの主な使用技術は以下の通りです。
- Gatsby.JS
-
npmでパッケージ管理
-
- GitHub
- 記事も含めてソースコードすべて管理しています。
- Netlify
- ブログのホスティング先です。
Gatsby にはブログ用のテンプレートが用意されており、ほぼデフォルトのレイアウト設定を使用しておりました。
デフォルトのレイアウトも気に入っておりますが、次のレイアウトを少し変更してみます。
- コードブロック
- リンクカード
はじめに
React 含めてフロントエンドは無知なのですが、これを行うモチベーションは以下になります。
- コードブロックをターミナルっぽくしたい
- 埋め込みリンクはなんとなくかっこいい
- クリックしたくなってしまう
- 文字のリンクは少し素っ気ない
実装
個人ブログに使用したテンプレートがすでに充実していることもあり、ほんの少しのコード修正で実現できる箇所もありました。
コードブロックの背景を変更する
コードブロックのレイアウトは、 Prism.js で実装されています。
私が使用したテンプレートにはすでに導入されていたので、そこに記載されていたテーマを変更するだけで問題ありませんでした。
gatsby-browser.js で読み込む css を prism-tomorrow に変更することで、レイアウトを変更できました。
import 'prismjs/themes/prism-tomorrow.css';
コードブロックに名前をつける
gatsby-remark-code-titles を使用すると、コードブロックに名前が付けられるようです。
npm でインストールします。
npm install gatsby-remark-prismjs-title
インストールできたら、gatsby-config.json に記載されている gatsby-transformer-remark のプラグインとして読み込むように記述します。
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-code-titles',
},
これでコードブロックのタイトルが表示されるようになります。
実際に Markdown で書くときは、title=<タイトル名> と記述します。 [1]
```javascript:title=title.js
const title = "personal blog"
```
レイアウトを調整する場合は、適用される scss ファイル（blog-post.scss など）を修正します。
pre[class*="language-"] {
padding: 1em;
margin-top: 0;
margin-bottom: 1em;
overflow: auto;
}
code[class*='language-'],
pre[class*='language-'] {
color: #fff;
}
:not(pre)>code[class*='language-text'] {
background-color: #dbdbdb;
color: #000;
}
.gatsby-code-title {
background: #462f83;
color: rgb(255, 255, 255);
padding: 6px 12px;
font-size: 0.8em;
line-height: 1;
font-weight: bold;
display: table;
}
コードブロックをコピーできるようにする
gatsby-remark-code-buttons を使用すると、コードブロックをコピーできます。
npm でインストールします。
npm install gatsby-remark-code-buttons
インストールできたら、gatsby-config.json に記載されている gatsby-transformer-remark のプラグインとして読み込むように記述します。
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-code-buttons',
options: {
toasterText: 'Copied!!',
},
},
これで、コードブロックを 1 クリックでコピーできます。
レイアウトを調整する場合は、適用される scss ファイル（blog-post.scss など）を修正します。
.gatsby-code-button {
position: absolute;
top: -17px ;
right: 10px;
z-index: 100;
&::after {
display: none !important;
}
svg {
filter: invert(98%) sepia(5%) saturate(983%) hue-rotate(178deg)
brightness(95%) contrast(99%);
opacity: 0.9;
}
}
リンクカードを設定する
想像以上に実装が難しかったです。
まずは、@raae/gatsby-remark-oembed を使用します。[2]
npm でインストールします。
npm install @raae/gatsby-remark-oembed
Twitter が表示できることは確認できましたが、表示できるサイトが限定されているようです。
対応しているサイトは以下より確認ができます。
対応していないサイトであっても、oembed API が公開されていれば、gatsby-config.json に設定を追加することで表示できます。
たとえば、はてなブログは oembed API が公開されています。
上述した、oembed.com に登録されていない場合でも、settings に記載することで表示できます。
{
resolve: '@raae/gatsby-remark-oembed',
options: {
usePrefix: false,
providers: {
settings: {
hatenablog: {
endpoints: [
{
schemes: ['https://*.hatenablog.com/*'],
url: 'https://hatenablog.com/oembed',
},
],
},
},
},
},
},
ある程度のサイトであれば、埋め込みで表示できました。
目標は URL を貼り付けただけで埋め込みリンクが表示されることなので、他を探してみます。
これは、URL ベタばりではなく、一度 iframely と言うサイトで埋め込み html コードを取得して markdown に貼り付けます。
ほぼすべてのサイトを埋め込みリンクで表示できます。
実装は簡単で、Helmet 部分に以下のように iframely の cdn を読み込むように設定します。[3]
<Helmet>
<script type="text/javascript" src="https://cdn.iframe.ly/embed.js" />
<Helmet/>
目標は URL を貼り付けただけで表示されることでしたが、使用できるサイトには gatsby-remark-oembed を使って、それ以外は html を書くように整理しています。
さいごに
コードブロックは好みな感じになりました。
リンクカードはすべてのサイトに対応できてないので、次回は component 部分を改修してよりコアな所に触れていきます。
Reference（参考文献）
コードブロックについて。
リンクカードについて。
Discussion