valaxy-theme-press 0.0.3 → 0.0.4

package/components/PressAlgoliaSearch.vue

@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { useAddonAlgolia } from 'valaxy-addon-algolia'
+
+const { t } = useI18n()
+
+const { loaded, load, metaKey } = useAddonAlgolia()
+</script>
+
+<template>
+  <div>
+    <AlgoliaSearchBox v-if="loaded" />
+
+    <div v-else id="docsearch" @click="load">
+      <button
+        class="DocSearch DocSearch-Button"
+        aria-label="Search"
+      >
+        <span class="DocSearch-Button-Container">
+          <svg
+            class="DocSearch-Search-Icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+              stroke="currentColor"
+              fill="none"
+              fill-rule="evenodd"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span class="DocSearch-Button-Placeholder">{{ t('search.placeholder') }}</span>
+        </span>
+        <span class="DocSearch-Button-Keys">
+          <kbd class="DocSearch-Button-Key" />
+          <kbd class="DocSearch-Button-Key">K</kbd>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.DocSearch-Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 32px;
+  height: 55px;
+  background: transparent;
+  transition: border-color 0.25s;
+}
+
+.DocSearch-Button:hover {
+  background: transparent;
+}
+
+.DocSearch-Button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.DocSearch-Button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    justify-content: flex-start;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 0 10px 0 12px;
+    width: 100%;
+    height: 40px;
+    background-color: var(--va-c-bg-alt);
+  }
+
+  .DocSearch-Button:hover {
+    border-color: var(--va-c-brand);
+    background: var(--va-c-bg-alt);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Container {
+  display: flex;
+  align-items: center;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  color: var(--va-c-text-1);
+  fill: currentColor;
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  color: var(--va-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Search-Icon {
+    top: 1px;
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+    color: var(--va-c-text-2);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Placeholder {
+  display: none;
+  margin-top: 2px;
+  padding: 0 16px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--va-c-text-2);
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+  color: var(--va-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Placeholder {
+    display: inline-block;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Keys {
+  /*rtl:ignore*/
+  direction: ltr;
+  display: none;
+  min-width: auto;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Key {
+  display: block;
+  margin: 2px 0 0 0;
+  border: 1px solid var(--va-c-divider);
+  /*rtl:begin:ignore*/
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  padding-left: 6px;
+  /*rtl:end:ignore*/
+  min-width: 0;
+  width: auto;
+  height: 22px;
+  font-family: var(--va-font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.5s, border-color 0.5s;
+}
+
+.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+  /*rtl:begin:ignore*/
+  border-right: 1px solid var(--va-c-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  padding-left: 2px;
+  padding-right: 6px;
+  /*rtl:end:ignore*/
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child {
+  font-size: 1px;
+  letter-spacing: -12px;
+  color: transparent;
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child:after {
+  content: v-bind(metaKey);
+  font-size: 12px;
+  letter-spacing: normal;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child > * {
+  display: none;
+}
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--va-c-divider);
+}
+
+.DocSearch-Form {
+  border: 1px solid var(--va-c-brand);
+  background-color: var(--va-c-white);
+}
+
+.dark .DocSearch-Form {
+  background-color: var(--va-c-bg-soft-mute);
+}
+</style>

package/components/PressArticle.vue

@@ -2,18 +2,24 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { useFrontmatter, usePostList } from 'valaxy'
+import { useFrontmatter, useSiteStore } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { getLocaleTitle } from '../utils'
+
 const frontmatter = useFrontmatter()
 
 const route = useRoute()
-const posts = usePostList()
+const site = useSiteStore()
 
 function findCurrentIndex() {
-  return posts.value.findIndex(p => p.href === route.path)
+  return site.postList.findIndex(p => p.href === route.path)
 }
 
-const nextPost = computed(() => posts.value[findCurrentIndex() - 1])
-const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
+const nextPost = computed(() => site.postList[findCurrentIndex() - 1])
+const prevPost = computed(() => site.postList[findCurrentIndex() + 1])
+
+const { locale } = useI18n()
+const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.value))
 </script>
 
 <template>
@@ -30,7 +36,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           md:text-5xl md:leading-14
         "
       >
-        {{ frontmatter.title }}
+        {{ localeTitle }}
       </h1>
     </header>
 

package/components/PressAside.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { useFrontmatter } from 'valaxy'
-import { useAppStore } from 'valaxy/client/stores/app'
+import { useAppStore, useFrontmatter } from 'valaxy'
 import PressOutline from './PressOutline.vue'
 
 const frontmatter = useFrontmatter()
@@ -21,22 +20,26 @@ const app = useAppStore()
   <aside
     class="press-aside lt-xl:fixed shadow
     press-card xl:(shadow-none hover:shadow-none) hover:shadow-lg"
+    flex="~ col grow"
     p="l-0 xl:l-8" text="center"
-    z="5"
+    z="$"
     :class="app.isRightSidebarOpen && 'open'"
   >
+    <div class="aside-curtain" />
     <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 class="aside-content overflow-auto" flex="~ col">
+        <PressOutline v-if="frontmatter.toc !== false" />
+        <div class="flex-grow" />
+        <div v-if="$slots.default" class="custom-container">
+          <slot />
+        </div>
       </div>
     </div>
   </aside>
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
 .press-card{
   background-color: var(--va-c-bg);
@@ -46,7 +49,7 @@ const app = useAppStore()
   top: 0;
   bottom: 0;
   right: 0;
-  z-index: var(--pr-z-index-aside);
+  z-index: var(--pr-z-aside);
   width: var(--va-aside-width);
 
   transform: translateX(100%);
@@ -67,10 +70,19 @@ const app = useAppStore()
   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);
+  height: 100vh;
 }
 
-@include media('xl') {
+.aside-curtain {
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+  width: 220px;
+  height: 32px;
+  background: linear-gradient(transparent,var(--va-c-bg) 70%);
+}
+
+@include screen('xl') {
   .aside-container {
     top: 0;
   }

package/components/PressBackdrop.vue

@@ -17,7 +17,7 @@ defineProps<{
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: var(--pr-z-index-backdrop);
+  z-index: var(--pr-z-backdrop);
   background: rgba(0, 0, 0, .6);
   transition: opacity 0.5s;
 

package/components/PressCategories.vue

@@ -25,8 +25,8 @@ const sidebar = computed(() => themeConfig.value.sidebar)
 <template>
   <ul v-for="item in sidebar" :key="item" class="category-list">
     <PressCategory
-      v-if="categories.get(item)"
-      :name="item" :category="categories.get(item)"
+      v-if="categories.find(c => c.name === item)"
+      :category="categories.find(c => c.name === item)"
       :level="level + 1"
       :display-category="displayCategory"
       :collapsable="collapsable"

package/components/PressCategory.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Category, Post } from 'valaxy'
-import { isParentCategory } from 'valaxy'
+import { isCategoryList } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
-  name: string
   // to eliminate the warning
   category: Category
   level?: number
@@ -22,7 +21,7 @@ const props = withDefaults(defineProps<{
 const collapsable = ref(props.collapsable)
 const { t, locale } = useI18n()
 
-const getTitle = (post: Post | any) => {
+function getTitle(post: Post | any) {
   const lang = locale.value
   return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
 }
@@ -35,8 +34,8 @@ const getTitle = (post: Post | any) => {
     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 }}
+    <span class="category-name" font="bold" m="l-1" @click="displayCategory ? displayCategory(category.name) : null">
+      {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }}
       <!-- <sup font="normal">[{{ category.total }}]</sup> -->
     </span>
     <span class="folder-action inline-flex cursor-pointer" opacity="50" @click="collapsable = !collapsable">
@@ -46,13 +45,16 @@ const getTitle = (post: Post | any) => {
   </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>
+    <ul>
+      <li v-for="categoryItem, i in category.children" :key="i" class="post-list-item">
+        <template v-if="!isCategoryList(categoryItem)">
+          <router-link v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center" active-class="active">
+            <span m="l-1" text="sm">{{ getTitle(categoryItem) }}</span>
+          </router-link>
+        </template>
+
+        <PressCategory v-else :category="categoryItem" :display-category="displayCategory" :collapsable="collapsable" />
       </li>
     </ul>
-    <PressCategories v-else :categories="category.children" :display-category="displayCategory" :collapsable="collapsable" />
   </template>
 </template>

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

@@ -29,7 +29,7 @@ const { hasSidebar } = useSidebar()
 }
 
 @media (min-width: 768px) {
-  .VPFooter {
+  .pr-footer {
     padding: 32px;
   }
 }

package/components/PressHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="press-home" p="x-6">
+  <div class="press-home" style="--va-code-mobile-margin-x: 0">
     <slot name="home-hero-before" />
     <PressHomeHero />
     <slot name="home-hero-after" />

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>