130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import type { PageData } from "@developomp-site/blog-content/src/types/types"
|
|
import { useMeta, useTitle } from "hoofd"
|
|
import { useEffect, useState } from "react"
|
|
import { useLocation } from "react-router-dom"
|
|
import styled from "styled-components"
|
|
|
|
import Loading from "../../components/Loading"
|
|
import MainContent from "../../components/MainContent"
|
|
import PostCard from "../../components/PostCard"
|
|
import Tag from "../../components/Tag"
|
|
import TagList from "../../components/TagList"
|
|
import contentMap from "../../contentMap"
|
|
import NotFound from "../NotFound"
|
|
import {
|
|
categorizePageType,
|
|
fetchContent,
|
|
PageType,
|
|
parsePageData,
|
|
} from "./helper"
|
|
import Meta from "./Meta"
|
|
import SeriesControlButtons from "./SeriesControlButtons"
|
|
import Toc from "./Toc"
|
|
|
|
const StyledTitle = styled.h1`
|
|
margin-bottom: 1rem;
|
|
|
|
word-wrap: break-word;
|
|
`
|
|
|
|
export default function Page() {
|
|
const { pathname } = useLocation()
|
|
|
|
const [pageData, setPageData] = useState<PageData | undefined>(undefined)
|
|
const [pageType, setPageType] = useState<PageType>(PageType.POST)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
useTitle(pageData?.title || "Loading")
|
|
useMeta({ property: "og:title", content: pageData?.title })
|
|
|
|
// this code runs if either the url or the locale changes
|
|
useEffect(() => {
|
|
const content_id = pathname.replace(/\/$/, "") // remove trailing slash
|
|
const pageType = categorizePageType(content_id)
|
|
|
|
fetchContent(pageType, content_id).then((fetched_content) => {
|
|
if (!fetched_content) {
|
|
// stop loading without fetching pageData so 404 page will display
|
|
setIsLoading(false)
|
|
|
|
return
|
|
}
|
|
|
|
setPageData(parsePageData(fetched_content, pageType, content_id))
|
|
setPageType(pageType)
|
|
setIsLoading(false)
|
|
})
|
|
}, [pathname])
|
|
|
|
if (isLoading) return <Loading />
|
|
|
|
if (!pageData) return <NotFound />
|
|
|
|
return (
|
|
<>
|
|
<MainContent>
|
|
{/* next/previous series post buttons */}
|
|
{pageType == PageType.SERIES && (
|
|
<SeriesControlButtons
|
|
seriesHome={pageData.seriesHome}
|
|
prevURL={pageData.prev}
|
|
nextURL={pageData.next}
|
|
/>
|
|
)}
|
|
|
|
<StyledTitle>{pageData.title}</StyledTitle>
|
|
|
|
<small>
|
|
{/* Post tags */}
|
|
{pageData.tags.length > 0 && (
|
|
<TagList direction="left">
|
|
{pageData.tags.map((tag) => {
|
|
return (
|
|
<div key={pageData?.title + tag}>
|
|
<Tag text={tag} />
|
|
</div>
|
|
)
|
|
})}
|
|
</TagList>
|
|
)}
|
|
|
|
<br />
|
|
|
|
{/* Post metadata */}
|
|
{[
|
|
PageType.POST,
|
|
PageType.SERIES,
|
|
PageType.SERIES_HOME,
|
|
].includes(pageType) && <Meta fetchedPage={pageData} />}
|
|
</small>
|
|
|
|
<hr />
|
|
|
|
{/* add table of contents if it exists */}
|
|
<Toc data={pageData.toc} />
|
|
|
|
{/* page content */}
|
|
<div
|
|
dangerouslySetInnerHTML={{
|
|
__html: pageData.content,
|
|
}}
|
|
/>
|
|
</MainContent>
|
|
|
|
{/* series post list */}
|
|
|
|
{pageType == PageType.SERIES_HOME &&
|
|
pageData.order.map((post) => {
|
|
return (
|
|
<PostCard
|
|
key={post}
|
|
postData={{
|
|
content_id: post,
|
|
...contentMap.posts[post],
|
|
}}
|
|
/>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|