feat: new features

Author: WRXinYue

docs/valaxy.config.ts

@@ -37,7 +37,7 @@ export default defineConfig<ThemeConfig>({
               link: '/guide/writing/asset-handling',
             },
             {
-              text: 'fFrontmatter',
+              text: 'Frontmatter',
               link: '/guide/writing/frontmatter',
             },
             {
@@ -85,7 +85,10 @@ export default defineConfig<ThemeConfig>({
       title: 'VALAXY THEME OCEANUS',
       // motto: '简约、高雅的 Valaxy 文档主题',
       motto: 'Sliding content with sticky tab nav',
-      img: 'https://w.wallhaven.cc/full/85/wallhaven-85yl61.png',
+      img: {
+        light: 'https://common.s3.bitiful.net/oceanus/wallhaven-2y7yz6.jpg',
+        dark: 'https://common.s3.bitiful.net/oceanus/wallhaven-2evj3y.jpg',
+      },
     },
 
     // sidebar: [

theme/components/OceanusArticle.vue

@@ -30,7 +30,7 @@ const sidebar = computed(() => secondNavItems.value?.sidebar || firstNavItems.va
         <slot />
 
         <slot name="toc">
-          <div class="border-l-1px border-$oceanus-c-border-line">
+          <div class="toc border-l-1px border-$oceanus-c-border-line">
             <OceanusToc />
           </div>
         </slot>
@@ -49,11 +49,11 @@ const sidebar = computed(() => secondNavItems.value?.sidebar || firstNavItems.va
   display: flex;
 
   .article-container {
-    border-right: 1px solid rgba(0, 0, 0, 0.04);
+    border-right: 1px solid var(--oceanus-c-divider);
   }
 
   .article-left-aside {
-    border-left: 1px solid rgba(0, 0, 0, 0.04);
+    border-left: 1px solid var(--oceanus-c-divider);
     width: 0;
     visibility: hidden;
     // overflow: hidden;

theme/components/OceanusHero.vue

@@ -1,11 +1,25 @@
 <script setup lang="ts">
+import { useAppStore } from 'valaxy'
+import { computed } from 'vue'
 import { useThemeConfig } from '../composables'
 
+const appStore = useAppStore()
 const themeConfig = useThemeConfig()
+
+const heroImg = computed(() => {
+  const img = themeConfig.value.hero.img
+  if (typeof img === 'string')
+    return img
+  else if (typeof img === 'object')
+    return appStore.isDark ? img.dark : img.light
+
+  console.error('Invalid favicon type, check ThemeConfig.hero.img config')
+  return ''
+})
 </script>
 
 <template>
-  <div class="oceanus-hero" :style="{ backgroundImage: `url(${themeConfig.hero.img})` }">
+  <div class="oceanus-hero" :style="{ backgroundImage: `url(${heroImg})` }">
     <div class="hero-content">
       <p class="hero-title">
         <slot name="intro-text">
@@ -18,16 +32,6 @@ const themeConfig = useThemeConfig()
           {{ themeConfig.hero.motto }}
         </slot>
       </p>
-
-      <!-- CTA Buttons -->
-      <!-- <div class="hero-buttons">
-        <button class="cta-primary">
-          Get Started
-        </button>
-        <button class="cta-secondary">
-          Learn More
-        </button>
-      </div> -->
     </div>
   </div>
 </template>
@@ -90,36 +94,6 @@ const themeConfig = useThemeConfig()
     gap: 1rem;
   }
 
-  .cta-primary,
-  .cta-secondary {
-    padding: 0.75rem 2rem;
-    border-radius: 24px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all 0.3s ease-in-out;
-  }
-
-  .cta-primary {
-    background-color: #0071e3;
-    color: white;
-    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
-
-    &:hover {
-      background-color: #005bb5;
-      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-    }
-  }
-
-  .cta-secondary {
-    background-color: transparent;
-    border: 1px solid #ffffff;
-    color: white;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-
   @keyframes fade-in {
     from {
       opacity: 0;

theme/styles/index.scss

@@ -2,3 +2,7 @@
 @use './markdown' as *;
 
 @use 'valaxy/client/styles/common/index.scss' as *;
+
+@use 'markdown-it-github-alerts/styles/github-colors-light.css' as *;
+@use 'markdown-it-github-alerts/styles/github-colors-dark-media.css' as *;
+@use 'markdown-it-github-alerts/styles/github-base.css' as *;

theme/styles/markdown.scss

@@ -60,4 +60,56 @@ html.dark {
       content: none;
     }
   }
+
+  // lang
+  div[class*='language-'].line-numbers-mode {
+    /* rtl:ignore */
+    padding-left: 32px;
+  }
+
+  .line-numbers-wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    /* rtl:ignore */
+    left: 0;
+    z-index: 3;
+
+    /* rtl:ignore */
+    border-right: 1px solid var(--va-code-block-divider-color);
+    padding-top: 20px;
+    width: 32px;
+    text-align: center;
+    font-family: var(--va-font-family-mono);
+    line-height: var(--va-code-line-height);
+    font-size: var(--va-code-font-size);
+    color: var(--va-code-line-number-color);
+    transition:
+      border-color 0.5s,
+      color 0.5s;
+  }
+
+  // table
+  .table-container {
+    table {
+      thead {
+        th {
+          text-align: left;
+          border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
+          background-color: rgba(var(--va-c-primary-rgb), 0.1);
+        }
+      }
+
+      td {
+        border: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
+      }
+
+      tr {
+        &:hover {
+          background-color: rgba(var(--va-c-primary-rgb), 0.05);
+        }
+      }
+    }
+  }
 }

theme/types/index.d.ts

@@ -22,7 +22,10 @@ export interface ThemeConfig extends DefaultTheme.Config {
   hero: Partial<{
     title: string
     motto: string
-    img: string
+    img: string | {
+      light: string
+      dark: string
+    }
   }>
 
   sidebar: SidebarMulti