{"version":3,"file":"component---src-templates-blog-post-tsx-92c8d99923f6fc463477.js","mappings":"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","sources":["webpack://toriwatari-blog/./src/styles/postInfo.module.css","webpack://toriwatari-blog/./src/components/postInfo.tsx","webpack://toriwatari-blog/./src/styles/tableOfContent.module.css","webpack://toriwatari-blog/./src/lib/intersectionObserver.ts","webpack://toriwatari-blog/./src/styles/post.module.css","webpack://toriwatari-blog/./src/templates/blog-post.tsx"],"sourcesContent":["// extracted by mini-css-extract-plugin\nexport var postInfo = \"postInfo-module--post-info--92Vc7\";\nexport var svg = \"postInfo-module--svg--3zs_I\";\nexport var listItem = \"postInfo-module--list-item--2V4j-\";\nexport var postTitle = \"postInfo-module--post-title--3YNfM\";\nexport var dateInfo = \"postInfo-module--date-info--2dPZ8\";\nexport var series = \"postInfo-module--series--22jwr\";\nexport var tags = \"postInfo-module--tags--1CdlB\";\nexport var description = \"postInfo-module--description--3kzjF\";","import React from \"react\"\r\nimport { Link } from \"gatsby\"\r\n\r\nimport * as Styles from \"../styles/postInfo.module.css\"\r\n\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\r\nimport { faClock, faUndo, faFolder, faTags, faCommentDots } from \"@fortawesome/free-solid-svg-icons\"\r\n\r\ntype Props = {\r\n  title: string,\r\n  seriesSlug: string,\r\n  seriesName: string,\r\n  postdate: string,\r\n  update: string,\r\n  tags: string[],\r\n  description: string\r\n}\r\n\r\nconst PostInfo = ({\r\n  title,\r\n  seriesSlug,\r\n  seriesName,\r\n  postdate,\r\n  update,\r\n  tags,\r\n  description\r\n}: Props) => {\r\n  const [postY, postM, postD] = postdate.split(\"-\")\r\n  const [updateY, updateM, updateD] = update.split(\"-\")\r\n\r\n  return (\r\n    <div className={Styles.postInfo}>\r\n\r\n      <h2 className={Styles.postTitle}>\r\n        {title}\r\n      </h2>\r\n\r\n      <ul className={Styles.dateInfo}>\r\n        <li className={Styles.listItem}>\r\n          <FontAwesomeIcon\r\n            icon={faClock}\r\n            className={Styles.svg}\r\n          />\r\n          <time dateTime={postdate}>\r\n            {`${postY}年${postM}月${postD}日`}\r\n          </time>\r\n        </li>\r\n\r\n        <li>\r\n          <FontAwesomeIcon\r\n            icon={faUndo}\r\n            className={Styles.svg}\r\n          />\r\n          <time dateTime={update}>\r\n            {`${updateY}年${updateM}月${updateD}日`}\r\n          </time>\r\n        </li>\r\n      </ul>\r\n\r\n      <p className={Styles.series}>\r\n        <FontAwesomeIcon\r\n          icon={ faFolder }\r\n          className={Styles.svg}\r\n        />\r\n        <Link to={`/series/${seriesSlug}/page/1/`}>\r\n          { seriesName }\r\n        </Link>\r\n      </p>\r\n\r\n      <ul className={Styles.tags}>\r\n        <FontAwesomeIcon\r\n          icon={ faTags }\r\n          className={Styles.svg}\r\n        />\r\n\r\n        {tags?.map((tag: string) => (\r\n          <li key={`tag${tag}`} className={Styles.listItem}>\r\n            <Link\r\n              to={`/tag/${tag}/page/1/`}\r\n              key={`link${tag}`}\r\n            >\r\n              #{ tag }\r\n            </Link>\r\n          </li>\r\n        ))}\r\n      </ul>\r\n\r\n      <div className={Styles.description}>\r\n        <FontAwesomeIcon\r\n          icon={faCommentDots}\r\n          className={Styles.svg}\r\n        />\r\n        { description }\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default PostInfo\r\n","// extracted by mini-css-extract-plugin\nexport var tableOfContent = \"tableOfContent-module--table-of-content--3ZbHf\";\nexport var active = \"tableOfContent-module--active--LL_U4\";","/*\r\n*  /src/templates/blog-post.tsxにて、\r\n*  ToCのスクロール追従を実行\r\n*/\r\nimport * as Styles from \"../styles/tableOfContent.module.css\"\r\n\r\nconst IO = () => {\r\n  // 交差を監視する要素\r\n  const boxes = document.querySelectorAll<HTMLHeadingElement>(\".main > h1, h2, h3\")\r\n\r\n  const options = {\r\n    root: null, // ビューポートをルート要素に設定\r\n    rootMargin: \"0px 0px -90% 0px\", // ビューポートの中心を判定基準にする\r\n    threshold: 0\r\n  }\r\n\r\n  const observer = new IntersectionObserver(doWhenIntersect, options)\r\n\r\n  // それぞれのboxを監視し、交差するとdoWhenIntersect関数を呼び出す\r\n  boxes.forEach((box) => {\r\n    observer.observe(box)\r\n  })\r\n\r\n  /*\r\n    * 交差したときに呼び出す関数\r\n  */\r\n  function doWhenIntersect(entries: IntersectionObserverEntry[]) {\r\n    // 交差検知をしたもののなかで、isIntersectingがtrueのDOMを関数に渡す\r\n    entries.forEach((entry: IntersectionObserverEntry) => {\r\n      if (entry.isIntersecting) {\r\n        activateIndex(entry.target)\r\n      }\r\n    })\r\n  }\r\n\r\n  function activateIndex(element: Element) {\r\n    // すでにアクティブになっている目次を選択\r\n    const currentActiveIndex = document.querySelector<HTMLAnchorElement>(`.${Styles.tableOfContent} .${Styles.active}`)\r\n\r\n    // すでにアクティブになっているものが0個の時（=null）以外は、activeクラスを除去\r\n    if (currentActiveIndex !== null) {\r\n      currentActiveIndex.classList.remove(Styles.active)\r\n    }\r\n    // 引数で渡されたDOMが飛び先のaタグを選択し、activeクラスを付与\r\n    const links = document.querySelectorAll<HTMLAnchorElement>(\".tableOfContent a\")\r\n\r\n    Array.from(links).map((link) => {\r\n      if (element?.innerHTML === link.innerHTML) {\r\n        link?.classList.add(Styles.active)\r\n      }\r\n    })\r\n  }\r\n}\r\n\r\nexport default IO\r\n","// extracted by mini-css-extract-plugin\nexport var blogPost = \"post-module--blog-post--1yMd-\";\nexport var beforeAndAfter = \"post-module--before-and-after--3GGAL\";\nexport var before = \"post-module--before--znotA\";\nexport var after = \"post-module--after--KI6Da\";\nexport var title = \"post-module--title--4X1pO\";\nexport var postTitle = \"post-module--post-title--2Jbij\";","import React, { useEffect } from \"react\"\nimport { Link, graphql } from \"gatsby\"\n\nimport Layout from \"../components/layout\"\nimport Seo from \"../components/seo\"\nimport { Helmet } from \"react-helmet\"\nimport Header from \"../components/header\"\nimport PostInfo from \"../components/postInfo\"\nimport intersectionObserver from \"../lib/intersectionObserver\"\n\nimport * as Styles from \"../styles/post.module.css\"\nimport * as TableStyles from \"../styles/tableOfContent.module.css\"\n\nimport \"prismjs/themes/prism-tomorrow.css\"\nimport \"prismjs/plugins/line-numbers/prism-line-numbers.css\"\n\ninterface Props {\n  data: GatsbyTypes.BlogPostBySlugQuery\n  location: {\n    pathname: string\n  }\n}\n\nconst BlogPostTemplate: React.VFC<Props> = ({ data, location }) => {\n  useEffect(() => {\n    intersectionObserver()\n  }, [])\n\n  const post = data.markdownRemark\n  const { previous, next } = data\n  const tableOfContents = data.markdownRemark?.tableOfContents\n\n  return (\n    <Layout>\n      <Seo\n        title={post?.frontmatter?.title}\n        pagepath={location.pathname}\n      />\n\n      <Helmet>\n        <script async src=\"//cdn.iframe.ly/embed.js\" charSet=\"utf-8\"></script>\n      </Helmet>\n\n      <Header\n        pathname={location.pathname}\n      />\n\n      <PostInfo\n        title={post?.frontmatter?.title}\n        seriesSlug={data.markdownRemark?.frontmatter?.seriesSlug}\n        seriesName={data.markdownRemark?.frontmatter?.seriesName}\n        postdate={data.markdownRemark?.frontmatter?.postdate}\n        update={post?.frontmatter?.update}\n        tags={post?.frontmatter?.tags}\n        description={post?.frontmatter?.description}\n      />\n\n      <div className=\"load-animation\">\n        <main\n          dangerouslySetInnerHTML={{ __html: post?.html }}\n          itemProp=\"articleBody\"\n          className={`${Styles.blogPost} main`}\n        />\n\n        <div\n          className={`${TableStyles.tableOfContent} tableOfContent }`}\n          dangerouslySetInnerHTML={{ __html: tableOfContents }}\n        />\n      </div>\n\n      <nav className={Styles.beforeAndAfter}>\n        {previous && (\n          <Link\n            to={previous?.fields?.slug}\n            rel=\"prev\"\n            className={Styles.before}\n          >\n            <h2 className={Styles.title}>← 前の記事</h2>\n            <p className={Styles.postTitle}>\n              {previous?.frontmatter?.title}\n            </p>\n          </Link>\n        )}\n\n        {next && (\n          <Link\n            to={next?.fields?.slug}\n            className={Styles.after}\n          >\n            <h2 className={Styles.title}>次の記事 →</h2>\n            <p className={Styles.postTitle}>\n              {next?.frontmatter?.title}\n            </p>\n          </Link>\n        )}\n      </nav>\n    </Layout>\n  )\n}\n\nexport default BlogPostTemplate\n\nexport const pageQuery = graphql`\n  query BlogPostBySlug(\n    $id: String!\n    $previousPostId: String\n    $nextPostId: String\n  ) {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n    markdownRemark(id: { eq: $id }) {\n      html\n      tableOfContents\n      frontmatter {\n        title\n        postdate(formatString: \"YYYY-MM-DD\")\n        update(formatString: \"YYYY-MM-DD\")\n        description\n        seriesSlug\n        seriesName\n        tags\n      }\n    }\n    previous: markdownRemark(id: { eq: $previousPostId }) {\n      fields {\n        slug\n      }\n      frontmatter {\n        title\n      }\n    }\n    next: markdownRemark(id: { eq: $nextPostId }) {\n      fields {\n        slug\n      }\n      frontmatter {\n        title\n      }\n    }\n  }\n`\n"],"names":["svg","listItem","title","seriesSlug","seriesName","postdate","update","tags","description","split","postY","postM","postD","updateY","updateM","updateD","className","Styles","icon","faClock","dateTime","faUndo","faFolder","Link","to","faTags","map","tag","key","faCommentDots","tableOfContent","active","boxes","document","querySelectorAll","observer","IntersectionObserver","entries","forEach","entry","isIntersecting","element","currentActiveIndex","querySelector","classList","remove","links","Array","from","link","innerHTML","add","activateIndex","target","root","rootMargin","threshold","box","observe","data","location","useEffect","intersectionObserver","post","markdownRemark","previous","next","tableOfContents","frontmatter","pagepath","pathname","Helmet","async","src","charSet","dangerouslySetInnerHTML","__html","html","itemProp","TableStyles","fields","slug","rel"],"sourceRoot":""}