valaxy-theme-press 0.0.1 → 0.0.3

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/client/index.ts

@@ -0,0 +1 @@
+export * from '../composables'

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>
+        <router-link to="/docs" :title="t('docs.view_docs')">
+          {{ t('docs.view_docs') }}
+        </router-link>
+      </li>
+      <li>
+        <router-link class="flex justify-center" to="/examples">
+          Examples
+        </router-link>
+      </li>
+    </ul>
+  </YunBoard>
+</template>

package/components/PressArticle.vue

@@ -17,15 +17,14 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
 </script>
 
 <template>
-  <article class="xl:divide-y xl:divide-gray-200">
-    <header class="pt-6 xl:pb-10 space-y-1 text-center">
+  <article class="xl:divide-y xl:divide-gray-200 max-w-7xl m-auto" p="x-6" w="full">
+    <header class="pt-20 xl:pb-10 space-y-1 text-center">
       <PressDate :date="frontmatter.date" />
       <h1
         class="
           text-3xl
           leading-9
           font-extrabold
-          text-gray-900
           tracking-tight
           sm:text-4xl sm:leading-10
           md:text-5xl md:leading-14
@@ -40,14 +39,14 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
         divide-y
         xl:divide-y-0
         divide-gray-200
-        xl:grid xl:grid-cols-4 xl:gap-x-10
+        xl:grid xl:grid-cols-12 xl:gap-x-6
         pb-16
         xl:pb-20
       "
       style="grid-template-rows: auto 1fr"
     >
       <PressAuthor v-if="frontmatter.author" :frontmatter="frontmatter" />
-      <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
+      <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-8 xl:row-span-2">
         <router-view />
       </div>
 
@@ -57,7 +56,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           font-medium
           leading-5
           divide-y divide-gray-200
-          xl:col-start-1 xl:row-start-2
+          xl:col-start-1 xl:row-start-2 xl:col-span-2
         "
       >
         <div v-if="nextPost" class="py-8">
@@ -65,19 +64,25 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
             Next Article
           </h2>
           <div class="link">
-            <a :href="nextPost.href">{{ nextPost.title }}</a>
+            <router-link :to="nextPost.href">
+              {{ nextPost.title }}
+            </router-link>
           </div>
         </div>
-        <div v-if="prevPost" class="py-8">
+        <div v-if="prevPost && prevPost.href" class="py-8">
           <h2 class="text-xs tracking-wide uppercase text-gray-500">
             Previous Article
           </h2>
           <div class="link">
-            <a :href="prevPost.href">{{ prevPost.title }}</a>
+            <router-link :to="prevPost.href">
+              {{ prevPost.title }}
+            </router-link>
           </div>
         </div>
         <div class="pt-8">
-          <a class="link" href="/">← Back to the blog</a>
+          <router-link class="link" to="/">
+            ← Back to Home
+          </router-link>
         </div>
       </footer>
     </div>

package/components/PressArticleCard.vue

@@ -12,7 +12,9 @@ defineProps<{
     <div class="space-y-5 xl:col-span-3">
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
-          <a class="text-gray-900" :href="post.path">{{ post.title }}</a>
+          <router-link class="text-gray-900" :to="post.path || ''">
+            {{ post.title }}
+          </router-link>
         </h2>
         <div
           v-if="post.excerpt"
@@ -21,7 +23,9 @@ defineProps<{
         />
       </div>
       <div class="text-base leading-6 font-medium">
-        <a class="link" aria-label="read more" :href="post.path">Read more →</a>
+        <router-link class="link" aria-label="read more" :to="post.path || ''">
+          Read more →
+        </router-link>
       </div>
     </div>
   </article>

package/components/PressAside.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { useFrontmatter } from 'valaxy'
+import { useAppStore } from 'valaxy/client/stores/app'
+import PressOutline from './PressOutline.vue'
+
+const frontmatter = useFrontmatter()
+const app = useAppStore()
+</script>
+
+<template>
+  <button
+    class="toc-btn shadow-lg fixed press-icon-btn z-99 xl:hidden!"
+    right="5" bottom="8"
+    @click="app.toggleRightSidebar()"
+  >
+    <div i-ri-file-list-line />
+  </button>
+
+  <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
+
+  <aside
+    class="press-aside lt-xl:fixed shadow
+    press-card xl:(shadow-none hover:shadow-none) hover:shadow-lg"
+    p="l-0 xl:l-8" text="center"
+    z="5"
+    :class="app.isRightSidebarOpen && 'open'"
+  >
+    <div class="aside-container lt-xl:fixed" flex="~ col">
+      <PressOutline v-if="frontmatter.toc !== false" />
+      <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{
+  background-color: var(--va-c-bg);
+}
+
+.press-aside {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: var(--pr-z-index-aside);
+  width: var(--va-aside-width);
+
+  transform: translateX(100%);
+
+  transition: box-shadow var(--va-transition-duration), opacity 0.25s,
+  transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
+
+  &.open {
+    position: fixed;
+    right: 0;
+    display: block;
+    transform: translateX(0);
+  }
+}
+
+.aside-container {
+  position: sticky;
+  top: 0;
+  margin-top: calc(var(--pr-nav-height) * -1 - 20px);
+  padding-top: calc(var(--pr-nav-height) + 20px);
+  height: calc(100vh - var(--pr-nav-height) - 32px);
+}
+
+@include media('xl') {
+  .aside-container {
+    top: 0;
+  }
+
+  .press-aside {
+    transform: translateX(0);
+  }
+}
+
+.toc-btn {
+  color: var(--va-c-bg);
+  background-color: var(--va-c-primary);
+}
+</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,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  theme: 'brand' | 'alt'
+  link: string
+  text: string
+}>()
+
+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>
+  <AppLink
+    :to="link"
+    m="2"
+    :class="classes"
+    class="sese-btn btn rounded-full hover:shadow-lg" bg="gradient-to-r"
+    p="x-6"
+  >
+    {{ text }}
+  </AppLink>
+</template>

package/components/PressCategories.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { useThemeConfig } from 'valaxy'
+import type { Categories } from 'valaxy'
+import { computed, 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)
+
+const themeConfig = useThemeConfig()
+const sidebar = computed(() => themeConfig.value.sidebar)
+</script>
+
+<template>
+  <ul v-for="item in sidebar" :key="item" class="category-list">
+    <PressCategory
+      v-if="categories.get(item)"
+      :name="item" :category="categories.get(item)"
+      :level="level + 1"
+      :display-category="displayCategory"
+      :collapsable="collapsable"
+    />
+  </ul>
+</template>
+
+<style lang="scss">
+.category-list {
+  &:first-child {
+    .category-list-item {
+      border-top: 0px;
+    }
+  }
+}
+.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);
+    }
+  }
+}
+
+.category-list+.category-list {
+  margin-top: 1rem;
+}
+</style>

package/components/PressCategory.vue

@@ -0,0 +1,58 @@
+<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
+  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
+}
+</script>
+
+<template>
+  <li
+    v-if="category.total"
+    p="t-2"
+    w="full" border="t t-$pr-c-divider-light"
+    class="category-list-item inline-flex items-center justify-between"
+  >
+    <span class="category-name" font="bold" m="l-1" @click="displayCategory ? displayCategory(name) : null">
+      {{ name === 'Uncategorized' ? t('category.uncategorized') : name }}
+      <!-- <sup font="normal">[{{ category.total }}]</sup> -->
+    </span>
+    <span class="folder-action inline-flex cursor-pointer" opacity="50" @click="collapsable = !collapsable">
+      <div v-if="collapsable" i-ri-folder-add-line />
+      <div v-else i-ri-folder-reduce-line />
+    </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">
+        <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/PressDocFooter.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useEditLink } from '../composables'
+
+const editLink = useEditLink()
+</script>
+
+<template>
+  <div flex justify="between" text="sm">
+    <a flex items="center" :href="editLink.url" target="_blank">
+      <div i-ri-external-link-line />
+      <span ml-1>{{ editLink.text }}</span>
+    </a>
+    <PressDocFooterLastUpdated />
+  </div>
+</template>

package/components/PressDocFooterLastUpdated.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useData, useThemeConfig } from 'valaxy'
+
+const data = useData()
+const themeConfig = useThemeConfig()
+
+const date = computed(() => new Date(data.lastUpdated!))
+const isoDatetime = computed(() => date.value.toISOString())
+const datetime = ref('')
+
+// set time on mounted hook because the locale string might be different
+// based on end user and will lead to potential hydration mismatch if
+// calculated at build time
+onMounted(() => {
+  watchEffect(() => {
+    datetime.value = date.value.toLocaleString(window.navigator.language)
+  })
+})
+</script>
+
+<template>
+  <p class="press-lastUpdated">
+    {{ themeConfig.lastUpdatedText ?? 'Last updated' }}:
+    <time :datetime="isoDatetime">{{ datetime }}</time>
+  </p>
+</template>
+
+<style scoped>
+.press-lastUpdated {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-c-text-light);
+}
+
+@media (min-width: 640px) {
+  .press-lastUpdated {
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>

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-lighter);
+}
+</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/PressFooter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useSidebar } from 'valaxy'
+import { useThemeConfig } from '../composables'
+
+const themeConfig = useThemeConfig()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <footer v-if="themeConfig.footer" class="press-footer" :class="{ 'has-sidebar': hasSidebar }">
+    <div flex="~ col" class="container">
+      <p v-if="themeConfig.footer.message" class="message" v-html="themeConfig.footer.message" />
+      <p v-if="themeConfig.footer.copyright" class="copyright" v-html="themeConfig.footer.copyright" />
+    </div>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.press-footer {
+  position: relative;
+  z-index: var(--pr-z-index-footer);
+  border-top: 1px solid var(--pr-c-divider-light);
+  padding: 32px 24px;
+  background-color: var(--va-c-bg);
+
+  &.has-sidebar {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--pr-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-c-text-lighter);
+}
+
+.message   { order: 2; }
+.copyright { order: 1; }
+</style>

package/components/PressHome.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="press-home" p="x-6">
+    <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>
+  </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>