{"version":3,"file":"component---src-templates-content-js-eca03bae359833adea69.js","mappings":"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","sources":["webpack://programme/./src/templates/content.js"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\n\nimport Metadata from \"../components/Metadata\"\nimport Circuit from \"../components/Circuit\"\nimport ExerciseThumbnail from \"../components/ExerciseThumbnail\"\nimport FooterPitch from \"../components/FooterPitch\"\n\nconst extractText = (text, type) => {\n  // const example = [\n  //   {\n  //     type: \"text\",\n  //     text: { content: \"10 Challenging Hanging Core Exercises\", link: null },\n  //     annotations: {\n  //       bold: false,\n  //       italic: false,\n  //       strikethrough: false,\n  //       underline: false,\n  //       code: false,\n  //       color: \"default\",\n  //     },\n  //     plain_text: \"10 Challenging Hanging Core Exercises\",\n  //     href: null,\n  //   },\n  // ]\n  //\n\n  const items = text?.map(obj => {\n    let textItem = obj.text?.content\n\n    // Don't create html processing for headings to create correct table of contents\n    if (!type?.includes(\"heading\") && type !== \"title\") {\n      /* Styles */\n      if (obj.annotations?.bold) textItem = \"<strong>\" + textItem + \"</strong>\"\n      if (obj.annotations?.italic)\n        textItem = \"<span style='font-style: italic'>\" + textItem + \"</span>\"\n      if (obj.annotations?.underline)\n        textItem =\n          \"<span style='text-decoration: underline'>\" + textItem + \"</span>\"\n\n      /* State */\n      if (obj.text?.link)\n        textItem = `<a href=\"${obj.text.link.url}\">${textItem}</a>`\n    }\n\n    return textItem\n  })\n\n  return items?.join(\" \")\n}\n\nconst handlePlugin = json => {\n  // const plugin = code.match(/\\(.*?\\)/g).map(x => x.replace(/[()]/g, \"\"))\n  const code = JSON.parse(json)\n\n  if (code.plugin === \"exercise\") {\n    return (\n      <ExerciseContainer>\n        <ExerciseThumbnail {...code.data} autoplay />\n      </ExerciseContainer>\n    )\n  }\n\n  if (code.plugin === \"circuit\") {\n    return <Circuit {...code.data} />\n  }\n}\n\nconst Content = ({\n  pageContext: {\n    slug,\n    title,\n    desc,\n    image,\n    blocks,\n    contents,\n    readTime,\n    createdTime,\n    lastEditedTime,\n  },\n  data,\n  location,\n}) => {\n  // const formattedTitle = extractText(title[title.type], title.type)\n\n  const scrollTo = id => {\n    const el = document.getElementById(id)\n\n    el?.scrollIntoView({\n      behavior: \"smooth\",\n      inline: \"start\",\n    })\n  }\n\n  return (\n    <>\n      <Metadata\n        title={title}\n        description={desc}\n        url={`https://programme.app/${slug}`}\n        image={image}\n      />\n\n      <Container>\n        <Body>\n          <H1>{title}</H1>\n\n          {/* <ReadTime>{readTime} min read</ReadTime> */}\n          {contents.length ? \n            <TableOfContents>\n              <span>On This Page</span>\n              <ul>\n                {contents.map(i => (\n                  <ContentsItem indent={i.type === \"heading_3\"}>\n                    <div\n                      onClick={() =>\n                        scrollTo(`${i.text.toLowerCase().replace(/ /g, \"-\")}`)\n                      }\n                    >\n                      {i.text}\n                    </div>\n                  </ContentsItem>\n                ))}\n              </ul>\n            </TableOfContents> \n          : null}\n\n          {blocks.map(block => {\n            const text = extractText(block[block.type].text, block.type)\n\n            switch (block.type) {\n              case \"heading_2\":\n                return (\n                  <h2\n                    id={text.toLowerCase().replace(/ /g, \"-\")}\n                    dangerouslySetInnerHTML={{ __html: text }}\n                  />\n                )\n              case \"heading_3\":\n                return (\n                  <h3\n                    id={text.toLowerCase().replace(/ /g, \"-\")}\n                    dangerouslySetInnerHTML={{ __html: text }}\n                  />\n                )\n              case \"paragraph\":\n                return <p dangerouslySetInnerHTML={{ __html: text }} />\n              case \"bulleted_list_item\":\n              case \"numbered_list_item\":\n                return <li dangerouslySetInnerHTML={{ __html: text }} />\n              case \"code\":\n                return handlePlugin(text)\n              default:\n                return <p dangerouslySetInnerHTML={{ __html: text }} />\n            }\n          })}\n        </Body>\n\n        {/* <Signature> */}\n        {/*   <h3>Sean Richard Klein</h3> */}\n        {/*   <img src={SeanSig} alt=\"Sean Klein's Signature\" /> */}\n        {/* </Signature> */}\n\n      </Container>\n      <FooterPitch />\n    </>\n  )\n}\n\nconst Container = styled.div`\n  padding: 120px 2em;\n\n  @media (max-width: 640px) {\n    padding: 0 1em;\n  }\n`\n\nconst H1 = styled.h1`\n  font-size: 1.728rem;\n`\n\nexport const Head = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 12em ${({ padding }) => (padding ? \"2em\" : 0)} 1em;\n\n  h1 {\n    color: var(--white);\n    font-weight: normal;\n    margin-top: 0;\n    min-width: ${({ withFilters }) =>\n      withFilters ? \"calc(220px + (100% - 220px) / 2)\" : \"50%\"};\n    max-width: ${({ withFilters }) =>\n      withFilters ? \"calc(220px + (100% - 220px) / 2)\" : \"50%\"};\n    padding-right: 10%;\n  }\n\n  & > div {\n    padding 0 1em;\n  }\n\n  h2 {\n    &:first-child {\n      margin-top: 0;\n    }\n    color: var(--white);\n    max-width: 700px;\n    font-size: 1.2rem;\n  }\n\n  p {\n    color: var(--light-grey);\n    margin-top: 0;\n    max-width: 700px;\n    font-size: 1.2rem;\n  }\n\n  @media (max-width: 56em) {\n    flex-direction: column;\n    padding: 6em ${({ padding }) => (padding ? \"1em\" : 0)} 0em;\n\n    & > div {\n      padding: 0;\n    }\n\n    h1 {\n      max-width: 100%;\n    }\n\n    p {\n      font-size: 1rem;\n    }\n  }\n`\n\nexport const Stats = styled.div`\n  margin-top: 8em;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n\n  @media (max-width: 48em) {\n    margin-top: 4em;\n  }\n\n  @media (max-width: 400px) {\n    // flex-direction: column;\n  }\n`\n\nexport const Stat = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-right: 2em;\n  margin-bottom: 1em;\n\n  img {\n    margin-right: 0.5em;\n    width: 2em;\n    height: 2em;\n    border-radius: 2em;\n  }\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  @media (max-width: 48em) {\n    margin-right: 1em;\n  }\n`\n\nexport const Data = styled.div`\n  div:first-child {\n    font-size: 16px;\n    color: var(--light-grey);\n  }\n  div:last-child {\n    font-size: 18px;\n    color: var(--white);\n  }\n`\n\nconst TableOfContents = styled.div`\n  width: 640px;\n  max-width: 100%;\n  margin: 2em auto;\n\n  span {\n    color: var(--white);\n  }\n\n  div {\n    cursor: pointer;\n    color: var(--light-grey);\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  @media (max-width: 48em) {\n    margin: 2em auto;\n  }\n`\n\nconst ContentsItem = styled.li`\n  text-indent: ${props => (props.indent ? \"30px\" : \"0\")};\n  list-style: none;\n`\n\nconst ExerciseContainer = styled.div`\n  max-width: 640px;\n  margin: 1em auto;\n  width: 100%;\n`\n\nconst Body = styled.div`\n  margin: 2em auto;\n\n  > h1,\n  > h2,\n  > h3,\n  > p,\n  > ul,\n  > ol,\n  > li {\n    max-width: 640px !important;\n    margin-left: auto;\n    margin-right: auto;\n    color: var(--white);\n  }\n\n  p,\n  li {\n    color: var(--light-grey);\n  }\n\n  a {\n    color: var(--white);\n    text-decoration: underline;\n  }\n`\n\nexport default Content\n"],"names":["Container","styled","H1","Head","padding","withFilters","Stats","Stat","Data","TableOfContents","ContentsItem","props","indent","ExerciseContainer","Body","pageContext","slug","title","desc","image","blocks","contents","readTime","createdTime","lastEditedTime","data","location","description","url","length","map","i","type","onClick","id","text","toLowerCase","replace","el","document","getElementById","scrollIntoView","behavior","inline","block","json","code","items","obj","textItem","content","includes","annotations","bold","italic","underline","link","join","extractText","dangerouslySetInnerHTML","__html","JSON","parse","plugin","autoplay"],"sourceRoot":""}