chore: tweaks

Author: Mister-Hope

src/.vuepress/components/HopeLogo.ts

@@ -1,28 +1,29 @@
 import { usePageFrontmatter, withBase } from "@vuepress/client";
-import { type Mesh, type default as Three } from "three";
-import { type OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { type STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
-import {
-  type VNode,
-  computed,
-  defineComponent,
-  h,
-  onMounted,
-  ref,
-  watch,
-} from "vue";
-import { type ThemeProjectHomePageFrontmatter } from "vuepress-theme-hope";
+// eslint-disable-next-line
+import type * as Three from "three";
+// eslint-disable-next-line
+import type { Mesh } from "three";
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import type { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+import type { VNode } from "vue";
+import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
+import type { ThemeProjectHomePageFrontmatter } from "vuepress-theme-hope";
 
 // @ts-ignore
 import { useWindowSize } from "@theme-hope/composables/index";
+// @ts-ignore
+import { useDarkmode } from "@theme-hope/modules/outlook/composables/index";
 
 import "./hope-logo.scss";
 
+const BASE = "https://theme-hope-assets.vuejs.press/model/";
+
 export default defineComponent({
   name: "HopeLogo",
 
   setup() {
     const frontmatter = usePageFrontmatter<ThemeProjectHomePageFrontmatter>();
+    const { isDarkmode } = useDarkmode();
     const { isMobile } = useWindowSize();
 
     const ready = ref(false);
@@ -45,15 +46,16 @@ export default defineComponent({
       const scene = new three.Scene();
       const stlLoader = new STLLoaderConstructor();
       const textureLoader = new three.TextureLoader();
-      const roughnessTexture = textureLoader.load(
-        withBase("/assets/model/roughness.jpeg")
-      );
+      const roughnessTexture = textureLoader.load(BASE + "roughness.jpeg");
       // Models
       let logo1: Mesh;
       let logo2: Mesh;
 
       // Lights
-      const ambientLight = new three.AmbientLight(0xffffff, 2);
+      const ambientLight = new three.AmbientLight(
+        0xffffff,
+        isDarkmode.value ? 3 : 4
+      );
       const directionalLight = new three.DirectionalLight(0xffffff, 3);
       const directionalLight2 = new three.DirectionalLight(0xffffff, 3);
 
@@ -117,10 +119,10 @@ export default defineComponent({
 
       await Promise.all([
         new Promise<void>((resolve) =>
-          stlLoader.load(withBase("/assets/model/logo1.stl"), (geometry) => {
+          stlLoader.load(BASE + "logo1.stl", (geometry) => {
             const material = new three.MeshPhysicalMaterial({
               color: 0x284c39,
-              metalness: 0.45,
+              metalness: 0.3,
               roughness: 0.5,
               roughnessMap: roughnessTexture,
               displacementScale: 0.15,
@@ -140,7 +142,7 @@ export default defineComponent({
           })
         ),
         new Promise<void>((resolve) =>
-          stlLoader.load(withBase("/assets/model/logo2.stl"), (geometry) => {
+          stlLoader.load(BASE + "logo2.stl", (geometry) => {
             const material = new three.MeshPhysicalMaterial({
               color: 0x35495e,
               metalness: 0.7,
@@ -169,25 +171,26 @@ export default defineComponent({
 
     onMounted(() =>
       Promise.all([
-        import(/* webpackChunkName: "hope-logo" */ "three").then(
-          (m) => m.default || m
-        ),
+        import(/* webpackChunkName: "hope-logo" */ "three").then((m) => m),
         import(
           /* webpackChunkName: "hope-logo" */ "three/examples/jsm/controls/OrbitControls.js"
-        ).then((m) => m.default || m),
+        ).then((m) => m),
         import(
           /* webpackChunkName: "hope-logo" */ "three/examples/jsm/loaders/STLLoader.js"
-        ).then((m) => m.default || m),
+        ).then((m) => m),
       ]).then(([THREE, { OrbitControls }, { STLLoader }]) => {
         void renderLogo(THREE, STLLoader, OrbitControls);
 
-        watch(isMobile, () => renderLogo(THREE, STLLoader, OrbitControls));
+        watch([isDarkmode, isMobile], () =>
+          renderLogo(THREE, STLLoader, OrbitControls)
+        );
       })
     );
 
     return (): (VNode | null)[] => [
       !ready.value
         ? h("img", {
+            class: "vp-hero-image",
             src: withBase(frontmatter.value.heroImage!),
             alt: "vuepress-theme-hope",
           })

src/.vuepress/components/HopeNotFoundHint.ts

@@ -1,4 +1,5 @@
-import { type VNode, defineComponent, h } from "vue";
+import type { VNode } from "vue";
+import { defineComponent, h } from "vue";
 
 // @ts-ignore
 import { useThemeLocaleData } from "@theme-hope/composables/index";