pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

Changed all functional components to class components. added better comments, minor optimizations here and there, removed some unfinished posts from blogs

Browse source
This commit is contained in:
Kim, Jimin 2021-05-20 15:56:41 +09:00
parent c850184bc7
commit 046dd05713
20 changed files with 987 additions and 927 deletions
Download patch file Download diff file Expand all files Collapse all files

130
source/src/pages/page.tsx
View file

@ -1,71 +1,83 @@
import React from "react"
import marked from "marked"
import NotFound from "./notfound"
import { Helmet } from "react-helmet-async"
import pages from "../pages.json"
import { useParams } from "react-router-dom"
function Page() {
const path = `/${useParams().path}`
const fetched = pages[path]
if (!fetched) return <NotFound />
export default class Page extends React.Component {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
fetched: any
// to prevent wrapping. I don't want to touch prettier stuff
const idk = "Unknown"
fetched.content = fetched?.content ? fetched.content : "No content"
fetched.toc = fetched.meta?.toc ? fetched.meta.toc : undefined
fetched.title = fetched.meta?.title ? fetched.meta.title : "No title"
fetched.date = fetched.meta?.date ? fetched.meta.date : `${idk} date`
fetched.author = fetched.meta?.author
? fetched.meta.author
: `${idk} author`
constructor(props) {
super(props)
const TableOfContents = fetched.toc && (
<>
<div className="card">
<strong>Table of Content:</strong>
<div
className="link-color"
dangerouslySetInnerHTML={{
__html: marked(fetched.toc),
}}
></div>
</div>
<hr />
</>
) // add toc if it exists
const fetched = pages[props.location.pathname]
if (!fetched) return
return (
<>
<Helmet>
<title>pomp | {fetched.title}</title>
fetched.content = fetched?.content ? fetched.content : "No content"
fetched.toc = fetched.meta?.toc ? fetched.meta.toc : undefined
fetched.title = fetched.meta?.title ? fetched.meta.title : "No title"
fetched.date = fetched.meta?.date ? fetched.meta.date : "Unknown date"
fetched.author = fetched.meta?.author
? fetched.meta.author
: "Unknown author"
<meta property="og:title" content="Page Not Found" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://developomp.com" />
<meta
property="og:image"
content="http://developomp.com/icon/icon.svg"
/>
<meta property="og:description" content="Page does not exist" />
</Helmet>
this.fetched = fetched
}
<div className="card main-content">
<h2>{fetched.title}</h2>
<small>
Published on {fetched.date} by {fetched.author}
</small>
<hr />
{TableOfContents}
<div
className="link-color"
dangerouslySetInnerHTML={{
__html: marked(fetched.content),
}}
></div>
</div>
</>
)
render() {
if (!this.fetched) return <NotFound />
return (
<>
<Helmet>
<title>pomp | {this.fetched.title}</title>
<meta property="og:title" content="Page Not Found" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://developomp.com" />
<meta
property="og:image"
content="http://developomp.com/icon/icon.svg"
/>
<meta
property="og:description"
content="Page does not exist"
/>
</Helmet>
<div className="card main-content">
<h2>{this.fetched.title}</h2>
<small>
Published on {this.fetched.date} by{" "}
{this.fetched.author}
</small>
<hr />
{
this.fetched.toc && (
<>
<div className="card">
<strong>Table of Content:</strong>
<div
className="link-color"
dangerouslySetInnerHTML={{
__html: marked(this.fetched.toc),
}}
></div>
</div>
<hr />
</>
) // add toc if it exists
}
<div
className="link-color"
dangerouslySetInnerHTML={{
__html: marked(this.fetched.content),
}}
></div>
</div>
</>
)
}
}
export default Page