blogPost.js (3538B)
1 import React from 'react'; 2 import { graphql, Link } from 'gatsby'; 3 import Layout from '../components/layout'; 4 import SEO from '../components/seo'; 5 import { CategorySVG, TagSVG } from '../components/partials/SVGIcon'; 6 import { siteMetadata } from '../../gatsby-config'; 7 8 const { repo } = siteMetadata; 9 10 function Template({ data }) { 11 const { markdownRemark } = data; 12 const { frontmatter, html } = markdownRemark; 13 const { 14 attributed, 15 author, 16 cover, 17 lang = 'en', 18 misattributed, 19 path, 20 tags, 21 title, 22 unverified, 23 } = frontmatter; 24 return ( 25 <Layout showHeader={false} heading={title}> 26 <SEO blog={true} cover={cover} path={path} tags={tags} title={title} /> 27 <Article 28 attributed={attributed} 29 author={author} 30 html={html} 31 lang={lang} 32 misattributed={misattributed} 33 tags={tags} 34 title={title} 35 unverified={unverified} 36 /> 37 </Layout> 38 ); 39 } 40 41 export const query = graphql` 42 query($pathSlug: String!) { 43 markdownRemark(frontmatter: { path: { eq: $pathSlug } }) { 44 html 45 frontmatter { 46 attributed 47 author 48 cover 49 lang 50 misattributed 51 path 52 tags 53 title 54 unverified 55 } 56 } 57 } 58 `; 59 60 function Article({ 61 attributed, 62 author, 63 html, 64 lang, 65 misattributed, 66 tags, 67 unverified, 68 }) { 69 return ( 70 <article lang={lang} className="entry"> 71 <div 72 className="entry-content" 73 dangerouslySetInnerHTML={{ __html: html }} 74 /> 75 <Footer 76 attributed={attributed} 77 author={author} 78 misattributed={misattributed} 79 tags={tags} 80 unverified={unverified} 81 /> 82 </article> 83 ); 84 } 85 86 function Footer({ attributed, author, misattributed, tags, unverified }) { 87 return ( 88 <footer className="entry-footer-container"> 89 <div className="entry-footer"> 90 <div className="categories"> 91 <span className="taxonomyTerm-icon"> 92 <CategorySVG /> 93 </span> 94 <span className="screen-reader">Author: </span> 95 <Link className="author" to={`/${repo}/authors/${author}`}> 96 {author} 97 </Link> 98 {attributed ? ( 99 <span> 100 <sup> 101 <em> 102 <abbr title="Attributed">!</abbr> 103 </em> 104 </sup> 105 </span> 106 ) : null} 107 {misattributed ? ( 108 <span> 109 <sup> 110 <em> 111 <abbr title="Misattributed">?</abbr> 112 </em> 113 </sup> 114 </span> 115 ) : null} 116 {unverified ? ( 117 <span> 118 <sup> 119 <em> 120 <abbr title="Unverified">#</abbr> 121 </em> 122 </sup> 123 </span> 124 ) : null} 125 </div> 126 {tags.length ? ( 127 <div className="tags"> 128 <span className="taxonomyTerm-icon"> 129 <TagSVG /> 130 </span> 131 <span className="screen-reader">Tags: </span> 132 {tags.map((tag, index) => { 133 return ( 134 <React.Fragment key={tag}> 135 <Link className="tag" to={`/${repo}/tags/${tag}`}> 136 {tag} 137 </Link> 138 {index < tags.length - 1 ? ', ' : ' '} 139 </React.Fragment> 140 ); 141 })} 142 </div> 143 ) : null} 144 </div> 145 </footer> 146 ); 147 } 148 149 export default Template;