valaxy-theme-press 0.0.1 → 0.0.3

package/components/nav/PressNavItemGroup.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { NavItemGroup } from '../../types'
+defineProps<{
+  item: NavItemGroup
+}>()
+
+const open = ref(false)
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="flex self-stretch relative group"
+    :aria-expanded="open"
+    aria-haspopup="true"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+  >
+    <button
+      type="button"
+      class="button flex items-center"
+      @click="open = !open"
+    >
+      <span class="text">
+        {{ item.text }}
+      </span>
+      <div i-ri-arrow-drop-down-line />
+    </button>
+
+    <div class="menu grow" flex="~ col" items="start">
+      <AppLink v-for="itemLink in item.items" :key="itemLink.text" class="menu-item" p="x-3" :to="itemLink.link">
+        {{ itemLink.text }}
+      </AppLink>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.group .button{
+  color: var(--pr-nav-text);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.group[aria-expanded="true"] .button{
+  color: rgba(60, 60, 60, 0.70);
+  transition: color 0.25s;
+
+  .dark &{
+    color: rgba(235, 235, 235, 0.6)
+  }
+}
+
+.menu {
+  position: absolute;
+  left: 50%;
+
+  min-width: 128px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+  transform: translateX(-50%) translateY(calc(var(--pr-nav-height) / 2));
+
+  border-radius: 12px;
+  padding: 12px;
+  border: 1px solid rgba(60, 60, 60, 0.12);
+  background-color: #ffffff;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  .dark &{
+    background-color: #242424;
+  }
+
+  &-item{
+    display: flex;
+    width: 100%;
+    border-radius: 6px;
+    color: var(--pr-nav-text);
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: background-color .25s,color .25s;
+
+    &:hover{
+      background-color: #f1f1f1;
+      color: var(--va-c-brand);
+
+      .dark &{
+        background-color: #2f2f2f;
+      }
+    }
+
+  }
+}
+
+.group[aria-expanded="true"] > .menu {
+  opacity: 1;
+  visibility: visible;
+}
+</style>

package/components/nav/PressNavItemLink.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import type { NavItemLink } from '../../types'
+defineProps<{
+  item: NavItemLink
+}>()
+
+const route = useRoute()
+</script>
+
+<template>
+  <AppLink
+    class="press-nav-item-link"
+    :class="{
+      active: route.path === item.link,
+    }"
+    :to="item.link"
+    rel="noopener"
+    show-external-icon
+  >
+    {{ item.text }}
+  </AppLink>
+</template>
+
+<style lang="scss" scoped>
+.press-nav-item-link{
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--pr-nav-text);
+  transition: color 0.25s;
+
+  &:hover{
+    color: var(--va-c-brand);
+  }
+}
+.active{
+  color: var(--va-c-brand);
+}
+</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/composables/edit-link.ts

@@ -0,0 +1,14 @@
+import { useData } from 'valaxy'
+import { computed } from 'vue'
+import { useThemeConfig } from '.'
+
+export function useEditLink() {
+  const themeConfig = useThemeConfig()
+  return computed(() => {
+    const { text = 'Edit this page', pattern } = themeConfig.value.editLink || {}
+    const { relativePath } = useData()
+    const url = pattern.replace(/:path/g, relativePath)
+
+    return { url, text }
+  })
+}

package/composables/index.ts

@@ -1 +1,2 @@
 export * from './config'
+export * from './edit-link'

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'
 
@@ -12,18 +12,13 @@ export const defaultThemeConfig: ThemeConfig = {
     primary: '#0078E7',
   },
 
+  sidebar: [],
   nav: [],
-}
 
-export default defaultThemeConfig
+  editLink: {
+    pattern: 'https://github.com/YunYouJun/valaxy/edit/main/docs/:path',
+    text: 'Edit this page on GitHub',
+  },
 
-/**
- * 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
+  footer: {},
 }

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,58 @@
+<script lang="ts" setup>
+import { useLayout, useSidebar } from 'valaxy'
+
+const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar()
+const layout = useLayout()
+</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 v-if="layout !== 'post'" :open="isSidebarOpen" />
+    </slot>
+    <PressBackdrop :show="isSidebarOpen" @click="closeSidebar" />
+
+    <slot>
+      <router-view v-slot="{ Component }">
+        <component :is="Component">
+          <template #main-header>
+            <slot name="main-header" />
+          </template>
 
-    <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>
+          <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>
 
-            <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>
+    <PressFooter />
   </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.3",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -14,24 +14,25 @@
     "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"
+    "@docsearch/css": "^3.3.0",
+    "@docsearch/js": "^3.3.0"
   },
   "devDependencies": {
-    "valaxy": "0.9.0"
+    "valaxy": "workspace:*"
   },
-  "scripts": {
-    "build": "rimraf dist && tsup",
-    "dev": "tsup --watch"
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search",
+        "@types/react",
+        "react",
+        "react-dom"
+      ]
+    }
   }
-}
+}

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>

package/setup/main.ts

@@ -0,0 +1,89 @@
+import { defineAppSetup } from 'valaxy'
+import { nextTick } from 'vue'
+
+export default defineAppSetup((ctx) => {
+  const { router, isClient } = ctx
+  if (!isClient)
+    return
+
+  window.addEventListener(
+    'click',
+    (e) => {
+      const link = (e.target as Element).closest('a')
+      if (link) {
+        const { protocol, hostname, pathname, hash, target } = link
+        const currentUrl = window.location
+        const extMatch = pathname.match(/\.\w+$/)
+        // only intercept inbound links
+        if (
+          !e.ctrlKey
+            && !e.shiftKey
+            && !e.altKey
+            && !e.metaKey
+            && target !== '_blank'
+            && protocol === currentUrl.protocol
+            && hostname === currentUrl.hostname
+            && !(extMatch && extMatch[0] !== '.html')
+        ) {
+          if (pathname === currentUrl.pathname) {
+            e.preventDefault()
+            // scroll between hash anchors in the same page
+            if (hash && hash !== currentUrl.hash) {
+              history.pushState(null, '', hash)
+              // still emit the event so we can listen to it in themes
+              window.dispatchEvent(new Event('hashchange'))
+              // use smooth scroll when clicking on header anchor links
+              scrollTo(link, hash, link.classList.contains('header-anchor'))
+            }
+          }
+        }
+      }
+    },
+    { capture: true },
+  )
+
+  window.addEventListener('hashchange', (e) => {
+    e.preventDefault()
+  })
+
+  router.beforeEach((to, from) => {
+    if (to.path !== from.path)
+      return
+
+    nextTick(() => {
+      scrollTo(document.body, to.hash, true)
+    })
+  })
+})
+
+function scrollTo(el: HTMLElement, hash: string, smooth = false) {
+  let target: Element | null = null
+  try {
+    target = el.classList.contains('header-anchor')
+      ? el
+      : (decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null
+  }
+  catch (e) {
+    console.warn(e)
+  }
+
+  if (target) {
+    const targetPadding = -64
+    const targetTop
+      = window.scrollY
+      + (target as HTMLElement).getBoundingClientRect().top
+      + targetPadding
+
+    // only smooth scroll if distance is smaller than screen height.
+    if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight) {
+      window.scrollTo(0, targetTop)
+    }
+    else {
+      window.scrollTo({
+        left: 0,
+        top: targetTop,
+        behavior: 'smooth',
+      })
+    }
+  }
+}

package/styles/css-vars.scss

@@ -0,0 +1,46 @@
+:root {
+  --pr-c-indigo-lighter: #c9def1;
+}
+
+:root {
+  --pr-c-text-code: #374562;
+  --pr-c-text-1: #213547;
+
+  // aside
+  --pr-aside-text-1: var(--pr-c-text-1);
+  --pr-aside-text-2: rgba(60, 60, 60, 0.702);
+
+  --pr-aside-divider: rgba(60, 60, 60, 0.122);
+
+  --pr-c-divider-light: rgba(60, 60, 60, 0.12);
+
+  // nav
+  --pr-nav-height: var(--pr-nav-height-mobile);
+  --pr-nav-height-mobile: 60px;
+  --pr-nav-text: var(--pr-c-text-1);
+
+  // z-index
+  --va-z-overlay: var(--pr-z-index-backdrop);
+  --pr-z-index-local-nav: 8;
+  --pr-z-index-nav: 9;
+  --pr-z-index-backdrop: 10;
+  --pr-z-index-aside: 11;
+  --pr-z-index-sidebar: 12;
+
+  // switch
+  --pr-switch-divider: rgba(60, 60, 60, 0.29);
+  --pr-switch-bg: #f1f1f1;
+}
+
+.dark {
+  --pr-c-text-code: var(--pr-c-indigo-lighter);
+  --pr-c-text-1: #ffffffde;
+
+  // aside
+  --pr-aside-text-2: #ebebeb99;
+  --pr-aside-divider: rgba(84, 84, 84, 0.48);
+
+  // switch
+  --pr-switch-divider: rgba(84, 84, 84, 0.65);
+  --pr-switch-bg: #3a3a3a;
+}

package/styles/helper.scss

@@ -0,0 +1,34 @@
+.gradient-text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.sese-btn {
+  position: relative;
+  z-index: 0;
+
+  @apply transition;
+
+  &:hover {
+    @apply shadow;
+  }
+}
+
+.press-icon-btn {
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  width: 3rem;
+  height: 3rem;
+
+  border-radius: 50%;
+
+  div {
+    font-size: 1.2rem;
+  }
+}

package/styles/index.scss

@@ -0,0 +1,7 @@
+@use "./helper.scss";
+@use "./markdown.scss";
+
+.layout {
+  display: flex;
+  flex-direction: column;
+}