feat(aklive2d): many changes

- generalized env_generator - fixed content_processor - updated config to add fields - removed redundant fields in config
2023-02-25 21:36:54 -05:00
parent e98bf8d7ea
commit 7e2a2a1d40
35 changed files with 220 additions and 141 deletions
--- a/aklive2d.js
+++ b/aklive2d.js
@@ -162,9 +162,57 @@ async function main() {
    })

    const envPath = path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, '.env')
-    writeSync((new EnvGenerator(OPERATOR_NAME, {
-      backgrounds
-    })).generate(), envPath)
+    writeSync((new EnvGenerator()).generate([
+      {
+        key: "link",
+        value: __config.operators[OPERATOR_NAME].link
+      }, {
+        key: "version",
+        value: __config.version
+      }, {
+        key: "title",
+        value: __config.operators[OPERATOR_NAME].title
+      }, {
+        key: "filename",
+        value: __config.operators[OPERATOR_NAME].filename.replace('#', '%23')
+      }, {
+        key: "logo_filename",
+        value: __config.operators[OPERATOR_NAME].logo
+      }, {
+        key: "fallback_filename",
+        value: __config.operators[OPERATOR_NAME].fallback_name.replace('#', '%23')
+      }, {
+        key: "viewport_left",
+        value: __config.operators[OPERATOR_NAME].viewport_left
+      }, {
+        key: "viewport_right",
+        value: __config.operators[OPERATOR_NAME].viewport_right
+      }, {
+        key: "viewport_top",
+        value: __config.operators[OPERATOR_NAME].viewport_top
+      }, {
+        key: "viewport_bottom",
+        value: __config.operators[OPERATOR_NAME].viewport_bottom
+      }, {
+        key: "invert_filter",
+        value: __config.operators[OPERATOR_NAME].invert_filter
+      }, {
+        key: "image_width",
+        value: 2048
+      }, {
+        key: "image_height",
+        value: 2048
+      }, {
+        key: "background_files",
+        value: JSON.stringify(backgrounds)
+      }, {
+        key: "background_folder",
+        value: __config.folder.background
+      }, {
+        key: "voice_folders",
+        value: JSON.stringify(__config.folder.voice)
+      }
+    ]), envPath)
    fork(path.join(__projetRoot, 'vite.config.js'), [op, OPERATOR_NAME])
  }
 }
--- a/config.yaml
+++ b/config.yaml
@@ -17,6 +17,10 @@ folder:
        lang: KR
      - name: custom
        lang: CUSTOM
+share:
+  title:
+    zh-CN: "明日方舟："
+    en-US: "Arknights: "
 operators:
  chen: !include config/chen.yaml
  dusk: !include config/dusk.yaml
--- a/config/_template.yaml
+++ b/config/_template.yaml
@@ -1,7 +1,4 @@
-link: chen
 date: 2021/08
-type: operator
-title: 'Arknights: Ch''en/Chen the Holungday - 明日方舟：假日威龙陈'
 filename: dyn_illust_char_1013_chen2
 logo: logo_rhodes_override
 fallback_name: char_1013_chen2_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 1
 viewport_bottom: 1
 invert_filter: false
+color: rgba(14, 126, 239, 0.85)
+codename: 
+  zh-CN: 假日威龙陈
+  en-US: Ch'en/Chen the Holungday
--- a/config/chen.yaml
+++ b/config/chen.yaml
@@ -1,7 +1,4 @@
-link: chen
-type: operator
 date: 2021/08
-title: 'Arknights: Ch''en/Chen the Holungday - 明日方舟：假日威龙陈'
 filename: dyn_illust_char_1013_chen2
 logo: logo_rhodes_override
 fallback_name: char_1013_chen2_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 1
 viewport_bottom: 1
 invert_filter: false
+color: rgba(14, 126, 239, 0.85)
+codename: 
+  zh-CN: 假日威龙陈
+  en-US: Ch'en/Chen the Holungday
--- a/config/chongyue.yaml
+++ b/config/chongyue.yaml
@@ -1,7 +1,4 @@
-link: chongyue
-type: operator
 date: 2023/01
-title: 'Arknights: Chongyue - 明日方舟：重岳'
 filename: dyn_illust_char_2024_chyue
 logo: logo_sui
 fallback_name: char_2024_chyue_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(255, 133, 34)
+codename: 
+  zh-CN: 重岳
+  en-US: Chongyue
--- a/config/dusk.yaml
+++ b/config/dusk.yaml
@@ -1,7 +1,4 @@
-link: dusk
-type: operator
 date: 2021/02
-title: 'Arknights: Dusk - 明日方舟：夕'
 filename: dyn_illust_char_2015_dusk
 logo: logo_sui
 fallback_name: char_2015_dusk_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(9, 212, 208)
+codename: 
+  zh-CN: 夕
+  en-US: Dusk
--- a/config/dusk_everything_is_a_miracle.yaml
+++ b/config/dusk_everything_is_a_miracle.yaml
@@ -1,7 +1,4 @@
-link: dusk_everything_is_a_miracle
-type: skin
 date: 2022/01
-title: 'Arknights: Everything is a Miracle / Dusk - 明日方舟：染尘烟·夕'
 filename: dyn_illust_char_2015_dusk_nian#7
 logo: logo_sui
 fallback_name: char_2015_dusk_nian#7
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(78, 201, 187)
+codename: 
+  zh-CN: 染尘烟 · 夕
+  en-US: Everything is a Miracle / Dusk
--- a/config/gavial.yaml
+++ b/config/gavial.yaml
@@ -1,7 +1,4 @@
-link: gavial
-type: operator
 date: 2022/08
-title: 'Arknights: Gavial the Invincible - 明日方舟：百练嘉维尔'
 filename: dyn_illust_char_1026_gvial2
 logo: logo_rhodes_override
 fallback_name: char_1026_gvial2_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: false
+color: rgb(29, 185, 53)
+codename: 
+  zh-CN: 百练嘉维尔
+  en-US: Gavial the Invincible
--- a/config/lee_trust_your_eyes.yaml
+++ b/config/lee_trust_your_eyes.yaml
@@ -1,7 +1,4 @@
-link: lee_trust_your_eyes
-type: skin
 date: 2022/10
-title: 'Arknights: Trust Your Eyes / Lee - 明日方舟：手到牌来·老鲤'
 filename: dyn_illust_char_322_lmlee_witch#3
 logo: logo_lee
 fallback_name: char_322_lmlee_witch#3
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(206, 0, 0)
+codename: 
+  zh-CN: 手到牌来 · 老鲤
+  en-US: Trust Your Eyes / Lee
--- a/config/ling.yaml
+++ b/config/ling.yaml
@@ -1,7 +1,4 @@
-link: ling
-type: operator
 date: 2022/01
-title: 'Arknights: Ling - 明日方舟：令'
 filename: dyn_illust_char_2023_ling
 logo: logo_sui
 fallback_name: char_2023_ling_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(15, 206, 216)
+codename: 
+  zh-CN: 令
+  en-US: Ling
--- a/config/ling_it_does_wash_the_strings.yaml
+++ b/config/ling_it_does_wash_the_strings.yaml
@@ -1,7 +1,4 @@
-link: ling_it_does_wash_the_strings
-type: skin
 date: 2023/01
-title: 'Arknights: It Does Wash the Strings / Ling - 明日方舟：濯缨 · 令'
 filename: dyn_illust_char_2023_ling_nian#9
 logo: logo_sui
 fallback_name: char_2023_ling_nian#9
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(37, 148, 197)
+codename: 
+  zh-CN: 濯缨 · 令
+  en-US: It Does Wash the Strings / Ling
--- a/config/mizuki_summer_feast.yaml
+++ b/config/mizuki_summer_feast.yaml
@@ -1,7 +1,4 @@
-link: mizuki_summer_feast
-type: skin
 date: 2022/12
-title: 'Arknights: Summer Feast / Mizuki - 明日方舟：夏日餮宴·水月'
 filename: dyn_illust_char_437_mizuki_sale#7
 logo: logo_higashi
 fallback_name: char_437_mizuki_sale#7
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(156, 210, 246)
+codename: 
+  zh-CN: 夏日餮宴 · 水月
+  en-US: Summer Feast / Mizuki
--- a/config/nearl.yaml
+++ b/config/nearl.yaml
@@ -1,7 +1,4 @@
-link: nearl
-type: operator
 date: 2021/11
-title: 'Arknights: Nearl the Radiant Knight - 明日方舟：耀骑士临光'
 filename: dyn_illust_char_1014_nearl2
 logo: logo_kazimierz
 fallback_name: char_1014_nearl2_2
@@ -10,3 +7,7 @@ viewport_right: 3
 viewport_top: 10
 viewport_bottom: 0
 invert_filter: true
+color: rgba(253, 236, 189, 0.95)
+codename: 
+  zh-CN: 耀骑士临光
+  en-US: Nearl the Radiant Knight
--- a/config/nearl_relight.yaml
+++ b/config/nearl_relight.yaml
@@ -1,7 +1,4 @@
-link: nearl_relight
-type: skin
 date: 2022/11
-title: 'Arknights: Relight / Nearl - 明日方舟：复现荣光·耀骑士临光'
 filename: dyn_illust_char_1014_nearl2_epoque#17
 logo: logo_kazimierz
 fallback_name: char_1014_nearl2_epoque#17
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(141, 213, 228)
+codename: 
+  zh-CN: 复现荣光 · 耀骑士临光
+  en-US: Relight / Nearl
--- a/config/nian.yaml
+++ b/config/nian.yaml
@@ -1,7 +1,4 @@
-link: nian
-type: operator
 date: 2020/01
-title: 'Arknights: Nian - 明日方舟：年'
 filename: dyn_illust_char_2014_nian
 logo: logo_sui
 fallback_name: char_2014_nian_2
@@ -10,3 +7,7 @@ viewport_right: 2
 viewport_top: 3
 viewport_bottom: 5
 invert_filter: true
+color: rgb(255, 48, 0)
+codename: 
+  zh-CN: 年
+  en-US: Nian
--- a/config/nian_unfettered_freedom.yaml
+++ b/config/nian_unfettered_freedom.yaml
@@ -1,7 +1,4 @@
-link: nian_unfettered_freedom
-type: skin
 date: 2021/02
-title: 'Arknights: Unfettered Freedom / Nian - 明日方舟：乐逍遥·年'
 filename: dyn_illust_char_2014_nian_nian#4
 logo: logo_sui
 fallback_name: char_2014_nian_nian#4
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(187, 163, 106)
+codename: 
+  zh-CN: 乐逍遥 · 年
+  en-US: Unfettered Freedom / Nian
--- a/config/passager_dream_in_a_moment.yaml
+++ b/config/passager_dream_in_a_moment.yaml
@@ -1,7 +1,4 @@
-link: passager_dream_in_a_moment
-type: skin
 date: 2022/11
-title: 'Arknights: Dream in a Moment / Passager - 明日方舟：今昔须臾之梦 · 异客'
 filename: dyn_illust_char_472_pasngr_epoque#17
 logo: logo_sargon
 fallback_name: char_472_pasngr_epoque#17
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(231, 166, 144)
+codename: 
+  zh-CN: 今昔须臾之梦 · 异客
+  en-US: Dream in a Moment / Passager
--- a/config/phatom_focus.yaml
+++ b/config/phatom_focus.yaml
@@ -1,7 +1,4 @@
-link: phatom_focus
-type: skin
 date: 2022/04
-title: 'Arknights: Focus / Phatom - 明日方舟：焦点·傀影'
 filename: dyn_illust_char_250_phatom_sale#4
 logo: logo_victoria
 fallback_name: char_250_phatom_sale#4
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 5
 viewport_bottom: 1
 invert_filter: true
+color: rgb(158, 2, 2)
+codename: 
+  zh-CN: 焦点 · 傀影
+  en-US: Focus / Phatom
--- a/config/pozemka_snowy_plains_in_words.yaml
+++ b/config/pozemka_snowy_plains_in_words.yaml
@@ -1,7 +1,3 @@
-link: pozemka_snowy_plains_in_words
-date: 2023/02
-type: skin
-title: 'Arknights: Snowy Plains in Words / Позёмка - 明日方舟：字句中的雪原 · 鸿雪'
 filename: dyn_illust_char_4055_bgsnow_wild#7
 logo: logo_rhodes_override
 fallback_name: char_4055_bgsnow_wild#7
@@ -10,3 +6,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: false
+color: rgb(145, 220, 253)
+codename: 
+  zh-CN: 字句中的雪原 · 鸿雪
+  en-US: Snowy Plains in Words / Позёмка
--- a/config/rosmontis.yaml
+++ b/config/rosmontis.yaml
@@ -1,7 +1,4 @@
-link: rosmontis
-type: operator
 date: 2020/11
-title: 'Arknights: Rosmontis - 明日方舟：迷迭香'
 filename: dyn_illust_char_391_rosmon
 logo: logo_elite
 fallback_name: char_391_rosmon_2
@@ -10,3 +7,7 @@ viewport_right: -14
 viewport_top: -38
 viewport_bottom: -1
 invert_filter: true
+color: rgb(23, 210, 236)
+codename: 
+  zh-CN: 迷迭香
+  en-US: Rosmontis
--- a/config/rosmontis_become_anew.yaml
+++ b/config/rosmontis_become_anew.yaml
@@ -1,7 +1,4 @@
-link: rosmontis_become_anew
-type: skin
 date: 2022/11
-title: 'Arknights: Become Anew / Rosmontis - 明日方舟：拥抱新生·迷迭香'
 filename: dyn_illust_char_391_rosmon_epoque#17
 logo: logo_elite
 fallback_name: char_391_rosmon_epoque#17
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgb(116, 177, 222)
+codename: 
+  zh-CN: 拥抱新生 · 迷迭香
+  en-US: Become Anew / Rosmontis
--- a/config/skadi.yaml
+++ b/config/skadi.yaml
@@ -1,7 +1,4 @@
-link: skadi
-type: operator
 date: 2021/05
-title: 'Arknights: Skadi the Corrupting Heart - 明日方舟：浊心斯卡蒂'
 filename: dyn_illust_char_1012_skadi2
 logo: logo_egir
 fallback_name: char_1012_skadi2_2
@@ -10,3 +7,7 @@ viewport_right: -10
 viewport_top: 0
 viewport_bottom: -12
 invert_filter: true
+color: rgb(226, 96, 96)
+codename: 
+  zh-CN: 浊心斯卡蒂
+  en-US: Skadi the Corrupting Heart
--- a/config/skadi_sublimation.yaml
+++ b/config/skadi_sublimation.yaml
@@ -1,7 +1,4 @@
-link: skadi_sublimation
-type: skin
 date: 2022/05
-title: 'Arknights: Sublimation / Skadi the Corrupting Heart - 明日方舟：升华·浊心斯卡蒂'
 filename: dyn_illust_char_1012_skadi2_boc#4
 logo: logo_egir
 fallback_name: char_1012_skadi2_boc#4
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgba(95, 116, 187, 0.74)
+codename: 
+  zh-CN: 升华 · 浊心斯卡蒂
+  en-US: Sublimation / Skadi the Corrupting Heart
--- a/config/specter.yaml
+++ b/config/specter.yaml
@@ -1,7 +1,4 @@
-link: specter
-type: operator
 date: 2022/05
-title: 'Arknights: Specter the Unchained - 明日方舟：归溟幽灵鲨'
 filename: dyn_illust_char_1023_ghost2
 logo: logo_abyssal
 fallback_name: char_1023_ghost2_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgba(14, 124, 203, 0.86)
+codename: 
+  zh-CN: 归溟幽灵鲨
+  en-US: Specter the Unchained
--- a/config/surtr_colorful_wonderland.yaml
+++ b/config/surtr_colorful_wonderland.yaml
@@ -1,7 +1,4 @@
-link: surtr_colorful_wonderland
-type: skin
 date: 2022/08
-title: 'Arknights: Colorful Wonderland CW03 / Surtr - 明日方舟：缤纷奇境 CW03·史尔特尔'
 filename: dyn_illust_char_350_surtr_summer#9
 logo: logo_rhodes_override
 fallback_name: char_350_surtr_summer#9
@@ -10,3 +7,7 @@ viewport_right: 6
 viewport_top: 1
 viewport_bottom: 0
 invert_filter: false
+color: rgb(177, 226, 249)
+codename: 
+  zh-CN: 缤纷奇境 CW03 · 史尔特尔
+  en-US: Colorful Wonderland CW03 / Surtr
--- a/config/texas_the_omertosa.yaml
+++ b/config/texas_the_omertosa.yaml
@@ -1,7 +1,4 @@
-link: texas_the_omertosa
-type: operator
 date: 2022/11
-title: 'Arknights: Texas the Omertosa - 明日方舟：缄默德克萨斯'
 filename: dyn_illust_char_1028_texas2
 logo: logo_penguin
 fallback_name: char_1028_texas2_2
@@ -10,3 +7,7 @@ viewport_right: 0
 viewport_top: 0
 viewport_bottom: 0
 invert_filter: true
+color: rgba(34, 37, 255, 0.9)
+codename: 
+  zh-CN: 缄默德克萨斯
+  en-US: Texas the Omertosa
--- a/config/w.yaml
+++ b/config/w.yaml
@@ -1,7 +1,4 @@
-link: w
-type: operator
 date: 2020/05
-title: 'Arknights: W - 明日方舟: W'
 filename: dyn_illust_char_113_cqbw
 logo: logo_babel
 fallback_name: char_113_cqbw_2
@@ -10,3 +7,7 @@ viewport_right: -3
 viewport_top: 0
 viewport_bottom: 1
 invert_filter: true
+color: rgb(228, 54, 56)
+codename: 
+  zh-CN: W
+  en-US: W
--- a/config/w_fugue.yaml
+++ b/config/w_fugue.yaml
@@ -1,7 +1,5 @@
-link: w_fugue
-type: skin
+# TODO: name updated?
 date: 2020/11
-title: 'Arknights: Fugue / W - 明日方舟：恍惚·W'
 filename: dyn_illust_char_113_cqbw_epoque#7
 logo: logo_babel
 fallback_name: char_113_cqbw_epoque#7
@@ -10,3 +8,7 @@ viewport_right: 0
 viewport_top: 1
 viewport_bottom: -4
 invert_filter: true
+color: rgba(0, 0, 0, 0.83)
+codename: 
+  zh-CN: 恍惚 · W
+  en-US: Wonder
--- a/directory/index.html
+++ b/directory/index.html
@@ -4,6 +4,8 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>aklive2d directory</title>
+    <script async defer data-website-id="05ee2d3d-66e0-429b-89ba-db112743a8c2" src="https://insights.halyul.dev/insights.js"
+      data-do-not-track="true" data-auto-track="false"></script>
  </head>
  <body>
    <div id="root"></div>
--- a/libs/append.js
+++ b/libs/append.js
@@ -5,7 +5,7 @@ export function appendReadme(operatorName) {
    const operatorConfig = __config.operators[operatorName]
    const projectJson = JSON.parse(readSync(path.join(__projetRoot, __config.folder.operator, operatorName, 'project.json')))
    appendSync(
-        `\n| ${operatorConfig.title.split(' - ')[0].split('Arknights: ')[1]} | [Link](https://arknights.halyul.dev/${operatorConfig.link}/?settings) | [Link](https://steamcommunity.com/sharedfiles/filedetails/?id=${projectJson.workshopid}) |`,
+        `\n| ${operatorConfig.codename["en-US"]} | [Link](https://arknights.halyul.dev/${operatorConfig.link}/?settings) | [Link](https://steamcommunity.com/sharedfiles/filedetails/?id=${projectJson.workshopid}) |`,
        path.join(__projetRoot, 'README.md')
    )
 }
--- a/libs/config.js
+++ b/libs/config.js
@@ -2,5 +2,19 @@ import path from 'path'
 import { read } from './yaml.js'

 export default function () {
-    return read(path.join(__projetRoot, 'config.yaml'))
+    return process(read(path.join(__projetRoot, 'config.yaml')))
+}
+
+function process(config) {
+    for (const [operatorName, operator] of Object.entries(config.operators)) {
+        // add title
+        operator.title = `${config.share.title["en-US"]}${operator.codename["en-US"]} - ${config.share.title["zh-CN"]}${operator.codename["zh-CN"]}`
+        // add type
+        operator.type = operator.codename["zh-CN"].includes('·') ? 'operator' : 'skin'
+
+        // add link
+        operator.link = operatorName
+    }
+
+    return config
 }
--- a/libs/content_processor.js
+++ b/libs/content_processor.js
@@ -1,6 +1,3 @@
-import path from 'path'
-import { readSync } from "./file.js"
-
 export default class Matcher {
  #start
  #end
@@ -57,9 +54,9 @@ class Evalable {

  #step(location, varName) {
    let content = this.#config
+    if (location === 'assets') content = this.#assets
    varName.split("->").forEach((item) => {
      try {
-        if (location === 'assets') content = this.#assets
        content = content[item]
      } catch (e) {
        throw new Error(`Cannot step ${varName}.`)
--- a/libs/env_generator.js
+++ b/libs/env_generator.js
@@ -1,31 +1,8 @@
 export default class EnvGenerator {
-  #assets
-  #operatorConfig
-
-  constructor(operatorName, assets) {
-    this.#operatorConfig = __config.operators[operatorName]
-    this.#assets = assets
-  }
-
-  generate() {
-    return [
-      `VITE_LINK="${this.#operatorConfig.link}"`,
-      `VITE_VERSION=${__config.version}`,
-      `VITE_TITLE="${this.#operatorConfig.title}"`,
-      `VITE_FILENAME=${this.#operatorConfig.filename.replace('#', '%23')}`,
-      `VITE_LOGO_FILENAME=${this.#operatorConfig.logo}`,
-      `VITE_FALLBACK_FILENAME=${this.#operatorConfig.fallback_name.replace('#', '%23')}`,
-      `VITE_VIEWPORT_LEFT=${this.#operatorConfig.viewport_left}`,
-      `VITE_VIEWPORT_RIGHT=${this.#operatorConfig.viewport_right}`,
-      `VITE_VIEWPORT_TOP=${this.#operatorConfig.viewport_top}`,
-      `VITE_VIEWPORT_BOTTOM=${this.#operatorConfig.viewport_bottom}`,
-      `VITE_INVERT_FILTER=${this.#operatorConfig.invert_filter}`,
-      `VITE_IMAGE_WIDTH=2048`,
-      `VITE_IMAGE_HEIGHT=2048`,
-      `VITE_BACKGROUND_FILES=${JSON.stringify(this.#assets.backgrounds)}`,
-      `VITE_BACKGROUND_FOLDER=${__config.folder.background}`,
-      `VITE_VOICE_FOLDERS=${JSON.stringify(__config.folder.voice)}`,
-    ].join('\n')
+  generate(values) {
+    return values.map((value) => {
+      return `VITE_${value.key.toUpperCase()}=${value.value}`
+    }).join('\n')
  }

 }
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "vite": "^4.1.4"
  },
  "dependencies": {
+    "@parcellab/react-use-umami": "^2.0.1",
    "dotenv": "^16.0.3",
    "node-fetch": "^3.3.0",
    "react": "^18.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,7 @@
 lockfileVersion: 5.4

 specifiers:
+  '@parcellab/react-use-umami': ^2.0.1
  '@types/react': ^18.0.28
  '@types/react-dom': ^18.0.11
  '@vitejs/plugin-react-swc': ^3.2.0
@@ -16,6 +17,7 @@ specifiers:
  yaml: ^2.2.1

 dependencies:
+  '@parcellab/react-use-umami': 2.0.1_react@18.2.0
  dotenv: 16.0.3
  node-fetch: 3.3.0
  react: 18.2.0
@@ -232,6 +234,14 @@ packages:
    dev: true
    optional: true

+  /@parcellab/react-use-umami/2.0.1_react@18.2.0:
+    resolution: {integrity: sha512-C/EdfRm7OyFVmMhrrSITZ79VXLreNZEJnAdpmJ9NaTcy+Wijjf0+wHF8JA5ex+J5/Owv7gVBIj6i/+Kv04nlKA==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
  /@remix-run/router/1.3.2:
    resolution: {integrity: sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==}
    engines: {node: '>=14'}