refactor: improve content json importing

apps/blog/next.config.js

@@ -3,6 +3,9 @@ const nextConfig = {
     output: "export",
     distDir: "build",
     images: { unoptimized: true },
+    experimental: {
+        externalDir: true,
+    },
 }
 
 module.exports = nextConfig

apps/blog/src/app/Home.tsx

@@ -1,10 +1,10 @@
 "use client"
 
+import contentMap from "@developomp-site/content/exports/contentMap"
 import { type ReactNode, useEffect, useState } from "react"
 
 import PostCard from "@/components/PostCard"
 import ShowMoreButton from "@/components/ShowMoreButton"
-import contentMap from "@/contentMap"
 
 const totalPosts = Object.keys(contentMap.posts).length
 

apps/blog/src/app/[category]/[[...slug]]/helper.ts

@@ -1,7 +1,6 @@
+import contentMap from "@developomp-site/content/exports/contentMap"
 import type { PageData } from "@developomp-site/content/src/types/types"
 
-import contentMap from "@/contentMap"
-
 import type { Params } from "./page"
 
 export enum PageType {

apps/blog/src/app/[category]/[[...slug]]/page.tsx

@@ -1,5 +1,6 @@
 import "./Page.scss"
 
+import contentMap from "@developomp-site/content/exports/contentMap"
 import { type Metadata } from "next"
 import { type ParsedUrlQuery } from "querystring"
 
@@ -8,7 +9,6 @@ import Card from "@/components/Card"
 import PostCard from "@/components/PostCard"
 import Tag from "@/components/Tag"
 import TagList from "@/components/TagList"
-import contentMap from "@/contentMap"
 
 import { getData, PageType } from "./helper"
 import Meta from "./Meta"

apps/blog/src/contentMap.ts

@@ -1,4 +0,0 @@
-import contentMapJson from "@developomp-site/content/dist/map.json"
-import { type ContentMap } from "@developomp-site/content/src/types/types"
-
-export default contentMapJson as ContentMap

apps/portfolio/src/app/page.tsx

@@ -1,5 +1,5 @@
-import portfolio from "@developomp-site/content/dist/portfolio.json"
-import type { PortfolioProject } from "@developomp-site/content/src/types/types"
+import type { ProjectKey } from "@developomp-site/content/exports/portfolio"
+import portfolio from "@developomp-site/content/exports/portfolio"
 import type { Metadata } from "next"
 
 import Badge from "@/components/Badge"
@@ -12,23 +12,15 @@ function getSkills(): JSX.Element[] {
 }
 
 function getProjects(): JSX.Element[] {
-    const projects = []
-
-    for (const projectID in portfolio.projects) {
-        projects.push(
+    return (Object.keys(portfolio.projects) as ProjectKey[]).map(
+        (projectID) => (
             <ProjectCard
                 key={projectID}
                 projectID={projectID}
-                project={
-                    portfolio.projects[
-                        projectID as keyof typeof portfolio.projects
-                    ] as PortfolioProject
-                }
+                project={portfolio.projects[projectID]}
             />
         )
-    }
-
-    return projects
+    )
 }
 
 export const metadata: Metadata = {

apps/portfolio/src/app/project/[id]/page.tsx

@@ -1,7 +1,8 @@
 import "./style.scss"
 
 import Toc from "@developomp-site/blog/src/app/[category]/[[...slug]]/Toc"
-import portfolio from "@developomp-site/content/dist/portfolio.json"
+import type { ProjectKey } from "@developomp-site/content/exports/portfolio"
+import portfolio from "@developomp-site/content/exports/portfolio"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { type Metadata } from "next"
@@ -21,14 +22,14 @@ interface Data {
 }
 
 interface Params {
-    id: keyof typeof portfolio.projects
+    id: ProjectKey
 }
 
 interface Props {
     params: Params
 }
 
-async function getData(id: keyof typeof portfolio.projects): Promise<Data> {
+async function getData(id: ProjectKey): Promise<Data> {
     const content = await import(
         `@developomp-site/content/dist/content/projects/${id}.json`
     )
@@ -46,9 +47,9 @@ async function getData(id: keyof typeof portfolio.projects): Promise<Data> {
 }
 
 export async function generateStaticParams(): Promise<Params[]> {
-    return (
-        Object.keys(portfolio.projects) as (keyof typeof portfolio.projects)[]
-    ).map((id) => ({ id }))
+    return (Object.keys(portfolio.projects) as ProjectKey[]).map((id) => ({
+        id,
+    }))
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {

packages/content/exports/contentMap.ts

@@ -0,0 +1,4 @@
+import contentMap from "../dist/map.json"
+import { type ContentMap } from "../src/types/types"
+
+export default contentMap as ContentMap

packages/content/exports/portfolio.ts

@@ -0,0 +1,14 @@
+import portfolio from "../dist/portfolio.json" assert { type: "json" }
+import type { PortfolioProject } from "../src/types/types"
+
+export type ProjectKey = keyof typeof portfolio.projects
+
+// sort of like src/types/types.ts > PortfolioData but exported
+export default portfolio as {
+    // waiting for https://github.com/microsoft/TypeScript/issues/32063
+    skills: string[]
+
+    projects: {
+        [key in ProjectKey]: PortfolioProject
+    }
+}

packages/content/exports/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true
+    }
+}