quotes

My favourite quotes. (gatsbyjs)
git clone http://git.hanabi.in/repos/quotes.git
Log | Files | Refs | README | LICENSE

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;