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

refactor(blog): move content gen code to its own package

Browse source
This commit is contained in:
Kim, Jimin 2023-06-18 11:58:13 +09:00
parent c9c8cd35c1
commit 5ab6b93fa3
66 changed files with 460 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/blog/src/components/Badge.tsx
View file

@ -1,6 +1,7 @@
import dark from "@developomp-site/theme/dist/dark.json"
import light from "@developomp-site/theme/dist/light.json"
import { Badge } from "@developomp-site/blog-content/src/types/types"
import { useEffect, useState } from "react"
import styled from "styled-components"
@ -34,23 +35,16 @@ const StyledSVG = styled.div<{ isDark: boolean }>`
}
`
export interface Badge {
svg: string
hex: string
isDark: boolean
title: string
}
interface BadgeProps {
slug: string
}
const Badge = (props: BadgeProps) => {
export default (props: BadgeProps) => {
const [badgeData, setBadgeData] = useState<Badge | undefined>(undefined)
const { slug } = props
const getBadgeData = async () => {
return await require(`../data/icons/${slug}.json`)
return await require(`@developomp-site/blog-content/dist/icons/${slug}.json`)
}
useEffect(() => {
@ -71,5 +65,3 @@ const Badge = (props: BadgeProps) => {
</StyledBadge>
)
}
export default Badge

2
apps/blog/src/components/PostCard.tsx
View file

@ -1,7 +1,7 @@
import styled from "styled-components"
import { Link } from "react-router-dom"
import { PostData } from "../../types/types"
import { PostData } from "@developomp-site/blog-content/src/types/types"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {

6
apps/blog/src/contentMap.ts Normal file
View file

@ -0,0 +1,6 @@
import contentMapJson from "@developomp-site/blog-content/dist/map.json"
import { ContentMap } from "@developomp-site/blog-content/src/types/types"
const contentMap: ContentMap = contentMapJson
export default contentMap

15
apps/blog/src/pages/Home/Home.tsx
View file

@ -2,7 +2,6 @@
* PostList.tsx
* show posts in recent order
*/
import type { Map } from "../../../types/types"
import { useCallback, useEffect, useState } from "react"
import { Helmet } from "react-helmet-async"
@ -11,9 +10,7 @@ import styled from "styled-components"
import PostCard from "../../components/PostCard"
import ShowMoreButton from "./ShowMoreButton"
import _map from "../../data/map.json"
const map: Map = _map
import contentMap from "../../contentMap"
const PostList = styled.div`
flex-direction: column;
@ -32,23 +29,23 @@ export default () => {
let postCount = 0
const postCards = [] as JSX.Element[]
for (const date of Object.keys(map.date).reverse()) {
for (const date of Object.keys(contentMap.date).reverse()) {
if (postCount >= howMany) break
const length = map.date[date].length
const length = contentMap.date[date].length
for (let i = 0; i < length; i++) {
if (postCount >= howMany) break
postCount++
const content_id = map.date[date][length - i - 1]
const content_id = contentMap.date[date][length - i - 1]
postCards.push(
<PostCard
key={content_id}
postData={{
content_id: content_id,
...map.posts[content_id],
...contentMap.posts[content_id],
}}
/>
)
@ -60,7 +57,7 @@ export default () => {
useEffect(() => {
loadPostCards()
setPostsLength(Object.keys(map.posts).length)
setPostsLength(Object.keys(contentMap.posts).length)
}, [howMany])
return (

2
apps/blog/src/pages/Page/Meta.tsx
View file

@ -7,7 +7,7 @@ import {
faHourglass,
} from "@fortawesome/free-solid-svg-icons"
import { PageData } from "../../../types/types"
import { PageData } from "@developomp-site/blog-content/src/types/types"
const StyledMetaContainer = styled.div`
color: ${({ theme }) => theme.theme.color.text.gray};

8
apps/blog/src/pages/Page/Page.tsx
View file

@ -22,11 +22,9 @@ import {
import Meta from "./Meta"
import Toc from "./Toc"
import type { PageData, Map } from "../../../types/types"
import type { PageData } from "@developomp-site/blog-content/src/types/types"
import _map from "../../data/map.json"
const map: Map = _map
import contentMap from "../../contentMap"
const StyledTitle = styled.h1<{ pageType: PageType }>`
margin-bottom: 1rem;
@ -159,7 +157,7 @@ export default function Page() {
key={post}
postData={{
content_id: post,
...map.posts[post],
...contentMap.posts[post],
}}
/>
)

32
apps/blog/src/pages/Page/helper.ts
View file

@ -1,9 +1,8 @@
import portfolio from "../../data/portfolio.json"
import _map from "../../data/map.json"
import portfolio from "@developomp-site/blog-content/dist/portfolio.json"
import type { Map, PageData } from "../../../types/types"
import type { PageData } from "@developomp-site/blog-content/src/types/types"
const map: Map = _map
import contentMap from "../../contentMap"
export enum PageType {
POST,
@ -16,9 +15,13 @@ export enum PageType {
export async function fetchContent(pageType: PageType, url: string) {
try {
if (pageType == PageType.UNSEARCHABLE) {
return await import(`../../data/content/unsearchable${url}.json`)
return await import(
`@developomp-site/blog-content/dist/content/unsearchable${url}.json`
)
} else {
return await import(`../../data/content${url}.json`)
return await import(
`@developomp-site/blog-content/dist/content${url}.json`
)
}
} catch (err) {
return
@ -78,7 +81,7 @@ export function parsePageData(
// load and parse content differently depending on the content type
switch (pageType) {
case PageType.POST: {
const post = map.posts[content_id]
const post = contentMap.posts[content_id]
pageData.content = fetched_content.content
pageData.toc = fetched_content.toc
@ -95,11 +98,11 @@ export function parsePageData(
case PageType.SERIES: {
const seriesURL = content_id.slice(0, content_id.lastIndexOf("/"))
const curr = map.series[seriesURL].order.indexOf(content_id)
const curr = contentMap.series[seriesURL].order.indexOf(content_id)
const prev = curr - 1
const next = curr + 1
const post = map.posts[content_id]
const post = contentMap.posts[content_id]
pageData.content = fetched_content.content
pageData.toc = fetched_content.toc
@ -111,17 +114,18 @@ export function parsePageData(
pageData.tags = post.tags || []
pageData.seriesHome = seriesURL
pageData.prev = prev >= 0 ? map.series[seriesURL].order[prev] : undefined
pageData.prev =
prev >= 0 ? contentMap.series[seriesURL].order[prev] : undefined
pageData.next =
next < map.series[seriesURL].order.length
? map.series[seriesURL].order[next]
next < contentMap.series[seriesURL].order.length
? contentMap.series[seriesURL].order[next]
: undefined
break
}
case PageType.SERIES_HOME: {
const seriesData = map.series[content_id]
const seriesData = contentMap.series[content_id]
pageData.title = seriesData.title
pageData.content = fetched_content.content
@ -152,7 +156,7 @@ export function parsePageData(
}
case PageType.UNSEARCHABLE: {
pageData.title = map.unsearchable[content_id].title
pageData.title = contentMap.unsearchable[content_id].title
pageData.content = fetched_content.content
break

4
apps/blog/src/pages/Portfolio/Portfolio.tsx
View file

@ -5,9 +5,9 @@ import MainContent from "../../components/MainContent"
import Badge from "../../components/Badge"
import ProjectCard from "./ProjectCard"
import portfolio from "../../data/portfolio.json"
import portfolio from "@developomp-site/blog-content/dist/portfolio.json"
import type { PortfolioProject } from "../../../types/types"
import type { PortfolioProject } from "@developomp-site/blog-content/src/types/types"
const Portfolio = () => {
const [projects, setProjects] = useState<JSX.Element[]>([])

2
apps/blog/src/pages/Portfolio/ProjectCard.tsx
View file

@ -5,7 +5,7 @@ import { Link } from "react-router-dom"
import Badge from "../../components/Badge"
import { cardCSS } from "../../components/Card"
import { PortfolioProject } from "../../../types/types"
import { PortfolioProject } from "@developomp-site/blog-content/src/types/types"
const StyledProjectCard = styled.div`
${cardCSS}

11
apps/blog/src/pages/Search/Search.tsx
View file

@ -6,8 +6,7 @@ import { Range } from "react-date-range"
import elasticlunr from "elasticlunr" // search engine
import _map from "../../data/map.json"
import searchData from "../../data/search.json"
import searchData from "@developomp-site/blog-content/dist/search.json"
import Loading from "../../components/Loading"
import PostCard from "../../components/PostCard"
@ -17,13 +16,11 @@ import SearchBar from "./SearchBar"
import TagSelect, { TagsData } from "./TagSelect"
import { ClearDateButton, DateRangeControl, StyledDateRange } from "./DateRange"
import contentMap from "../../contentMap"
import "react-date-range/dist/styles.css"
import "react-date-range/dist/theme/default.css"
import type { Map } from "../../../types/types"
const map: Map = _map
const searchIndex = elasticlunr.Index.load(searchData as never)
export interface SearchParams {
@ -112,7 +109,7 @@ const Search = () => {
try {
const _postCards: JSX.Element[] = []
for (const res of searchIndex.search(searchInput)) {
const postData = map.posts[res.ref]
const postData = contentMap.posts[res.ref]
if (
postData && // if post data exists

8
apps/blog/src/pages/Search/TagSelect.tsx
View file

@ -2,13 +2,9 @@ import { useContext } from "react"
import styled from "styled-components"
import Select from "react-select"
import _map from "../../data/map.json"
import contentMap from "../../contentMap"
import { globalContext } from "../../globalContext"
import type { Map } from "../../../types/types"
const map: Map = _map
const StyledReactTagsContainer = styled.div`
width: 100%;
margin-top: 1.5rem;
@ -19,7 +15,7 @@ export interface TagsData {
label: string
}
const options: TagsData[] = map.meta.tags.map((elem) => ({
const options: TagsData[] = contentMap.meta.tags.map((elem) => ({
value: elem,
label: elem,
}))