singleTagIndex.js (2401B)
1 import React from 'react'; 2 import { Link } from 'gatsby'; 3 import ComplexHeader from '../components/complexHeader'; 4 import Footer from '../components/footer'; 5 import moment from 'moment'; 6 7 const SingleTagTemplate = ({ pageContext }) => { 8 const { cover, posts, tag } = pageContext; 9 /* eslint eqeqeq: "off" */ 10 const bgImg = cover.length == 1 ? cover[0].cover : ''; 11 const desc = `Essay${posts.length > 1 ? 's' : ''} about ${tag}.`; 12 return ( 13 <div className={'tag-template'}> 14 <div className={'site-wrapper'}> 15 <ComplexHeader 16 siteTitle={tag.toUpperCase()} 17 description={desc} 18 hideName={true} 19 headerImg={bgImg} 20 /> 21 <main id={'site-main'} className={'site-main outer'}> 22 <div className={'inner'}> 23 <div className={'post-feed'}> 24 {posts.map(post => ( 25 <article 26 className={'post-card post'} 27 key={post.frontmatter.path} 28 > 29 <Link 30 to={post.frontmatter.path} 31 className={'post-card-image-link'} 32 > 33 <div 34 className={'post-card-image'} 35 style={{ 36 backgroundImage: `url(${post.frontmatter.cover})`, 37 }} 38 /> 39 </Link> 40 <div className={'post-card-content'}> 41 <Link 42 to={post.frontmatter.path} 43 className={'post-card-content-link'} 44 > 45 <header className={'post-card-header'}> 46 <span className={'post-card-tags'}> 47 {tag} • {moment(post.frontmatter.date).fromNow()} 48 </span> 49 <h2 className={'post-card-title'}> 50 {post.frontmatter.title} 51 </h2> 52 </header> 53 <section className={'post-card-excerpt'}> 54 <p>{post.frontmatter.excerpt}</p> 55 </section> 56 </Link> 57 </div> 58 </article> 59 ))} 60 </div> 61 </div> 62 </main> 63 <Footer /> 64 </div> 65 </div> 66 ); 67 }; 68 69 export default SingleTagTemplate;