component---src-templates-post-template-tsx-404ad603482e9d9ed640.js.map

{"version":3,"file":"component---src-templates-post-template-tsx-404ad603482e9d9ed640.js","mappings":"0PAWA,MAAMA,GAAmB,4NAenBC,GAAY,8SAmBZC,GAAK,+SAiBLC,GAAQ,kRAqCd,MArB2DC,IAIpD,IAJqD,MAC1DC,EAAK,KACLC,EAAI,WACJC,GACD,EAGC,OACEC,EAAAA,EAAAA,IAACR,EAAmB,MAClBQ,EAAAA,EAAAA,IAACP,EAAY,CAACQ,QAJC,IAAMC,OAAOC,QAAQC,SAKlCJ,EAAAA,EAAAA,IAACK,EAAAA,EAAe,CAACC,KAAMC,EAAAA,QAEzBP,EAAAA,EAAAA,IAACN,EAAK,KAAEG,IACRG,EAAAA,EAAAA,IAACL,EAAQ,MACPK,EAAAA,EAAAA,IAAAA,MAAAA,KAAMD,EAAWS,KAAK,SACtBR,EAAAA,EAAAA,IAAAA,MAAAA,KAAMF,IAEY,EChF1B,MAAMW,GAAe,iJAUfC,GAAkBC,EAAAA,EAAAA,IAAQC,IAC9BZ,EAAAA,EAAAA,IAACa,EAAAA,GAAW,UAAKD,EAAK,CAAEE,MAAO,CAAEC,SAAU,gBAC5C,qBAFuBJ,CAEtB,gJA0BF,MAdmDf,IAK5C,IAL6C,UAClDoB,EAAS,MACTnB,EAAK,KACLC,EAAI,WACJC,GACD,EACC,OACEC,EAAAA,EAAAA,IAACS,EAAe,MACdT,EAAAA,EAAAA,IAACU,EAAe,CAACO,MAAOD,EAAWE,IAAI,eACvClB,EAAAA,EAAAA,IAACmB,EAAY,CAACtB,MAAOA,EAAOC,KAAMA,EAAMC,WAAYA,IACpC,EC1CtB,MAAMqB,GAAgB,g+BAgItB,MAJyD,YAAqB,IAAX,KAAEC,GAAM,EACzE,OAAOrB,EAAAA,EAAAA,IAACoB,EAAgB,CAACE,wBAAyB,CAAEC,OAAQF,IAC9D,E,UClIA,MAaMG,GAAiB,wGAkCvB,MA5ByC,WACvC,MAAMC,GAAUC,EAAAA,EAAAA,aAwBhB,OAtBAC,EAAAA,EAAAA,YAAU,KACR,GAAwB,OAApBF,EAAQG,QAAkB,OAE9B,MAAMC,EAAgCC,SAASC,cAAc,UAEvDC,EAAuC,CAC3CC,IA5BM,gCA6BNC,KA5BO,0BA6BP,aAAc,WACdC,MAAO,UACPC,MAAM,eACNC,YAAa,YACbC,MAAO,QAGTC,OAAOC,QAAQR,GAAYS,SAAQ7C,IAAmB,IAAjB8C,EAAKC,GAAM,EAC9Cd,EAAWe,aAAaF,EAAKC,EAAM,IAGrClB,EAAQG,QAAQiB,YAAYhB,EAAW,GACtC,KAEI7B,EAAAA,EAAAA,IAACwB,EAAiB,CAACsB,IAAKrB,GACjC,ECaA,MApC2D7B,IAKrD,IAJJmD,MACEC,mBAAmB,MAAEC,IAEvBC,UAAU,KAAEC,IACb,EACC,MACEC,MAAM,KACJ/B,EACAgC,aAAa,MACXxD,EAAK,QACLyD,EAAO,KACPxD,EAAI,WACJC,EACAiB,WACEuC,iBAAiB,gBAAEC,GAAiB,UACpCC,MAIJR,EAAM,GAEV,OACEjD,EAAAA,EAAAA,IAAC0D,EAAAA,EAAQ,CAAC7D,MAAOA,EAAO8D,YAAaL,EAASM,IAAKT,EAAMlC,MAAOwC,IAC9DzD,EAAAA,EAAAA,IAAC6D,EAAQ,CACPhE,MAAOA,EACPC,KAAMA,EACNC,WAAYA,EACZiB,UAAWwC,KAEbxD,EAAAA,EAAAA,IAAC8D,EAAW,CAACzC,KAAMA,KACnBrB,EAAAA,EAAAA,IAAC+D,EAAa,MACL,C","sources":["webpack://gatsby-starter-default/./src/components/Post/PostHeadInfo.tsx","webpack://gatsby-starter-default/./src/components/Post/PostHead.tsx","webpack://gatsby-starter-default/./src/components/Post/PostContent.tsx","webpack://gatsby-starter-default/./src/components/Post/CommentWidget.tsx","webpack://gatsby-starter-default/./src/templates/post_template.tsx"],"sourcesContent":["import React, { FunctionComponent } from 'react'\nimport styled from '@emotion/styled'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faArrowLeft } from '@fortawesome/free-solid-svg-icons'\n\nexport type PostHeadInfoProps = {\n  title: string\n  date: string\n  categories: string[]\n}\n\nconst PostHeadInfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 768px;\n  height: 100%;\n  margin: 0 auto;\n  padding: 60px 0;\n  color: #ffffff;\n\n  @media (max-width: 768px) {\n    width: 100%;\n    padding: 40px 20px;\n  }\n`\n\nconst PrevPageIcon = styled.div`\n  display: grid;\n  place-items: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: #ffffff;\n  color: #000000;\n  font-size: 22px;\n  cursor: pointer;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n\n  @media (max-width: 768px) {\n    width: 30px;\n    height: 30px;\n    font-size: 18px;\n  }\n`\n\nconst Title = styled.div`\n  display: -webkit-box;\n  overflow: hidden;\n  overflow-wrap: break-word;\n  margin-top: auto;\n  text-overflow: ellipsis;\n  white-space: normal;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  font-size: 45px;\n  font-weight: 800;\n\n  @media (max-width: 768px) {\n    font-size: 30px;\n  }\n`\n\nconst PostData = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n  font-size: 18px;\n  font-weight: 700;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n    align-items: flex-start;\n    font-size: 15px;\n    font-weight: 400;\n  }\n`\n\nconst PostHeadInfo: FunctionComponent<PostHeadInfoProps> = ({\n  title,\n  date,\n  categories,\n}) => {\n  const goBackPage = () => window.history.back()\n\n  return (\n    <PostHeadInfoWrapper>\n      <PrevPageIcon onClick={goBackPage}>\n        <FontAwesomeIcon icon={faArrowLeft} />\n      </PrevPageIcon>\n      <Title>{title}</Title>\n      <PostData>\n        <div>{categories.join(' / ')}</div>\n        <div>{date}</div>\n      </PostData>\n    </PostHeadInfoWrapper>\n  )\n}\n\nexport default PostHeadInfo\n","import React, { FunctionComponent } from 'react'\nimport styled from '@emotion/styled'\nimport { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'\nimport PostHeadInfo, { PostHeadInfoProps } from './PostHeadInfo'\n\ntype GatsbyImgProps = {\n  image: IGatsbyImageData\n  alt: string\n  className?: string\n}\n\ntype PostHeadProps = PostHeadInfoProps & {\n  thumbnail: IGatsbyImageData\n}\n\nconst PostHeadWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 400px;\n\n  @media (max-width: 768px) {\n    height: 300px;\n  }\n`\n\nconst BackgroundImage = styled((props: GatsbyImgProps) => (\n  <GatsbyImage {...props} style={{ position: 'absolute' }} />\n))`\n  z-index: -1;\n  width: 100%;\n  height: 400px;\n  object-fit: cover;\n  filter: brightness(0.25);\n\n  @media (max-width: 768px) {\n    height: 300px;\n  }\n`\n\nconst PostHead: FunctionComponent<PostHeadProps> = ({\n  thumbnail,\n  title,\n  date,\n  categories,\n}) => {\n  return (\n    <PostHeadWrapper>\n      <BackgroundImage image={thumbnail} alt=\"thumbnail\" />\n      <PostHeadInfo title={title} date={date} categories={categories} />\n    </PostHeadWrapper>\n  )\n}\n\nexport default PostHead\n","import React, { FunctionComponent } from 'react'\nimport styled from '@emotion/styled'\n\ninterface PostContentProps {\n  html: string\n}\n\nconst MarkdownRenderer = styled.div`\n  // Renderer Style\n  display: flex;\n  flex-direction: column;\n  width: 768px;\n  margin: 0 auto;\n  padding: 100px 0;\n  word-break: break-all;\n\n  // Markdown Style\n  line-height: 1.8;\n  font-size: 16px;\n  font-weight: 400;\n\n  // Apply Padding Attribute to All Elements\n  p {\n    padding: 3px 0;\n  }\n\n  // Adjust Heading Element Style\n  h1,\n  h2,\n  h3 {\n    font-weight: 800;\n    margin-bottom: 30px;\n  }\n\n  * + h1,\n  * + h2,\n  * + h3 {\n    margin-top: 80px;\n  }\n\n  hr + h1,\n  hr + h2,\n  hr + h3 {\n    margin-top: 0;\n  }\n\n  h1 {\n    font-size: 30px;\n  }\n\n  h2 {\n    font-size: 25px;\n  }\n\n  h3 {\n    font-size: 20px;\n  }\n\n  // Adjust Quotation Element Style\n  blockquote {\n    margin: 30px 0;\n    padding: 5px 15px;\n    border-left: 2px solid #000000;\n    font-weight: 800;\n  }\n\n  // Adjust List Element Style\n  ol,\n  ul {\n    margin-left: 20px;\n    padding: 30px 0;\n  }\n\n  // Adjust Horizontal Rule style\n  hr {\n    border: 1px solid #000000;\n    margin: 100px 0;\n  }\n\n  // Adjust Link Element Style\n  a {\n    color: #4263eb;\n    text-decoration: underline;\n  }\n\n  // Adjust Code Style\n  pre[class*='language-'] {\n    margin: 30px 0;\n    padding: 15px;\n    font-size: 15px;\n\n    ::-webkit-scrollbar-thumb {\n      background: rgba(255, 255, 255, 0.5);\n      border-radius: 3px;\n    }\n  }\n\n  code[class*='language-'],\n  pre[class*='language-'] {\n    tab-size: 2;\n  }\n\n  // Markdown Responsive Design\n  @media (max-width: 768px) {\n    width: 100%;\n    padding: 80px 20px;\n    line-height: 1.6;\n    font-size: 14px;\n\n    h1 {\n      font-size: 23px;\n    }\n\n    h2 {\n      font-size: 20px;\n    }\n\n    h3 {\n      font-size: 17px;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    hr {\n      margin: 50px 0;\n    }\n  }\n`\n\nconst PostContent: FunctionComponent<PostContentProps> = function ({ html }) {\n  return <MarkdownRenderer dangerouslySetInnerHTML={{ __html: html }} />\n}\n\nexport default PostContent\n","import React, { createRef, FunctionComponent, useEffect } from 'react'\nimport styled from '@emotion/styled'\n\nconst src = 'https://utteranc.es/client.js'\nconst repo = 'shaqok/shaqok.github.io' // 자신 계정의 레포지토리로 설정\n\ntype UtterancesAttributesType = {\n  src: string\n  repo: string\n  'issue-term': string\n  label: string\n  theme: string\n  crossorigin: string\n  async: string\n}\n\nconst UtterancesWrapper = styled.div`\n  @media (max-width: 768px) {\n    padding: 0 20px;\n  }\n`\n\nconst CommentWidget: FunctionComponent = function () {\n  const element = createRef<HTMLDivElement>()\n\n  useEffect(() => {\n    if (element.current === null) return\n\n    const utterances: HTMLScriptElement = document.createElement('script')\n\n    const attributes: UtterancesAttributesType = {\n      src,\n      repo,\n      'issue-term': 'pathname',\n      label: 'Comment',\n      theme: `github-light`,\n      crossorigin: 'anonymous',\n      async: 'true',\n    }\n\n    Object.entries(attributes).forEach(([key, value]) => {\n      utterances.setAttribute(key, value)\n    })\n\n    element.current.appendChild(utterances)\n  }, [])\n\n  return <UtterancesWrapper ref={element} />\n}\n\nexport default CommentWidget\n","import React, { FunctionComponent } from 'react'\nimport { graphql } from 'gatsby'\nimport Template from 'components/Common/Template'\nimport PostHead from 'components/Post/PostHead'\nimport PostContent from 'components/Post/PostContent'\nimport CommentWidget from 'components/Post/CommentWidget'\n\nexport type PostPageItemType = {\n  node: {\n    html: string\n    frontmatter: PostFrontmatterType\n  }\n}\n\ntype PostTemplateProps = {\n  data: {\n    allMarkdownRemark: {\n      edges: PostPageItemType[]\n    },\n    location: { \n      href: string \n    }\n  }\n}\n\nconst PostTemplate: FunctionComponent<PostTemplateProps> = ({\n  data: {\n    allMarkdownRemark: { edges }\n  },\n  location: { href },  \n}) => {\n  const {\n    node: {\n      html,\n      frontmatter: {\n        title,\n        summary,\n        date,\n        categories,\n        thumbnail: {\n          childImageSharp: { gatsbyImageData },\n          publicURL,\n        },\n      },\n    },\n  } = edges[0]\n\n  return (\n    <Template title={title} description={summary} url={href} image={publicURL}>\n      <PostHead \n        title={title}\n        date={date}\n        categories={categories}\n        thumbnail={gatsbyImageData}\n      />\n      <PostContent html={html} />\n      <CommentWidget />\n    </Template>\n  )\n}\n\nexport default PostTemplate\n\nexport const queryMarkdownDataBySlug = graphql`\n  query queryMarkdownDataBySlug($slug: String) {\n    allMarkdownRemark(filter: { fields: { slug: { eq: $slug } } }) {\n      edges {\n        node {\n          html\n          frontmatter {\n            title\n            summary\n            date(formatString: \"YYYY.MM.DD.\")\n            categories\n            thumbnail {\n              childImageSharp {\n                gatsbyImageData\n              }\n              publicURL\n            }\n          }\n        }\n      }\n    }\n  }\n`"],"names":["PostHeadInfoWrapper","PrevPageIcon","Title","PostData","_ref","title","date","categories","___EmotionJSX","onClick","window","history","back","FontAwesomeIcon","icon","faArrowLeft","join","PostHeadWrapper","BackgroundImage","_styled","props","GatsbyImage","style","position","thumbnail","image","alt","PostHeadInfo","MarkdownRenderer","html","dangerouslySetInnerHTML","__html","UtterancesWrapper","element","createRef","useEffect","current","utterances","document","createElement","attributes","src","repo","label","theme","crossorigin","async","Object","entries","forEach","key","value","setAttribute","appendChild","ref","data","allMarkdownRemark","edges","location","href","node","frontmatter","summary","childImageSharp","gatsbyImageData","publicURL","Template","description","url","PostHead","PostContent","CommentWidget"],"sourceRoot":""}