notion-blogの改造メモ (1)

Posted: February 13, 2021

notion-blog を使うにあたって、色々改造したのでメモ。

Done

Previewの削除

元コードには先頭の2ブロックまでをpreviewとして記事リストに表示する機能があるんだけど、個人的には好みじゃないので削除。

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 3b815c3..985e293 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -85,12 +85,6 @@ export default ({ posts = [], preview }) => {
               {post.Date && (
                 <div className="posted">Posted: {getDateStr(post.Date)}</div>
               )}
-              <p>
-                {(!post.preview || post.preview.length === 0) && ''}
-                {(post.preview || []).map((block, idx) =>
-                  textBlock(block, true, `${post.Slug}${idx}`)
-                )}
-              </p>
             </div>
           )
         })}

元↓

改造後↓

Contact PageをHome Pageへ上書き

Homeにはnotion-blogに関する諸々が書いてあったんだけど、個人サイトには不要なので削除。代わりにルートにはContact Pageを置いた。(ファイルをrenameしただけ)

og:titleの修正

og:title headerがおかしくて、記事タイトルとかがシェア時に表示されないようになってた。

titlePreって変数に記事名とかが入るようになってたので、これを使うよう変更。

diff --git a/src/components/header.tsx b/src/components/header.tsx
index e3dd1d1..178ac4c 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -22,9 +22,12 @@ export default ({ titlePre = '' }) => {
           name="description"
           content="manji0's profile, blog, and contact"
         />
-        <meta name="og:title" content="My Notion Blog" />
+        <meta
+          name="og:title"
+          content={titlePre ? `${titlePre} | manji0` : 'manji0'}
+        />
         <meta property="og:image" content={ogImageUrl} />
-        <meta name="twitter:site" content="@_ijjk" />
+        <meta name="twitter:site" content="manji0" />
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:image" content={ogImageUrl} />
       </Head>

その他

// src/pages/blog/[slug].tsx
case 'divider':
              toRender.push(<hr className="article" />)
// src/styles/global.css
hr.article {
  border-width: 0 0 8px;
  border-style: solid;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>')
    0 0 100% repeat;
  width: 216px;
  margin-bottom: 2em;
}

TODO

Table (collection_view) 要素の表示

NotionでTable-inline を使って表を作っても、notion-blogでは表示されない。

記事の生成元であるjsonを見てみると、どうも非公式APIによって取得したjsonにはそのTable内のコンテンツが含まれないようなので、単純には解決できない。

これを実装するにはcollection_view をtypeに持つblockについて、別関数でコンテンツの取得とhtmlの生成をしなくちゃいけない...のだけど、外部関数にblockのvalueを渡しても内部のcollection_idを引くことができない。多分僕のTypeScript力が足りない。(注: TypeScript歴は半日)

をすればいいのかな、という方針は見えてるので、時間があるときにやってみる。

Bookmark Linkの表示

NotionにURLを貼り付けたとき、リンクの表示をbookmarkというオプションでリッチにできる。はてなブログでいうと以下のような感じ。

これをするためには、typeがbookmarkなblockに対してblock valueからURL, 画像URLなどのデータを抜きだしていい感じにhtmlに再構成する必要がある。これも関数化しないとなあ...

Code Highlightの強化

Code Highlightの対応言語が少ないので、Githubのライブラリを使って置き換えたい。

記事リストの日付降順の強制

記事リストは日付順じゃなくて記事テーブル内の配置順になっている。ややこしいので日付の降順にしたい。


という感じで、notion-blogは中々いいおもちゃになっております。