箇条書きのネストが表示されない。

[u-ecmaker]

32

箇条書き、 見出し1は目次に出てこない感じ。

現象

https://deploy-preview-25--ecmaker00-blog.netlify.app/posts/cee30700-bbca-40ea-b07c-3eee7c9eeb56

noblogさん公式

https://www.nbr41.com/sandbox/notion-blocks-preview#6a3c1c89-b031-49d5-8dc2-d52c123ed892

---

入力

出力

解説
https://zenn.dev/nbr41to/articles/474df7540c475c

解決案

https://zenn.dev/sotono/articles/7163ae3699c4a7
typeScriptでないので難しかった。

https://blog.lacolaco.net/posts/notion-headless-cms-2/

[u-ecmaker]

　pages\posts[slug].tsx PostDetailTemplate
→ src\components\@templates\PostDetailTemplate.tsx PostContent
→ src\components\features\notionBlog\PostContent\PostContent.tsx blockToJsx
→ src\components\notion\blockToJsx.tsx ブロック型の定義

例：見出し1 src\components\notion\blocks\Heading1\Heading1.tsx

---

[slug] getChildrenAllInBlock
→ src\server\notion\blocks.ts getChildrenInBlock

---

  switch (blockType) {
    case 'paragraph':
      return <Paragraph block={block} />;
    case 'heading_1':
      return <Heading1 block={block} />;
    case 'heading_2':
      return <Heading2 block={block} />;
    case 'heading_3':
      return <Heading3 block={block} />;
    case 'callout':
      return <Callout block={block} />;
    case 'bulleted_list_item':
      return <BulletedListItem block={block} />;
    case 'numbered_list_item':
      return <NumberedListItem block={block} />;
    case 'to_do':
      return <ToDo block={block} />;
    case 'code':
      return <Code block={block} />;
    case 'quote':
      return <Quote block={block} />;
    case 'bookmark':
      return <Bookmark block={block} />;
    case 'link_preview':
      return <LinkPreview block={block} />;
    case 'image':
      // eslint-disable-next-line jsx-a11y/alt-text
      return <Image block={block} />;
    case 'divider':
      return <Divider />;
    case 'table_of_contents':
      return null;

    <h1 
      className="my-2 flex items-center gap-2 px-3 text-2xl shadow-[-1px_-1px_6px_#ccc,4px_4px_1px_#1E293B] sp:text-lg"
    >
      <OutlineBlockIcon size={28} />
      <RichText text={block.heading_1.rich_text} />
    </h1>

[u-ecmaker]

かなるsはネストできている。

src\pages[slug]\index.tsx blocks
→ src\libs\notion\getAllBlocks.ts内で
ネスト・ナンバ－対策をしていそう。

対応ブロックも多い。立てた。→ #59 src\pages[slug]\index.tsx NotionBlock
→ src\components\NotionBlock\index.tsx NotionBlock

export const NotionBlock = ({ block }: Props) => {
  switch (block.type) {
    case "audio":
      return <Audio block={block} />;
    case "bookmark":
      return <Bookmark block={block} />;
    case "bulleted_list":
      return <BulletedList block={block} />;
    case "bulleted_list_item":
      return <BulletedListItem block={block} />;
    case "callout":
      return <Callout block={block} />;
    case "code":
      return <Code block={block} />;
    case "column":
      return <Column block={block} />;
    case "column_list":
      return <ColumnList block={block} />;
    case "divider":
      return <Divider />;
    case "embed":
      return <Embed block={block} />;
    case "file":
      return <File block={block} />;
    case "heading_1":
      return <Heading1 block={block} />;
    case "heading_2":
      return <Heading2 block={block} />;
    case "heading_3":
      return <Heading3 block={block} />;
    case "image":
      // eslint-disable-next-line jsx-a11y/alt-text
      return <Image block={block} />;
    case "numbered_list":
      return <NumberedList block={block} />;
    case "numbered_list_item":
      return <NumberedListItem block={block} />;
    case "paragraph":
      return <Paragraph block={block} />;
    case "pdf":
      return <Pdf block={block} />;
    case "quote":
      return <Quote block={block} />;
    case "table":
      return <Table block={block} />;
    case "to_do":
      return <ToDo block={block} />;
    case "to_do_list":
      return <ToDoList block={block} />;
    case "toggle":
      return <Toggle block={block} />;
    case "video":
      return <Video block={block} />;
    default:
      return null;
  }
};

export const Heading1 = ({ block }: Props) => {
  return (
    <h1 className="mb-6 text-3xl font-bold">
      <RichText text={block.heading_1.rich_text} />
    </h1>
  );
};

[u-ecmaker]

かなるsの[slug]/indexの

{blocks.map((block) => (
              <NotionBlock block={block} key={block.id} />

に当たるのぶsの[slug]部分は

<PostDetailTemplate
        post={post}

部分か？または PostDetailTemplate内の

</div>
          <PostContent title={post.title} blocks={post.children} />

部分か？または PostContetの

{blocks.map((block) => (
     <div key={block.id}>{blockToJsx(block)}</div>

部分か？

---

まずは、かなる sのgetAllBlocksで取得したblockをのぶsのPostContet内で動かしてみる。

[u-ecmaker]

かなるs方式で表示できたが、依然としてネストされない。未対応ブロックは表示できて嬉しい。(#59)

可能性

• かなるsタイプにしていない大部分の src\components\notion\blocks\ が関係している？→とりあえず全部かなるsタイプにしてみる。
• templateが関係している？
• のぶsTypeで2回繰り返されるのは、のぶs方式の中でかなるs方式を無理やり表示させたから。
  • →これは消す必要あり。のぶs方式の方法で表示させるか、かなるs方式の方法で表示させるか検討する。

[u-ecmaker]

かなるsタイプの src\components\notion\blocks\NumberedListItem\NumberedListItem.tsx にしたらネスト出来た!
でもノブsタイプはだめ。同じところを参照しているはずだが。 かなるs

ノブs

[u-ecmaker]

75b69e0 bug/#32 BlockTypes: かなるs TypeBlocks マージ

• かなるs方法の方ではネストされた
  • Number/BulletedListItem, Paragraph が鍵 BlockTypeにblock.childrenを記述した。

59 ブロックタイプを増やす

Feature

• Ram Gorila 会話

試す

• blockToJsxを変えたらのぶろぐsタイプでもいける？