Commit 16883c5a authored by Afzaal Ahmad Zeeshan's avatar Afzaal Ahmad Zeeshan 😴

Checking in the changes, improvements to the layout, some additions to the content, etc.

parent 22ea8ee6
Pipeline #107034430 failed with stage
in 2 minutes and 44 seconds
......@@ -69,6 +69,8 @@ exports.createPages = async ({ graphql, actions }) => {
},
})
})
// Create a page for the /tags...
}
exports.onCreateNode = ({ node, actions, getNode }) => {
......
......@@ -13815,6 +13815,14 @@
}
}
},
"react-icons": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.8.0.tgz",
"integrity": "sha512-rA/8GRKjPulft8BSBSMsHkE1AGPqJ7LjNsyk0BE7XjG70Iz62zOled2SJk7LDo8x9z86a3xOstDlKlMZ4pAy7A==",
"requires": {
"camelcase": "^5.0.0"
}
},
"react-is": {
"version": "16.8.3",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
......
import React from "react"
import { Link, graphql } from "gatsby"
import _ from 'lodash';
import { GoTag } from 'react-icons/go';
import Bio from "../components/bio"
// import Tags from "../components/tags"
......@@ -12,17 +14,35 @@ class BlogPostTemplate extends React.Component {
const post = this.props.data.markdownRemark
const siteTitle = this.props.data.site.siteMetadata.title
const { previous, next } = this.props.pageContext
const description = post.frontmatter.description || post.excerpt;
let tableOfContents = "";
if(post.tableOfContents && post.tableOfContents.length > 0) {
tableOfContents = <div><h4>Table of contents</h4><div dangerouslySetInnerHTML={{__html: post.tableOfContents}}></div><hr/></div>;
}
let tags = "";
if(post.frontmatter.tags && post.frontmatter.tags.length > 0) {
tags = post.frontmatter.tags.map(tag => {
return <Link
style={
{
margin: rhythm(0.4),
cursor: "hand",
padding: rhythm(0.4),
boxShadow: "none",
border: "1px solid #007acc"
}
}
to={`/tags/${_.kebabCase(tag)}`}><GoTag /> {tag}</Link>
});
}
return (
<Layout location={this.props.location} title={siteTitle}>
<SEO
title={post.frontmatter.title}
description={post.frontmatter.description || post.excerpt}
description={description}
/>
<article>
<header>
......@@ -43,6 +63,8 @@ class BlogPostTemplate extends React.Component {
>
{post.frontmatter.date}
</p>
<blockquote style={{fontSize: rhythm(0.5)}}>{description}</blockquote>
</header>
<div>
{tableOfContents}
......@@ -54,7 +76,9 @@ class BlogPostTemplate extends React.Component {
}}
/>
<footer>
{/* <Tags /> */}
<div>
{tags}
</div><br />
<Bio />
</footer>
</article>
......@@ -101,7 +125,7 @@ export const pageQuery = graphql`
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt(pruneLength: 160)
excerpt
html
tableOfContents
frontmatter {
......
import React from "react"
import PropTypes from "prop-types"
// Components
import Layout from "../components/layout"
// Components
import { Link, graphql } from "gatsby"
const Tags = ({ pageContext, data }) => {
const TagComponent = ({ pageContext, data }) => {
const { tag } = pageContext
const { edges, totalCount } = data.allMarkdownRemark
const tagHeader = `${totalCount} post${
......@@ -12,7 +15,7 @@ const Tags = ({ pageContext, data }) => {
} tagged with "${tag}"`
return (
<div>
<Layout location={window.location}>
<h1>{tagHeader}</h1>
<ul>
{edges.map(({ node }) => {
......@@ -29,12 +32,13 @@ const Tags = ({ pageContext, data }) => {
This links to a page that does not yet exist.
You'll come back to it!
*/}
<Link to="/tags">All tags</Link>
</div>
{/* <p>You can also explore <Link to="/tags">all tags &rarr;</Link></p> */}
<p><Link to="/">Homepage</Link></p>
</Layout>
)
}
Tags.propTypes = {
TagComponent.propTypes = {
pageContext: PropTypes.shape({
tag: PropTypes.string.isRequired,
}),
......@@ -57,7 +61,7 @@ Tags.propTypes = {
}),
}
export default Tags
export default TagComponent
export const pageQuery = graphql`
query($tag: String) {
......
h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
box-shadow: none;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment