component---src-templates-blog-post-tsx-dae5297354ebfb8266f2.js.map

{"version":3,"sources":["webpack:///./src/templates/blog-post.tsx","webpack:///./node_modules/dayjs/plugin/advancedFormat.js"],"names":["dayjs","extend","advancedFormat","TOC","props","tableOfContents","blog","className","style","dangerouslySetInnerHTML","__html","Series","blogs","thisSeries","frontmatter","series","seriesBlogs","filter","node","id","visibleBlogs","IS_PROD","draft","length","map","post","key","to","fields","slug","title","BlogPostContent","useState","tocStyle","setTOCStyle","contentRef","createRef","handleScroll","elem","current","top","getBoundingClientRect","offset","Math","max","transform","useEffect","hasWindow","window","innerWidth","document","addEventListener","removeEventListener","cover","publicURL","date","format","articleClassName","Boolean","join","timeToRead","src","alt","ref","html","BlogPostPage","data","allMarkdownRemark","edges","n","type","NodeType","sort","x","y","Date","getTime","markdownRemark","keywords","site","siteMetadata","tags","query","module","exports","e","t","r","prototype","o","en","ordinal","this","$locale","$utils","a","replace","ceil","$M","$D","weekYear","week","s","String","$H","floor","$d","bind"],"mappings":"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","file":"component---src-templates-blog-post-tsx-dae5297354ebfb8266f2.js","sourcesContent":["import React, { useState, FC, CSSProperties, createRef, useEffect } from 'react'\nimport { Link, graphql } from 'gatsby'\nimport dayjs from 'dayjs'\nimport advancedFormat from 'dayjs/plugin/advancedFormat'\nimport { Layout, SEO } from '../components'\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.css'\nimport '../styles/prism-styles.scss'\nimport './blog-post.scss'\nimport { GatsbyDataProps, BlogNode, NodeType } from '../utils/interface'\nimport { IS_PROD } from 'config'\nimport { hasWindow } from 'utils'\n\ndayjs.extend(advancedFormat)\n\ninterface TOCProps {\n  blog: BlogNode\n  style: CSSProperties\n}\n\nconst TOC: FC<TOCProps> = (props) => {\n  const { tableOfContents } = props.blog\n  if (!tableOfContents) return null\n  return (\n    <aside\n      className='toc'\n      style={props.style}\n      dangerouslySetInnerHTML={{\n        __html: tableOfContents\n      }}\n    />\n  )\n}\n\ninterface SeriesProps {\n  blog: BlogNode\n  blogs: BlogNode[]\n}\n\nconst Series: FC<SeriesProps> = (props) => {\n  const { blog, blogs } = props\n  const thisSeries = blog.frontmatter.series\n\n  // 不属于任何系列\n  if (!thisSeries) return null\n\n  const seriesBlogs = blogs\n    .filter(node => node.frontmatter.series === thisSeries && node.id !== blog.id)\n\n  // 草稿不对外发布\n  const visibleBlogs = IS_PROD\n    ? seriesBlogs.filter(blog => !blog.frontmatter.draft)\n    : seriesBlogs\n\n  // 无可见博客则不显示\n  if (!visibleBlogs.length) {\n    return null\n  }\n\n  return (\n    <section className='series'>\n      <header className='header'>\n        <p className='title'>该系列的其他文章</p>\n      </header>\n      <ul className='posts'>\n        { visibleBlogs.map(post => (\n          <li className='post' key={post.id}>\n            <Link\n              className={(post.frontmatter.draft ? 'draft' : '')}\n              to={post.fields.slug}\n            >\n              { post.frontmatter.title }\n            </Link>\n          </li>\n        ))}\n      </ul>\n    </section>\n  )\n}\n\ninterface BlogPostProps {\n  blog: BlogNode\n  blogs: BlogNode[]\n}\n\nconst BlogPostContent: FC<BlogPostProps> = (props) => {\n  const { blog, blogs } = props\n\n  const [tocStyle, setTOCStyle] = useState<CSSProperties>({})\n\n  const contentRef = createRef<HTMLDivElement>()\n\n  const handleScroll = () => {\n    const elem = contentRef.current\n    if (!elem) return\n\n    const top = elem.getBoundingClientRect().top\n    const offset = Math.max(60 - top, 0)\n    setTOCStyle({ transform: `translateY(${offset}px)` })\n  }\n\n  useEffect(() => {\n    if (!hasWindow()) return\n    if (window.innerWidth < 1280) return\n    document.addEventListener('scroll', handleScroll)\n\n    return () => {\n      document.removeEventListener('scroll', handleScroll)\n    }\n  })\n\n  const cover = blog.frontmatter.cover?.publicURL\n  const date = dayjs(blog.fields.date).format('MMM Do, YYYY')\n\n  const articleClassName = [\n    blog.frontmatter.draft && 'draft',\n  ].filter(Boolean).join(' ')\n\n  return (\n    <article className={articleClassName} id={`blog__${blog.fields.id}`}>\n      <h1 className='post-title'>{blog.frontmatter.title}</h1>\n      <p className='metas'>\n        <span className='meta'>{date}</span>\n        <span className='meta'>阅读本文大约需要 {blog.timeToRead} 分钟</span>\n      </p>\n      { cover &&\n        <div className='banner'>\n          <img src={cover} alt='' />\n        </div>\n      }\n      <div className='content-wrapper' ref={contentRef}>\n        <div className='content' dangerouslySetInnerHTML={{ __html: blog.html }} />\n        { !IS_PROD &&\n          <TOC blog={blog} style={tocStyle} />\n        }\n      </div>\n\n      <Series blog={blog} blogs={blogs} />\n    </article>\n  )\n}\n\nconst BlogPostPage: FC<GatsbyDataProps> = (props) => {\n  const { data } = props\n  const nodes = data.allMarkdownRemark.edges.map(n => n.node) as BlogNode[]\n  const blogs = nodes\n    .filter(node => node.fields.type === NodeType.blog)\n    .sort((x, y) => new Date(y.fields.date).getTime() - new Date(x.fields.date).getTime())\n  const blog = data.markdownRemark as BlogNode\n\n  return (\n    <Layout>\n      <SEO\n        title={`${blog.frontmatter.title} | 博客`}\n        keywords={[\n          ...data.site.siteMetadata.keywords,\n          ...blog.frontmatter.tags\n        ]}\n      />\n\n      <div className='mf-content blog-post'>\n        <p className='back-to-parent'><Link to='/blog'>&laquo; 回到博客列表</Link></p>\n        <BlogPostContent blog={blog} blogs={blogs} />\n      </div>\n    </Layout>\n  )\n}\n\nexport default BlogPostPage\n\nexport const query = graphql`\nquery($slug: String!) {\n  site {\n    siteMetadata {\n      title,\n      keywords\n    }\n  }\n  allMarkdownRemark {\n    totalCount\n    edges {\n      node {\n        id\n        frontmatter {\n          title\n          description\n          tags\n          cover {\n            publicURL\n          }\n          series\n          draft\n          original\n        }\n        fields {\n          id\n          slug\n          type\n          date\n        }\n      }\n    }\n  }\n  markdownRemark(fields: { slug: { eq: $slug } }) {\n    id\n    html\n    frontmatter {\n      title\n      description\n      cover {\n        publicURL\n      }\n      tags\n      series\n      draft\n    }\n    fields {\n      id\n      date\n    }\n    headings {\n      value\n      depth\n    }\n    tableOfContents\n    timeToRead\n  }\n}`\n","require(\"core-js/modules/es6.regexp.replace\");\n\n!function (e, t) {\n  \"object\" == typeof exports && \"undefined\" != typeof module ? module.exports = t() : \"function\" == typeof define && define.amd ? define(t) : e.dayjs_plugin_advancedFormat = t();\n}(this, function () {\n  \"use strict\";\n\n  return function (e, t, r) {\n    var n = t.prototype,\n        o = n.format;\n    r.en.ordinal = function (e) {\n      var t = [\"th\", \"st\", \"nd\", \"rd\"],\n          r = e % 100;\n      return \"[\" + e + (t[(r - 20) % 10] || t[r] || t[0]) + \"]\";\n    }, n.format = function (e) {\n      var t = this,\n          r = this.$locale(),\n          n = this.$utils(),\n          a = (e || \"YYYY-MM-DDTHH:mm:ssZ\").replace(/\\[([^\\]]+)]|Q|wo|ww|w|gggg|Do|X|x|k{1,2}|S/g, function (e) {\n        switch (e) {\n          case \"Q\":\n            return Math.ceil((t.$M + 1) / 3);\n\n          case \"Do\":\n            return r.ordinal(t.$D);\n\n          case \"gggg\":\n            return t.weekYear();\n\n          case \"wo\":\n            return r.ordinal(t.week(), \"W\");\n\n          case \"w\":\n          case \"ww\":\n            return n.s(t.week(), \"w\" === e ? 1 : 2, \"0\");\n\n          case \"k\":\n          case \"kk\":\n            return n.s(String(0 === t.$H ? 24 : t.$H), \"k\" === e ? 1 : 2, \"0\");\n\n          case \"X\":\n            return Math.floor(t.$d.getTime() / 1e3);\n\n          case \"x\":\n            return t.$d.getTime();\n\n          default:\n            return e;\n        }\n      });\n      return o.bind(this)(a);\n    };\n  };\n});"],"sourceRoot":""}