Optimize settings form and remove deprecated options (#256)

* Optimize settings form and remove deprecated options

* Update required version to 2.22.0 in theme.yaml

The minimum required version for this theme has been updated from 2.20.0 to 2.22.0 to ensure compatibility with newer dependencies or features.

* Update icon rendering to use icon.value property

package.json

@@ -1,55 +1,43 @@
 {
-  "name": "@halo-dev/theme-earth",
   "private": true,
-  "version": "1.2.1",
-  "description": "Default theme for Halo 2.0",
-  "scripts": {
-    "dev": "vite build --watch",
-    "build-only": "tsc && vite build",
-    "build": "pnpm run build-only && pnpm package",
-    "lint": "eslint ./src --ext .js,.cjs,.mjs,.ts,.cts,.mts --ignore-path .gitignore",
-    "prettier": "prettier --write \"./src/**/*.{js,ts,css,json,ml,yaml,html}\" \"./templates/**/*.html\"",
-    "release": "release-it",
-    "prepare": "husky",
-    "package": "npx @halo-dev/theme-package-cli"
-  },
-  "keywords": [
-    "halo",
-    "halo-theme",
-    "halo-template"
-  ],
-  "homepage": "https://github.com/halo-dev/theme-earth#readme",
-  "bugs": {
-    "url": "https://github.com/halo-dev/theme-earth/issues"
-  },
   "author": {
-    "name": "Halo OSS Organization",
-    "url": "https://github.com/halo-dev",
-    "email": "hi@halo.run"
+    "name": "Halo",
+    "email": "hi@halo.run",
+    "url": "https://github.com/halo-dev"
   },
   "maintainers": [
     {
       "name": "Ryan Wang",
-      "url": "https://github.com/ruibaby",
-      "email": "i@ryanc.cc"
+      "email": "i@ryanc.cc",
+      "url": "https://github.com/ruibaby"
     }
   ],
-  "license": "GPL-3.0",
-  "repository": {
-    "url": "https://github.com/halo-dev/theme-earth",
-    "type": "git"
+  "scripts": {
+    "build": "pnpm run build-only && pnpm package",
+    "build-only": "tsc && vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint ./src --ext .js,.cjs,.mjs,.ts,.cts,.mts --ignore-path .gitignore",
+    "package": "npx @halo-dev/theme-package-cli",
+    "prepare": "husky",
+    "prettier": "prettier --write \"./src/**/*.{js,ts,css,json,ml,yaml,html}\" \"./templates/**/*.html\""
   },
   "lint-staged": {
     "*.{ts,json,yaml,yml,html}": [
       "prettier --write"
     ]
   },
+  "dependencies": {
+    "@halo-dev/api-client": "^2.20.0",
+    "alpinejs": "^3.14.3",
+    "pupa": "^3.1.0",
+    "tocbot": "^4.32.2"
+  },
   "devDependencies": {
     "@iconify/json": "^2.2.272",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/typography": "^0.5.15",
     "@types/alpinejs": "^3.13.10",
-    "@types/node": "18.11.9",
+    "@types/node": "22.19.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.4.20",
@@ -58,21 +46,14 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
-    "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "release-it": "^15.11.0",
-    "sass-embedded": "^1.81.0",
-    "tailwindcss": "^3.4.15",
+    "postcss": "^8.5.6",
+    "prettier": "^3.7.4",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "sass-embedded": "^1.96.0",
+    "tailwindcss": "^3.4.19",
     "tailwindcss-plugin-icons": "^2.2.2",
     "typescript": "^5.6.3",
-    "vite": "^5.4.11"
-  },
-  "dependencies": {
-    "@halo-dev/api-client": "^2.20.0",
-    "alpinejs": "^3.14.3",
-    "pupa": "^3.1.0",
-    "tocbot": "^4.32.2"
+    "vite": "^8.0.0-beta.2"
   },
   "packageManager": "pnpm@10.6.3+sha512.bb45e34d50a9a76e858a95837301bfb6bd6d35aea2c5d52094fa497a467c43f5c440103ce2511e9e0a2f89c3d6071baac3358fc68ac6fb75e2ceb3d2736065e6",
   "pnpm": {

settings.yaml

@@ -179,66 +179,24 @@ spec:
               value: douban
             - label: 系统分享
               value: native
-        - $formkit: checkbox
-          name: show_deprecated_items
-          key: show_deprecated_items
-          id: show_deprecated_items
-          label: 显示已过时选项
-          value: false
-          help: 这些选项将在未来的版本移除，请尽快使用替代方案
-        - $formkit: repeater
-          if: $get(show_deprecated_items).value
-          name: share_items
-          key: share_items
-          id: share_items
-          label: 分享按钮
-          help: 此选项已过时，请使用上方新提供的分享平台设置项
-          value:
-            - id: wechat
-            - id: x
-            - id: telegram
-            - id: facebook
-            - id: qq
-            - id: qzone
-            - id: weibo
-            - id: douban
-            - id: native
-          children:
-            - $formkit: select
-              name: id
-              label: 分享平台
-              options:
-                - label: 微信
-                  value: wechat
-                - label: X
-                  value: x
-                - label: Telegram
-                  value: telegram
-                - label: Facebook
-                  value: facebook
-                - label: QQ
-                  value: qq
-                - label: QQ 空间
-                  value: qzone
-                - label: 微博
-                  value: weibo
-                - label: 豆瓣
-                  value: douban
-                - label: 系统分享
-                  value: native
     - group: sidebar
       label: 侧边栏
       formSchema:
-        - $formkit: repeater
+        - $formkit: array
           name: widgets
           label: 小部件
           value:
             - value: popular-posts
             - value: categories
             - value: tags
+          itemLabels:
+            - type: "text"
+              label: "$value.value"
           children:
             - $formkit: select
               name: value
+              id: value
+              key: value
               label: 部件
               options:
                 - label: 站点资料
@@ -249,9 +207,54 @@ spec:
                   value: categories
                 - label: 文章标签
                   value: tags
+            - $formkit: group
+              if: "$value.value === profile"
+              name: options
+              key: profile-options
+              id: profile-options
+              label: 站点资料选项
+              children:
+                - $formkit: attachment
+                  name: logo
+                  label: 站点资料 Logo
+                - $formkit: array
+                  name: social_media
+                  label: 社交媒体
+                  value: []
+                  itemLabels:
+                    - type: "iconify"
+                      label: "$value.icon"
+                    - type: "text"
+                      label: "$value.name"
+                    - type: "text"
+                      label: "$value.url"
+                  children:
+                    - $formkit: iconify
+                      format: svg
+                      name: icon
+                      label: 图标
+                      validation: "required"
+                    - $formkit: text
+                      name: name
+                      label: 名称
+                    - $formkit: text
+                      name: url
+                      label: 链接
+                      validation: "required"
+                    - $formkit: select
+                      name: url_type
+                      label: 链接类型
+                      value: normal
+                      help: "如果选择了图片类型，那么在访客点击之后会使用弹框的形式加载"
+                      options:
+                        - label: 跳转链接
+                          value: normal
+                        - label: 图片
+                          value: image
 
         - $formkit: group
           name: profile
+          help: 已废弃，将在未来的版本移除，请使用上方的站点资料小部件中的配置代替
           value:
             logo:
           children:
@@ -259,10 +262,16 @@ spec:
               name: logo
               label: 站点资料 Logo
 
-        - $formkit: repeater
+        - $formkit: array
           name: social_media
           label: 社交媒体
           value: []
+          help: 已废弃，将在未来的版本移除，请使用上方的站点资料小部件中的配置代替
+          itemLabels:
+            - type: "text"
+              label: "$value.name"
+            - type: "text"
+              label: "$value.url"
           children:
             - $formkit: select
               name: icon
@@ -386,55 +395,23 @@ spec:
             labelField: "spec.displayName"
             valueField: "metadata.name"
 
-        - $formkit: repeater
+        - $formkit: array
           name: social_media
           label: 社交媒体
           value: []
+          itemLabels:
+            - type: "iconify"
+              label: "$value.iconify"
+            - type: "text"
+              label: "$value.name"
+            - type: "text"
+              label: "$value.url"
           children:
-            - $formkit: select
-              name: icon
+            - $formkit: iconify
+              name: iconify
               label: 图标
-              options:
-                - label: 电子邮箱
-                  value: i-tabler-mail
-                - label: 微信
-                  value: i-simple-icons-wechat
-                - label: 腾讯 QQ
-                  value: i-simple-icons-tencentqq
-                - label: 新浪微博
-                  value: i-simple-icons-sinaweibo
-                - label: 知乎
-                  value: i-simple-icons-zhihu
-                - label: 豆瓣
-                  value: i-simple-icons-douban
-                - label: 哔哩哔哩
-                  value: i-simple-icons-bilibili
-                - label: 抖音 / TikTok
-                  value: i-simple-icons-tiktok
-                - label: Telegram
-                  value: i-simple-icons-telegram
-                - label: Facebook
-                  value: i-simple-icons-facebook
-                - label: Instagram
-                  value: i-simple-icons-instagram
-                - label: LinkedIn
-                  value: i-simple-icons-linkedin
-                - label: Twitter
-                  value: i-simple-icons-twitter
-                - label: Slack
-                  value: i-simple-icons-slack
-                - label: Discord
-                  value: i-simple-icons-discord
-                - label: YouTube
-                  value: i-simple-icons-youtube
-                - label: Steam
-                  value: i-simple-icons-steam
-                - label: GitHub
-                  value: i-simple-icons-github
-                - label: GitLab
-                  value: i-simple-icons-gitlab
-                - label: RSS
-                  value: i-simple-icons-rss
+              format: svg
+              validation: "required"
             - $formkit: text
               name: name
               label: 名称
@@ -452,36 +429,51 @@ spec:
                   value: normal
                 - label: 图片
                   value: image
-
-        - $formkit: checkbox
-          name: show_deprecated_items
-          key: show_deprecated_items
-          id: show_deprecated_items
-          label: 显示已过时选项
-          value: false
-          help: 这些选项将在未来的版本移除，请尽快使用替代方案
-
-        - $formkit: menuRadio
-          if: "$get(show_deprecated_items).value"
-          name: menu
-          id: menu
-          key: menu
-          label: 右侧菜单
-          help: 此选项已过时，请使用上方新提供的右侧菜单设置项
-
-        - $formkit: repeater
-          if: "$get(show_deprecated_items).value"
-          name: menus
-          id: menus
-          key: menus
-          label: 菜单组
-          value: []
-          help: 此选项已过时，请使用上方新提供的菜单组设置项
-          children:
-            - $formkit: menuRadio
-              name: name
-              label: 菜单
-              validation: "required"
+            - $formkit: select
+              name: icon
+              label: 图标
+              help: 已废弃，将在未来的版本移除，请使用上方的图标选择器代替
+              options:
+                - label: 电子邮箱（tabler:mail）
+                  value: i-tabler-mail
+                - label: 微信（simple-icons:wechat）
+                  value: i-simple-icons-wechat
+                - label: 腾讯 QQ（simple-icons:tencentqq）
+                  value: i-simple-icons-tencentqq
+                - label: 新浪微博（simple-icons:sinaweibo）
+                  value: i-simple-icons-sinaweibo
+                - label: 知乎（simple-icons:zhihu）
+                  value: i-simple-icons-zhihu
+                - label: 豆瓣（simple-icons:douban）
+                  value: i-simple-icons-douban
+                - label: 哔哩哔哩（simple-icons:bilibili）
+                  value: i-simple-icons-bilibili
+                - label: 抖音 / TikTok（simple-icons:tiktok）
+                  value: i-simple-icons-tiktok
+                - label: Telegram（simple-icons:telegram）
+                  value: i-simple-icons-telegram
+                - label: Facebook（simple-icons:facebook）
+                  value: i-simple-icons-facebook
+                - label: Instagram（simple-icons:instagram）
+                  value: i-simple-icons-instagram
+                - label: LinkedIn（simple-icons:linkedin）
+                  value: i-simple-icons-linkedin
+                - label: Twitter（simple-icons:twitter）
+                  value: i-simple-icons-twitter
+                - label: Slack（simple-icons:slack）
+                  value: i-simple-icons-slack
+                - label: Discord（simple-icons:discord）
+                  value: i-simple-icons-discord
+                - label: YouTube（simple-icons:youtube）
+                  value: i-simple-icons-youtube
+                - label: Steam（simple-icons:steam）
+                  value: i-simple-icons-steam
+                - label: GitHub（simple-icons:github）
+                  value: i-simple-icons-github
+                - label: GitLab（simple-icons:gitlab）
+                  value: i-simple-icons-gitlab
+                - label: RSS（simple-icons:rss）
+                  value: i-simple-icons-rss
     - group: beian
       label: 备案设置
       formSchema:

src/alpine-data/share.ts

@@ -1,6 +1,6 @@
 import pupa from "pupa";
 
-export default (deprecatedShareIds: { id: string }[], shareIds: string[]) => ({
+export default (shareIds: string[]) => ({
   permalink: window.location.href,
   title: document.title,
   shareModal: false,
@@ -69,12 +69,6 @@ export default (deprecatedShareIds: { id: string }[], shareIds: string[]) => ({
       type: "native",
     },
   ],
-  get getShareIds() {
-    if (shareIds?.length) {
-      return shareIds;
-    }
-    return deprecatedShareIds.map((item) => item.id);
-  },
   get activeShareItems() {
     return shareIds
       .map((id) => this.presetShareItems.find((item) => item.id === id))

templates/modules/footer-social.html

@@ -4,17 +4,20 @@
       <a
         th:if="${item.url_type == 'normal'}"
         th:href="${item.url}"
-        class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+        class="text-gray-500 hover:text-gray-900 dark:hover:text-white [&>svg]:size-5"
         th:title="${item.name}"
       >
-        <div th:classappend="${item.icon}" class="size-5"></div>
+        <div th:if="item.iconify == null" th:classappend="${item.icon}" class="size-5"></div>
+        <th:block th:unless="item.iconify == null" th:utext="${item.iconify.value}"></th:block>
       </a>
       <span
         th:if="${item.url_type == 'image'}"
         th:attr="x-data=|{openImageModal:false,image: '${item.url}', alt: '${item.name}'}|"
-        class="cursor-pointer text-gray-500 hover:text-gray-900 dark:hover:text-white"
+        class="cursor-pointer text-gray-500 hover:text-gray-900 dark:hover:text-white [&>svg]:size-5"
+        @click="openImageModal = true"
       >
-        <div th:classappend="${item.icon}" class="size-5" @click="openImageModal = true"></div>
+        <div th:if="item.iconify == null" th:classappend="${item.icon}" class="size-5"></div>
+        <th:block th:unless="item.iconify == null" th:utext="${item.iconify.value}"></th:block>
         <th:block th:replace="~{modules/image-view-modal}" />
       </span>
     </th:block>

templates/modules/footer.html

@@ -13,11 +13,9 @@
       >
       </span>
     </a>
-    <th:block
-      th:unless="${#strings.isEmpty(theme.config.footer.right_menu)} and ${#strings.isEmpty(theme.config.footer.menu)}"
-    >
+    <th:block th:unless="${#strings.isEmpty(theme.config.footer.right_menu)}">
       <ul
-        th:with="menu = ${menuFinder.getByName(theme.config.footer.right_menu ?: theme.config.footer.menu)}"
+        th:with="menu = ${menuFinder.getByName(theme.config.footer.right_menu)}"
         class="mb-6 flex flex-wrap items-center justify-center space-x-4 text-sm text-gray-500 dark:text-slate-200 sm:mb-0 sm:justify-start md:space-x-6"
       >
         <li th:each="menuItem : ${menu.menuItems}">
@@ -119,31 +117,6 @@
         </div>
       </th:block>
     </div>
-
-    <!--/*Compatibility solution, will be removed in the future*/-->
-    <div
-      th:if="${#lists.isEmpty(theme.config.footer.menu_names)} and ${not #lists.isEmpty(theme.config.footer.menus)}"
-      class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
-    >
-      <th:block th:each="menuName : ${theme.config.footer.menus}">
-        <div th:with="menu = ${menuFinder.getByName(menuName.name)}">
-          <h2
-            class="mb-6 text-sm font-semibold text-gray-900 dark:text-slate-50"
-            th:text="${menu.spec.displayName}"
-          ></h2>
-          <ul th:with="menuItems = ${menu.menuItems}" class="text-sm text-gray-500 dark:text-slate-200">
-            <li th:each="menuItem : ${menuItems}" class="mb-4">
-              <a
-                th:href="@{${menuItem.status.href}}"
-                class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
-                th:text="${menuItem.status.displayName}"
-                th:target="${menuItem.spec.target?.value}"
-              ></a>
-            </li>
-          </ul>
-        </div>
-      </th:block>
-    </div>
   </div>
   <hr class="my-6 border-gray-200 dark:border-slate-700 sm:mx-auto lg:my-8" />
   <div class="mx-auto flex max-w-7xl flex-col px-4 sm:flex-row sm:items-center sm:justify-between lg:px-6">

templates/modules/sidebar.html

@@ -4,7 +4,9 @@
       <th:block th:replace="${prepend}" />
     </th:block>
     <th:block th:each="widget : ${widgets}">
-      <th:block th:replace="~{'modules/widgets/'+${widget.value}}" />
+      <th:block th:with="options = ${widget.options}">
+        <th:block th:replace="~{'modules/widgets/'+${widget.value}}" />
+      </th:block>
     </th:block>
   </th:block>
 </aside>

templates/modules/widgets/profile.html

@@ -3,9 +3,9 @@
   th:with="stats = ${siteStatsFinder.getStats()}"
 >
   <div class="flex flex-col items-center justify-center gap-4">
-    <div th:if="${not #strings.isEmpty(theme.config.sidebar.profile.logo)}" class="relative h-24 w-24">
+    <div th:unless="${#strings.isEmpty(options.logo)}" class="relative size-24">
       <img
-        th:src="${theme.config.sidebar.profile.logo}"
+        th:src="${options.logo}"
         th:alt="${site.title}"
         width="96"
         height="96"
@@ -13,7 +13,7 @@
       />
     </div>
     <div><h1 class="text-2xl font-medium dark:text-slate-50" th:text="${site.title}"></h1></div>
-    <div th:if="${not #strings.isEmpty(site.subtitle)}">
+    <div th:unless="${#strings.isEmpty(site.subtitle)}">
       <p class="text-center text-sm text-gray-700 dark:text-slate-300" th:text="${site.subtitle}"></p>
     </div>
     <div class="grid grid-cols-4 gap-5">
@@ -54,28 +54,25 @@
         ></span>
       </div>
     </div>
-    <div
-      th:with="social_medias = ${theme.config.sidebar.social_media}"
-      class="flex flex-wrap items-center justify-center gap-5"
-    >
-      <th:block th:each="social_media : ${social_medias}">
+    <div class="flex flex-wrap items-center justify-center gap-4">
+      <th:block th:each="social_media : ${options.social_media}">
         <a
           th:if="${social_media.url_type == 'normal'}"
           th:aria-label="${social_media.name}"
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100 dark:hover:bg-slate-700"
+          class="inline-flex cursor-pointer items-center justify-center rounded p-1 text-gray-600 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-700 [&>svg]:size-5"
           th:href="${social_media.url}"
           target="_blank"
         >
-          <span class="text-gray-600 dark:text-slate-400" th:classappend="${social_media.icon}"></span>
+          <th:block th:utext="${social_media.icon.value}" />
         </a>
 
         <span
           th:if="${social_media.url_type == 'image'}"
           th:attr="x-data=|{openImageModal:false,image: '${social_media.url}', alt: '${social_media.name}'}|"
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100 dark:hover:bg-slate-700"
+          class="inline-flex cursor-pointer items-center justify-center rounded p-1 text-gray-600 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-700 [&>svg]:size-5"
           @click="openImageModal = true"
         >
-          <div th:classappend="${social_media.icon}" class="text-gray-600 dark:text-slate-400"></div>
+          <th:block th:utext="${social_media.icon.value}" />
           <th:block th:replace="~{modules/image-view-modal}" />
         </span>
       </th:block>

templates/post.html

@@ -130,7 +130,7 @@
 
           <div
             th:if="${theme.config.post.show_share_button}"
-            th:attr="x-data=|share(${theme.config.post.share_items},${theme.config.post.share_item_ids})|"
+            th:attr="x-data=|share(${theme.config.post.share_item_ids})|"
             class="group inline-flex cursor-pointer items-center gap-0.5 rounded-lg"
             @click="shareModal = true"
           >

theme.yaml

@@ -19,7 +19,7 @@ spec:
   settingName: "theme-earth-setting"
   configMapName: "theme-earth-configMap"
   version: 1.13.2
-  requires: ">=2.20.0"
+  requires: ">=2.22.0"
   license:
     - name: "GPL-3.0"
       url: "https://github.com/halo-dev/theme-earth/blob/main/LICENSE"

vite.config.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from "vite";
-import { fileURLToPath } from "url";
-import path from "path";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
 
 export default defineConfig({
-  plugins: [],
+  experimental: {
+    enableNativePlugin: true,
+  },
   build: {
     outDir: fileURLToPath(new URL("./templates/assets/dist", import.meta.url)),
     emptyOutDir: true,
@@ -12,13 +14,7 @@ export default defineConfig({
       name: "main",
       fileName: "main",
       formats: ["iife"],
-    },
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: "modern-compiler",
-      },
+      cssFileName: "style",
     },
   },
 });