{"version":3,"sources":["webpack:///./src/components/chevron-down.tsx","webpack:///./src/components/chevron-up.tsx","webpack:///./src/components/table-of-contents/table-of-contents-list-item.tsx","webpack:///./src/components/table-of-contents/table-of-contents-link.tsx","webpack:///./src/components/table-of-contents/table-of-contents-item.tsx","webpack:///./src/components/table-of-contents/table-of-contents.tsx","webpack:///./src/templates/blog-post.tsx"],"names":["ChevronDown","xmlns","viewBox","fill","fillRule","d","clipRule","ChevronUp","TableOfContentsListItem","children","collapsed","className","TableOfContentsLink","isActive","to","useContext","HeadingContext","onScreenHeadings","fallbackHeading","navigateToHeading","length","onClick","navigate","TableOfContentsItem","data","index","maxIndex","useState","isExpanded","setIsExpanded","isCollapsed","key","url","title","items","map","item","itemIndex","isItemCollapsed","TableOfContents","toggleIsExpanded","aria-label","reduce","accumulator","currentItem","component","components","BlogPostTemplate","mdx","body","fields","slug","date","frontmatter","shortTitle","description","timeToRead","tableOfContents","path","Header","breadcrumbs","text","routes","ROOT","Content"],"mappings":"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","file":"component---src-templates-blog-post-tsx-d7828e3768ee8bf07fc8.js","sourcesContent":["import React from \"react\"\n\nconst ChevronDown: React.FC = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 20 20\"\n    fill=\"currentColor\"\n  >\n    <title>See more</title>\n    <path\n      fillRule=\"evenodd\"\n      d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\n\nexport default ChevronDown\n","import React from \"react\"\n\nconst ChevronUp: React.FC = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 20 20\"\n    fill=\"currentColor\"\n  >\n    <title>See less</title>\n    <path\n      fillRule=\"evenodd\"\n      d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\n\nexport default ChevronUp\n","import React from \"react\"\n\ntype TableOfContentsListItemProps = {\n  children: React.ReactNode\n  collapsed?: boolean\n}\n\nconst TableOfContentsListItem: React.FC<TableOfContentsListItemProps> = ({\n  children,\n  collapsed,\n}) => {\n  return (\n    <li className={`my-1 xl:block ${collapsed ? \"hidden\" : \"\"}`}>{children}</li>\n  )\n}\n\nexport default TableOfContentsListItem\n","import React, { useContext } from \"react\"\nimport { navigate } from \"gatsby\"\n\nimport { HeadingContext } from \"../../context/provider\"\n\ntype TableOfContentsLinkProps = {\n  children: React.ReactNode\n  to: string\n}\n\nconst TableOfContentsLink: React.FC<TableOfContentsLinkProps> = ({\n  children,\n  to,\n}) => {\n  const { onScreenHeadings, fallbackHeading, navigateToHeading } = useContext(\n    HeadingContext\n  )\n\n  let isActive\n  if (onScreenHeadings.length > 0) {\n    isActive = onScreenHeadings[0] === to\n  } else {\n    isActive = fallbackHeading === to\n  }\n\n  return (\n    <button\n      onClick={() => {\n        navigate(to)\n        navigateToHeading(to)\n      }}\n      className={`text-left ${\n        isActive\n          ? \"text-gray-600 xl:text-indigo-600 xl:font-bold\"\n          : \"text-gray-600\"\n      }`}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport default TableOfContentsLink\n","import React, { useState } from \"react\"\n\nimport TableOfContentsListItem from \"./table-of-contents-list-item\"\nimport TableOfContentsLink from \"./table-of-contents-link\"\n\ntype Item = {\n  title: string\n  url: string\n}\n\nexport type TableOfContentsItemProps = {\n  data: Item & {\n    items?: Item[]\n  }\n  index: number\n  maxIndex: number\n}\n\nconst TableOfContentsItem: React.FC<TableOfContentsItemProps> = ({\n  data,\n  index,\n  maxIndex,\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  const toggleIsExpanded = () => setIsExpanded(!isExpanded)\n\n  const isCollapsed = maxIndex && index > maxIndex\n\n  return (\n    <TableOfContentsListItem collapsed={isCollapsed} key={data.url}>\n      <TableOfContentsLink to={data.url}>{data.title}</TableOfContentsLink>\n      {data.items && (\n        <>\n          <button\n            onClick={() => toggleIsExpanded()}\n            className=\"sm:hidden text-indigo-600\"\n          >\n            ({isExpanded ? \"show less\" : \"show more\"})\n          </button>\n\n          <ul className={`sm:block sm:ml-4 ${isExpanded ? \"\" : \"hidden\"}`}>\n            {data.items.map((item, itemIndex) => {\n              const isItemCollapsed = maxIndex && index + itemIndex > maxIndex\n\n              return (\n                <TableOfContentsListItem\n                  key={item.url}\n                  collapsed={isItemCollapsed}\n                >\n                  <TableOfContentsLink to={item.url}>\n                    {item.title}\n                  </TableOfContentsLink>\n                </TableOfContentsListItem>\n              )\n            })}\n          </ul>\n        </>\n      )}\n    </TableOfContentsListItem>\n  )\n}\n\nexport default TableOfContentsItem\n","import React, { useState } from \"react\"\n\nimport ChevronDown from \"../chevron-down\"\nimport ChevronUp from \"../chevron-up\"\nimport TableOfContentsItem from \"./table-of-contents-item\"\n\ntype Item = {\n  title: string\n  url: string\n}\n\ntype TableOfContentsItem = Item & {\n  items?: Item[]\n}\n\nexport type TableOfContentsData = { items: TableOfContentsItem[] }\n\ntype TableOfContentsProps = {\n  data?: TableOfContentsData\n}\n\nconst TableOfContents: React.FC<TableOfContentsProps> = ({ data }) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  const toggleIsExpanded = () => setIsExpanded(!isExpanded)\n\n  const findItemComponents = (accumulator, currentItem) => {\n    const component = (\n      <TableOfContentsItem\n        key={currentItem.url}\n        data={currentItem}\n        index={accumulator.index}\n        maxIndex={isExpanded ? null : 4}\n      />\n    )\n\n    let index = accumulator.index + 1\n    if (currentItem.items) {\n      index += currentItem.items.length\n    }\n\n    return {\n      components: [...accumulator.components, component],\n      index,\n    }\n  }\n\n  return (\n    <nav\n      aria-label=\"table of contents\"\n      className=\"relative xl:absolute top-0 right-0 xl:h-full xl:w-72 2xl:w-80 pt-4 pb-4 pl-6 xl:pr-4 2xl:pr-8 border rounded xl:border-none bg-gray-50 xl:bg-white text-sm font-sans\"\n    >\n      <div className=\"xl:sticky xl:top-0 xl:h-screen xl:overflow-y-scroll xl:pt-4 xl:pb-4\">\n        <div className=\"xl:pl-3 xl:border-l-4 xl:border-gray-200\">\n          <h2 className=\"font-semibold\">\n            Table of contents\n            <button\n              className=\"inline-block xl:hidden w-5 h-5 align-middle ml-1\"\n              onClick={toggleIsExpanded}\n            >\n              {isExpanded ? <ChevronUp /> : <ChevronDown />}\n            </button>\n          </h2>\n          <ul className=\"list-none\">\n            {data &&\n              data.items.reduce(findItemComponents, {\n                components: [],\n                index: 0,\n              }).components}\n          </ul>\n          <button\n            className=\"inline-block xl:hidden mt-2 text-indigo-600\"\n            onClick={toggleIsExpanded}\n          >\n            {isExpanded ? <>See less&hellip;</> : <>See more&hellip;</>}\n          </button>\n        </div>\n      </div>\n    </nav>\n  )\n}\n\nexport default TableOfContents\n","import React from \"react\"\nimport { graphql, PageProps } from \"gatsby\"\n\nimport PostLayout from \"../layouts/post\"\nimport Article from \"../components/article/article\"\nimport TableOfContents, {\n  TableOfContentsData,\n} from \"../components/table-of-contents/table-of-contents\"\nimport routes from \"../common/routes\"\nimport MDX from \"../components/mdx/mdx\"\n\ntype DataProps = {\n  mdx: {\n    body: string\n    fields: {\n      date: string\n      slug: string\n    }\n    frontmatter: {\n      description: string\n      shortTitle: string\n      title: string\n    }\n    timeToRead: number\n    tableOfContents: TableOfContentsData\n  }\n}\n\nconst BlogPostTemplate: React.FC<PageProps<DataProps>> = ({ data }) => {\n  const {\n    mdx: {\n      body,\n      fields: { slug, date },\n      frontmatter: { title, shortTitle, description },\n      timeToRead,\n      tableOfContents,\n    },\n  } = data\n\n  return (\n    <PostLayout title={title} description={description} path={slug}>\n      <Article>\n        <Article.Header\n          breadcrumbs={[\n            { text: \"Flashover\", to: routes.ROOT },\n            { text: shortTitle },\n          ]}\n          date={date}\n          timeToRead={timeToRead}\n          path={slug}\n          title={title}\n        />\n        <Article.Content>\n          <TableOfContents data={tableOfContents} />\n          <MDX>{body}</MDX>\n        </Article.Content>\n      </Article>\n    </PostLayout>\n  )\n}\n\nexport default BlogPostTemplate\n\nexport const query = graphql`\n  query($slug: String!) {\n    mdx(fields: { slug: { eq: $slug } }) {\n      ...BlogPost\n      body\n      frontmatter {\n        shortTitle\n      }\n      tableOfContents(maxDepth: 3)\n    }\n  }\n`\n"],"sourceRoot":""}