valaxy-theme-press 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,8 @@
+# valaxy-theme-press
+
+This is a theme for valaxy docs.
+
+## Reference
+
+- [vitepress](https://vitepress.vuejs.org/)
+- [nextjs](https://nextjs.org/)

package/components/DocsBoard.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <YunBoard m="t-4">
+    这里是 Valaxy 的文档兼测试站点
+
+    <ul>
+      <li>
+        <a href="/docs" :title="t('docs.view_docs')">
+          {{ t('docs.view_docs') }}
+        </a>
+      </li>
+      <li>
+        <router-link class="flex justify-center" to="/examples">
+          Examples
+        </router-link>
+      </li>
+    </ul>
+  </YunBoard>
+</template>

package/components/PressAside.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+// import { useI18n } from 'vue-i18n'
+import { useData, useFrontmatter } from 'valaxy'
+import { useAppStore } from 'valaxy/client/stores/app'
+
+const frontmatter = useFrontmatter()
+const data = useData()
+// const { t } = useI18n()
+const app = useAppStore()
+</script>
+
+<template>
+  <button
+    class="xl:hidden toc-btn shadow fixed press-icon-btn z-350"
+    opacity="75" right="2" bottom="19"
+    @click="app.toggleRightSidebar()"
+  >
+    <div i-ri-file-list-line />
+  </button>
+
+  <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
+
+  <aside
+    class="press-aside lt-xl:fixed
+    press-card xl:(shadow-none hover:shadow-none) shadow hover:shadow-lg"
+    p="l-0 xl:l-4" text="center"
+    z="10"
+    :class="app.isRightSidebarOpen && 'open'"
+  >
+    <div class="aside-container lt-xl:fixed" flex="~ col">
+      <PressToc v-if="frontmatter.toc !== false" :headers="data.headers || []" />
+      <div class="flex-grow" />
+      <div v-if="$slots.default" class="custom-container">
+        <slot />
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
+.press-card{
+  box-shadow: none;
+  background-color: var(--va-c-bg);
+}
+
+.press-aside {
+  position: relative;
+  min-width: 272px;
+  transform: translateX(100%);
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+
+  transition: box-shadow var(--va-transition-duration), opacity 0.25s,
+  transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
+
+  &.open {
+    display: block;
+    transform: translateX(0);
+  }
+}
+
+.aside-container {
+  position: sticky;
+  top: calc(var(--pr-nav-height) + 32px);
+  margin-top: calc(var(--pr-nav-height) * -1 - 32px);
+  padding-top: calc(var(--pr-nav-height) + 32px);
+  height: 100vh;
+}
+
+@include media('xl') {
+  .aside-container {
+    top: 0;
+  }
+
+  .press-aside {
+    transform: translateX(0);
+  }
+}
+
+.toc-btn {
+  color: var(--va-c-primary);
+  background-color: var(--va-c-bg);
+}
+</style>

package/components/PressBackdrop.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+defineProps<{
+  show: boolean
+}>()
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="show" class="press-backdrop" />
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.press-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--pr-z-index-backdrop);
+  background: rgba(0, 0, 0, .6);
+  transition: opacity 0.5s;
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .fade-leave-active {
+    transition-duration: .25s;
+  }
+}
+
+@media (min-width: 1280px) {
+  .press-backdrop {
+    display: none;
+  }
+}
+</style>

package/components/PressButton.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { EXTERNAL_URL_RE } from 'valaxy'
+
+const props = defineProps<{
+  theme: 'brand' | 'alt'
+  link: string
+  text: string
+}>()
+
+const isUrl = computed(() => EXTERNAL_URL_RE.test(props.link))
+const router = useRouter()
+
+const classes = computed(() => {
+  const arr = []
+  if (props.theme === 'brand')
+    arr.push('from-blue-500', 'to-blue-700')
+  else
+    arr.push('from-gray-600', 'to-stone-700')
+
+  return arr
+})
+</script>
+
+<template>
+  <component
+    :is="isUrl ? 'a' : 'button'"
+    m="2"
+    :class="classes"
+    class="sese-btn btn" bg="gradient-to-r"
+    :href="isUrl ? link : undefined"
+    :target="isUrl ? '_blank' : undefined"
+    @click="!isUrl && router.push(link)"
+  >
+    {{ text }}
+  </component>
+</template>

package/components/PressCategories.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { Categories } from 'valaxy'
+import { ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  categories: Categories
+  /**
+   * 当前层级
+   */
+  level?: number
+  displayCategory?: (category: string) => void
+  collapsable?: boolean
+}>(), {
+  level: 0,
+  collapsable: true,
+})
+
+const collapsable = ref(props.collapsable)
+</script>
+
+<template>
+  <ul v-for="category, key in Object.fromEntries(categories)" :key="key" class="category-list" m="l-4">
+    <PressCategory :name="key.toString()" :category="category" :level="level + 1" :display-category="displayCategory" :collapsable="collapsable" />
+  </ul>
+</template>
+
+<style lang="scss">
+.post-list-item {
+  a {
+    color: var(--va-c-text-light);
+    transition: all 0.2s;
+
+    &:hover {
+      color: var(--va-c-primary);
+    }
+
+    &.active {
+      color: var(--va-c-primary);
+    }
+  }
+}
+
+.category-list-item {
+  .folder-action {
+    &:hover {
+      color: var(--va-c-primary);
+    }
+  }
+}
+</style>

package/components/PressCategory.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { Category, Post } from 'valaxy'
+import { isParentCategory } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(defineProps<{
+  name: string
+  // to eliminate the warning
+  category: Category
+  level?: number
+  displayCategory?: (category: string) => void
+
+  /**
+   * collapse children
+   */
+  collapsable?: boolean
+}>(), {
+  collapsable: true,
+})
+
+const collapsable = ref(props.collapsable)
+const { t, locale } = useI18n()
+
+const getTitle = (post: Post | any) => {
+  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
+}
+</script>
+
+<template>
+  <li v-if="category.total" class="category-list-item inline-flex items-center">
+    <span class="folder-action inline-flex cursor-pointer" @click="collapsable = !collapsable">
+      <div v-if="collapsable" i-ri-folder-add-line />
+      <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line /></span>
+    <span class="category-name" m="l-1" @click="displayCategory ? displayCategory(name) : null">
+      {{ name === 'Uncategorized' ? t('category.uncategorized') : name }} [{{ category.total }}]
+    </span>
+  </li>
+
+  <template v-if="!collapsable">
+    <ul v-if="!isParentCategory(category)">
+      <li v-for="post, i in category.posts" :key="i" class="post-list-item" m="l-4">
+        <router-link v-if="post.title" :to="post.path || ''" class="inline-flex items-center" active-class="active">
+          <span m="l-1" text="sm">{{ getTitle(post) }}</span>
+        </router-link>
+      </li>
+    </ul>
+    <PressCategories v-else :categories="category.children" :display-category="displayCategory" :collapsable="collapsable" />
+  </template>
+</template>

package/components/PressFeature.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { Feature } from '../types'
+
+defineProps<{
+  feature: Feature
+}>()
+</script>
+
+<template>
+  <article class="press-feature">
+    <div v-if="feature.icon" class="icon">
+      {{ feature.icon }}
+    </div>
+    <h2 class="title">
+      {{ feature.title }}
+    </h2>
+    <p class="details">
+      {{ feature.details }}
+    </p>
+  </article>
+</template>
+
+<style scoped>
+.press-feature {
+  border: 1px solid var(--va-c-bg-soft);
+  border-radius: 12px;
+  padding: 24px;
+  height: 100%;
+  background-color: var(--va-c-bg-soft);
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  background-color: var(--va-c-gray-light-4);
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+}
+
+.dark .icon {
+  background-color: var(--va-c-bg);
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.details {
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-c-text-light);
+}
+</style>

package/components/PressFeatures.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { Feature } from '../types'
+
+const props = defineProps<{
+  features: Feature[]
+}>()
+
+const grid = computed(() => {
+  const length = props.features.length
+  if (length <= 3)
+    return `grid-cols-1 sm:grid-cols-2 md:grid-cols-${length}`
+  else
+    return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
+})
+</script>
+
+<template>
+  <div class="press-features">
+    <div class="m-auto container grid gap-4" :class="[grid]">
+      <div v-for="feature in features" :key="feature.title" class="inline-grid">
+        <PressFeature :feature="feature" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/PressHome.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="press-home">
+    <slot name="home-hero-before" />
+    <PressHomeHero />
+    <slot name="home-hero-after" />
+
+    <slot name="home-features-before" />
+    <PressHomeFeatures />
+    <slot name="home-features-after" />
+
+    <slot>
+      <router-view />
+    </slot>
+
+    <p align="center">
+      <a href="https://sponsors.yunyoujun.cn">
+        <img src="https://sponsors.yunyoujun.cn/sponsors.svg">
+      </a>
+    </p>
+  </div>
+</template>

package/components/PressHomeFeatures.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useFrontmatter } from 'valaxy'
+const fm = useFrontmatter()
+</script>
+
+<template>
+  <PressFeatures
+    v-if="fm.features"
+    class="press-home-features"
+    :features="fm.features"
+  />
+</template>

package/components/PressHomeHero.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useFrontmatter } from 'valaxy'
+import PressButton from './PressButton.vue'
+
+const fm = useFrontmatter()
+</script>
+
+<template>
+  <h1 m="md:t-24 t-10 md:t-20" text="center">
+    <span text="5rem" font="black" class="gradient-text from-purple-800 to-blue-500" bg="gradient-to-r">
+      {{ fm.hero.name }}
+    </span>
+    <br>
+    <small opacity="75">LOGO NOT READY</small>
+  </h1>
+
+  <h1 m="y-10" text="center 6xl" font="black" leading="tight">
+    Next Generation
+    <br>
+    Static <span class="gradient-text from-blue-500 to-purple-700" bg="gradient-to-r">Blog</span> Framework
+  </h1>
+
+  <div p="2" text="center">
+    <PressButton
+      v-for="action in fm.hero.actions"
+      :key="action.link"
+      :theme="action.theme"
+      :link="action.link"
+      :text="action.text"
+    />
+  </div>
+
+  <br>
+</template>

package/components/PressLocalNav.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { useSidebar } from 'valaxy/client'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  (e: 'openMenu'): void
+}>()
+
+const { hasSidebar } = useSidebar()
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div v-if="hasSidebar" class="press-local-nav">
+    <button
+      class="menu"
+      :aria-expanded="open"
+      aria-controls="VPSidebarNav"
+      @click="$emit('openMenu')"
+    >
+      <div i-ri-align-left class="menu-icon" />
+      <span class="menu-text">Menu</span>
+    </button>
+
+    <a class="top-link" href="#" @click="scrollToTop">
+      Return to top
+    </a>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
+.press-local-nav {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: var(--pr-z-index-local-nav);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--pr-c-divider-light);
+  width: 100%;
+  background-color: var(--va-c-bg);
+  transition: border-color 0.5s;
+}
+
+@include media('md') {
+  .press-local-nav {
+    display: none;
+  }
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px 11px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--va-c-text-light);
+  transition: color 0.5s;
+}
+
+.menu:hover {
+  color: var(--va-c-text);
+  transition: color 0.25s;
+}
+
+@include media('md') {
+  .menu {
+    padding: 0 32px;
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.top-link {
+  display: block;
+  padding: 12px 24px 11px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.top-link:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@include media('md') {
+  .top-link {
+    padding: 12px 32px 11px;
+  }
+}
+</style>

package/components/PressNav.vue

@@ -1,38 +1,20 @@
-<script lang="ts" setup>
-import { useConfig } from 'valaxy'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useThemeConfig } from '../composables'
-
-const route = useRoute()
-const isIndex = computed(() => route.path.replace(/index.html$/, '') === '/')
-
-const config = useConfig()
-const themeConfig = useThemeConfig()
-</script>
-
 <template>
-  <nav w="full" class="flex justify-between items-center py-10 font-bold">
-    <a class="text-xl" href="/" :aria-label="config.title">
-      <img
-        class="inline-block mr-2"
-        style="width: 50px; height: 35px"
-        alt="logo"
-        :src="config.favicon"
-      >
-      <span v-if="!isIndex" class="hidden md:inline">{{ config.title }}</span>
-    </a>
-    <div class="text-sm text-gray-500 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>
-    </div>
+  <nav w="full" class="press-nav relative md:fixed md:z-99 font-bold">
+    <PressNavBar />
   </nav>
 </template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
+.press-nav {
+  z-index: var(--pr-z-index-nav);
+}
+
+@include media('md') {
+  .press-nav {
+    -webkit-backdrop-filter: saturate(50%) blur(8px);
+    backdrop-filter: saturate(50%) blur(8px);
+  }
+}
+</style>

package/components/PressSidebar.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { useCategory, usePageList, useSidebar } from 'valaxy'
+
+defineProps<{
+  open: boolean
+}>()
+
+const pages = usePageList()
+const categories = useCategory('', pages.value)
+categories.children.delete('Uncategorized')
+
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <aside
+    v-if="hasSidebar"
+    class="press-sidebar shadow-lg" :class="{ open }"
+    @click.stop
+  >
+    <div text="left" m="2">
+      <PressCategories :categories="categories.children" :collapsable="false" />
+    </div>
+  </aside>
+</template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
+.press-sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.5rem 1rem;
+  padding-top: var(--pr-nav-height);
+  z-index: var(--pr-z-index-sidebar);
+  width: calc(100vw - 64px);
+  max-width: 320px;
+  background-color: var(--va-c-bg);
+  opacity: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateX(-100%);
+  transition: opacity 0.5s, transform 0.25s ease;
+
+  &.open {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 0.25s,
+                transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+}
+
+@include media('md') {
+  .press-sidebar {
+    z-index: 1;
+    padding: 1.5rem 1rem;
+    padding-top: var(--pr-nav-height);
+    width: var(--va-sidebar-width);
+    max-width: 100%;
+    background-color: var(--va-c-bg-alt);
+    opacity: 1;
+    box-shadow: none;
+    transform: translateX(0);
+  }
+}
+</style>