blogPost.js (7066B)
1 import React from 'react'; 2 import { graphql, Link } from 'gatsby'; 3 import Footer from '../components/footer'; 4 import TinyHeader from '../components/tinyHeader'; 5 import moment from 'moment'; 6 import { Disqus } from 'gatsby-plugin-disqus'; 7 8 import 'katex/dist/katex.min.css'; 9 10 function BlogPostTemplate({ data, pageContext }) { 11 const { 12 author: twitterHandle, 13 cover, 14 date, 15 description, 16 name, 17 next, 18 photo, 19 prev, 20 tags, 21 } = pageContext; 22 const tempTags = [...tags]; 23 const newTags = []; 24 while (tempTags.length > 1) { 25 let tag = tempTags.shift().toLowerCase(); 26 newTags.push( 27 <Link 28 to={`/tags/${tag}`} 29 style={{ textTransform: `capitalize` }} 30 key={tag} 31 > 32 {tag} 33 </Link> 34 ); 35 newTags.push(' • '); 36 } 37 let tag = tempTags.shift().toLowerCase(); 38 newTags.push( 39 <Link to={`/tags/${tag}`} style={{ textTransform: `capitalize` }} key={tag}> 40 {tag} 41 </Link> 42 ); 43 const { path, title } = data.markdownRemark.frontmatter; 44 const { siteUrl } = data.site.siteMetadata; 45 const html = data.markdownRemark.html; 46 const disqusConfig = { 47 url: `${siteUrl}${path}`, 48 identifier: path, 49 title: title, 50 }; 51 return ( 52 <div className={'post-template'}> 53 <div className={'site-wrapper'}> 54 <TinyHeader /> 55 <main id={'site-main'} className={'site-main outer'}> 56 <div className={'inner'}> 57 <article className={'post-full post'}> 58 <header className={'post-full-header'}> 59 <section className={'post-full-meta'}> 60 <time className={'post-full-meta-date'} dateTime={date}> 61 {new Date(date).toDateString()} 62 </time> 63 </section> 64 <h1 className={'post-full-title'}>{title}</h1> 65 <span>{newTags}</span> 66 </header> 67 {cover && ( 68 <figure 69 className={'post-full-image'} 70 style={{ backgroundImage: `url(${cover})` }} 71 /> 72 )} 73 <section className={'post-full-content'}> 74 <div 75 className={'post-content'} 76 dangerouslySetInnerHTML={{ __html: html }} 77 /> 78 </section> 79 <footer className={'post-full-footer'}> 80 <section className={'author-card'}> 81 {/* <a 82 href={`https://www.twitter.com/${twitterHandle}`} 83 className={'author-profile-image'} 84 > 85 <img src={photo} className={'avatar-wrapper'} alt={name} /> 86 </a> */} 87 <a className={'author-profile-image'}> 88 <img src={photo} className={'avatar-wrapper'} alt={name} /> 89 </a> 90 <AuthorCardContent name={name} description={description} /> 91 </section> 92 <ReadMore /> 93 </footer> 94 <section className={'post-full-comments'}> 95 <Disqus config={disqusConfig} /> 96 </section> 97 </article> 98 </div> 99 </main> 100 <aside className={'read-next outer'}> 101 <div className={'inner'}> 102 <div className={'read-next-feed'}> 103 {next && ( 104 <article className={'post-card post'}> 105 <Link 106 className={'post-card-image-link'} 107 to={next.frontmatter.path} 108 > 109 <div 110 className={'post-card-image'} 111 style={{ 112 backgroundImage: `url(${next.frontmatter.cover})`, 113 }} 114 /> 115 </Link> 116 <div className={'post-card-content'}> 117 <Link 118 className={'post-card-content-link'} 119 to={next.frontmatter.path} 120 > 121 <header className={'post-card-header'}> 122 <span className={'post-card-tags'}> 123 {next.frontmatter.tags 124 ? next.frontmatter.tags[0] + ' • ' 125 : ''} 126 {moment(next.frontmatter.date).fromNow()} 127 </span> 128 <h2 className={'post-card-title'}> 129 {next.frontmatter.title} 130 </h2> 131 </header> 132 <section className={'post-card-excerpt'}> 133 <p>{next.frontmatter.excerpt}</p> 134 </section> 135 </Link> 136 </div> 137 </article> 138 )} 139 {prev && ( 140 <article className={'post-card post'}> 141 <Link 142 className={'post-card-image-link'} 143 to={prev.frontmatter.path} 144 > 145 <div 146 className={'post-card-image'} 147 style={{ 148 backgroundImage: `url(${prev.frontmatter.cover})`, 149 }} 150 /> 151 </Link> 152 <div className={'post-card-content'}> 153 <Link 154 className={'post-card-content-link'} 155 to={prev.frontmatter.path} 156 > 157 <header className={'post-card-header'}> 158 <span className={'post-card-tags'}> 159 {prev.frontmatter.tags 160 ? prev.frontmatter.tags[0] + ' • ' 161 : ''} 162 {moment(prev.frontmatter.date).fromNow()} 163 </span> 164 <h2 className={'post-card-title'}> 165 {prev.frontmatter.title} 166 </h2> 167 </header> 168 <section className={'post-card-excerpt'}> 169 <p>{prev.frontmatter.excerpt}</p> 170 </section> 171 </Link> 172 </div> 173 </article> 174 )} 175 </div> 176 </div> 177 </aside> 178 <Footer /> 179 </div> 180 </div> 181 ); 182 } 183 export const query = graphql` 184 query($pathSlug: String!) { 185 markdownRemark(frontmatter: { path: { eq: $pathSlug } }) { 186 html 187 frontmatter { 188 title 189 path 190 } 191 } 192 site { 193 siteMetadata { 194 siteUrl 195 } 196 } 197 } 198 `; 199 export default BlogPostTemplate; 200 201 const ReadMore = () => ( 202 <div className={'post-full-footer-right'}> 203 <Link to={'/'} className={'author-card-button'}> 204 Read More 205 </Link> 206 </div> 207 ); 208 209 const AuthorCardContent = ({ name, description }) => ( 210 <section className={'author-card-content'}> 211 <h4 className={'author-card-name'}>{name}</h4> 212 <p>{description}</p> 213 </section> 214 );