valaxy-theme-press 0.0.2 → 0.0.4

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

@@ -56,6 +56,6 @@ defineProps<{
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--va-c-text-light);
+  color: var(--va-c-text-lighter);
 }
 </style>

package/components/PressFeatures.vue

@@ -17,7 +17,7 @@ const grid = computed(() => {
 
 <template>
   <div class="press-features">
-    <div class="m-auto container grid gap-4" :class="[grid]">
+    <div class="m-auto container grid gap-4" p="x-4" :class="[grid]">
       <div v-for="feature in features" :key="feature.title" class="inline-grid">
         <PressFeature :feature="feature" />
       </div>

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) {
+  .pr-footer {
+    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

@@ -1,5 +1,5 @@
 <template>
-  <div class="press-home">
+  <div class="press-home" style="--va-code-mobile-margin-x: 0">
     <slot name="home-hero-before" />
     <PressHomeHero />
     <slot name="home-hero-after" />
@@ -11,11 +11,5 @@
     <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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useFrontmatter } from 'valaxy'
+
 const fm = useFrontmatter()
 </script>
 

package/components/PressHomeHero.vue

@@ -6,19 +6,18 @@ 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">
+  <div text="center" m="md:t-24 t-10 md:t-20" flex="~ col" justify="center" items="center">
+    <ValaxyLogo mb="2" />
+    <h1 my="10" text="4xl md:8xl" 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>
+  </div>
 
-  <h1 m="y-10" text="center 6xl" font="black" leading="tight">
+  <h2 m="b-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>
+  </h2>
 
   <div p="2" text="center">
     <PressButton

package/components/PressLocalNav.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useSidebar } from 'valaxy/client'
+import { useSidebar } from 'valaxy'
 
 defineProps<{
   open: boolean
@@ -21,7 +21,7 @@ function scrollToTop() {
     <button
       class="menu"
       :aria-expanded="open"
-      aria-controls="VPSidebarNav"
+      aria-controls="pr-sidebar-nav"
       @click="$emit('openMenu')"
     >
       <div i-ri-align-left class="menu-icon" />
@@ -35,13 +35,13 @@ function scrollToTop() {
 </template>
 
 <style scoped lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
 .press-local-nav {
   position: sticky;
   top: 0;
   left: 0;
-  z-index: var(--pr-z-index-local-nav);
+  z-index: var(--pr-z-local-nav);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -51,7 +51,7 @@ function scrollToTop() {
   transition: border-color 0.5s;
 }
 
-@include media('md') {
+@include screen('md') {
   .press-local-nav {
     display: none;
   }
@@ -73,7 +73,7 @@ function scrollToTop() {
   transition: color 0.25s;
 }
 
-@include media('md') {
+@include screen('md') {
   .menu {
     padding: 0 32px;
   }
@@ -92,16 +92,16 @@ function scrollToTop() {
   line-height: 24px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--vp-c-text-2);
+  color: var(--pr-c-text-2);
   transition: color 0.5s;
 }
 
 .top-link:hover {
-  color: var(--vp-c-text-1);
+  color: var(--pr-c-text-1);
   transition: color 0.25s;
 }
 
-@include media('md') {
+@include screen('md') {
   .top-link {
     padding: 12px 32px 11px;
   }

package/components/PressNav.vue

@@ -1,17 +1,42 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { useWindowScroll } from '@vueuse/core'
+import { useSidebar } from 'valaxy'
+import { useNav } from '../composables/nav'
+
+const { y } = useWindowScroll()
+
+const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+const { hasSidebar } = useSidebar()
+
+provide('close-screen', closeScreen)
+
+const classes = computed(() => ({
+  'no-sidebar': !hasSidebar.value,
+  'fill-bg': y.value > 0,
+}))
+</script>
+
 <template>
-  <nav w="full" class="press-nav relative md:fixed md:z-99 font-bold">
-    <PressNavBar />
+  <nav w="full" class="press-nav relative md:fixed md:z-99 font-bold" :class="classes">
+    <PressNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
+
+    <PressNavScreen :open="isScreenOpen" />
   </nav>
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
 .press-nav {
-  z-index: var(--pr-z-index-nav);
+  z-index: var(--pr-z-nav);
+}
+
+.pr-Nav.fill-bg {
+  background-color: var(--pr-nav-bg-color);
 }
 
-@include media('md') {
+@include screen('md') {
   .press-nav {
     -webkit-backdrop-filter: saturate(50%) blur(8px);
     backdrop-filter: saturate(50%) blur(8px);

package/components/PressNavBar.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { useSidebar, useSiteConfig } from 'valaxy'
+import { useThemeConfig } from '../composables'
+
+defineProps<{
+  isScreenOpen?: boolean
+}>()
+
+defineEmits<{
+  (e: 'toggleScreen'): void
+}>()
+
+const { hasSidebar } = useSidebar()
+
+const siteConfig = useSiteConfig()
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div class="pr-navbar flex justify-between items-center pl-4 pr-2" :class="{ 'has-sidebar': hasSidebar }">
+    <router-link class="text-xl flex justify-center items-center" to="/" :aria-label="siteConfig.title">
+      <img v-if="themeConfig.logo" class="logo" :src="themeConfig.logo" alt="LOGO">
+      <span class="inline-flex">{{ siteConfig.title }}</span>
+    </router-link>
+    <div class="self-stretch flex justify-center items-center text-sm leading-5">
+      <PressNavBarSearch p="x-2" />
+      <PressNavBarMenu p="x-2" />
+      <PressNavBarTranslations p="x-2" />
+      <PressNavBarAppearance p="x-2" />
+      <PressNavBarSocialLinks p="x-2" />
+
+      <PressNavBarHamburger :active="isScreenOpen" @click="$emit('toggleScreen')" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+
+:root {
+  --pr-navbar-c-bg: rgba(255, 255, 255, 0.8);
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
+}
+
+.dark {
+  --pr-navbar-c-bg: rgba(24, 24, 24, 0.3);
+}
+
+.pr-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: var(--pr-navbar-c-bg);
+}
+
+@include screen('md') {
+  .pr-navbar {
+    padding: 0 32px;
+  }
+}
+
+@include screen('md') {
+  .pr-navbar.has-sidebar .content {
+    margin-right: -32px;
+    padding-right: 32px;
+    -webkit-backdrop-filter: saturate(50%) blur(8px);
+    backdrop-filter: saturate(50%) blur(8px);
+  }
+
+  @supports not (backdrop-filter: saturate(50%) blur(8px)) {
+    .pr-navbar.has-sidebar .content {
+      background: rgba(255, 255, 255, 0.95);
+    }
+
+    .dark .pr-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);
+}
+</style>

package/components/PressNavBarAppearance.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="inline-flex items-center lt-lg:hidden">
+    <PressSwitchAppearance />
+  </div>
+</template>

package/components/PressNavBarHamburger.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="pr-NavBarHamburger"
+    :class="{ active }"
+    aria-label="mobile navigation"
+    :aria-expanded="active"
+    aria-controls="pr-NavScreen"
+    @click="$emit('click')"
+  >
+    <span class="container">
+      <span class="top" />
+      <span class="middle" />
+      <span class="bottom" />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.pr-NavBarHamburger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: var(--pr-nav-height);
+}
+
+@media (min-width: 768px) {
+  .pr-NavBarHamburger {
+    display: none;
+  }
+}
+
+.container {
+  position: relative;
+  width: 16px;
+  height: 14px;
+  overflow: hidden;
+}
+
+.pr-NavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
+.pr-NavBarHamburger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
+.pr-NavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
+
+.pr-NavBarHamburger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
+.pr-NavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
+.pr-NavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+
+.pr-NavBarHamburger.active:hover .top,
+.pr-NavBarHamburger.active:hover .middle,
+.pr-NavBarHamburger.active:hover .bottom {
+  background-color: var(--pr-c-text-2);
+  transition: top .25s, background-color .25s, transform .25s;
+}
+
+.top,
+.middle,
+.bottom {
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background-color: var(--pr-c-text-1);
+  transition: top .25s, background-color .5s, transform .25s;
+}
+
+.top    { top: 0; left: 0; transform: translateX(0); }
+.middle { top: 6px; left: 0; transform: translateX(8px); }
+.bottom { top: 12px; left: 0; transform: translateX(4px); }
+</style>

package/components/PressNavBarMenu.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../composables'
+
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div class="flex lt-md:hidden">
+    <template v-for="item in themeConfig.nav" :key="item.text">
+      <PressNavItemLink v-if="'link' in item" class="px-2" :item="item" />
+      <PressNavItemGroup v-else class="px-2" :item="item" />
+    </template>
+  </div>
+</template>

package/components/PressNavBarSearch.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { useSiteConfig } from 'valaxy'
+import { computed, defineAsyncComponent } from 'vue'
+
+// ref vitepress search box
+const siteConfig = useSiteConfig()
+const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
+
+const PressAlgoliaSearch = isAlgolia.value
+  ? defineAsyncComponent(() => import('./PressAlgoliaSearch.vue'))
+  : null
+</script>
+
+<template>
+  <div v-if="siteConfig.search.enable" class="VPNavBarSearch">
+    <ClientOnly>
+      <PressAlgoliaSearch v-if="isAlgolia" />
+    </ClientOnly>
+  </div>
+</template>
+
+<style>
+.VPNavBarSearch {
+  display: flex;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarSearch {
+    flex-grow: 1;
+    padding-left: 24px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPNavBarSearch {
+    padding-left: 32px;
+  }
+}
+</style>

package/components/PressNavBarSocialLinks.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../composables'
+
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <PressSocialLinks
+    v-if="themeConfig.socialLinks"
+    class="pr-nav-bar-social-links"
+    :links="themeConfig.socialLinks"
+  />
+</template>
+
+<style scoped>
+.pr-nav-bar-social-links {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .pr-nav-bar-social-links {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/components/PressNavBarTranslations.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex items-center lt-lg:hidden">
+    <PressToggleLocale />
+  </div>
+</template>

package/components/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
+    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>