Merge pull request #4 from line/refactor/unnecessary-settings

Refactor: remove unnecessary setting

Author: thebestluck

.gitignore

@@ -11,6 +11,9 @@ node_modules
 dist
 dist-ssr
 *.local
+vite.config.ts.*
+
+output.config.json
 
 # Editor directories and files
 .vscode/*

.husky/pre-commit

@@ -2,6 +2,7 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 pnpm install
+pnpm configcheck
 pnpm typecheck
 pnpm lint
 pnpm stylelint

README.md

@@ -136,9 +136,9 @@ The `app.config.json` should be as below;
 
 1. Prepare 16:9 ratio images
 2. Set image file name with rgb color with comma `rrr,ggg,bbb` between two dots, only if you need to set text color. (ex. 01.255,255,255.jpg)
-3. Add background image files into `public/backgrounds/**/*`. (or any other directory and set `backgroundsUri` as relative path.)
+3. Add background image files into `backgrounds/**/*`. (or any other directory and set `backgroundsUri` as relative path.)
 4. `pnpm run build` or `pnpm run dev`
-5. `app.config.json` 's `themes`'s `backgrounds` value will be changed automatically.
+5. `output.config.json` 's `themes`'s `backgrounds` value will be changed automatically.
 
 - with CDN images
 
@@ -308,16 +308,6 @@ With above structure, let say you want to override `themes` node for `office` th
             }
           ]
         }
-      ],
-      "backgrounds": [
-        {
-          "theme": "office",
-          "src": "office/01.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "office/02.jpg"
-        }
       ]
     }
   ]

app.config.json

@@ -19,9 +19,7 @@
       "small": "3rem",
       "caption": "1.5rem"
     },
-    "styles": [
-      "LINE Seed"
-    ]
+    "styles": ["LINE Seed"]
   },
   "defaultInputFields": [
     {
@@ -61,42 +59,7 @@
   ],
   "themes": [
     {
-      "name": "office",
-      "backgrounds": [
-        {
-          "theme": "office",
-          "src": "backgrounds/office/01.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "backgrounds/office/02.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "backgrounds/office/03.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "backgrounds/office/04.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "backgrounds/office/05.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "backgrounds/office/06.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "backgrounds/office/07.jpg"
-        },
-        {
-          "theme": "office",
-          "src": "backgrounds/office/08.255,255,255.jpg",
-          "fontColor": "255,255,255"
-        }
-      ]
+      "name": "office"
     },
     {
       "name": "nature",
@@ -149,28 +112,6 @@
             }
           ]
         }
-      ],
-      "backgrounds": [
-        {
-          "theme": "nature",
-          "src": "backgrounds/nature/01.jpg"
-        },
-        {
-          "theme": "nature",
-          "src": "backgrounds/nature/02.jpg"
-        },
-        {
-          "theme": "nature",
-          "src": "backgrounds/nature/03.jpg"
-        },
-        {
-          "theme": "nature",
-          "src": "backgrounds/nature/04.jpg"
-        },
-        {
-          "theme": "nature",
-          "src": "backgrounds/nature/05.jpg"
-        }
       ]
     },
     {
@@ -216,29 +157,7 @@
             }
           ]
         }
-      ],
-      "backgrounds": [
-        {
-          "theme": "texture",
-          "src": "backgrounds/texture/01.jpg"
-        },
-        {
-          "theme": "texture",
-          "src": "backgrounds/texture/02.jpg"
-        },
-        {
-          "theme": "texture",
-          "src": "backgrounds/texture/03.jpg"
-        },
-        {
-          "theme": "texture",
-          "src": "backgrounds/texture/04.jpg"
-        },
-        {
-          "theme": "texture",
-          "src": "backgrounds/texture/05.jpg"
-        }
       ]
     }
   ]
-}
+}

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "stylelint": "stylelint \"src/**/*.scss\"",
     "typecheck": "tsc --noEmit",
+    "configcheck": "test -f output.config.json || cp app.config.json output.config.json",
     "format": "prettier --check \"./src/**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
     "prepare": "husky install"
   },

src/App.tsx

@@ -14,7 +14,7 @@
  * under the License.
  */
 import { CSSProperties, useEffect, useRef } from "react";
-import { keyColor, title } from "~/app.config.json";
+import { keyColor, title } from "~/output.config.json";
 
 import {
   DownloadButton,

src/constants/font.ts

@@ -13,7 +13,7 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import config from "~/app.config.json";
+import config from "~/output.config.json";
 
 export const FontSizes: Record<string, string> = {} as const;
 Object.keys(config.fonts.sizes).forEach(

src/hooks/useAppConfiguration/AppContext.tsx

@@ -22,7 +22,7 @@ import {
   useEffect,
   useState,
 } from "react";
-import config from "~/app.config.json";
+import config from "~/output.config.json";
 import axios, { AxiosError } from "axios";
 
 import { Image, InputFieldGroup, Theme } from "@/constants";
@@ -73,7 +73,6 @@ export const AppProvider = (props: PropsWithChildren) => {
   const { defaultInputFields } = config;
   const [themes, setThemes] = useState<Array<Theme>>([]);
   const [selectedImage, setSelectedImage] = useState<Image>({
-    theme: "",
     src: "",
   });
   const [selectedTheme, setSelectedTheme] = useState("all");
@@ -86,7 +85,7 @@ export const AppProvider = (props: PropsWithChildren) => {
       case "filesystem":
       case "cdn":
         setThemes(config.themes as Array<Theme>);
-        setSelectedImage(config.themes[0].backgrounds[0]);
+        setSelectedImage((config.themes[0] as Theme)?.backgrounds[0] ?? []);
         break;
       case "github":
         try {

vite.config.ts

@@ -51,16 +51,22 @@ function copyBackgroundsForFileSystem() {
       const filteredFileContentsArray = fileContentsArray.filter(
         ({ theme: fileTheme }) => fileTheme === theme,
       );
-      config.themes[index].backgrounds = filteredFileContentsArray;
+      config.themes[index]["backgrounds"] = filteredFileContentsArray.map(
+        ({ src, fontColor }) => (fontColor ? { src, fontColor } : { src }),
+      );
     });
 
-    const configJsonPath = path.join(dir, "app.config.json");
+    const configJsonPath = path.join(dir, "output.config.json");
     fs.writeFileSync(configJsonPath, JSON.stringify(config, null, 2));
 
     return copy({
       targets: [{ src: sourceDirectory, dest: targetDirectory }],
       hook: "writeBundle",
     });
+  } else {
+    const dir = path.resolve();
+    const configJsonPath = path.join(dir, "output.config.json");
+    fs.writeFileSync(configJsonPath, JSON.stringify(config, null, 2));
   }
 }
 
@@ -76,18 +82,22 @@ function readFilesRecursively(dir) {
 
     sortedFiles.forEach((file) => {
       const filePath = path.join(dir, file);
+      const theme = dir.replace(
+        path.join(config.backgroundsUri.path, path.sep),
+        "",
+      );
 
       if (fs.statSync(filePath).isDirectory()) {
         readFiles(filePath);
       } else if (isImageFile(filePath)) {
         const item = file.split(".")?.[2]
           ? {
-              theme: dir.replace(`${config.backgroundsUri.path}/`, ""),
+              theme,
               src: filePath,
               fontColor: file.split(".")[1],
             }
           : {
-              theme: dir.replace(`${config.backgroundsUri.path}/`, ""),
+              theme,
               src: filePath,
             };
         fileContentsArray.push(item);