fix(theme): fix style issues

vuepress-theme-hope · Jun 21, 2021 · 025a4ba · 025a4ba
1 parent 351c1c2
commit 025a4ba
Show file tree

Hide file tree

Showing 15 changed files with 128 additions and 158 deletions.
diff --git a/demo/src/.vuepress/config.ts b/demo/src/.vuepress/config.ts
@@ -62,6 +62,8 @@ export default defineUserConfig<HopeThemeOptions>({
 
     docsDir: "demo/src",
 
+    darkmode: true,
+
     // theme-level locales config
     locales: {
       /**

diff --git a/packages/theme/src/client/components/navbar/styles/dropdown-link.scss b/packages/theme/src/client/components/navbar/styles/dropdown-link.scss
@@ -1,6 +1,6 @@
+@use "@hope/config";
 @use "@mr-hope/vuepress-shared/styles/arrow";
 @use "@mr-hope/vuepress-shared/styles/reset";
-@use "@hope/config";
 
 .dropdown-wrapper {
   height: 1.8rem;

diff --git a/packages/theme/src/client/components/sidebar/DropdownLink.vue b/packages/theme/src/client/components/sidebar/DropdownLink.vue
@@ -4,7 +4,7 @@
       class="dropdown-title"
       type="button"
       :aria-label="dropdownAriaLabel"
-      @click="handleDropdown"
+      @click="handleDropdown(!open)"
     >
       <slot name="title">
         <span class="title">
@@ -30,7 +30,7 @@
                 @focusout="
                   isLastItemOfArray(child, item.children) &&
                     child.children.length === 0 &&
-                    (open = false)
+                    handleDropdown(false)
                 "
               />
 
@@ -48,7 +48,7 @@
                   @focusout="
                     isLastItemOfArray(grandchild, child.children) &&
                       isLastItemOfArray(child, item.children) &&
-                      (open = false)
+                      handleDropdown(false)
                   "
                 />
               </li>
@@ -118,13 +118,8 @@ export default defineComponent({
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
      */
-    const handleDropdown = (e: MouseEvent): void => {
-      const isTriggerByTab = e.detail === 0;
-      if (isTriggerByTab) {
-        open.value = !open.value;
-      } else {
-        open.value = false;
-      }
+    const handleDropdown = (event: boolean): void => {
+      open.value = event;
     };
 
     const isLastItemOfArray = (item: unknown, arr: unknown[]): boolean =>

diff --git a/packages/theme/src/client/components/sidebar/styles/dropdown-link.scss b/packages/theme/src/client/components/sidebar/styles/dropdown-link.scss
@@ -1,16 +1,19 @@
 @use '@hope/config';
+@use "@mr-hope/vuepress-shared/styles/reset";
 @use '@mr-hope/vuepress-shared/styles/arrow';
 
 .mobile-dropdown-wrapper {
   cursor: pointer;
 
   .dropdown-title {
-    cursor: inherit;
+    @include reset.button;
+
     padding: inherit;
     color: var(--text-color);
     font-family: inherit;
     font-size: inherit;
     line-height: 1.4rem;
+    cursor: inherit;
 
     &:hover {
       color: var(--accent-color);

diff --git a/packages/theme/src/client/components/sidebar/styles/navlinks.scss b/packages/theme/src/client/components/sidebar/styles/navlinks.scss
@@ -15,11 +15,6 @@
     list-style-type: none;
   }
 
-  // newly added
-  a {
-    font-weight: 600;
-  }
-
   .navbar-links-item {
     position: relative;
     display: block;

diff --git a/packages/theme/src/client/components/sidebar/styles/sidebar.scss b/packages/theme/src/client/components/sidebar/styles/sidebar.scss
@@ -44,21 +44,11 @@
     background-color: var(--accent-color);
   }
 
-  .theme-container.no-navbar & {
-    top: 0;
-  }
-
   @media (max-width: config.$pad) {
     width: var(--mobile-sidebar-width);
     font-size: 15px;
   }
 
-  @media (min-width: (config.$mobile + 1px)) {
-    .theme-container.no-sidebar & {
-      display: none;
-    }
-  }
-
   // wide mobile
   @media (max-width: config.$mobile) {
     top: var(--mobile-navbar-height);
@@ -67,8 +57,7 @@
     transition: transform 0.2s ease;
     box-shadow: none;
 
-    .theme-container.hide-navbar &,
-    .theme-container.no-navbar & {
+    .theme-container.hide-navbar & {
       top: 0;
     }
 

diff --git a/packages/theme/src/client/composables/sidebar/getLink.ts b/packages/theme/src/client/composables/sidebar/getLink.ts
@@ -1,4 +1,7 @@
+import { usePagesData } from "@vuepress/client";
 import { isFunction, isString } from "@vuepress/shared";
+// import { hash } from "@vuepress/utils";
+
 import type { Router } from "vue-router";
 import type { NavLink } from "../../../shared";
 
@@ -33,11 +36,22 @@ export const resolveRouteWithRedirect = (
  *
  * @example
  * - Input: '/README.md'
- * - Output: { text: 'Home', link: '/' }
+ * - Output: { icon: 'home', text: 'Home', link: '/' }
  */
-export const getLink = (router: Router, item: string): NavLink => {
+export const getLink = async (
+  router: Router,
+  item: string
+): Promise<NavLink> => {
   const resolved = resolveRouteWithRedirect(router, item);
+  const pages = usePagesData();
+  // FIXME: Find a way to get page key
+  const pageKey = resolved.path;
+  // const pageKey = hash(resolved.path);
+
   return {
+    icon: (await pages.value[pageKey]?.())?.frontmatter.icon as
+      | string
+      | undefined,
     text: resolved.meta.title || item,
     link: resolved.name === "404" ? item : resolved.fullPath,
   };

diff --git a/packages/theme/src/client/composables/sidebar/resolveConfig.ts b/packages/theme/src/client/composables/sidebar/resolveConfig.ts
@@ -10,6 +10,7 @@ import {
   isString,
   resolveLocalePath,
 } from "@vuepress/shared";
+// import { hash } from "@vuepress/utils";
 import { getLink } from "./getLink";
 
 import type { ComputedRef, InjectionKey } from "vue";
@@ -84,7 +85,7 @@ export const resolveArraySidebarItems = async (
   const handleChildItem = async (
     item: SidebarItem
   ): Promise<ResolvedSidebarPageItem | ResolvedSidebarGroupItem> => {
-    const childItem = isString(item) ? getLink(router, item) : item;
+    const childItem = isString(item) ? await getLink(router, item) : item;
 
     // resolved group item
     if ("children" in childItem) {
@@ -99,15 +100,22 @@ export const resolveArraySidebarItems = async (
       };
     }
 
-    const pageData = pages.value[childItem.link]
-      ? await pages.value[childItem.link]()
-      : null;
+    // FIXME: Find a way to get page key
+    const pageKey = childItem.link;
+    // const pageKey = hash(childItem.link);
+    const pageData = pages.value[pageKey] ? await pages.value[pageKey]() : null;
 
     return {
       type: "page",
       ...childItem,
       children: pageData
-        ? headersToSidebarItemChildren(pageData.headers, sidebarDepth)
+        ? headersToSidebarItemChildren(
+            // skip h1 header
+            pageData.headers[0]?.level === 1
+              ? pageData.headers[0].children
+              : pageData.headers,
+            sidebarDepth
+          )
         : [],
     };
   };

diff --git a/packages/theme/src/client/styles/_wrapper.scss b/packages/theme/src/client/styles/_wrapper.scss
diff --git a/packages/theme/src/client/styles/common.scss b/packages/theme/src/client/styles/common.scss
@@ -0,0 +1,57 @@
+@use '@hope/config';
+@use '@mr-hope/vuepress-shared/styles/wrapper';
+
+@use 'footer';
+
+.theme-container {
+  &.no-navbar {
+    .page {
+      padding-top: 0;
+    }
+
+    .sidebar {
+      top: 0;
+
+      @media (max-width: config.$mobile) {
+        top: 0;
+      }
+    }
+  }
+
+  &.no-sidebar {
+    @media (min-width: (config.$mobile + 1px)) {
+      .page {
+        padding-left: 0;
+      }
+
+      .sidebar {
+        display: none;
+      }
+    }
+  }
+}
+
+.theme-default-content {
+  &.custom {
+    padding: 0;
+    margin: 0;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  &:not(.custom) {
+    @include wrapper.wrapper;
+
+    padding-top: 0;
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    img {
+      max-width: 100%;
+    }
+  }
+}
diff --git a/packages/theme/src/client/styles/index.scss b/packages/theme/src/client/styles/index.scss
@@ -15,5 +15,8 @@
 @use 'transitions';
 @use 'theme';
 
+@use 'common';
 @use 'layout';
 @use 'page404';
+
+@use "@hope/style";
diff --git a/packages/theme/src/client/styles/layout.scss b/packages/theme/src/client/styles/layout.scss
@@ -1,102 +0,0 @@
-@use '@hope/config';
-@use 'footer';
-@import "_wrapper";
-
-.page {
-  padding-top: var(--navbar-height);
-  padding-left: var(--sidebar-width);
-}
-
-.theme-container {
-  &.no-navbar {
-    .page {
-      padding-top: 0;
-    }
-
-    .sidebar {
-      top: 0;
-    }
-  }
-}
-
-@media (min-width: (config.$mobile + 1px)) {
-  .theme-container.no-sidebar {
-    .sidebar {
-      display: none;
-    }
-
-    .page {
-      padding-left: 0;
-    }
-  }
-}
-
-.theme-default-content:not(.custom) {
-  @extend %wrapper;
-
-  padding-top: 0;
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  img {
-    max-width: 100%;
-  }
-}
-
-.theme-default-content.custom {
-  padding: 0;
-  margin: 0;
-
-  img {
-    max-width: 100%;
-  }
-}
-
-// narrow desktop / iPad
-@media (max-width: config.$pad) {
-  .sidebar {
-    font-size: 15px;
-    width: var(--mobile-sidebar-width);
-  }
-
-  .page {
-    padding-left: var(--mobile-sidebar-width);
-  }
-}
-
-// wide mobile
-@media (max-width: config.$mobile) {
-  .sidebar {
-    top: 0;
-    padding-top: var(--navbar-height);
-    transform: translateX(-100%);
-    transition: transform 0.2s ease;
-  }
-
-  .page {
-    padding-left: 0;
-  }
-
-  .theme-container {
-    &.sidebar-open {
-      .sidebar {
-        transform: translateX(0);
-      }
-    }
-
-    &.no-navbar {
-      .sidebar {
-        padding-top: 0;
-      }
-    }
-  }
-}
-
-// narrow mobile
-@media (max-width: config.$mobileS) {
-  h1 {
-    font-size: 1.9rem;
-  }
-}

diff --git a/packages/theme/src/client/styles/normalize.scss b/packages/theme/src/client/styles/normalize.scss
@@ -96,6 +96,11 @@ h6 {
 
 h1 {
   font-size: 2rem;
+
+  // narrow mobile
+  @media (max-width: config.$mobileS) {
+    font-size: 1.9rem;
+  }
 }
 
 h2 {