-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponent---src-templates-post-template-tsx-108f94149a70dcf4ab1c.js.map
1 lines (1 loc) · 15.1 KB
/
component---src-templates-post-template-tsx-108f94149a70dcf4ab1c.js.map
1
{"version":3,"sources":["webpack://gatsby-starter-default/./src/components/Post/CommentWidget.tsx","webpack://gatsby-starter-default/./src/components/Post/PostContent.tsx","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/PostNav.tsx","webpack://gatsby-starter-default/./src/templates/post_template.tsx"],"names":["UtterancesWrapper","src","repo","wrapper","createRef","useEffect","current","utterances","document","createElement","attributes","label","theme","crossorigin","async","Object","entries","forEach","key","value","setAttribute","appendChild","ref","MarkdownRenderer","html","dangerouslySetInnerHTML","__html","PostHeadInfoWrapper","Title","PostData","title","date","categories","join","PostHeadWrapper","BackgroundImage","props","style","position","thumbnail","fluid","alt","PrevPostInfo","NextPostInfo","PostTitle","ButtonIcon","NavItem","Link","PostNavWrapper","prev","next","prevPostTitle","nextPostTitle","to","slug","icon","faArrowLeft","marginLeft","faArrowRight","edges","data","allMarkdownRemark","href","location","pageContext","node","frontmatter","summary","childImageSharp","original","Template","description","url","image"],"mappings":"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","file":"component---src-templates-post-template-tsx-108f94149a70dcf4ab1c.js","sourcesContent":["import styled from '@emotion/styled';\nimport React, { createRef, ReactElement, useEffect } from 'react';\n\ninterface 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\nfunction CommentWidget(): ReactElement {\n const wrapper = createRef<HTMLDivElement>();\n\n useEffect(() => {\n if (wrapper.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 wrapper.current.appendChild(utterances);\n }, []);\n\n return <UtterancesWrapper ref={wrapper} />;\n}\n\nconst UtterancesWrapper = styled.div`\n padding: 0 20px;\n`;\n\nconst src = 'https://utteranc.es/client.js';\nconst repo = 'superLipbalm/superBlog';\n\nexport default CommentWidget;\n","import styled from '@emotion/styled';\nimport React, { ReactElement } from 'react';\n\ninterface PostContentProps {\n html: string;\n}\n\nfunction PostContent({ html }: PostContentProps): ReactElement {\n return <MarkdownRenderer dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\nconst MarkdownRenderer = styled.div`\n // Renderer\n display: flex;\n flex-direction: column;\n width: 768px;\n margin: 0 auto;\n padding: 25px 15px;\n word-break: break-all;\n\n // Markdown\n font-size: 16px;\n font-weight: 400;\n line-height: 1.8;\n\n // Paragraph\n p {\n padding: 3px 0;\n }\n\n // Heading\n h1,\n h2,\n h3,\n h4 {\n font-weight: 800;\n margin-bottom: 10px;\n }\n\n * + h1,\n * + h2,\n * + h3,\n * + h4 {\n margin-top: 10px;\n }\n\n hr + h1,\n hr + h2,\n hr + h3,\n hr + h4 {\n margin-top: 0px;\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 h4 {\n font-size: 18px;\n }\n\n // Quotation\n blockquote {\n margin: 10px 0;\n padding: 5px 15px;\n background: #f5f5f5;\n border-left: 4px solid #485563;\n font-weight: 600;\n }\n\n // List\n ol,\n ul {\n margin-left: 20px;\n padding: 10px 0;\n }\n\n // Table\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n th,\n td {\n padding: 3px;\n border: 1px solid #000000;\n }\n\n // Horizontal Rule\n hr {\n margin-bottom: 5px;\n }\n\n // Anchor\n a {\n color: #0984e3;\n }\n\n // Code\n pre[class*='language-'] {\n margin: 10px 0;\n padding: 15px;\n border-radius: 5px;\n font-size: 15px;\n }\n\n code[class*='language-'],\n pre[class*='language-'] {\n tab-size: 2;\n }\n\n // Responsive\n @media (max-width: 768px) {\n width: 100%;\n font-size: 14px;\n line-height: 1.6;\n\n h1 {\n font-size: 25px;\n }\n\n h2 {\n font-size: 22px;\n }\n\n h3 {\n font-size: 19px;\n }\n\n h4 {\n font-size: 16px;\n }\n\n img {\n width: 100%;\n }\n }\n`;\n\nexport default PostContent;\n","import styled from '@emotion/styled';\nimport React, { ReactElement } from 'react';\n\nexport interface PostHeadInfoProps {\n title: string;\n date: string;\n categories: string[];\n}\n\nfunction PostHeadInfo({\n title,\n date,\n categories,\n}: PostHeadInfoProps): ReactElement {\n return (\n <PostHeadInfoWrapper>\n <Title>{title}</Title>\n <PostData>\n <div>{categories.join(' / ')}</div>\n <div>{date}</div>\n </PostData>\n </PostHeadInfoWrapper>\n );\n}\n\nconst PostHeadInfoWrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: 768px;\n height: 350px;\n margin: 0 auto;\n padding: 60px 20px;\n color: #ffffff;\n\n @media (max-width: 768px) {\n width: 100%;\n height: 300px;\n padding: 40px 20px;\n }\n`;\n\n// const HomeButton = styled(Link)`\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// &:hover {\n// color: #000000;\n// }\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 -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: break-word;\n margin-top: auto;\n text-overflow: ellipsis;\n white-space: normal;\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\nexport default PostHeadInfo;\n","import styled from '@emotion/styled';\nimport Img, { FluidObject } from 'gatsby-image';\nimport React, { ReactElement } from 'react';\nimport PostHeadInfo, { PostHeadInfoProps } from './PostHeadInfo';\n\ninterface GatsbyImgProps {\n fluid: FluidObject;\n alt: string;\n className?: string;\n}\n\nexport interface PostHeadProps extends PostHeadInfoProps {\n thumbnail: FluidObject;\n}\n\nfunction PostHead({\n title,\n date,\n categories,\n thumbnail,\n}: PostHeadProps): ReactElement {\n return (\n <PostHeadWrapper>\n <BackgroundImage fluid={thumbnail} alt=\"thumbnail\" />\n <PostHeadInfo title={title} date={date} categories={categories} />\n </PostHeadWrapper>\n );\n}\n\nconst PostHeadWrapper = styled.div`\n position: relative;\n width: 100%;\n height: 350px;\n\n @media (max-width: 768px) {\n height: 300px;\n }\n`;\n\nconst BackgroundImage = styled((props: GatsbyImgProps) => (\n <Img {...props} style={{ position: 'absolute' }} />\n))`\n z-index: -1;\n width: 100%;\n height: 350px;\n object-fit: cover;\n filter: brightness(0.25);\n\n @media (max-width: 768px) {\n height: 300px;\n }\n`;\n\nexport default PostHead;\n","import styled from '@emotion/styled';\nimport { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Link } from 'gatsby';\nimport React from 'react';\nimport { ReactElement } from 'react';\n\ninterface PostNavProps {\n prev?: {\n slug: string;\n title: string;\n };\n next?: {\n slug: string;\n title: string;\n };\n}\n\nfunction PostNav({ prev, next }: PostNavProps): ReactElement {\n const prevPostTitle = prev?.title;\n const nextPostTitle = next?.title;\n\n return (\n <PostNavWrapper>\n {prev && (\n <NavItem to={prev.slug}>\n <ButtonIcon>\n <FontAwesomeIcon icon={faArrowLeft} />\n </ButtonIcon>\n <PrevPostInfo>\n 이전포스트<PostTitle>{prevPostTitle}</PostTitle>\n </PrevPostInfo>\n </NavItem>\n )}\n {next && (\n <NavItem to={next.slug} style={{ marginLeft: 'auto' }}>\n <NextPostInfo>\n 다음 포스트<PostTitle>{nextPostTitle}</PostTitle>\n </NextPostInfo>\n <ButtonIcon>\n <FontAwesomeIcon icon={faArrowRight} />\n </ButtonIcon>\n </NavItem>\n )}\n </PostNavWrapper>\n );\n}\n\nconst PrevPostInfo = styled.div`\n display: flex;\n flex-direction: column;\n margin-left: 15px;\n margin-right: auto;\n`;\n\nconst NextPostInfo = styled.div`\n display: flex;\n flex-direction: column;\n text-align: right;\n margin-left: auto;\n margin-right: 15px;\n`;\n\nconst PostTitle = styled.h3`\n max-width: 235px;\n color: #29323c;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n word-wrap: break-word;\n\n @media (max-width: 768px) {\n width: 100px;\n }\n`;\n\nconst ButtonIcon = 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 transition: transform 0.15s ease;\n\n @media (max-width: 768px) {\n width: 30px;\n height: 30px;\n font-size: 18px;\n }\n`;\n\nconst NavItem = styled(Link)`\n display: flex;\n align-items: center;\n width: 320px;\n padding: 15px;\n border-radius: 5px;\n background-color: #f5f5f5;\n transition: background-color 0.15s ease;\n\n &:hover {\n background-color: #e5e5e5;\n }\n\n &:hover ${ButtonIcon} {\n transform: translateX(-5px);\n }\n\n &:hover ${NextPostInfo} + ${ButtonIcon} {\n transform: translateX(5px);\n }\n\n @media (max-width: 768px) {\n margin: 5px;\n padding: 5px;\n width: 45vw;\n }\n`;\n\nconst PostNavWrapper = styled.div`\n display: flex;\n align-items: center;\n width: 768px;\n height: 200px;\n margin: 0 auto;\n\n @media (max-width: 768px) {\n width: 100%;\n }\n`;\n\nexport default PostNav;\n","import Template from 'components/Common/Template';\nimport CommentWidget from 'components/Post/CommentWidget';\nimport PostContent from 'components/Post/PostContent';\nimport PostHead from 'components/Post/PostHead';\nimport PostNav from 'components/Post/PostNav';\nimport { graphql, Link } from 'gatsby';\nimport { FluidObject } from 'gatsby-image';\nimport React, { ReactElement } from 'react';\n\ninterface PostTemplateProps {\n data: {\n allMarkdownRemark: {\n edges: [\n {\n node: {\n html: string;\n frontmatter: {\n title: string;\n summary: string;\n date: string;\n categories: string[];\n thumbnail: {\n childImageSharp: {\n fluid: FluidObject;\n original: {\n src: string;\n };\n };\n };\n };\n };\n },\n ];\n };\n };\n location: {\n href: string;\n };\n pageContext: {\n next?: string;\n prev?: string;\n };\n}\n\nfunction PostTemplate({\n data: {\n allMarkdownRemark: { edges },\n },\n location: { href },\n pageContext: { next, prev },\n}: PostTemplateProps): ReactElement {\n const {\n node: {\n html,\n frontmatter: {\n title,\n summary,\n date,\n categories,\n thumbnail: {\n childImageSharp: {\n fluid,\n original: { src },\n },\n },\n },\n },\n } = edges[0];\n\n return (\n <Template title={title} description={summary} url={href} image={src}>\n <PostHead\n title={title}\n date={date}\n categories={categories}\n thumbnail={fluid}\n />\n <PostContent html={html} />\n <PostNav prev={prev} next={next} />\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 fluid(fit: INSIDE, quality: 100) {\n ...GatsbyImageSharpFluid_withWebp\n }\n original {\n src\n }\n }\n }\n }\n }\n }\n }\n }\n`;\n"],"sourceRoot":""}