portfolio markdown parsing update

- removed unnecessary 0.md files
- added korean language support

generate/index.ts

@@ -28,8 +28,6 @@ export const map: Map = {
 }
 export const seriesMap: SeriesMap = {}
 export const portfolioData: PortfolioData = {
-	overview_en: "",
-	overview_kr: "",
 	skills: new Set(),
 	projects: {},
 }

generate/recursiveParse/parsePortfolio.ts

@@ -2,63 +2,73 @@ import simpleIcons from "simple-icons"
 import tinycolor from "tinycolor2"
 
 import { contentDirectoryPath, iconsDirectoryPath } from "../config"
-import { PortfolioProject } from "../../types/types"
 import { generateToc } from "../parseMarkdown"
 import { writeToFile } from "../util"
 import { portfolioData } from ".."
 import { DataToPass } from "."
 
 export default function parsePortfolio(data: DataToPass): void {
-	const { urlPath, markdownRaw, markdownData, path } = data
+	const { urlPath, markdownRaw, markdownData } = data
 
-	// check if the file is a portfolio overview or a project
+	if (urlPath.endsWith(".kr")) {
-	// explanation: file `0.md` is a special file (i.e. not a regular project file)
+		const contentID = urlPath.slice(0, urlPath.length - 3)
-	if (path.endsWith("/0.md")) {
+
-		portfolioData.overview_en = markdownData.content
+		if (portfolioData.projects[contentID]) {
-	} else if (path.endsWith("/0.kr.md")) {
+			portfolioData.projects[contentID] = {
-		portfolioData.overview_kr = markdownData.content
+				...portfolioData.projects[contentID],
+				overview_kr: markdownData.overview as string,
+			}
+		} else {
+			portfolioData.projects[contentID] = {
+				name: "",
+				image: "",
+				overview_en: "",
+				overview_kr: markdownData.overview as string,
+				badges: [],
+				repo: "",
+			}
+		}
 	} else {
-		if (!urlPath.endsWith(".kr")) {
+		if (markdownData.badges) {
-			if (markdownData.badges) {
+			;(markdownData.badges as string[]).forEach((slug) => {
-				;(markdownData.badges as string[]).forEach((slug) => {
+				// todo: handle cases when icon is not on simple-icons
-					// todo: handle cases when icon is not on simple-icons
 
-					portfolioData.skills.add(slug)
+				portfolioData.skills.add(slug)
 
-					const icon = simpleIcons.Get(slug)
+				const icon = simpleIcons.Get(slug)
 
-					const color = tinycolor(icon.hex).lighten(5).desaturate(5)
+				const color = tinycolor(icon.hex).lighten(5).desaturate(5)
 
-					// save svg icon
+				// save svg icon
-					writeToFile(
+				writeToFile(
-						`${iconsDirectoryPath}/${icon.slug}.json`,
+					`${iconsDirectoryPath}/${icon.slug}.json`,
-						JSON.stringify({
+					JSON.stringify({
-							svg: icon.svg,
+						svg: icon.svg,
-							hex: color.toHexString(),
+						hex: color.toHexString(),
-							isDark: color.isDark(),
+						isDark: color.isDark(),
-							title: icon.title,
+						title: icon.title,
-						})
+					})
-					)
+				)
-				})
+			})
-			}
-
-			const project: PortfolioProject = {
-				name: markdownData.name as string,
-				image: markdownData.image as string,
-				overview: markdownData.overview as string,
-				badges: (markdownData.badges as string[]) || [],
-				repo: (markdownData.repo as string) || "",
-			}
-
-			portfolioData.projects[urlPath] = project
 		}
 
-		writeToFile(
+		portfolioData.projects[urlPath] = {
-			`${contentDirectoryPath}${urlPath}.json`,
+			name: markdownData.name as string,
-			JSON.stringify({
+			image: markdownData.image as string,
-				content: markdownData.content,
+			overview_en: markdownData.overview as string,
-				toc: generateToc(markdownRaw),
+			overview_kr: portfolioData.projects[urlPath]
-			})
+				? portfolioData.projects[urlPath].overview_kr
-		)
+				: "",
+			badges: (markdownData.badges as string[]) || [],
+			repo: (markdownData.repo as string) || "",
+		}
 	}
+
+	writeToFile(
+		`${contentDirectoryPath}${urlPath}.json`,
+		JSON.stringify({
+			content: markdownData.content,
+			toc: generateToc(markdownRaw),
+		})
+	)
 }

markdown/portfolio/0.md

@@ -1,3 +0,0 @@
----
-github: https://github.com/developomp
----

markdown/portfolio/wbm.kr.md

@@ -0,0 +1,29 @@
+---
+overview: 유니티 게임을 위한 모드. 인-게임 UI와 OBS 오버레이를 제공.
+---
+
+## 개요
+
+War Brokers Mods, 줄여서 WBM은 게임 [War Brokers](https://warbrokers.io)를 위한 모드입니다.
+
+## 모드
+
+C#으로 만들어졌으며, [BepInEx](https://github.com/BepInEx/BepInEx) 프레임워크를 사용하여 게임의 여러 측면을 패치합니다.
+
+## OBS 오버레이
+
+<p align="center">
+	<img alt="OBS 오버레이" src="/img/portfolio/wbm-overlays.png" />
+</p>
+
+[OBS 스튜디오](https://github.com/obsproject/obs-studio)를 위한 오버레이.
+웹 기술을 이용하여 제작되었습니다 (자바스크립트, CSS, HTML 등).
+
+## 설치기
+
+<p align="center">
+	<img alt="설치기" src="/img/portfolio/wbm-installer.png" />
+</p>
+
+간단한 크로스 플랫폼 설칙 및 업데이트 관리기.
+[tauri](https://github.com/tauri-apps/tauri), [rust](https://github.com/rust-lang/rust), [svelte](https://github.com/sveltejs/svelte), 그리고 [tailwind css](https://github.com/tailwindlabs/tailwindcss)를 사용해 만들어졌습니다.

src/pages/Page/helper.ts

@@ -2,7 +2,7 @@ import portfolio from "../../data/portfolio.json"
 import _map from "../../data/map.json"
 
 import type { SiteLocale } from "../../globalContext"
-import type { Map, PageData } from "../../../types/types"
+import type { Map, PageData, PortfolioProject } from "../../../types/types"
 
 const map: Map = _map
 
@@ -110,10 +110,29 @@ export function checkURLValidity(
 		}
 
 		case PageType.PORTFOLIO_PROJECT: {
-			if (content_id in portfolio.projects) return URLValidity.VALID
+			const locale: SiteLocale = content_id.endsWith(".kr") ? "kr" : "en"
+			const portfolio_content_id = content_id.endsWith(".kr")
+				? content_id.slice(0, content_id.length - 3)
+				: content_id
 
-			if (alt_content_id in portfolio.projects)
+			try {
-				return URLValidity.VALID_BUT_IN_OTHER_LOCALE
+				const project = portfolio.projects[
+					portfolio_content_id as keyof typeof portfolio.projects
+				] as PortfolioProject
+
+				if (locale == "en" && project.overview_en) {
+					return URLValidity.VALID
+				} else if (locale == "kr" && project.overview_kr) {
+					return URLValidity.VALID
+				} else if (
+					(locale == "en" && project.overview_kr) ||
+					(locale == "kr" && project.overview_en)
+				) {
+					return URLValidity.VALID_BUT_IN_OTHER_LOCALE
+				}
+			} catch {
+				// prevent linting error
+			}
 
 			break
 		}
@@ -228,15 +247,21 @@ export function parsePageData(
 		}
 
 		case PageType.PORTFOLIO_PROJECT: {
+			const portfolio_content_id = content_id.endsWith(".kr")
+				? content_id.slice(0, content_id.length - 3)
+				: content_id
+
 			const data =
-				portfolio.projects[content_id as keyof typeof portfolio.projects]
+				portfolio.projects[
+					portfolio_content_id as keyof typeof portfolio.projects
+				]
 
 			pageData.content = fetched_content.content
 			pageData.toc = fetched_content.toc
 
 			pageData.title = data.name
 			pageData.image = data.image
-			pageData.overview = data.overview
+			pageData.overview = locale == "en" ? data.overview_en : data.overview_kr
 			pageData.badges = data.badges
 			pageData.repo = data.repo
 

src/pages/Portfolio/Portfolio.tsx

@@ -65,15 +65,6 @@ const Portfolio = () => {
 
 				<hr />
 
-				{/* rendered markdown */}
-
-				<div
-					dangerouslySetInnerHTML={{
-						__html:
-							locale == "en" ? portfolio.overview_en : portfolio.overview_kr,
-					}}
-				/>
-
 				{/* Projects */}
 
 				<h2 id="projects">

src/pages/Portfolio/ProjectCard.tsx

@@ -39,6 +39,8 @@ const ProjectCard = (props: ProjectCardProps) => {
 	const { projectID, project } = props
 
 	const { globalState } = useContext(globalContext)
+	const { locale } = globalState
+
 	const [badges, setBadges] = useState<JSX.Element[]>([])
 
 	useEffect(() => {
@@ -46,14 +48,18 @@ const ProjectCard = (props: ProjectCardProps) => {
 	}, [])
 
 	return (
-		<Link to={`/${globalState.locale}${projectID}`}>
+		<Link to={`/${locale}${projectID}`}>
 			<StyledProjectCard>
 				<h1>{project.name}</h1>
 				<StyledImg src={project.image} />
 
 				{badges}
 				<hr />
-				<div dangerouslySetInnerHTML={{ __html: project.overview }} />
+				<div
+					dangerouslySetInnerHTML={{
+						__html: locale == "en" ? project.overview_en : project.overview_kr,
+					}}
+				/>
 			</StyledProjectCard>
 		</Link>
 	)

types/types.ts

@@ -110,10 +110,6 @@ export interface SeriesEntry {
  */
 
 export interface PortfolioData {
-	// rendered markdown html
-	overview_en: string
-	overview_kr: string
-
 	// a set of valid simple icons slug
 	skills: Set<string>
 
@@ -132,7 +128,8 @@ export interface PortfolioOverview {
 export interface PortfolioProject {
 	name: string
 	image: string // url to the image
-	overview: string
+	overview_en: string
+	overview_kr: string
 	badges: string[] // array of valid simpleIcons slug
 	repo: string // url of the git repository
 }