valaxy-theme-press 0.0.2 → 0.0.4

package/components/PressNavItemLink.vue

@@ -0,0 +1,40 @@
+<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/PressNavScreen.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useBodyScrollLock } from 'valaxy'
+
+defineProps<{
+  open: boolean
+}>()
+
+const screen = ref<HTMLElement>()
+const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock(screen)
+</script>
+
+<template>
+  <transition
+    name="fade"
+    @enter="lockBodyScroll"
+    @after-leave="unlockBodyScroll"
+  >
+    <div v-if="open" ref="screen" class="pr-NavScreen">
+      <div class="container" flex="~ col">
+        <slot name="nav-screen-content-before" />
+        <PressNavScreenMenu class="menu" />
+        <PressNavScreenTranslations class="translations" />
+        <PressNavScreenAppearance class="appearance" />
+        <PressNavScreenSocialLinks class="social-links" />
+
+        <slot name="nav-screen-content-after" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.pr-NavScreen {
+  position: fixed;
+  top: calc(var(--pr-nav-height) + var(--pr-layout-top-height, 0px) + 1px);
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  padding: 0 32px;
+  width: 100%;
+  background-color: var(--pr-nav-screen-bg-color);
+  overflow-y: auto;
+  transition: background-color 0.5s;
+  pointer-events: auto;
+}
+
+.pr-NavScreen.fade-enter-active,
+.pr-NavScreen.fade-leave-active {
+  transition: opacity 0.25s;
+}
+
+.pr-NavScreen.fade-enter-active .container,
+.pr-NavScreen.fade-leave-active .container {
+  transition: transform 0.25s ease;
+}
+
+.pr-NavScreen.fade-enter-from,
+.pr-NavScreen.fade-leave-to {
+  opacity: 0;
+}
+
+.pr-NavScreen.fade-enter-from .container,
+.pr-NavScreen.fade-leave-to .container {
+  transform: translateY(-8px);
+}
+
+@media (min-width: 768px) {
+  .pr-NavScreen {
+    display: none;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  padding: 24px 0 96px;
+  max-width: 288px;
+}
+
+.menu + .translations,
+.menu + .appearance,
+.translations + .appearance {
+  margin-top: 24px;
+}
+
+.menu + .social-links {
+  margin-top: 16px;
+}
+
+.appearance + .social-links {
+  margin-top: 16px;
+}
+</style>

package/components/PressNavScreenAppearance.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../composables/config'
+
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div class="pr-nav-screen-appearance" flex="~ 1">
+    <p class="text">
+      {{ themeConfig.darkModeSwitchLabel || 'Appearance' }}
+    </p>
+    <PressSwitchAppearance />
+  </div>
+</template>
+
+<style scoped>
+.pr-nav-screen-appearance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  padding: 12px 14px 12px 16px;
+  background-color: var(--va-c-bg-soft);
+}
+
+.text {
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--va-c-text-2);
+}
+</style>

package/components/PressNavScreenMenu.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../composables'
+
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <nav v-if="themeConfig.nav" class="pr-nav-screen-menu">
+    <template v-for="item in themeConfig.nav" :key="item.text">
+      <PressNavScreenMenuLink
+        v-if="'link' in item"
+        :text="item.text"
+        :link="item.link"
+      />
+      <PressNavScreenMenuGroup
+        v-else
+        :text="item.text || ''"
+        :items="item.items"
+      />
+    </template>
+  </nav>
+</template>

package/components/PressNavScreenMenuGroup.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  text: string
+  items: any[]
+}>()
+
+const isOpen = ref(false)
+
+const groupId = computed(() =>
+  `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`,
+)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div class="pr-nav-screen-menu-group" :class="{ open: isOpen }">
+    <button
+      class="button"
+      :aria-controls="groupId"
+      :aria-expanded="isOpen"
+      @click="toggle"
+    >
+      <span class="button-text">{{ text }}</span>
+      <div i-ri-add-line class="button-icon" />
+    </button>
+
+    <div :id="groupId" class="items">
+      <template v-for="item in items" :key="item.text">
+        <div v-if="'link' in item" :key="item.text" class="item">
+          <PressNavScreenMenuGroupLink
+            :text="item.text"
+            :link="item.link"
+          />
+        </div>
+
+        <div v-else class="group">
+          <PressNavScreenMenuGroupSection
+            :text="item.text"
+            :items="item.items"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pr-nav-screen-menu-group {
+  border-bottom: 1px solid var(--pr-c-divider);
+  height: 48px;
+  overflow: hidden;
+  transition: border-color 0.5s;
+}
+
+.pr-nav-screen-menu-group .items {
+  visibility: hidden;
+}
+
+.pr-nav-screen-menu-group.open .items {
+  visibility: visible;
+}
+
+.pr-nav-screen-menu-group.open {
+  padding-bottom: 10px;
+  height: auto;
+}
+
+.pr-nav-screen-menu-group.open .button {
+  padding-bottom: 6px;
+  color: var(--pr-c-brand);
+}
+
+.pr-nav-screen-menu-group.open .button-icon {
+  /*rtl:ignore*/
+  transform: rotate(45deg);
+}
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 4px 11px 0;
+  width: 100%;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--pr-c-text-1);
+  transition: color 0.25s;
+}
+
+.button:hover {
+  color: var(--pr-c-brand);
+}
+
+.button-icon {
+  width: 14px;
+  height: 14px;
+  fill: var(--pr-c-text-2);
+  transition: fill 0.5s, transform 0.25s;
+}
+
+.group:first-child {
+  padding-top: 0px;
+}
+
+.group + .group,
+.group + .item {
+  padding-top: 4px;
+}
+</style>

package/components/PressNavScreenMenuGroupLink.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+
+defineProps<{
+  text: string
+  link: string
+}>()
+
+const closeScreen = inject('close-screen') as () => void
+</script>
+
+<template>
+  <AppLink class="pr-nav-screen-menu-group-link" :to="link" @click="closeScreen">
+    {{ text }}
+  </AppLink>
+</template>
+
+<style scoped>
+.pr-nav-screen-menu-group-link {
+  display: block;
+  margin-left: 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--pr-c-text-1);
+  transition: color 0.25s;
+}
+
+.pr-nav-screen-menu-group-link:hover {
+  color: var(--pr-c-brand);
+}
+</style>

package/components/PressNavScreenMenuGroupSection.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { NavItemLink } from '../types'
+
+defineProps<{
+  text?: string
+  // todo
+  items: NavItemLink[]
+}>()
+</script>
+
+<template>
+  <div class="pr-nav-screen-menu-group-section">
+    <p v-if="text" class="title">
+      {{ text }}
+    </p>
+    <PressNavScreenMenuGroupLink
+      v-for="item in items"
+      :key="item.text"
+      :text="item.text"
+      :link="item.link"
+    />
+  </div>
+</template>
+
+<style scoped>
+.pr-nav-screen-menu-group-section {
+  display: block;
+}
+
+.title {
+  line-height: 32px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--pr-c-text-2);
+  transition: color 0.25s;
+}
+</style>

package/components/PressNavScreenMenuLink.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+
+defineProps<{
+  text: string
+  link: string
+}>()
+
+const closeScreen = inject('close-screen') as () => void
+</script>
+
+<template>
+  <AppLink class="pr-nav-screen-menu-link" :href="link" @click="closeScreen">
+    {{ text }}
+  </AppLink>
+</template>
+
+<style scoped>
+.pr-nav-screen-menu-link {
+  display: block;
+  border-bottom: 1px solid var(--pr-c-divider);
+  padding: 12px 0 11px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--pr-c-text-1);
+  transition: border-color 0.25s, color 0.25s;
+}
+
+.pr-nav-screen-menu-link:hover {
+  color: var(--pr-c-brand);
+}
+</style>

package/components/PressNavScreenSocialLinks.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../composables'
+
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <PressSocialLinks
+    v-if="themeConfig.socialLinks"
+    class="pr-nav-screen-social-links"
+    :links="themeConfig.socialLinks"
+  />
+</template>

package/components/PressNavScreenTranslations.vue

@@ -0,0 +1,7 @@
+import PressToggleLocale from 'components/PressToggleLocale.vue';
+
+<template>
+  <div flex justify="center">
+    <PressToggleLocale />
+  </div>
+</template>

package/components/{PressToc.vue → PressOutline.vue}

@@ -1,38 +1,25 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { Header } from 'valaxy'
+import { ref } from 'vue'
 import {
-  resolveHeaders,
   useActiveAnchor,
-  useFrontmatter,
+  useOutline,
 } from 'valaxy'
+import { useI18n } from 'vue-i18n'
 import { useThemeConfig } from '../composables'
 
-const props = defineProps<{ headers: Header[] }>()
-
-const frontmatter = useFrontmatter()
+const { t } = useI18n()
 const themeConfig = useThemeConfig()
 
-const { locale, t } = useI18n()
 const container = ref()
 const marker = ref()
 
 useActiveAnchor(container, marker)
 
-const resolvedHeaders = computed(() => {
-  return resolveHeaders(props.headers || [])
-})
-
-function handleClick({ target: el }: Event) {
-  const id = `#${(el as HTMLAnchorElement).href!.split('#')[1]}`
-  const heading = document.querySelector(decodeURIComponent(id)) as HTMLAnchorElement
-  heading?.focus()
-}
+const { headers, handleClick } = useOutline()
 </script>
 
 <template>
-  <div v-show="headers.length" ref="container" p="t-6">
+  <div v-show="headers.length" ref="container">
     <div class="content">
       <div class="outline-title">
         {{ themeConfig.outlineTitle || t('sidebar.toc') }}
@@ -45,26 +32,12 @@ function handleClick({ target: el }: Event) {
           Table of Contents for current page
         </span>
 
-        <ul class="va-toc relative z-1">
-          <li
-            v-for="{ text, link, children, hidden, lang } in resolvedHeaders"
-            v-show="!hidden"
-            :key="link"
-            class="va-toc-item"
-            :lang="lang || locale"
-          >
-            <a class="outline-link" :href="link" @click="handleClick">
-              {{ text }}
-            </a>
-            <ul v-if="children && frontmatter.outline === 'deep'">
-              <li v-for="item in children" v-show="!item.hidden" :key="item.link" :lang="lang || locale">
-                <a class="outline-link" p="l-3" :href="link" @click="handleClick">
-                  {{ item.text }}
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
+        <PressOutlineItem
+          class="va-toc relative z-1"
+          :headers="headers"
+          :on-click="handleClick"
+          root
+        />
       </nav>
     </div>
   </div>
@@ -85,6 +58,7 @@ function handleClick({ target: el }: Event) {
   font-size: 14px;
   text-align: left;
   border-left: 1px solid var(--pr-aside-divider);
+  width: var(--va-aside-width + 16px);
 }
 
 .outline-marker {
@@ -106,6 +80,7 @@ function handleClick({ target: el }: Event) {
   line-height: 28px;
   font-size: 14px;
   font-weight: 600;
+  color: var(--pr-c-text-1);
 }
 
 .outline-link {

package/components/PressOutlineItem.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { MenuItem } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  headers: MenuItem[]
+  onClick: (e: MouseEvent) => void
+  root?: boolean
+}>()
+
+const { locale } = useI18n()
+</script>
+
+<template>
+  <ul :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title, lang } in headers" :key="link" class="va-toc-item" :lang="lang || locale">
+      <a class="outline-link" :href="link" @click="onClick">{{ title }}</a>
+      <template v-if="children?.length">
+        <PressOutlineItem :headers="children" :on-click="onClick" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  .va-toc-item {
+    .outline-link {
+      color: var(--va-c-text-light);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: color 0.5s;
+
+      &:hover,
+      &.active {
+        color: var(--va-c-brand);
+        transition: color 0.25s;
+      }
+
+    }
+
+    .nested {
+      padding-left: 0.8rem;
+    }
+  }
+}
+</style>

package/components/PressPostList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Post } from 'valaxy'
-import { usePostList } from 'valaxy'
+import { useSiteStore } from 'valaxy'
 
 const props = withDefaults(defineProps<{
   type?: string
@@ -11,8 +11,8 @@ const props = withDefaults(defineProps<{
   curPage: 1,
 })
 
-const routes = usePostList({ type: props.type || '' })
-const posts = computed(() => props.posts || routes.value)
+const site = useSiteStore()
+const posts = computed(() => props.posts || site.postList)
 </script>
 
 <template>

package/components/PressSidebar.vue

@@ -1,13 +1,29 @@
 <script lang="ts" setup>
-import { useCategory, usePageList, useSidebar } from 'valaxy'
+import { computed } from 'vue'
+import { removeItemFromCategory, useCategory, usePageList, useSidebar } from 'valaxy'
+import { useThemeConfig } from '../composables'
 
 defineProps<{
   open: boolean
 }>()
 
 const pages = usePageList()
-const categories = useCategory('', pages.value)
-categories.children.delete('Uncategorized')
+const themeConfig = useThemeConfig()
+
+const categories = computed(() => {
+  const cs = useCategory('', pages.value)
+  const cList = cs.value
+  removeItemFromCategory(cList, 'Uncategorized')
+
+  const sidebar = themeConfig.value.sidebar
+  if (sidebar) {
+    cList.children.forEach((item) => {
+      if (!themeConfig.value.sidebar.includes(item.name))
+        removeItemFromCategory(cList, item.name)
+    })
+  }
+  return cList
+})
 
 const { hasSidebar } = useSidebar()
 </script>
@@ -25,22 +41,23 @@ const { hasSidebar } = useSidebar()
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' 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);
+  padding: 1rem;
+  top: var(--pr-nav-height);
+  z-index: var(--pr-z-sidebar);
   width: calc(100vw - 64px);
   max-width: 320px;
   background-color: var(--va-c-bg);
   opacity: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  overflow-y: overlay;
   transform: translateX(-100%);
   transition: opacity 0.5s, transform 0.25s ease;
 
@@ -52,11 +69,9 @@ const { hasSidebar } = useSidebar()
   }
 }
 
-@include media('md') {
+@include screen('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);
@@ -65,4 +80,10 @@ const { hasSidebar } = useSidebar()
     transform: translateX(0);
   }
 }
+
+@include mobile {
+  .press-sidebar {
+    top: 0;
+  }
+}
 </style>