このサイトを作った経緯
motsuo本人がnotionで、仕事、プライベート関係なくつらつらとmemo書き含め書いている習慣があったので、これを活かして公開できる場を作りたいなと考えていた。
この記事をnotionAPIなどを使って公開する術がないかなと、考えていたらこんなものがあった。
nextjs-notion-starter-kit
transitive-bullshit • Updated Aug 9, 2023
このページは上記をforkして少しカスタマイズをして作っただけのページ。
かなり面白い試みで拡張性も高そうだったので、個人的にはこのサイトを元に拡張要素を足して遊んでいきたいなと考えている。
文章力全くないマンなので、読みづらい文章や意見がある方は僕のTwitter等に愚痴をリプしてきてください。
書く予定の内容
- 趣味
- Vtuber
- ゲーム
- 仕事
- フロントエンジニアなのでフロントの技術でかける内容を増やしていきたい。
- スクラム開発について
- youtube関連
- 映像作品とか作ってみたいな。
ここからは使用させていただいているライブラリを紹介するために、色々な構文を記載し
どのようなことがこのライブラリ内でできるか調査していく。
なお素のnotionはこちらから↓
nextjs-notion-starter-kitのテスト
結論、かなり拡張性が高いツールで、びっくり！！！😄
notionでも普通に使用する機能は備わっており、
色文字や背景色に加え(背景色は若干スタイルが崩れている)、
太字や、イタリック、アンダーバー、
コード文字 などにも対応していた。- 箇条書きや
- そのネストも
- 対応されていた
- リスト表記にも対応していた。
- ネストが変わるが
- アルファベット表記には対応していないみたい。
何に使うかわからないが、
to-doリストも対応していた。
クリックはできないようだ。
トグルリストにも対応していて
ページ内でもそれを開いたり閉じたりすることも可能だった。
すごい。
// 簡単なコードも書けそうだった。 // ご丁寧にコピーボタンもある。 import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
%% 流石にmermaidのviewには対応していないようだ・・・ graph TB top["トップページ"] top --> about["会社について"] top --> service["製品情報"] top --> company["会社概要"] top --> ir["IR情報"] top --> recruit["採用情報"] recruit --> recruit1["新卒採用"] recruit --> recruit2["キャリア採用"] top --> contact["お問い合わせ"]
mermaid等は流石にサポートされていなかった。コード部分時々反応しない時がある。
コールアウトも普通に使えるようなのでBlogっぽくもできてる。
今後個人的につけていきたい機能
- vercelにデプロイするか問題。 このサイトを例えばadsenceをつけるならhostingを変えないといけない。
- タグの機能があるけど、タグごとにソートできる機能が欲しい。
- 日付機能も同様。