quotes

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

index.js (3714B)

      1 import React from 'react';
      2 import { Link, graphql } from 'gatsby';
      3 import Layout from '../components/layout';
      4 import SEO from '../components/seo';
      5 import { siteMetadata } from '../../gatsby-config';
      6 
      7 const { repo } = siteMetadata;
      8 
      9 function IndexPage({ data }) {
     10   const { edges } = data.allMarkdownRemark;
     11   return (
     12     <Layout heading={`Quotes (${edges.length})`}>
     13       <SEO title="Home" />
     14       <div className="home-sections-container">
     15         <div className="home-sections">
     16           <section id="recent-posts" className="home-section">
     17             <header>
     18               <h2 className="home-section-title title">Quotes</h2>
     19             </header>
     20             <div className="list-container">
     21               <ul className="list">
     22                 {edges.map(edge => {
     23                   const {
     24                     author,
     25                     attributed,
     26                     misattributed,
     27                     path,
     28                     title,
     29                     unverified,
     30                   } = edge.node.frontmatter;
     31                   return (
     32                     <li className="list-item" key={path}>
     33                       <article>
     34                         <div className="meta">
     35                           <span>
     36                             <span className="screen-reader">Quote by </span>
     37                             <span>
     38                               <Link to={`${repo}/authors/${author}`}>
     39                                 {author}
     40                               </Link>
     41                               {attributed ? (
     42                                 <span>
     43                                   <sup>
     44                                     <em>
     45                                       <abbr title="Attributed">!</abbr>
     46                                     </em>
     47                                   </sup>
     48                                 </span>
     49                               ) : null}
     50                               {misattributed ? (
     51                                 <span>
     52                                   <sup>
     53                                     <em>
     54                                       <abbr title="Misattributed">?</abbr>
     55                                     </em>
     56                                   </sup>
     57                                 </span>
     58                               ) : null}
     59                               {unverified ? (
     60                                 <span>
     61                                   <sup>
     62                                     <em>
     63                                       <abbr title="Unverified">#</abbr>
     64                                     </em>
     65                                   </sup>
     66                                 </span>
     67                               ) : null}
     68                             </span>
     69                           </span>
     70                         </div>
     71                         <header className="list-item-header">
     72                           <h3 className="list-item-title">
     73                             <Link to={`${repo}/quote${path}`}>{title}</Link>
     74                           </h3>
     75                         </header>
     76                       </article>
     77                     </li>
     78                   );
     79                 })}
     80               </ul>
     81             </div>
     82           </section>
     83         </div>
     84       </div>
     85     </Layout>
     86   );
     87 }
     88 
     89 export const query = graphql`
     90   query HomePageQuery {
     91     allMarkdownRemark(
     92       sort: { order: DESC, fields: [frontmatter___date] }
     93       filter: { frontmatter: { draft: { ne: true } } }
     94     ) {
     95       edges {
     96         node {
     97           frontmatter {
     98             attributed
     99             author
    100             misattributed
    101             path
    102             title
    103             unverified
    104           }
    105         }
    106       }
    107     }
    108   }
    109 `;
    110 
    111 export default IndexPage;