feat(docs): added document style effects

WRXinYue · Aug 12, 2024 · a1768a0 · a1768a0
1 parent 5bc470e
commit a1768a0
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 79 deletions.
diff --git a/docs/.valaxy/typed-router.d.ts b/docs/.valaxy/typed-router.d.ts
@@ -62,7 +62,6 @@ declare module 'vue-router/auto-routes' {
     '/components/StarterAuthor': RouteRecordInfo<'/components/StarterAuthor', '/components/StarterAuthor', Record<never, never>, Record<never, never>>,
     '/components/StarterToggleLocale': RouteRecordInfo<'/components/StarterToggleLocale', '/components/StarterToggleLocale', Record<never, never>, Record<never, never>>,
     '/components/ValaxyCopyright': RouteRecordInfo<'/components/ValaxyCopyright', '/components/ValaxyCopyright', Record<never, never>, Record<never, never>>,
-    '/components/YunSponsor': RouteRecordInfo<'/components/YunSponsor', '/components/YunSponsor', Record<never, never>, Record<never, never>>,
     '/components-custom/': RouteRecordInfo<'/components-custom/', '/components-custom', Record<never, never>, Record<never, never>>,
     '/components-custom/SakuraArticleFooterCustom': RouteRecordInfo<'/components-custom/SakuraArticleFooterCustom', '/components-custom/SakuraArticleFooterCustom', Record<never, never>, Record<never, never>>,
     '/components-custom/SakuraArticleListCustom': RouteRecordInfo<'/components-custom/SakuraArticleListCustom', '/components-custom/SakuraArticleListCustom', Record<never, never>, Record<never, never>>,

diff --git a/docs/components/custom/SakuraFooterCustom.vue b/docs/components/custom/SakuraFooterCustom.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { useLayout } from 'valaxy'
+
+const isHome = useLayout('home')
+</script>
+
+<template>
+  <div v-show="!isHome" class="animated mb-7 mt-10 b-t-1 b-t-$st-c-border b-t-solid" />
+  <SakuraFooter />
+</template>
diff --git a/docs/components/custom/SakuraNavbarCustom.vue b/docs/components/custom/SakuraNavbarCustom.vue
@@ -1,5 +1,11 @@
+<script lang="ts" setup>
+import { useLayout } from 'valaxy'
+
+const isHome = useLayout('home')
+</script>
+
 <template>
-  <SakuraNavbar :invert-scrolled="true">
+  <SakuraNavbar :class="isHome ? 'line-shrink' : 'line-expand'" :invert-scrolled="true">
     <template #nav-tool>
       <div flex>
         <SakuraToggleLocale mr-2 />
@@ -8,3 +14,37 @@
     </template>
   </SakuraNavbar>
 </template>
+
+<style lang="scss" scoped>
+@mixin line-animation($name, $from-width, $to-width) {
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: $from-width;
+    height: 1px;
+    background-color: var(--st-c-border);
+    animation: #{$name} 0.75s forwards;
+    transform: translateX(-50%);
+  }
+
+  @keyframes #{$name} {
+    from {
+      width: $from-width;
+    }
+
+    to {
+      width: $to-width;
+    }
+  }
+}
+
+.line-expand {
+  @include line-animation(line-expand, 0, 100%);
+}
+
+.line-shrink {
+  @include line-animation(line-shrink, 100%, 0);
+}
+</style>
diff --git a/docs/pages/components-custom/SakuraNavbarCustom.md b/docs/pages/components-custom/SakuraNavbarCustom.md
@@ -20,15 +20,37 @@ categories:
 </template>
 ```
 
+### 更改标题文字大小
+
+```scss {1,5-6,9-10}
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+
+.sakura-navbar-brand {
+  .logo-link {
+    font-size: 24px;
+    font-weight: 600;
+
+    @include screen('md') {
+      font-size: 28px;
+      font-weight: 800;
+    }
+  }
+
+  .moe-mashiro {
+    font-family: Moe-Mashiro, sans-serif;
+  }
+}
+```
+
 ## API
 
 ### Slots
 
-| 插槽名 | 说明 |
-| --- | --- |
-| `nav-brand` | --- |
-| `nav-link` | --- |
-| `nav-tool` | --- |
+| 插槽名      | 说明 |
+| ----------- | ---- |
+| `nav-brand` | ---  |
+| `nav-link`  | ---  |
+| `nav-tool`  | ---  |
 
 ## 相关组件
 

diff --git a/docs/pages/components/YunSponsor.md b/docs/pages/components/YunSponsor.md
diff --git a/docs/pages/examples/gallery.md b/docs/pages/examples/gallery.md
@@ -14,27 +14,13 @@ themes:
     tags:
       - yun
       - light
-  - name: WRXinYue Blog
-    desc: 个人博客站点，参考Antfu
-    siteImage: https://common.s3.bitiful.net/snapshot/2024-04-11_22-56.png
-    siteExampleUrl: https://www.wrxinyue.org/
-    tags:
-      - docs
-      - press
   - name: Valaxy sakura theme docs
     desc: 没错本文档也是Sakura主题
     siteImage: https://common.s3.bitiful.net/snapshot/2024-04-11_22-56_1.png
     siteExampleUrl: https://sakura.valaxy.site/
     tags:
       - starter
       - template
-  - name: Sakura 双栏布局示例站点
-    desc: Sakura 双栏布局示例站点
-    siteImage:
-    siteExampleUrl: https://sakura.dreamscapea.wrxinyue.org/
-    tags:
-      - home
-      - gitlink
 ---
 
 ## Sakura 主题橱窗

diff --git a/docs/styles/index.scss b/docs/styles/index.scss
@@ -7,7 +7,6 @@
 
 .sakura-navbar {
   position: sticky;
-  background: transparent !important;
 
   &.active-header {
     box-shadow: none;
@@ -18,6 +17,23 @@
   min-height: calc(
     100vh - var(--st-c-footer-height) - var(--st-c-navbar-height)
   );
+
+  .sakura-aside,
+  .markdown-body {
+    padding-top: 2rem;
+  }
+}
+
+.sakura-navbar-brand {
+  .logo-link {
+    font-size: 16px;
+    font-weight: 400;
+
+    @include screen('md') {
+      font-size: 20px;
+      font-weight: 600;
+    }
+  }
 }
 
 /* -------------------------------------

diff --git a/eslint.config.js b/eslint.config.js
@@ -5,7 +5,7 @@ export default antfu(
   {
     unocss: true,
     formatters: true,
-    ignores: ['**/dist', '**/public', '**/styles/animation', '**/*.md', 'packages/'],
+    ignores: ['**/dist', '**/public', '**/styles/animation', 'packages/'],
   },
   {
     rules: {

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "docs": "pnpm -C docs run dev",
     "preview": "cd demo && vite preview --host",
     "preview:docs": "cd docs && vite preview --host",
-    "lint": "eslint .",
+    "lint": "eslint . --ignore-pattern '**/*.md'",
     "stylelint": "stylelint \"**/*.{css,scss,vue}\"",
     "release": "cd theme && git add -A && bumpp",
     "typecheck": "vue-tsc --noEmit --skipLibCheck",

diff --git a/theme/components/SakuraFooter.vue b/theme/components/SakuraFooter.vue
@@ -35,7 +35,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <footer v-if="!loading" class="h-$st-c-footer-height" text="center sm" style="color:var(--va-c-text-light)">
+  <footer v-if="!loading" class="sakura-footer h-$st-c-footer-height" text="center sm" style="color:var(--va-c-text-light)">
     <div v-if="footer.icp" class="icp" p="y-2" v-html="footer.icp" />
 
     <div class="copyright flex items-center justify-center" p="1">

diff --git a/theme/components/SakuraNavbarBrand.vue b/theme/components/SakuraNavbarBrand.vue
@@ -27,50 +27,3 @@ const siteConfig = useSiteConfig()
     </RouterLink>
   </div>
 </template>
-
-<style lang="scss">
-@use 'valaxy/client/styles/mixins/index.scss' as *;
-
-.sakura-navbar-brand {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  white-space: nowrap;
-
-  .logo-link {
-    color: var(--st-c-navbar-text);
-    font-size: 24px;
-    font-weight: 600;
-
-    @include screen('md') {
-      font-size: 28px;
-      font-weight: 800;
-    }
-
-    span:first-child {
-      border-radius: 9px;
-      padding-bottom: 2px;
-      padding-top: 5px;
-    }
-
-    &:hover {
-      span:first-child {
-        background-color: var(--st-c-navbar-hover-bg-color);
-        color: var(--st-c-navbar-hover-color);
-      }
-
-      span:nth-of-type(2) {
-        animation: rotate 1s linear infinite;
-      }
-
-      span:not(:first-child) {
-        color: var(--st-c-navbar-hover-bg-color);
-      }
-    }
-  }
-
-  .moe-mashiro {
-    font-family: Moe-Mashiro, sans-serif;
-  }
-}
-</style>
diff --git a/theme/styles/widgets/navbar.scss b/theme/styles/widgets/navbar.scss
@@ -1,3 +1,48 @@
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+
+.sakura-navbar-brand {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+
+  .logo-link {
+    color: var(--st-c-navbar-text);
+    font-size: 24px;
+    font-weight: 600;
+
+    @include screen('md') {
+      font-size: 28px;
+      font-weight: 800;
+    }
+
+    span:first-child {
+      border-radius: 9px;
+      padding-bottom: 2px;
+      padding-top: 5px;
+    }
+
+    &:hover {
+      span:first-child {
+        background-color: var(--st-c-navbar-hover-bg-color);
+        color: var(--st-c-navbar-hover-color);
+      }
+
+      span:nth-of-type(2) {
+        animation: rotate 1s linear infinite;
+      }
+
+      span:not(:first-child) {
+        color: var(--st-c-navbar-hover-bg-color);
+      }
+    }
+  }
+
+  .moe-mashiro {
+    font-family: Moe-Mashiro, sans-serif;
+  }
+}
+
 .sakura-navbar {
   position: fixed;
   z-index: 5;