import React from 'react'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import Layout from '../components/Layout'
import PostTemplateDetails from '../components/PostTemplateDetails'
import { MDXRenderer } from 'gatsby-plugin-mdx'

class PostTemplate extends React.Component {
  render() {
    const { title, subtitle } = this.props.data.site.siteMetadata
    const post = this.props.data.markdownRemark
    const { title: postTitle, description: postDescription } = post.frontmatter
    const description = postDescription !== null ? postDescription : subtitle
    
    const tableofcontents = this.props.data.allMdx.edges.node

    return (
      <Layout>
        <div>
          <Helmet>
            <title>{`${postTitle} - ${title}`}</title>
            <meta name="description" content={description} />
          </Helmet>
          <PostTemplateDetails {...this.props} />
          {/* kinniku added Sidebar 
          <Sidebar {...this.props} /> */}
          <MDXRenderer headings={tableofcontents.headings}>
            {tableofcontents.body}
          </MDXRenderer>
        </div>
      </Layout>
    )
  }
}

export default PostTemplate

export const pageQuery = graphql`
  query PostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        subtitle
        copyright
        menu {
          label
          path
        }
        author {
          name
          twitter
        }
        disqusShortname
        url
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      htmlAst
      fields {
        tagSlugs
        slug
      }
      tableOfContents
      frontmatter {
        title
        featuredImage {
          childImageSharp {
            sizes(maxWidth: 630) {
              ...GatsbyImageSharpSizes
            }
          }
        }
        tags
        date
        path
        description
      }
    }

    allMdx {
      edges{
        node {
          body
          headings {
            depth
            value
          }
        }
      }
    }

  }
`

import React from 'react'
import Slugger from 'github-slugger'
import {Link} from 'gatsby'

const slugger = new Slugger()

class TableOfContents extends React.Component {
    render() {
      const headings = this.headings
  
      const headingBlock = (
        <ul>
            {headings
            .filter(heading => heading.depth !== 1)
            .map(heading => (
            <li key={heading.value}>
                <Link
                to={'#' + slugger.slug(heading.value)}
                >
                {heading.value}
                </Link>
            </li>
            ))}
        </ul>
      )
  
      return <div>{headingBlock}</div>
    }
  }
  
  export default TableOfContents

import TableOfContents from '../../../../src/components/TableOfContents/index'

---
title: 【連載】Gatsbyブログのデザインをワードプレスちっくにする手順（その6）Gatsbyブログに目次をつけました。
date: "2020-05-25T07:15:00.000Z"
layout: post
draft: false
path: "/posts/transformgatsbytowordpresslike6/"
category: "Gatsby"
tags:
  - "Gatsby"
  - "Table of contents"
featuredImage: ./featured-image.jpg
description: "このブログの各記事に「目次」をつけました。これまでは、「目次っぽいもの」をつけていたのですが、親愛なる読者の方から「目次」をつけたら更に良くなる、というアドバイスを頂きましたので、この機会に実装いたしました。"
---

![table](1.jpg)  

こんにちは、筋肉めがねです。  

先日、親愛なる読者の方から、ブログに目次をつけると良いのでは、というアドバイスをいただきました。これまでの記事でも、以下のような「目次」のようなもの、を各記事のはじめの方につけてはいたのですが、この機会に、きちんとした「目次」を実装しました。

### 目次っぽいもの
* post-template.jsxの変更
* TableOfContents componentの作成
* Embed TableOfContents component into markdown file

そして、こちら今回実装した「目次」です。

<TableOfContents headings={props.headings} />

それでは、進めていきましょう。

ポイントは「Markdown fileの好きなところに目次を表示させる。」

## post-template.jsxの変更
xxx

## TableOfContents componentの作成
xxx

## Embed TableOfContents component into markdown file
xxx