feat(theme): remove $themeColorPicker in config.scss

vuepress-theme-hope · Feb 15, 2022 · 50f841e · 50f841e
1 parent 0a49566
commit 50f841e
Show file tree

Hide file tree

Showing 13 changed files with 121 additions and 82 deletions.
diff --git a/packages/theme/src/client/composables/themeData.ts b/packages/theme/src/client/composables/themeData.ts
@@ -26,7 +26,7 @@ export const useThemeAuthor = (): ComputedRef<AuthorInfo[]> => {
 };
 
 export const useIconPrefix = (): ComputedRef<string> =>
-  computed(() => useThemeData().value.iconPrefix || "");
+  computed(() => useThemeData().value.iconPrefix);
 
 export const usePure = (): ComputedRef<boolean> =>
-  computed(() => Boolean(useThemeData().value.pure || false));
+  computed(() => Boolean(useThemeData().value.pure));
diff --git a/packages/theme/src/client/module/outlook/components/OutlookSettings.ts b/packages/theme/src/client/module/outlook/components/OutlookSettings.ts
@@ -27,13 +27,11 @@ export default defineComponent({
         themeData.value.darkmode !== "force-dark"
     );
 
-    const enableThemeColor = computed(
-      () => themeData.value.themeColor !== false
+    const enableThemeColor = computed(() =>
+      Boolean(themeData.value.themeColor)
     );
 
-    const enableFullScreen = computed(
-      () => themeData.value.fullScreen !== false
-    );
+    const enableFullScreen = computed(() => themeData.value.fullScreen);
 
     return (): VNode =>
       h(ClientOnly, () => [

diff --git a/packages/theme/src/client/module/outlook/components/ThemeColorPicker.ts b/packages/theme/src/client/module/outlook/components/ThemeColorPicker.ts
@@ -5,14 +5,6 @@ import type { VNode } from "vue";
 
 import "../styles/theme-color-picker.scss";
 
-const DEFAULT_THEME_COLOR_CONFIG: Record<string, string> = {
-  red: "#e74c3c",
-  blue: "#3498db",
-  green: "#3eaf7c",
-  orange: "#f39c12",
-  purple: "#8e44ad",
-};
-
 export default defineComponent({
   name: "ThemeColorPicker",
 
@@ -23,7 +15,7 @@ export default defineComponent({
     const locale = computed(() => themeLocale.value.outlookLocales.themeColor);
 
     const themeColor = computed(() => {
-      const { themeColor = DEFAULT_THEME_COLOR_CONFIG } = themeData.value;
+      const { themeColor } = themeData.value;
 
       return themeColor === false ? null : themeColor;
     });

diff --git a/packages/theme/src/client/module/outlook/styles/theme-color-picker.scss b/packages/theme/src/client/module/outlook/styles/theme-color-picker.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "@temp/theme-hope/theme-color";
 
 .themecolor-title {
   display: block;
@@ -39,7 +40,7 @@
   }
 }
 
-@each $colorName, $value in hope-config.$themeColorPicker {
+@each $colorName, $value in theme-color.$themeColorPicker {
   :root.theme-#{$colorName} {
     --theme-color: #{$value};
     --theme-color-light: #{color.scale($value, $lightness: 10%)};

diff --git a/packages/theme/src/node/bundler.ts b/packages/theme/src/node/bundler.ts
@@ -0,0 +1,25 @@
+import { addViteOptimizeDeps } from "@mr-hope/vuepress-shared";
+import { handleWebpackOptions } from "./encrypt";
+
+import { App } from "@vuepress/core";
+
+export const updateBundlerOptions = (app: App): void => {
+  addViteOptimizeDeps(app, [
+    "@vueuse/core",
+    "bcryptjs",
+    "body-scroll-lock",
+    "lodash.throttle",
+  ]);
+
+  if (app.env.isDev)
+    addViteOptimizeDeps(app, [
+      "@mr-hope/vuepress-shared/lib/client",
+      "dayjs",
+      "dayjs/plugin/localizedFormat",
+      "dayjs/plugin/objectSupport",
+      "dayjs/plugin/timezone",
+      "dayjs/plugin/utc",
+    ]);
+
+  handleWebpackOptions(app);
+};
diff --git a/packages/theme/src/node/handleThemeData.ts b/packages/theme/src/node/handleThemeData.ts
@@ -32,6 +32,19 @@ const defaultRootOptions: HopeThemeOptions = {
   sidebar: "auto",
   sidebarIcon: true,
   headingDepth: 2,
+
+  // appearance
+  pure: false,
+  iconPrefix: "",
+  darkmode: "auto-switch",
+  themeColor: {
+    red: "#e74c3c",
+    blue: "#3498db",
+    green: "#3eaf7c",
+    orange: "#f39c12",
+    purple: "#8e44ad",
+  },
+  fullScreen: true,
 };
 
 /**

diff --git a/packages/theme/src/node/plugins/index.ts b/packages/theme/src/node/plugins/index.ts
@@ -1 +1,2 @@
 export * from "./getConfig";
+export * from "./use";
diff --git a/packages/theme/src/node/plugins/use.ts b/packages/theme/src/node/plugins/use.ts
@@ -0,0 +1,31 @@
+import { useGitPlugin } from "@mr-hope/vuepress-shared";
+import { path } from "@vuepress/utils";
+import { useReadingTimePlugin } from "vuepress-plugin-reading-time2";
+import { useSassPalettePlugin } from "vuepress-plugin-sass-palette";
+
+import type { App } from "@vuepress/core";
+import type { HopeThemePluginsOptions } from "../../shared";
+
+export const usePlugin = (app: App, plugins: HopeThemePluginsOptions): void => {
+  // only use git plugin in production or debug mode
+  if (app.env.isDebug || app.env.isBuild)
+    useGitPlugin(app, {
+      createdTime: true,
+      contributors: true,
+      updatedTime: true,
+    });
+
+  useReadingTimePlugin(app, {
+    wordPerminute: plugins.readingTime?.wordPerminute,
+  });
+
+  useSassPalettePlugin(app, {
+    id: "hope",
+    config: ".vuepress/styles/config.scss",
+    defaultConfig: path.resolve(__dirname, "../../../templates/config.scss"),
+    defaultPalette: path.resolve(__dirname, "../../../templates/palette.scss"),
+    generator: path.resolve(__dirname, "../../../templates/generator.scss"),
+    palette: ".vuepress/styles/palette.scss",
+    style: ".vuepress/styles/index.scss",
+  });
+};
diff --git a/packages/theme/src/node/theme.ts b/packages/theme/src/node/theme.ts
@@ -1,14 +1,12 @@
-import { addViteOptimizeDeps, useGitPlugin } from "@mr-hope/vuepress-shared";
 import { path } from "@vuepress/utils";
-import { useReadingTimePlugin } from "vuepress-plugin-reading-time2";
-import { useSassPalettePlugin } from "vuepress-plugin-sass-palette";
 
 import { getAlias } from "./alias";
+import { updateBundlerOptions } from "./bundler";
 import { handleThemeData } from "./handleThemeData";
-import { handleWebpackOptions } from "./encrypt";
 import { extendsPage } from "./extends";
 import { getLayoutConfig } from "./layout";
-import { getPluginConfig } from "./plugins";
+import { getPluginConfig, usePlugin } from "./plugins";
+import { writeThemeColorScss } from "./themeColor";
 
 import type { Page, Theme } from "@vuepress/core";
 import type {
@@ -21,47 +19,9 @@ export const themeHope: Theme<HopeThemeOptions> = (
   { plugins = {}, ...themeOptions },
   app
 ) => {
-  addViteOptimizeDeps(app, [
-    "@vueuse/core",
-    "bcryptjs",
-    "body-scroll-lock",
-    "lodash.throttle",
-  ]);
-
-  if (app.env.isDev)
-    addViteOptimizeDeps(app, [
-      "@mr-hope/vuepress-shared/lib/client",
-      "dayjs",
-      "dayjs/plugin/localizedFormat",
-      "dayjs/plugin/objectSupport",
-      "dayjs/plugin/timezone",
-      "dayjs/plugin/utc",
-    ]);
-
+  updateBundlerOptions(app);
   handleThemeData(app, themeOptions);
-  handleWebpackOptions(app);
-
-  // only use git plugin in production or debug mode
-  if (app.env.isDebug || app.env.isBuild)
-    useGitPlugin(app, {
-      createdTime: true,
-      contributors: true,
-      updatedTime: true,
-    });
-
-  useReadingTimePlugin(app, {
-    wordPerminute: plugins.readingTime?.wordPerminute,
-  });
-
-  useSassPalettePlugin(app, {
-    id: "hope",
-    config: ".vuepress/styles/config.scss",
-    defaultConfig: path.resolve(__dirname, "../../templates/config.scss"),
-    defaultPalette: path.resolve(__dirname, "../../templates/palette.scss"),
-    generator: path.resolve(__dirname, "../../templates/generator.scss"),
-    palette: ".vuepress/styles/palette.scss",
-    style: ".vuepress/styles/index.scss",
-  });
+  usePlugin(app, plugins);
 
   return {
     name: "vuepress-theme-hope",
@@ -72,6 +32,19 @@ export const themeHope: Theme<HopeThemeOptions> = (
       ENABLE_BLOG: Boolean(plugins.blog),
     }),
 
+    extendsPage: (page) =>
+      extendsPage(
+        app,
+        themeOptions as HopeThemeConfig,
+        page as Page<HopeThemePageData>
+      ),
+
+    async onPrepared(): Promise<void> {
+      await writeThemeColorScss(app, themeOptions as HopeThemeConfig);
+    },
+
+    plugins: getPluginConfig(app, plugins, themeOptions as HopeThemeConfig),
+
     layouts: getLayoutConfig(app, plugins),
 
     templateBuild: path.resolve(__dirname, "../../templates/index.build.html"),
@@ -90,14 +63,5 @@ export const themeHope: Theme<HopeThemeOptions> = (
       path.resolve(__dirname, "../client/module/outlook/appSetup.js"),
       path.resolve(__dirname, "../client/module/sidebar/appSetup.js"),
     ],
-
-    extendsPage: (page) =>
-      extendsPage(
-        app,
-        themeOptions as HopeThemeConfig,
-        page as Page<HopeThemePageData>
-      ),
-
-    plugins: getPluginConfig(app, plugins, themeOptions as HopeThemeConfig),
   };
 };
diff --git a/packages/theme/src/node/themeColor.ts b/packages/theme/src/node/themeColor.ts
@@ -0,0 +1,18 @@
+import { App } from "@vuepress/core";
+import { HopeThemeConfig } from "../shared";
+
+export const writeThemeColorScss = async (
+  app: App,
+  themeConfig: HopeThemeConfig
+): Promise<void> => {
+  const themeColorOptions = themeConfig.themeColor || {};
+
+  let content = "$themeColorPicker: (";
+
+  for (const color in themeColorOptions)
+    content += `"${color}": ${themeColorOptions[color]},`;
+
+  content += ");";
+
+  await app.writeTemp("theme-hope/theme-color.scss", content);
+};
diff --git a/packages/theme/src/shared/options/appearance.ts b/packages/theme/src/shared/options/appearance.ts
@@ -97,3 +97,5 @@ export interface HopeThemeAppearanceOptions {
    */
   fullScreen?: boolean;
 }
+
+export type HopeThemeAppearanceConfig = Required<HopeThemeAppearanceOptions>;
diff --git a/packages/theme/src/shared/options/options.ts b/packages/theme/src/shared/options/options.ts
@@ -1,6 +1,9 @@
 import type { Author } from "@mr-hope/vuepress-shared";
 import type { ThemeData } from "@vuepress/plugin-theme-data";
-import type { HopeThemeAppearanceOptions } from "./appearance";
+import type {
+  HopeThemeAppearanceConfig,
+  HopeThemeAppearanceOptions,
+} from "./appearance";
 import type {
   HopeThemeFeatureConfig,
   HopeThemeFeatureOptions,
@@ -29,7 +32,7 @@ export interface HopeThemeRootOptions
 }
 
 export interface HopeThemeRootConfig
-  extends HopeThemeAppearanceOptions,
+  extends HopeThemeAppearanceConfig,
     HopeThemeFeatureConfig,
     HopeThemeLayoutOptions {
   /**

diff --git a/packages/theme/templates/config.scss b/packages/theme/templates/config.scss
@@ -28,12 +28,3 @@ $lightSelector: 'html[data-theme="light"]' !default;
 /* Color list */
 $colors: #cf1322, #fa541c, #f39c12, #2ecc71, #25a55b, #13c2c2, #096dd9, #aa6fe9,
   #eb2f96 !default;
-
-/* theme-color */
-$themeColorPicker: (
-  "red": #e74c3c,
-  "blue": #3498db,
-  "green": #3eaf7c,
-  "orange": #f39c12,
-  "purple": #8e44ad,
-) !default;