sana137.in

commit 7da563c76ef1a2bee6201e10a6c84f313b5dd717
parent d69471c1bf2a4a75c8526328c651e372e64fc5c7
Author: Agastya Chandrakant <me@hanabi.in>
Date:   Sun, 15 Sep 2019 16:25:48 +0530

Adding MomentJS in cards

Diffstat:
M
.gitignore
 | 
3
+++
M
package.json
 | 
1
+
M
src/pages/index.js
 | 
5
+++--
M
src/templates/blogPost.js
 | 
5
+++--
M
src/templates/singleTagIndex.js
 | 
4
++--

5 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+# Yarn lock
+yarn.lock
+
 # Logs
 logs
 *.log
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "gatsby-source-filesystem": "^2.1.11",
     "gatsby-transformer-remark": "^2.6.19",
     "gatsby-transformer-sharp": "^2.2.7",
+    "moment": "^2.24.0",
     "prismjs": "^1.17.1",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,6 +3,7 @@ import React from 'react';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
 import { graphql, Link } from 'gatsby';
+import moment from 'moment';
 
 require('prismjs/plugins/line-numbers/prism-line-numbers.css');
 export const query = graphql`
@@ -46,7 +47,7 @@ export default function IndexPage(props) {
         <div className={'post-feed'}>
           {edges.map((edge, index) => {
             const { frontmatter } = edge.node;
-            const publishDate = new Date(frontmatter.date).toDateString();
+            const published = moment(frontmatter.date).fromNow();
             const cover = frontmatter.cover;
             return (
               <article className={'post-card'} key={frontmatter.path}>
@@ -68,7 +69,7 @@ export default function IndexPage(props) {
                         {frontmatter.tags && frontmatter.tags[0].length
                           ? frontmatter.tags[0] + ` • `
                           : ``}{' '}
-                        {publishDate}
+                        {published}
                       </span>
                       <h2 className={'post-card-title'}>{frontmatter.title}</h2>
                     </header>
diff --git a/src/templates/blogPost.js b/src/templates/blogPost.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { graphql, Link } from 'gatsby';
 import Footer from '../components/footer';
 import TinyHeader from '../components/tinyHeader';
+import moment from 'moment';
 
 class BlogPostTemplate extends React.Component {
   componentDidMount() {
@@ -136,7 +137,7 @@ class BlogPostTemplate extends React.Component {
                             {next.frontmatter.tags
                               ? next.frontmatter.tags[0] + ' • '
                               : ''}
-                            {new Date(next.frontmatter.date).toDateString()}
+                            {moment(next.frontmatter.date).fromNow()}
                           </span>
                           <h2 className={'post-card-title'}>
                             {next.frontmatter.title}
@@ -172,7 +173,7 @@ class BlogPostTemplate extends React.Component {
                             {prev.frontmatter.tags
                               ? prev.frontmatter.tags[0] + ' • '
                               : ''}
-                            {new Date(prev.frontmatter.date).toDateString()}
+                            {moment(prev.frontmatter.date).fromNow()}
                           </span>
                           <h2 className={'post-card-title'}>
                             {prev.frontmatter.title}
diff --git a/src/templates/singleTagIndex.js b/src/templates/singleTagIndex.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'gatsby';
 import ComplexHeader from '../components/complexHeader';
 import Footer from '../components/footer';
+import moment from 'moment';
 
 const SingleTagTemplate = ({ pageContext }) => {
   const { cover, posts, tag } = pageContext;
@@ -43,8 +44,7 @@ const SingleTagTemplate = ({ pageContext }) => {
                     >
                       <header className={'post-card-header'}>
                         <span className={'post-card-tags'}>
-                          {tag} •{' '}
-                          {new Date(post.frontmatter.date).toDateString()}
+                          {tag} • {moment(post.frontmatter.date).fromNow()}
                         </span>
                         <h2 className={'post-card-title'}>
                           {post.frontmatter.title}