feat: create dynamic theme

byodian · Nov 24, 2024 · dbacd52 · dbacd52
1 parent a3a741c
commit dbacd52
Show file tree

Hide file tree

Showing 12 changed files with 351 additions and 287 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -170,7 +170,7 @@ export default function Home() {
                   getPreviewWidthClass(theme),
                 )
               }>
-              <Preview ref={previewRef} contents={contents} theme={theme} className="w-full flex flex-col m-auto" />
+              <Preview ref={previewRef} contents={contents} className="w-full flex flex-col m-auto" />
             </div>
           </TabsContent>
           <TabsContent value="workspace" forceMount className="data-[state=inactive]:hidden sm:flex-grow sm:!block overflow-auto">

diff --git a/src/components/preview/card.tsx b/src/components/preview/card.tsx
@@ -2,20 +2,19 @@ import DOMPurify from 'dompurify'
 import parse from 'html-react-parser'
 import { forwardRef, useMemo } from 'react'
 import { ImageList } from './image-list'
-import type { ClassesMap } from './type'
-import type { ContentWithId, ImageFile } from '@/types/common'
+import type { ContentWithId, ImageFile, ModuleClassNameMap } from '@/types'
 import { base64ToBlob, cn, stripEmptyParagraphs } from '@/lib/utils'
 
 interface PreviewItemProps {
   content: ContentWithId,
   children?: React.ReactNode,
   index: number,
-  theme: string,
   childContentsMap: Map<number, ContentWithId[]>,
-  classesMap: ClassesMap,
+  templateClassNameMap: ModuleClassNameMap,
+  themeClassNameMap: ModuleClassNameMap,
 }
 
-const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children, index, theme, classesMap, childContentsMap }, ref) => {
+const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children, index, templateClassNameMap, themeClassNameMap, childContentsMap }, ref) => {
   const uploadFiles = content.uploadFiles
 
   const imageFiles: ImageFile[] = useMemo(() => {
@@ -27,35 +26,36 @@ const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children,
     }))
   }, [uploadFiles]) || []
 
-  const primary = classesMap.primary
-  const secondary = classesMap.secondary
-  const thirdary = classesMap.thirdary
+  const heroTemplate = templateClassNameMap.hero
+  const mainTemplate = templateClassNameMap.main
+  const subTemplate = templateClassNameMap.sub
+
+  const heroTheme = themeClassNameMap.hero
+  const mainTheme = themeClassNameMap.main
+  const subTheme = themeClassNameMap.sub
 
   return (
     <div
       id={`${content.id}`}
       className={cn(
-        classesMap.common.container,
+        templateClassNameMap.common.container,
         content.parentId
-          ? thirdary.container
+          ? `${subTemplate.container} ${subTheme.container}`
           : content.type === 'theme_content'
-            ? primary.container
-            : secondary.container,
+            ? `${heroTemplate.container} ${heroTheme.container}`
+            : `${mainTemplate.container} ${mainTheme.container}`,
       )}
       ref={ref}
     >
-      {content.type === 'theme_content' && (
-        <div data-class="oneimg-theme__bg"></div>
-      )}
       {/* card header */}
       {content.title && (
         <div
           className={
             cn(content.parentId
-              ? thirdary.title
+              ? `${subTemplate.title} ${subTheme.title}`
               : content.type === 'theme_content'
-                ? primary.title
-                : secondary.title,
+                ? `${heroTemplate.title} ${heroTheme.title}`
+                : `${mainTemplate.title} ${mainTheme.title}`,
             )
           }
           data-index={index}
@@ -68,12 +68,12 @@ const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children,
         ((stripEmptyParagraphs(content.content)) || (imageFiles.length > 0) || children) && (
           <div
             className={
-              cn(classesMap.common.content,
+              cn(templateClassNameMap.common.content,
                 content.parentId
-                  ? thirdary.content
+                  ? `${subTemplate.content} ${subTheme.content}`
                   : content.type === 'theme_content'
-                    ? primary.content
-                    : secondary.content,
+                    ? `${heroTemplate.content} ${heroTheme.content}`
+                    : `${mainTemplate.content} ${mainTheme.content}`,
               )
             }
           >
@@ -90,8 +90,8 @@ const Card = forwardRef<HTMLDivElement, PreviewItemProps>(({ content, children,
                     content={item}
                     key={item.id}
                     index={index}
-                    theme={theme}
-                    classesMap={classesMap}
+                    templateClassNameMap={templateClassNameMap}
+                    themeClassNameMap={themeClassNameMap}
                     childContentsMap={childContentsMap}
                   />
                 ))}

diff --git a/src/components/preview/preview.tsx b/src/components/preview/preview.tsx
@@ -1,11 +1,10 @@
 import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
 import { Card } from './card'
-import { baseStyles, createStyle, wechatPostTemplate } from './template'
-import type { ClassesMap } from './type'
+import { baseTemplateStyle, createTheme, techTemplateStyle } from './styles'
 import type { ContentWithId, PreviewRef } from '@/types/common'
-import { cn } from '@/lib/utils'
+import { cn, createStyleClassMap } from '@/lib/utils'
 
-const Preview = forwardRef<PreviewRef, { contents: ContentWithId[]; className?: string, theme: string }>(({ contents, className, theme }, ref) => {
+const Preview = forwardRef<PreviewRef, { contents: ContentWithId[]; className?: string }>(({ contents, className }, ref) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const itemRefs = useRef<{ [key: string | number]: HTMLDivElement }>({})
 
@@ -34,32 +33,8 @@ const Preview = forwardRef<PreviewRef, { contents: ContentWithId[]; className?:
     return childContents
   }, [contents])
 
-  const { classes: containerClasses } = createStyle('primary')({
-    defaultTheme: baseStyles.primary,
-    theme: wechatPostTemplate.primary,
-  })
-
-  const { classes: titleClasses } = createStyle('secondary')({
-    defaultTheme: baseStyles.secondary,
-    theme: wechatPostTemplate.secondary,
-  })
-
-  const { classes: contentClasses } = createStyle('thirdary')({
-    defaultTheme: baseStyles.thirdary,
-    theme: wechatPostTemplate.thirdary,
-  })
-
-  const { classes: defaultClasses } = createStyle('common')({
-    defaultTheme: baseStyles.common,
-    theme: wechatPostTemplate.common,
-  })
-
-  const classesMap: ClassesMap = {
-    common: defaultClasses,
-    primary: containerClasses,
-    secondary: titleClasses,
-    thirdary: contentClasses,
-  }
+  const templateClassNameMap = createStyleClassMap(techTemplateStyle, 'template', baseTemplateStyle)
+  const themeClassNameMap = createStyleClassMap(createTheme(), 'theme')
 
   return (
     <div className={cn(contents.length === 0 && 'h-full', 'one-container', className)} ref={containerRef}>
@@ -71,11 +46,11 @@ const Preview = forwardRef<PreviewRef, { contents: ContentWithId[]; className?:
         <div className="one-list">
           {parentContents.map((content, parentIndex) => (
             <Card
-              theme={theme}
               index={parentIndex}
               content={content}
               key={content.id}
-              classesMap={classesMap}
+              templateClassNameMap={templateClassNameMap}
+              themeClassNameMap={themeClassNameMap}
               childContentsMap={childContentsMap}
               ref={(el) => {
                 itemRefs.current[content.id] = el!

diff --git a/src/components/preview/styles.ts b/src/components/preview/styles.ts
diff --git a/src/components/preview/styles/create-theme.ts b/src/components/preview/styles/create-theme.ts
@@ -0,0 +1,57 @@
+import type { ArticleModuleTemplate } from '@/types/template'
+
+export function createTheme(): ArticleModuleTemplate {
+  return {
+    hero: {
+      container: {
+        backgroundColor: 'var(--hero-container-background)',
+        backgroundImage: 'var(--hero-container-background-image)',
+        color: 'var(--hero-container-foreground)',
+      },
+      title: {
+        color: 'var(--hero-title-foreground)',
+        backgroundColor: 'var(--hero-title-background)',
+        backgroundImage: 'var(--hero-title-background-image)',
+      },
+      content: {
+        color: 'var(--hero-content-foreground)',
+        backgroundColor: 'var(--hero-content-background)',
+        backgroundImage: 'var(--hero-content-background-image)',
+      },
+    },
+    main: {
+      container: {
+        backgroundColor: 'var(--main-container-background)',
+        backgroundImage: 'var(--main-container-background-image)',
+        color: 'var(--main-container-foreground)',
+      },
+      title: {
+        color: 'var(--main-title-foreground)',
+        backgroundColor: 'var(--main-title-background)',
+        backgroundImage: 'var(--main-title-background-image)',
+      },
+      content: {
+        color: 'var(--main-content-foreground)',
+        backgroundColor: 'var(--main-content-background)',
+        backgroundImage: 'var(--main-content-background-image)',
+      },
+    },
+    sub: {
+      container: {
+        backgroundColor: 'var(--sub-container-background)',
+        backgroundImage: 'var(--sub-container-background-image)',
+        color: 'var(--sub-container-foreground)',
+      },
+      title: {
+        color: 'var(--sub-title-foreground)',
+        backgroundColor: 'var(--sub-title-background)',
+        backgroundImage: 'var(--sub-title-background-image)',
+      },
+      content: {
+        color: 'var(--sub-content-foreground)',
+        backgroundColor: 'var(--sub-content-background)',
+        backgroundImage: 'var(--sub-content-background-image)',
+      },
+    },
+  }
+}