style: make leftbar scrollable, make homepage recent updates nowrap

Author: Xecades

src/assets/css/markdown.styl

@@ -331,6 +331,11 @@ schemer(--quote-background-invert, 0, 1);
     /* .fold.home-recent-updates 标签 */
     .fold.home-recent-updates
         .fold-height-listener
+            p
+                text-wrap: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+
             a
                 color: unset;
                 text-decoration: none;

src/components/LeftBar.vue

@@ -9,6 +9,7 @@ import {
 } from "vue";
 import { render_list } from "@/assets/ts/leftbar";
 import { LEFTBAR_STATUS } from "@/assets/ts/types";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import hotkeys from "hotkeys-js";
 import Search from "./Search.vue";
 
@@ -19,12 +20,18 @@ import config from "@cache/config";
 import type { Ref } from "vue";
 import type { JSX } from "vue/jsx-runtime";
 import type { HotkeysEvent } from "hotkeys-js";
+import type { PartialOptions } from "overlayscrollbars";
 
 const props = defineProps<{
     status: LEFTBAR_STATUS;
     currentCategory: string;
 }>();
 
+const osOptions: PartialOptions = {
+    scrollbars: { autoHide: "move" },
+    overflow: { x: "hidden" },
+};
+
 /** Attributes attached to a category */
 interface Category {
     name: string;
@@ -194,9 +201,16 @@ watchEffect(() => {
             </template>
         </div>
 
-        <Transition name="content">
-            <component class="content" :is="VBody" v-if="do_show_detail" />
-        </Transition>
+        <OverlayScrollbarsComponent
+            element="div"
+            class="content-wrapper"
+            :options="(osOptions as any)"
+            defer
+        >
+            <Transition name="content">
+                <component class="content" :is="VBody" v-if="do_show_detail" />
+            </Transition>
+        </OverlayScrollbarsComponent>
 
         <!-- https://cn.vuejs.org/guide/built-ins/teleport.html -->
         <Teleport to="body">
@@ -326,51 +340,54 @@ $width = $toc-offset-left + $toc-width;
                 text-decoration-style: wavy;
                 text-decoration-color: $item-underline-color;
 
-    .content
+    .content-wrapper
         position: absolute;
         left: $toc-offset-left;
         top: $toc-offset-top;
         width: $toc-width;
-        display: block;
-        border-radius: $background-radius;
-        padding: 15px 0;
-
-    .content .title
-        color: var(--toc-color);
-        font-size: 0.95rem;
-        line-height: $toc-title-height;
-        margin-bottom: 5px;
-        padding-right: 10px;
-        display: flex;
-        gap: 8px;
-        transition: color 0.2s;
-
-    .content .title.router-link-exact-active .text
-        color: $theme-color;
-
-    .content .title .sign
-        color: $theme-color;
-        opacity: 0;
-        transition: opacity 0.1s;
-        font-size: 0.7rem;
-        display: block;
-        animation: shake-x 1s infinite ease-in-out;
-
-    .content .title .text
-        text-indent: 0 - $toc-title-indent;
-        padding-left: $toc-title-indent;
-
-    .content .title:hover .text
-        color: $theme-color;
-
-    .content .title:hover .sign
-        opacity: 1;
-
-    .content .children
-        margin-left: 1rem;
-
-    .content > .children
-        margin: 0;
+        bottom: 0;
+
+        .content
+            position: absolute;
+            border-radius: $background-radius;
+            padding: 15px 0;
+
+            .title
+                color: var(--toc-color);
+                font-size: 0.95rem;
+                line-height: $toc-title-height;
+                margin-bottom: 5px;
+                padding-right: 10px;
+                display: flex;
+                gap: 8px;
+                transition: color 0.2s;
+
+            .title.router-link-exact-active .text
+                color: $theme-color;
+
+            .title .sign
+                color: $theme-color;
+                opacity: 0;
+                transition: opacity 0.1s;
+                font-size: 0.7rem;
+                display: block;
+                animation: shake-x 1s infinite ease-in-out;
+
+            .title .text
+                text-indent: 0 - $toc-title-indent;
+                padding-left: $toc-title-indent;
+
+            .title:hover .text
+                color: $theme-color;
+
+            .title:hover .sign
+                opacity: 1;
+
+            .children
+                margin-left: 1rem;
+
+            &> .children
+                margin: 0;
 
     .content-enter-active,
     .content-leave-active

todo.md

@@ -1,11 +1,10 @@
 ## 近期
 
- - LeftBar 添加折叠
+ - LeftBar 添加折叠（？）
  - 深色模式切换按钮（切换的时候给所有元素设置临时的 transition !important？）（放 rightbar？或者不要也可以）
  - index comp，hover 范围广一点
  - 中文字体 cdn，目前加载太慢了
  - 添加 backtotop 按钮
- - 侧边栏（左右），允许折叠 / 滚动
 
 ## 灵感
 
@@ -46,8 +45,7 @@
 
 ## 暂时不重要的 TODO
 
- - 添加 HTML `<meta>` 那一堆属性 
- - Typst 添加中文字体的支持
+ - 添加 HTML `<meta>` 那一堆属性
  - 代码块换行
  - Command + P 打印样式
  - 想办法过滤掉 \`[公式]\` 等 slot 内容