{"version":3,"sources":["webpack:///./src/components/atoms/Tag/index.tsx","webpack:///./src/components/Markdown/index.tsx","webpack:///./src/layouts/blog.tsx","webpack:///./src/components/GoogleAdsense/index.tsx","webpack:///./src/templates/blog.tsx"],"names":["Tag","props","StyledComponent","href","className","value","styled","div","Markdown","dangerouslySetInnerHTML","__html","html","BlogLayout","sessionStore","useSelector","state","session","Loading","children","Footer","GoogleAdsense","useEffect","console","log","process","window","adsbygoogle","push","style","width","display","data-ad-client","data-ad-slot","data-ad-format","data-full-width-responsive","Blog","markdown","data","markdownRemark","title","frontmatter","discription","description","to","ProfileImage","date","tags","map","tag","i","key","length"],"mappings":"6FAAA,4BAeeA,IATc,SAACC,GAC5B,OACE,gBAACC,EAAD,KACE,qBAAGC,KAAK,IAAIC,UAAU,OACnBH,EAAMI,SAOf,IAAMH,EAAkBI,IAAOC,IAAV,2EAAGD,CAAH,8oB,kCCjBrB,8DAMaE,EAA4B,SAACP,GACxC,OACE,gBAACC,EAAD,KACE,uBAAKE,UAAU,OAAOK,wBAAyB,CAAEC,OAAQT,EAAMU,UAK/DT,EAAkBI,IAAOC,IAAV,+EAAGD,CAAH,sgD,0ICHRM,EAA8B,SAACX,GAC1C,IAAMY,EAAeC,aAAY,SAACC,GAAD,OAAkBA,EAAMC,WAEzD,OACE,gBAACd,EAAD,KACE,gBAAC,IAAD,OACEW,EAAaG,SAAW,gBAACC,EAAA,EAAD,MAC1B,wBAAMb,UAAU,QAAQH,EAAMiB,UAC9B,gBAACC,EAAA,EAAD,QAKAjB,EAAkBI,IAAOC,IAAV,4EAAGD,CAAH,oC,gDCrBRc,EAAiC,WAO5C,OANAC,qBAAU,WACRC,QAAQC,IAAI,0BAA2BC,cACvCC,OAAOC,YAAcD,OAAOC,aAAe,GAC3CD,OAAOC,YAAYC,KAAK,MACvB,IAGD,yBAAKC,MAAO,CAAEC,MAAO,SACnB,yBACEzB,UAAU,cACVwB,MAAO,CAAEE,QAAS,SAClBC,iBAAe,0BACfC,eAAa,aACbC,iBAAe,OACfC,6BAA2B,WCmD7BhC,GAhBSiC,UAxCe,SAAClC,GAC7B,IAAMmC,EAAWnC,EAAMoC,KAAKC,gBAAkB,GACxCC,EAAQH,EAASI,YAAYD,OAAS,GACtCE,EAAcL,EAASI,YAAYC,aAAe,GAExD,OACE,gBAAC,EAAD,KACE,gBAAC,IAAD,CAAKF,MAAOA,EAAOG,YAAaD,IAChC,gBAAC,EAAD,KACE,uBAAKrC,UAAU,cACb,uBAAKA,UAAU,UACb,sBAAIA,UAAU,SAASmC,GACvB,uBAAKnC,UAAU,iBACb,gBAAC,OAAD,CAAMuC,GAAG,IAAIvC,UAAU,WACrB,uBAAKA,UAAU,kBACb,gBAACwC,EAAA,EAAD,OAEF,wBAAMxC,UAAU,iBAAhB,gBAEF,yBAAIgC,EAASI,YAAYK,QAG7B,2BACGT,EAASI,YAAYM,MAAQV,EAASI,YAAYM,KAAKC,KAAI,SAACC,EAAaC,GAAd,OAC1D,gBAACjD,EAAA,EAAD,CAAKK,MAAO2C,EAAKE,IAAKD,QAG1B,uBAAK7C,UAAU,WACb,gBAACI,EAAA,EAAD,CAAUG,KAAMyB,EAASzB,SAG5B4B,EAAMY,OAAS,GACd,uBAAK/C,UAAU,kBACb,gBAAC,EAAD,UAuBYE,IAAOC,IAAV,4EAAGD,CAAH","file":"component---src-templates-blog-tsx-acba823cd448aa9ad5df.js","sourcesContent":["import * as React from 'react'\nimport styled from 'styled-components'\n\ninterface Props {\n  value: string\n}\nconst Tag: React.FC<Props> = (props): JSX.Element => {\n  return (\n    <StyledComponent>\n      <a href='/' className='tag'>\n        {props.value}\n      </a>\n    </StyledComponent>\n  )\n}\nexport default Tag\n\nconst StyledComponent = styled.div`\n  display: inline-block;\n  min-width: 50px;\n  height: 22px;\n  border: 1px solid #2cb696;\n  border-radius: 4px;\n  margin: 4px;\n  padding: 0 12px;\n\n  .tag {\n    display: block;\n    font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic,\n      'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,\n      Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;\n    font-size: 14px;\n    font-weight: 800;\n    height: 100%;\n    width: 100%;\n    margin: 0 auto;\n    line-height: 22px;\n    text-align: center;\n    color: #2cb696;\n    text-decoration: none;\n    pointer-events: none;\n  }\n\n  @media screen and (max-width: 1024px) {\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0 6px;\n    height: 18px;\n    min-width: 35px;\n\n    .tag {\n      font-size: 11px;\n      line-height: 18px;\n    }\n  }\n  @media screen and (max-width: 480px) {\n  }\n`\n","import * as React from 'react'\nimport styled from 'styled-components'\n\ninterface Props {\n  html: string\n}\nexport const Markdown: React.FC<Props> = (props): JSX.Element => {\n  return (\n    <StyledComponent>\n      <div className='html' dangerouslySetInnerHTML={{ __html: props.html }} />\n    </StyledComponent>\n  )\n}\n\nconst StyledComponent = styled.div`\n  .html {\n    font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic,\n      'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,\n      Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;\n    font-weight: 200;\n    font-size: 16px;\n    line-height: 24px;\n    margin: 24px 0;\n    word-break: break-word;\n\n    .language-text {\n      color: #000;\n      background: #dddddd;\n      padding: 0 8px;\n    }\n  }\n  h1 {\n    font-size: 24px;\n    font-weight: 600;\n    margin: 24px 0;\n  }\n  h2 {\n    font-size: 24px;\n    font-weight: 800;\n    margin: 40px 0 16px;\n    border-bottom: 1px solid #DDDDDD;\n    padding-bottom: 6px;\n\n    &::before {\n      content: '# ';\n      color: #2cb696;\n    }\n  }\n  h3 {\n    font-size: 20px;\n    font-weight: 800;\n    margin: 32px 0 12px;\n  }\n  em {\n    font-style: oblique;\n  }\n  strong {\n    font-weight: 800;\n  }\n  a {\n    color: #2cb696;\n  }\n  img {\n    max-width: 100%;\n  }\n\n  /**\n  * @'gatsby-remark-code-titles'の拡張\n  */\n  .gatsby-code-title {\n    background: #2e96b5;\n    color: #eee;\n    padding: 4px 8px;\n    margin-top: 8px;\n    font-size: 0.8em;\n    line-height: 1;\n    font-weight: bold;\n    display: table;\n    border-radius: 4px 4px 0 0;\n  }\n  .gatsby-highlight {\n    margin-bottom: 8px;\n  }\n  pre[class*='language-'] {\n    background-color: #1c1b1b;\n    display: block;\n    padding-right: 1rem;\n    padding-left: 2rem;\n    border-radius: 0 4px 4px 4px;\n    margin: 0;\n  }\n  pre[class*=\"language-\"].line-numbers {\n    padding: 0.6em;\n    padding-left: 2.8em;\n  }\n  .line-numbers-rows {\n    padding: 0.6em 0;\n    padding-left: 4px;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\n    font-size: 0.9em;\n    color: #fff;\n  }\n  :not(pre)>code[class*='language-text'] {\n    font-size: 1em;\n    padding: 2px 10px 3px 12px;\n    margin: 0 4px;\n    background-color: #3c3c3c;\n  }\n  .gatsby-highlight-code-line {\n    background: #545454;\n    display: block\n  }\n\n  @media screen and (max-width: 1024px) {\n    h2 {\n      font-size: 22px;\n    }\n    h3 {\n      font-size: 18px;\n      margin: 20px 0 8px;\n    }\n  }\n  @media screen and (max-width: 768px) {\n  }\n  @media screen and (max-width: 480px) {\n  }\n`\n","import * as React from 'react'\nimport { useSelector } from 'react-redux'\nimport styled from 'styled-components'\nimport { GlobalStyle } from '@/styles/global'\nimport { State } from '@/store'\nimport Loading from '@/layouts/Loading'\nimport Footer from '@/components/Footer'\n\ninterface Props {\n  children: JSX.Element | JSX.Element[]\n}\nexport const BlogLayout: React.FC<Props> = (props): JSX.Element => {\n  const sessionStore = useSelector((state: State) => state.session)\n\n  return (\n    <StyledComponent>\n      <GlobalStyle />\n      {!sessionStore.session && <Loading />}\n      <main className='main'>{props.children}</main>\n      <Footer />\n    </StyledComponent>\n  )\n}\n\nconst StyledComponent = styled.div`\n  .main {\n    width: 100%;\n    margin: auto;\n  }\n`\n","import React, { useEffect } from 'react'\n\ninterface Props {}\nexport const GoogleAdsense: React.FC<Props> = (): JSX.Element => {\n  useEffect(() => {\n    console.log('GoogleAdsense NODE_ENV=', process.env.NODE_ENV)\n    window.adsbygoogle = window.adsbygoogle || []\n    window.adsbygoogle.push({})\n  }, [])\n\n  return (\n    <div style={{ width: '100%' }}>\n      <ins\n        className='adsbygoogle'\n        style={{ display: 'block' }}\n        data-ad-client='ca-pub-5942117920715661'\n        data-ad-slot='6630791371'\n        data-ad-format='auto'\n        data-full-width-responsive='true'\n      />\n    </div>\n  )\n}\n","import * as React from 'react'\nimport { graphql, Link } from 'gatsby'\nimport styled from 'styled-components'\nimport { BlogLayout } from '@/layouts/blog'\nimport SEO from '@/components/seo'\nimport { ProfileImage } from '@/components/atoms/images/ProfileImage'\nimport Tag from '@/components/atoms/Tag'\nimport { Markdown } from '@/components/Markdown'\nimport { GoogleAdsense } from '@/components/GoogleAdsense'\n\ninterface Props {\n  data: any\n}\nconst Blog: React.FC<Props> = (props): JSX.Element => {\n  const markdown = props.data.markdownRemark || {}\n  const title = markdown.frontmatter.title || ''\n  const discription = markdown.frontmatter.discription || ''\n\n  return (\n    <BlogLayout>\n      <SEO title={title} description={discription} />\n      <StyledComponent>\n        <div className='media-wrap'>\n          <div className='header'>\n            <h1 className='title'>{title}</h1>\n            <div className='header__infos'>\n              <Link to='/' className='profile'>\n                <div className='profile__image'>\n                  <ProfileImage />\n                </div>\n                <span className='profile__text'>taikishiino</span>\n              </Link>\n              <i>{markdown.frontmatter.date}</i>\n            </div>\n          </div>\n          <div>\n            {markdown.frontmatter.tags && markdown.frontmatter.tags.map((tag: string, i: number) => (\n              <Tag value={tag} key={i} />\n            ))}\n          </div>\n          <div className='content'>\n            <Markdown html={markdown.html} />\n          </div>\n        </div>\n        {title.length > 0 && (\n          <div className='google_adsense'>\n            <GoogleAdsense />\n          </div>\n        )}\n      </StyledComponent>\n    </BlogLayout>\n  )\n}\nexport default Blog\n\nexport const query = graphql`\n  query BlogPostQuery($slug: String!) {\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      html\n      frontmatter {\n        date(formatString: \"YYYY/MM/DD\")\n        title\n        discription\n        tags\n      }\n    }\n  }\n`\n\nconst StyledComponent = styled.div`\n  margin: 0 auto;\n  width: 720px;\n\n  .header {\n    margin: 40px 0;\n    text-align: center;\n\n    .title {\n      font-size: 24px;\n      font-weight: bold;\n      line-height: 1.4;\n    }\n\n    &__infos {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-top: 16px;\n      color: gray;\n\n      .profile {\n        display: flex;\n        align-items: center;\n        color: gray;\n\n        &__image {\n          width: 24px;\n          height: 24px;\n          .gatsby-image-wrapper {\n            border-radius: 24px;\n            box-shadow: 1px 1px 1px 1px #c1d6ec;\n          }\n        }\n        &__text {\n          font-size: 16px;\n          margin-left: 8px;\n        }\n      }\n\n      i {\n        font-size: 14px;\n        font-style: oblique;\n        margin-left: 48px;\n      }\n    }\n  }\n\n  .content {\n    font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic,\n      'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,\n      Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;\n    font-weight: 300;\n  }\n\n  .google_adsense {\n    margin-top: 64px;\n    padding: 0 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  @media screen and (max-width: 1024px) {\n    width: 100%;\n\n    .media-wrap {\n      padding: 0 24px;\n    }\n    .header {\n      .title {\n        font-size: 20px;\n      }\n    }\n  }\n  @media screen and (max-width: 768px) {\n    .media-wrap {\n      padding: 0 20px;\n    }\n  }\n  @media screen and (max-width: 480px) {\n  }\n`\n"],"sourceRoot":""}