refactor: improve theme ui

app/(blog)/about/page.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender/ContentRender'
 import { getSite } from '@/lib/fetchers'
 import { loadTheme } from '@/themes/theme-loader'
 

package.json

@@ -97,6 +97,7 @@
     "ai": "^4.0.18",
     "array-move": "^4.0.0",
     "big.js": "^6.2.2",
+    "case-anything": "^3.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -126,7 +127,6 @@
     "penx-theme-photo": "^0.0.10",
     "prismjs": "^1.29.0",
     "react": "^19.0.0",
-
     "react-datepicker": "^7.5.0",
     "react-day-picker": "^9.4.3",
     "react-dnd": "^16.0.1",

pnpm-lock.yaml

@@ -248,6 +248,9 @@ importers:
       big.js:
         specifier: ^6.2.2
         version: 6.2.2
+      case-anything:
+        specifier: ^3.1.0
+        version: 3.1.0
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -3641,6 +3644,10 @@ packages:
   capnp-ts@0.7.0:
     resolution: {integrity: sha512-XKxXAC3HVPv7r674zP0VC3RTXz+/JKhfyw94ljvF80yynK6VkTnqE3jMuN8b3dUVmmc43TjyxjW4KTsmB3c86g==}
 
+  case-anything@3.1.0:
+    resolution: {integrity: sha512-rRYnn5Elur8RuNHKoJ2b0tgn+pjYxL7BzWom+JZ7NKKn1lt/yGV/tUNwOovxYa9l9VL5hnXQdMc+mENbhJzosQ==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -11060,6 +11067,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  case-anything@3.1.0: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -11927,7 +11936,7 @@ snapshots:
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.2(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -11958,7 +11967,7 @@ snapshots:
       is-glob: 4.0.3
       stable-hash: 0.0.4
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -11977,7 +11986,7 @@ snapshots:
     dependencies:
       eslint: 8.57.1
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8

themes/card/pages/AboutPage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { Site } from '@penxio/types'
 
@@ -24,12 +24,6 @@ export function AboutPage({ site }: Props) {
               {site.name}
             </h3>
             <div className="text-foreground/60">{site.description}</div>
-            {/* <div className="flex space-x-3 pt-6">
-              <SocialIcon kind="mail" href={`mailto:${email}`} />
-              <SocialIcon kind="github" href={github} />
-              <SocialIcon kind="linkedin" href={linkedin} />
-              <SocialIcon kind="x" href={twitter} />
-            </div> */}
           </div>
           <div className="prose max-w-none pb-8 pt-8 dark:prose-invert xl:col-span-2 mx-auto lg:max-w-3xl">
             <ContentRender content={site.about} />

themes/card/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { Post, Site } from '@penxio/types'
 import Link from 'next/link'
 import { PostItem } from '../components/PostItem'

themes/card/pages/PostDetail.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { PostActions } from '@/components/theme-ui/PostActions'
 import { formatDate } from '@/lib/utils'

themes/garden/pages/AboutPage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { Site } from '@penxio/types'
 

themes/garden/pages/PostDetail.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { PostActions } from '@/components/theme-ui/PostActions'
 import { cn, formatDate } from '@/lib/utils'

themes/micro/pages/AboutPage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { Site } from '@penxio/types'
 

themes/micro/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { Post, Site } from '@penxio/types'
 import Link from 'next/link'

themes/micro/pages/PostDetail.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { PostActions } from '@/components/theme-ui/PostActions'
 import { cn, formatDate } from '@/lib/utils'

themes/minimal/components/Header.tsx

@@ -47,7 +47,6 @@ export const Header = ({ site }: Props) => {
             )
           })}
         </div>
-        {/* {MobileNav && <MobileNav />} */}
       </div>
       <div className="flex item-center gap-2">
         <div className="flex items-center">

themes/minimal/pages/AboutPage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { Site } from '@penxio/types'
 

themes/minimal/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { Post, Site } from '@penxio/types'
 import Link from 'next/link'

themes/minimal/pages/PostDetail.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { PostActions } from '@/components/theme-ui/PostActions'
 import { cn, formatDate } from '@/lib/utils'

themes/photo/pages/AboutPage.tsx

@@ -1,4 +1,4 @@
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { Site } from '@penxio/types'
 

themes/photo/pages/PostDetail.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { ContentRender } from '@/components/ContentRender'
+import { ContentRender } from '@/components/plate-ui/ContentRender'
 import { PageTitle } from '@/components/theme-ui/PageTitle'
 import { PostActions } from '@/components/theme-ui/PostActions'
 import { cn, formatDate } from '@/lib/utils'

withTheme.mjs

@@ -1,6 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
+import { camelCase, kebabCase } from 'case-anything'
 
 export function withTheme(nextConfig = {}) {
   const __filename = fileURLToPath(import.meta.url)
@@ -15,10 +16,10 @@ export function withTheme(nextConfig = {}) {
   const themesText = `export const themes = [${dir.map((t) => '"' + t + '"').join(', ')}]`
 
   const importList = dir
-    .map((t) => `import * as ${t} from './${t}';`)
+    .map((t) => `import * as ${camelCase(t)} from './${t}';`)
     .join('\n')
 
-  const mapText = `const map: Record<string, any> = {${dir.map((t) => t).join(', ')}}`
+  const mapText = `const map: Record<string, any> = {${dir.map((t) => `"${t}": ${camelCase(t)}`).join(', ')}}`
 
   return {
     ...nextConfig,