valaxy-theme-press 0.0.1 → 0.0.2

package/components/PressToc.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Header } from 'valaxy'
+import {
+  resolveHeaders,
+  useActiveAnchor,
+  useFrontmatter,
+} from 'valaxy'
+import { useThemeConfig } from '../composables'
+
+const props = defineProps<{ headers: Header[] }>()
+
+const frontmatter = useFrontmatter()
+const themeConfig = useThemeConfig()
+
+const { locale, t } = useI18n()
+const container = ref()
+const marker = ref()
+
+useActiveAnchor(container, marker)
+
+const resolvedHeaders = computed(() => {
+  return resolveHeaders(props.headers || [])
+})
+
+function handleClick({ target: el }: Event) {
+  const id = `#${(el as HTMLAnchorElement).href!.split('#')[1]}`
+  const heading = document.querySelector(decodeURIComponent(id)) as HTMLAnchorElement
+  heading?.focus()
+}
+</script>
+
+<template>
+  <div v-show="headers.length" ref="container" p="t-6">
+    <div class="content">
+      <div class="outline-title">
+        {{ themeConfig.outlineTitle || t('sidebar.toc') }}
+      </div>
+
+      <div ref="marker" class="outline-marker" />
+
+      <nav aria-labelledby="doc-outline-aria-label">
+        <span id="doc-outline-aria-label" class="visually-hidden">
+          Table of Contents for current page
+        </span>
+
+        <ul class="va-toc relative z-1">
+          <li
+            v-for="{ text, link, children, hidden, lang } in resolvedHeaders"
+            v-show="!hidden"
+            :key="link"
+            class="va-toc-item"
+            :lang="lang || locale"
+          >
+            <a class="outline-link" :href="link" @click="handleClick">
+              {{ text }}
+            </a>
+            <ul v-if="children && frontmatter.outline === 'deep'">
+              <li v-for="item in children" v-show="!item.hidden" :key="item.link" :lang="lang || locale">
+                <a class="outline-link" p="l-3" :href="link" @click="handleClick">
+                  {{ item.text }}
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  text-align: left;
+
+  .va-toc-item {
+    color: var(--va-c-text-light);
+  }
+}
+
+.content {
+  position: relative;
+  padding-left: 16px;
+  font-size: 14px;
+  text-align: left;
+  border-left: 1px solid var(--pr-aside-divider);
+}
+
+.outline-marker {
+  position: absolute;
+  top: 32px;
+  left: -1px;
+  z-index: 0;
+  opacity: 0;
+  width: 1px;
+  height: 18px;
+  background-color: var(--va-c-brand);
+  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.outline-title {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.outline-link {
+  display: block;
+  line-height: 28px;
+  font-size: 13px;
+  color: var(--pr-aside-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--pr-aside-text-1);
+  transition: color 0.25s;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+}
+</style>

package/components/PressToggleLocale.vue

@@ -7,7 +7,7 @@ const { toggleLocales } = useLocale()
 </script>
 
 <template>
-  <button class="yun-icon-btn" :title="t('button.toggle_langs')" style="color:var(--va-c-text)" @click="toggleLocales">
+  <button :title="t('button.toggle_langs')" @click="toggleLocales">
     <div i-ri-translate class="transition transform" :class="locale === 'en' ? 'rotate-y-180' : ''" />
   </button>
 </template>

package/components/ValaxyMain.vue

@@ -1,25 +1,38 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { useConfig } from 'valaxy'
+import { useConfig, useFrontmatter, useLayout, useSidebar } from 'valaxy'
 
 defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
+
 const config = useConfig()
+const frontmatter = useFrontmatter()
+
+const { hasSidebar } = useSidebar()
+const isHome = useLayout('home')
 </script>
 
 <template>
-  <main>
-    <div w="full" flex="~">
+  <main
+    class="press-main flex" :class="{
+      'has-sidebar': hasSidebar,
+    }"
+  >
+    <div w="full" flex="~" p="t-8 x-6 md:x-8">
       <slot name="main">
-        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
+        <div class="content" m="auto y-0" flex="~ col grow" w="full" p="x-12 lt-md:0">
           <slot name="main-header" />
           <slot name="main-header-after" />
 
           <slot name="main-content">
             <div class="markdown-body prose max-w-none pb-8">
               <ValaxyMd :frontmatter="frontmatter">
+                <h1 v-if="!isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
+                  {{ frontmatter.title }}
+                  <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true">#</a>
+                </h1>
                 <slot name="main-content-md" />
                 <slot />
               </ValaxyMd>
@@ -38,8 +51,34 @@ const config = useConfig()
 
         <slot name="footer" />
       </slot>
-    </div>
 
-    <slot name="aside" />
+      <slot name="aside">
+        <PressAside v-if="!isHome" />
+      </slot>
+    </div>
   </main>
 </template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
+@include media('md') {
+  .press-main {
+    &.has-sidebar {
+      padding-top: var(--pr-nav-height);
+      padding-left: var(--va-sidebar-width);
+    }
+  }
+}
+
+@include media('xl') {
+  .content{
+    // 8px scrollbar width
+    max-width: calc(100vw - 2 * var(--va-sidebar-width) - 2.5rem);
+
+    &.no-aside {
+      max-width: calc(100vw - var(--va-sidebar-width));
+    }
+  }
+}
+</style>

package/components/nav/PressNavBar.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { useConfig, useSidebar } from 'valaxy'
+import { useThemeConfig } from '../../composables'
+import PressSwitchAppearance from './PressSwitchAppearance.vue'
+
+defineProps<{
+  isScreenOpen?: boolean
+}>()
+
+defineEmits<{
+  (e: 'toggle-screen'): void
+}>()
+
+const { hasSidebar } = useSidebar()
+
+const config = useConfig()
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div class="press-navbar flex justify-between items-center px-6 py-4" :class="{ 'has-sidebar': hasSidebar }">
+    <a class="text-xl" href="/" :aria-label="config.title">
+      <span class="md:inline">{{ config.title }}</span>
+    </a>
+    <div class="flex justify-center items-centertext-sm leading-5">
+      <template v-for="(item, i) in themeConfig.nav" :key="i">
+        <a
+          class="hover:text-gray-700"
+          :href="item.link"
+          target="_blank"
+          rel="noopener"
+        >{{ item.text }}</a>
+
+        <span v-if="i !== themeConfig.nav.length - 1" class="mr-2 ml-2">·</span>
+      </template>
+
+      <PressToggleLocale m="x-2" />
+      <PressSwitchAppearance m="l-2" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use 'valaxy/client/styles/mixins' as *;
+
+.press-navbar {
+  position: relative;
+  border-bottom: 1px solid var(--pr-c-divider-light);
+  padding: 0 8px 0 24px;
+  height: var(--pr-nav-height);
+  transition: border-color 0.5s, background-color 0.5s;
+}
+
+@include media('md') {
+  .press-navbar {
+    padding: 0 32px;
+  }
+}
+
+@include media('md') {
+  .press-navbar.has-sidebar .content {
+    margin-right: -32px;
+    padding-right: 32px;
+    -webkit-backdrop-filter: saturate(50%) blur(8px);
+    backdrop-filter: saturate(50%) blur(8px);
+    background: rgba(255, 255, 255, 0.7);
+  }
+
+  .dark .press-navbar.has-sidebar .content {
+    background: rgba(36, 36, 36, 0.7);
+  }
+
+  @supports not (backdrop-filter: saturate(50%) blur(8px)) {
+    .press-navbar.has-sidebar .content {
+      background: rgba(255, 255, 255, 0.95);
+    }
+
+    .dark .press-navbar.has-sidebar .content {
+      background: rgba(36, 36, 36, 0.95);
+    }
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: calc(var(--pr-layout-max-width) - 64px);
+}
+
+.content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.menu + .translations::before,
+.menu + .appearance::before,
+.menu + .social-links::before,
+.translations + .appearance::before,
+.appearance + .social-links::before {
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--pr-c-divider-light);
+  content: "";
+}
+
+.menu + .appearance::before,
+.translations + .appearance::before {
+  margin-right: 16px;
+}
+
+.appearance + .social-links::before {
+  margin-left: 16px;
+}
+
+.social-links {
+  margin-right: -8px;
+}
+</style>

package/components/nav/PressSwitchAppearance.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { isDark, toggleDark } from 'valaxy'
+</script>
+
+<template>
+  <button class="switch switch-appearance" type="button" aria-label="Toggle Dark Mode" @click="toggleDark()">
+    <span class="check">
+      <span class="icon-wrap">
+        <div v-if="!isDark" class="icon" i-ri-sun-line />
+        <div v-else class="icon" i-ri-moon-line />
+      </span>
+    </span>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.switch {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  border: 1px solid var(--pr-switch-divider);
+  background-color: var(--pr-switch-bg);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.switch:hover {
+  border-color: #8e8e8e;
+}
+
+.check {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  transition: background-color 0.25s, transform 0.25s;
+}
+
+.dark .check {
+  background-color: #1a1a1a;
+}
+
+.icon-wrap {
+  box-sizing: border-box;
+  display: block;
+  padding: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+}
+
+.icon {
+  width: 12px;
+  height: 12px;
+  background-color: rgba(60, 60, 60, 0.7);
+}
+
+.dark .icon {
+  background-color: rgba(255, 255, 255, 0.87);
+}
+
+.dark .switch-appearance :deep(.check) {
+  transform: translateX(18px);
+}
+</style>

package/config/index.ts

@@ -1,4 +1,4 @@
-import type { ThemeConfig, ThemeUserConfig } from '../types'
+import type { ThemeConfig } from '../types'
 
 export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
 
@@ -16,14 +16,3 @@ export const defaultThemeConfig: ThemeConfig = {
 }
 
 export default defaultThemeConfig
-
-/**
- * generateSafelist by config
- * @param themeConfig
- * @returns
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function generateSafelist(themeConfig: ThemeUserConfig) {
-  const safelist: string[] = []
-  return safelist
-}

package/layouts/404.vue

@@ -8,18 +8,19 @@ const { t } = useI18n()
 
 <template>
   <Layout>
-    <template #content>
-      <div text="center">
-        <div text-4xl>
-          <div i-ri-alarm-warning-line inline-block />
-        </div>
-        <router-view />
-        <div>
-          <button btn text-sm m="3 t8" @click="router.back()">
-            {{ t('button.back') }}
-          </button>
-        </div>
-      </div>
+    <template #sidebar>
+      <div />
     </template>
+    <div text="center" m="t-20">
+      <div text-4xl>
+        <div i-ri-alarm-warning-line inline-block />
+      </div>
+      <router-view />
+      <div>
+        <button btn text-sm m="3 t8" @click="router.back()">
+          {{ t('button.back') }}
+        </button>
+      </div>
+    </div>
   </Layout>
 </template>

package/layouts/home.vue

@@ -1,11 +1,5 @@
 <template>
   <Layout>
-    <div class="divide-y divide-gray-200">
-      <PressHeader />
-
-      <slot>
-        <router-view />
-      </slot>
-    </div>
+    <PressHome />
   </Layout>
 </template>

package/layouts/layout.vue

@@ -1,45 +1,55 @@
+<script lang="ts" setup>
+import { useSidebar } from 'valaxy/client'
+
+const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar()
+</script>
+
 <template>
-  <div class="antialiased">
-    <div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
-      <PressNav />
-    </div>
+  <div class="layout antialiased">
+    <PressNav />
+    <PressLocalNav :open="isSidebarOpen" @open-menu="openSidebar()" />
+    <slot name="sidebar">
+      <PressSidebar :open="isSidebarOpen" />
+    </slot>
+    <PressBackdrop :show="isSidebarOpen" @click="closeSidebar" />
 
-    <main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
-      <slot>
-        <router-view v-slot="{ Component }">
-          <component :is="Component">
-            <template #main-header>
-              <slot name="main-header" />
-            </template>
+    <slot>
+      <router-view v-slot="{ Component }">
+        <component :is="Component">
+          <template #main-header>
+            <slot name="main-header" />
+          </template>
 
-            <template #main-header-after>
-              <slot name="main-header-after" />
-            </template>
-            <template #main>
-              <slot name="main" />
-            </template>
-            <template #main-content>
-              <slot name="main-content" />
-            </template>
-            <template #main-content-after>
-              <slot name="main-content-after" />
-            </template>
-            <template #main-nav-before>
-              <slot name="main-nav-before" />
-            </template>
-            <template #main-nav-after>
-              <slot name="main-nav-after" />
-            </template>
-            <template #aside-custom>
-              <slot name="aside-custom" />
-            </template>
-            <template #footer>
-              <slot name="footer" />
-            </template>
-          </component>
-        </router-view>
-      </slot>
-    </main>
+          <template #main-header-after>
+            <slot name="main-header-after" />
+          </template>
+          <template #main>
+            <slot name="main" />
+          </template>
+          <template #main-content>
+            <slot name="main-content" />
+          </template>
+          <template #main-content-after>
+            <slot name="main-content-after" />
+          </template>
+          <template #main-nav-before>
+            <slot name="main-nav-before" />
+          </template>
+          <template #main-nav-after>
+            <slot name="main-nav-after" />
+          </template>
+          <template #aside>
+            <slot name="aside" />
+          </template>
+          <template #aside-custom>
+            <slot name="aside-custom" />
+          </template>
+          <template #footer>
+            <slot name="footer" />
+          </template>
+        </component>
+      </router-view>
+    </slot>
   </div>
 </template>
 

package/node/index.ts

@@ -1,43 +1,2 @@
-import { defineThemePlugin } from 'valaxy'
-import type { ResolvedValaxyOptions } from 'valaxy'
-import type { Plugin } from 'vite'
-
 export * from '../config'
-export * from '../types'
-
-export interface UserOptions {
-  colors: {
-    primary: string
-  }
-}
-
-function ThemeYunVitePlugin(options: ResolvedValaxyOptions): Plugin {
-  const themeConfig = options.config.themeConfig
-  return {
-    name: 'valaxy-theme-yun',
-    enforce: 'pre',
-    config() {
-      return {
-        css: {
-          preprocessorOptions: {
-            scss: {
-              additionalData: `$c-primary: ${themeConfig.colors?.primary || '#0078E7'} !default;`,
-            },
-          },
-        },
-
-        optimizeDeps: {
-          exclude: ['@docsearch/js'],
-        },
-      }
-    },
-  }
-}
-
-export default defineThemePlugin((options) => {
-  return {
-    vite: {
-      plugins: [ThemeYunVitePlugin(options)],
-    },
-  }
-})
+export * from '../types/index.d'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -14,24 +14,15 @@
     "url": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-press"
   },
   "exports": {
-    ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    },
     "./*": "./*"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "node/index.ts",
+  "types": "types/index.d.ts",
   "dependencies": {
     "@docsearch/css": "^3.1.1",
     "@docsearch/js": "^3.1.1"
   },
   "devDependencies": {
-    "valaxy": "0.9.0"
-  },
-  "scripts": {
-    "build": "rimraf dist && tsup",
-    "dev": "tsup --watch"
+    "valaxy": "0.10.0"
   }
 }

package/pages/[..all].vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>
+
+<template>
+  <div>
+    {{ t('not-found') }}
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>