sana137.in

Sana's gatsbyjs-based blog
git clone http://git.hanabi.in/repos/sana137.in.git
Log | Files | Refs | README | LICENSE

index.js (3929B)


      1 import React from 'react';
      2 
      3 import Layout from '../components/layout';
      4 import SEO from '../components/seo';
      5 import { graphql, Link } from 'gatsby';
      6 import moment from 'moment';
      7 
      8 require('prismjs/plugins/line-numbers/prism-line-numbers.css');
      9 export const query = graphql`
     10   query BlogPostList {
     11     site {
     12       siteMetadata {
     13         author
     14         name
     15         photo
     16       }
     17     }
     18     allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
     19       nodes {
     20         timeToRead
     21       }
     22       edges {
     23         node {
     24           frontmatter {
     25             cover
     26             date
     27             excerpt
     28             path
     29             tags
     30             title
     31           }
     32         }
     33       }
     34     }
     35   }
     36 `;
     37 
     38 export default function IndexPage(props) {
     39   const edges = props.data.allMarkdownRemark.edges;
     40   const nodes = props.data.allMarkdownRemark.nodes;
     41   for (let index in edges) edges[index] = { ...edges[index], ...nodes[index] };
     42   const { author: twitterHandle, name, photo } = props.data.site.siteMetadata;
     43   return (
     44     <Layout>
     45       <SEO title="Home" />
     46       <div className={'inner'}>
     47         <div className={'post-feed'}>
     48           {edges.map((edge, index) => {
     49             const { frontmatter } = edge.node;
     50             const published = moment(frontmatter.date).fromNow();
     51             const cover = frontmatter.cover;
     52             return (
     53               <article className={'post-card'} key={frontmatter.path}>
     54                 <Link to={frontmatter.path} className={'post-card-image-link'}>
     55                   <div
     56                     className={'post-card-image'}
     57                     style={{
     58                       backgroundImage: `url("${cover}")`,
     59                     }}
     60                   ></div>
     61                 </Link>
     62                 <div className={'post-card-content'}>
     63                   <Link
     64                     to={frontmatter.path}
     65                     className={'post-card-content-link'}
     66                   >
     67                     <header className="postCardHeader">
     68                       <span className={'post-card-tags'}>
     69                         {frontmatter.tags && frontmatter.tags[0].length
     70                           ? frontmatter.tags[0] + ` • `
     71                           : ``}{' '}
     72                         {published}
     73                       </span>
     74                       <h2 className={'post-card-title'}>{frontmatter.title}</h2>
     75                     </header>
     76                     <section className="postCardExcerpt">
     77                       <p className={'excerpt'}>
     78                         {edges[index].node.frontmatter.excerpt}
     79                       </p>
     80                     </section>
     81                   </Link>
     82                   <footer className={'post-card-meta'}>
     83                     <ul className={'author-list'}>
     84                       <li className={'author-list-item'}>
     85                         <div className={'author-name-tooltip'}>{name}</div>
     86                         {/* <a
     87                           href={`https://www.twitter.com/${twitterHandle}`}
     88                           className={'static-avatar'}
     89                         >
     90                           <img
     91                             src={photo}
     92                             className={'avatar-wrapper'}
     93                             alt={name}
     94                           />
     95                         </a> */}
     96                         <a className={'static-avatar'}>
     97                           <img
     98                             src={photo}
     99                             className={'avatar-wrapper'}
    100                             alt={name}
    101                           />
    102                         </a>
    103                       </li>
    104                     </ul>
    105                     <span className={'reading-time'}>
    106                       {edges[index].timeToRead} min read
    107                     </span>
    108                   </footer>
    109                 </div>
    110               </article>
    111             );
    112           })}
    113         </div>
    114       </div>
    115     </Layout>
    116   );
    117 }