Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 2x 1x 1x 1x 2x 2x 2x 2x 2x | import React, { Component } from "react";
import loadable from "@loadable/component";
import { graphql } from "gatsby";
import { parseDate } from "@/utils";
import Sidebar from "@/components/Sidebar";
import Content from "@/components/Content";
import SEO from "@/components/SEO";
import Header from "@/components/Header";
import ShareBox from "@/components/ShareBox";
import TimeToRead from "@/components/TimeToRead";
import * as style from "./blog-post.module.scss";
import RelatedPosts from "@/components/Relateds";
import config from "@/config/index.json";
const Gitalk = loadable(
() => import(/* webpackPrefetch: true */ "@/components/Gitalk")
);
type Props = {
data: GatsbyTypes.BlogPostQueryQuery;
pageContext: {
words: number;
minutes: number;
repHtml: string;
};
};
class BlogPost extends Component<Props> {
private data: GatsbyTypes.BlogPostQueryQuery;
constructor(props: Props) {
super(props);
this.data = this.props.data;
}
render() {
const { node } = this.data.content.edges[0];
const { frontmatter, fields, excerpt, id: graphqlId } = node;
const shareURL = `https://tubone-project24.xyz/${fields?.slug}`;
return (
<div className={style.post + " row order-2"}>
<Header
img={frontmatter?.headerImage || config.defaultImage}
title={frontmatter?.title}
authorName={config.author}
authorImage={true}
subTitle={parseDate(frontmatter?.date)}
/>
<Sidebar />
<main
className={
style.content + " col-xl-7 col-lg-6 col-md-12 col-sm-12 order-2"
}
>
<TimeToRead
words={this.props.pageContext.words}
minutes={this.props.pageContext.minutes}
/>
<Content post={this.props.pageContext.repHtml} />
<Gitalk
id={frontmatter?.id || graphqlId}
title={frontmatter?.title || ""}
clientId={process.env.GATSBY_GITHUB_CLIENT_ID || ""}
clientSecret={process.env.GATSBY_GITHUB_CLIENT_SECRET || ""}
/>
<RelatedPosts
title={frontmatter?.title || ""}
tags={frontmatter?.tags || []}
/>
</main>
<ShareBox url={shareURL} />
<SEO
title={frontmatter?.title}
url={shareURL}
siteTitleAlt={config.siteTitle}
isPost
tag={frontmatter?.tags ? frontmatter.tags[0] || "" : ""}
description={excerpt || ""}
image={frontmatter?.headerImage || config.defaultImage || ""}
/>
</div>
);
}
}
export const pageQuery = graphql`
fragment post on MarkdownRemark {
fields {
slug
}
frontmatter {
id
title
slug
date
headerImage
tags
}
}
query BlogPostQuery($index: Int) {
content: allMarkdownRemark(
sort: { order: DESC, fields: frontmatter___date }
skip: $index
limit: 1
) {
edges {
node {
id
excerpt
...post
}
}
}
}
`;
export default BlogPost;
|