{"version":3,"sources":["webpack://gatsby-starter-ghost/./src/components/common/Toc.js","webpack://gatsby-starter-ghost/./src/templates/post.js"],"names":["post","childHtmlRehype","tableOfContents","className","map","node","key","id","href","heading","data","location","ghostPost","readingTime","readingTimeHelper","relatedPost","allGhostPost","edges","type","Helmet","codeinjection_styles","primary_tag","Link","to","slug","name","title","custom_excerpt","authors","profile_image","src","alt","dateTime","published_at","published_at_pretty","feature_image","srcSet","sizes","dangerouslySetInnerHTML","__html","html","index","home"],"mappings":"uPAgBA,EAdY,SAAC,GAAc,IAAZA,EAAW,EAAXA,KAEX,QAASA,EAAKC,gBAAgBC,iBAC1B,uBAAKC,UAAU,eACX,sCACA,sBAAIA,UAAU,eACTH,EAAKC,gBAAgBC,gBAAgBE,KAAI,SAACC,GAAD,OACtC,sBAAIC,IAAKD,EAAKE,IAAI,qBAAGC,KAAI,IAAMH,EAAKE,IAAOF,EAAKI,gBCoHpE,EAzGa,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,KAAMC,EAAe,EAAfA,SACZX,EAAOU,EAAKE,UACZC,GAAcC,iBAAkBd,GAChCe,EAAcL,EAAKM,aAAaC,MAEtC,OACI,gCACI,gBAAC,IAAD,CACIP,KAAMA,EACNC,SAAUA,EACVO,KAAK,YAET,gBAACC,EAAA,EAAD,KACI,yBAAOD,KAAK,YAAZ,GAA2BlB,EAAKoB,uBAEpC,gBAAC,KAAD,KAEI,2BAASjB,UAAU,WAEf,0BAAQA,UAAU,4BACbH,EAAKqB,aACF,2BAASlB,UAAU,eACf,gBAAC,EAAAmB,KAAD,CAAMC,GAAE,QAAUvB,EAAKqB,YAAYG,MAASxB,EAAKqB,YAAYI,OAIrE,sBAAItB,UAAU,iBAAiBH,EAAK0B,OAEnC1B,EAAK2B,gBACF,qBAAGxB,UAAU,mBAAmBH,EAAK2B,gBAGzC,uBAAKxB,UAAU,kBACX,2BAASA,UAAU,0BACf,sBAAIA,UAAU,eACTH,EAAK4B,QAAQxB,KAAI,gBAAEqB,EAAF,EAAEA,KAAMI,EAAR,EAAQA,cAAeL,EAAvB,EAAuBA,KAAvB,OACd,sBAAIrB,UAAU,mBAAmBG,IAAKkB,GAC/BK,EAAgB,gBAAC,EAAAP,KAAD,CAAMC,GAAE,WAAaC,EAAQrB,UAAU,iBACtD,uBAAKA,UAAU,uBAAuB2B,IAAKD,EAAeE,IAAKN,KACzD,gBAAC,EAAAH,KAAD,CAAMC,GAAE,WAAaC,EAAQrB,UAAU,sCAAqC,gBAAC,KAAD,YAIlG,uBAAKA,UAAU,uBACX,sBAAIA,UAAU,eAAeH,EAAK4B,QAAQxB,KAAI,gBAAEqB,EAAF,EAAEA,KAAMD,EAAR,EAAQA,KAAR,OAC1C,wBAAMlB,IAAKkB,GAAOC,OAEtB,uBAAKtB,UAAU,uBAEX,wBAAMA,UAAU,mBAAmB6B,SAAUhC,EAAKiC,cAAejC,EAAKkC,qBACtE,wBAAM/B,UAAU,uBAAsB,wBAAMA,UAAU,QAAhB,KAAtC,IAA4EU,OAM3Fb,EAAKmC,eACF,0BAAQhC,UAAU,iBACd,uBACIiC,OAAWpC,EAAKmC,cAAV,mDACAnC,EAAKmC,cADL,mDAEAnC,EAAKmC,cAFL,oDAGAnC,EAAKmC,cAHL,SAINE,MAAM,mCACNP,IAAK9B,EAAKmC,cACVJ,IAAK/B,EAAK0B,SAKtB,gBAAC,EAAD,CAAK1B,KAAMA,KAGf,2BAASG,UAAU,uBAAuBmC,wBAAyB,CAAEC,OAAQvC,EAAKwC,WAInFzB,GACC,yBAAOZ,UAAU,kBACb,uBAAKA,UAAU,mBACVY,EAAYX,KAAI,WAAWqC,GAAX,IAAGpC,EAAH,EAAGA,KAAH,OAEb,gBAAC,KAAD,CAAUC,IAAKD,EAAKE,GAAIP,KAAMK,EAAMoC,MAAOA,EAAOC,MAAM","file":"component---src-templates-post-js-7a0e5e92aba55d768f6b.js","sourcesContent":["import React from 'react'\n\nconst Toc = ({ post }) => {\n\n    return !!post.childHtmlRehype.tableOfContents && (\n        <div className=\"outline-box\">\n            <p>Xem nhanh</p>\n            <ol className=\"outline-nav\">\n                {post.childHtmlRehype.tableOfContents.map((node) => (\n                    <li key={node.id}><a href={`#${node.id}`}>{node.heading}</a></li>\n                ))}\n            </ol>\n        </div>\n    )\n}\n\nexport default Toc","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Link, StaticQuery, graphql } from 'gatsby'\nimport { Helmet } from 'react-helmet'\n\nimport { Layout, PostCard } from '../components/common'\nimport { MetaData } from '../components/common/meta'\n\nimport { Avatar } from '../components/common/meta/Icon'\nimport { readingTime as readingTimeHelper } from '@tryghost/helpers'\n\nimport Toc from '../components/common/Toc'\n\n/**\n* Single post view (/:slug)\n*\n* This file renders a single post and loads all the content.\n*\n*/\n\nconst Post = ({ data, location }) => {\n    const post = data.ghostPost\n    const readingTime = readingTimeHelper(post)\n    const relatedPost = data.allGhostPost.edges\n\n    return (\n        <>\n            <MetaData\n                data={data}\n                location={location}\n                type=\"article\"\n            />\n            <Helmet>\n                <style type=\"text/css\">{`${post.codeinjection_styles}`}</style>\n            </Helmet>\n            <Layout>\n\n                <article className=\"article\">\n\n                    <header className=\"article-header gh-canvas\">\n                        {post.primary_tag && \n                            <section className=\"article-tag\">\n                                <Link to={`/tag/${post.primary_tag.slug}`}>{post.primary_tag.name}</Link>\n                            </section>\n                        }\n\n                        <h1 className=\"article-title\">{post.title}</h1>\n\n                        {post.custom_excerpt && \n                            <p className=\"article-excerpt\">{post.custom_excerpt}</p>\n                        }\n\n                        <div className=\"article-byline\">\n                            <section className=\"article-byline-content\">\n                                <ul className=\"author-list\">\n                                    {post.authors.map(({name, profile_image, slug}) => (\n                                        <li className=\"author-list-item\" key={slug}>\n                                            {!!profile_image ? <Link to={`/author/${slug}`} className=\"author-avatar\">\n                                                <img className=\"author-profile-image\" src={profile_image} alt={name} />\n                                            </Link> : <Link to={`/author/${slug}`} className=\"author-avatar author-profile-image\"><Avatar /></Link> }\n                                        </li>\n                                    ))}\n                                </ul>\n                                <div className=\"article-byline-meta\">\n                                    <h4 className=\"author-name\">{post.authors.map(({name, slug}) => (\n                                        <span key={slug}>{name}</span>\n                                    ))}</h4>\n                                    <div className=\"byline-meta-content\">\n                                    \n                                        <time className=\"byline-meta-date\" dateTime={post.published_at}>{post.published_at_pretty}</time>\n                                        <span className=\"byline-reading-time\"><span className=\"bull\">&bull;</span> {readingTime}</span>\n                                    </div>\n                                </div>\n                            </section>\n                        </div>\n                        \n                        {post.feature_image && \n                            <figure className=\"article-image\">\n                                <img\n                                    srcSet={`${post.feature_image} 300w,\n                                        ${post.feature_image} 600w,\n                                        ${post.feature_image} 1000w,\n                                        ${post.feature_image} 2000w`}\n                                    sizes=\"(min-width: 1400px) 1400px, 92vw\"\n                                    src={post.feature_image}\n                                    alt={post.title}\n                                />\n                            </figure>\n                        }\n\n                        <Toc post={post} />\n                    </header>\n                    \n                    <section className=\"gh-content gh-canvas\" dangerouslySetInnerHTML={{ __html: post.html }} />\n                </article>\n\n                {/* Read more links, just above the footer */}\n                {!!relatedPost && \n                    <aside className=\"read-more-wrap\">\n                        <div className=\"read-more inner\">\n                            {relatedPost.map(({ node }, index) => (\n                                // The tag below includes the markup for each post - components/common/PostCard.js\n                                <PostCard key={node.id} post={node} index={index} home={false} />\n                            ))}\n                        </div>\n                    </aside>\n                }\n                \n            </Layout>\n        </>\n    )\n}\n\nPost.propTypes = {\n    data: PropTypes.shape({\n        ghostPost: PropTypes.shape({\n            codeinjection_styles: PropTypes.object,\n            title: PropTypes.string.isRequired,\n            html: PropTypes.string.isRequired,\n            feature_image: PropTypes.string,\n        }).isRequired,\n    }).isRequired,\n    location: PropTypes.object.isRequired,\n}\n\nexport default Post\n\nexport const postQuery = graphql`\n    query($slug: String!, $slug_tag: String) {\n        ghostPost(slug: { eq: $slug }) {\n            ...GhostPostFields\n            childHtmlRehype {\n                tableOfContents\n            }\n        }\n\n        allGhostPost(\n            filter: {tags: {elemMatch: {slug: {eq: $slug_tag}}}, slug: { ne: $slug }},\n            limit: 3\n        ) {\n            edges {\n                node {\n                    ...GhostPostFields\n                }\n            }\n        }\n\n    }\n`\n"],"sourceRoot":""}