adds product details page

content/projects/muze.md

@@ -1,15 +1,44 @@
 ---
 title: Muze
 date: "2017-08-09T10:00:00.121Z"
+version: "3.0.4"
+latestReleaseDate: "2019-04-06T10:00:00.121Z"
 template: "project"
 draft: false
 # slug: "/projects/perfecting-the-art-of-perfection/"
 # category: "Design Inspiration"
 tags:
-  - "Handwriting"
-  - "Learning to write"
+  - "Music"
+  - "Life Hacks"
+  - "Chrome Extension"
+
 links:
+  - title: Learn More
+    internal: true
+    link: projects/muze
   - title: Chrome Store
     link: https://bit.ly/muze-ext
-description: " Manage and control multiple YouTube, SoundCloud, JioSaavn and Gaana tabs with ease! (more music services on its way...)"
+description: "Manage and control multiple YouTube, SoundCloud, JioSaavn and Gaana tabs with ease! (more music services on its way...)"
 ---
+
+Manage and control multiple YouTube, SoundCloud, JioSaavn, Gaana, Spotify, Youtube Music tabs with ease! (more music services are on its way...)
+
+Within the extension, you can:
+ * play
+ * pause
+ * go to next song
+ * go to previous song
+ * loop song
+ * start over song 
+
+use handy shortcuts:
+
+* Play/Pause - `Alt + K`
+* Previous Song - `Alt + J`
+* Next Song - `Alt + L`
+* and more coming soon...
+
+You can customize shortcuts at `chrome://extensions/shortcuts`
+
+Love to hear any feedback :) 
+Please post it here: https://gokatz.typeform.com/to/MlCJdw

src/components/Feed/Feed.js

@@ -39,7 +39,13 @@ const Feed = ({ edges }) => (
           edge.node.frontmatter.links && edge.node.frontmatter.links.length
             ? (
               edge.node.frontmatter.links.map((linkObj) => (
-                <a href={linkObj.link} target="_blank" className={styles['feed__item-projectlink']}> {linkObj.title} </a>
+                <a
+                  key={linkObj.link}
+                  href={linkObj.link} target={linkObj.internal ? '' : '_blank'}
+                  className={styles['feed__item-projectlink']}
+                >
+                  {linkObj.title}
+                </a>
               ))
             )
             : ''

src/components/Pagination/Pagination.js

@@ -7,8 +7,8 @@ import styles from './Pagination.module.scss';
 const cx = classNames.bind(styles);
 
 const Pagination = ({
-  prevPagePath,
-  nextPagePath,
+  prevPagePath = '/',
+  nextPagePath = '/',
   hasNextPage,
   hasPrevPage
 }) => {

src/components/Post/Comments/Comments.js

@@ -4,7 +4,7 @@ import ReactDisqusComments from 'react-disqus-comments';
 
 export const PureComments = ({ data, postTitle, postSlug }) => {
   const {
-    siteUrl,
+    url: siteUrl,
     disqusShortname
   } = data.site.siteMetadata;
 

src/components/Post/Content/Content.js

@@ -1,9 +1,22 @@
 import React from 'react';
+import moment from 'moment';
 import styles from './Content.module.scss';
+import MetaStyles from '../Meta/Meta.module.scss';
 
-const Content = ({ body, title }) => (
+const Content = ({
+  body,
+  title,
+  template,
+  version,
+  latestReleaseDate
+}) => (
   <div className={styles['content']}>
     <h1 className={styles['content__title']}>{title}</h1>
+    {
+      template === 'project'
+        ? <p className={MetaStyles['meta__date']} style={{ textAlign: 'center' }}>Latest version: <b>{version}</b> (released on {moment(latestReleaseDate).format('D MMM YYYY')})</p>
+        : ''
+    }
     <div className={styles['content__body']} dangerouslySetInnerHTML={{ __html: body }} />
   </div>
 );

src/components/Post/Post.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'gatsby';
+// import moment from 'moment';
 import Author from './Author';
 import Comments from './Comments';
 import Content from './Content';
@@ -11,29 +12,61 @@ const Post = ({ post }) => {
   const {
     tags,
     title,
-    date
+    date,
+    template,
+    version,
+    latestReleaseDate
   } = post.frontmatter;
 
   const { html } = post;
   const { tagSlugs } = post.fields;
 
+  let navigationText = 'All Articles';
+  let navigationLink = '/';
+  let canShowMetaDetails = true;
+  let canShowComment = true;
+
+  if (template === 'project') {
+    navigationText = 'All Projects';
+    navigationLink = '/projects';
+    canShowMetaDetails = false;
+    canShowComment = false;
+  }
+
   return (
     <div className={styles['post']}>
-      <Link className={styles['post__home-button']} to="/">All Articles</Link>
+      <Link className={styles['post__home-button']} to={navigationLink}> {navigationText} </Link>
 
       <div className={styles['post__content']}>
-        <Content body={html} title={title} />
+        <Content
+          body={html}
+          title={title}
+          template={template}
+          version={version}
+          latestReleaseDate={latestReleaseDate}
+        />
       </div>
 
       <div className={styles['post__footer']}>
-        <Meta date={date} />
-        <Tags tags={tags} tagSlugs={tagSlugs} />
+        {
+          canShowMetaDetails
+            ? <React.Fragment>
+                <Meta
+                  date={date}
+                  version={version}
+                />
+                <Tags tags={tags} tagSlugs={tagSlugs} />
+              </React.Fragment>
+            : ''
+        }
         <Author />
       </div>
-
-      <div className={styles['post__comments']}>
-        <Comments postSlug={post.fields.slug} postTitle={post.frontmatter.title} />
-      </div>
+      {canShowComment
+        ? <div className={styles['post__comments']}>
+            <Comments postSlug={post.fields.slug} postTitle={post.frontmatter.title} />
+          </div>
+        : ''
+      }
     </div>
   );
 };

src/templates/post-template.js

@@ -44,12 +44,16 @@ export const query = graphql`
       id
       html
       fields {
+        slug
         tagSlugs
       }
       frontmatter {
         date
+        template
         description
         tags
+        latestReleaseDate
+        version
         title
         canonical
       }

src/templates/projects-template.js

@@ -63,6 +63,7 @@ export const query = graphql`
             tags
             links {
               title
+              internal
               link
             }
             slug