valaxy-theme-press 0.0.1 → 0.0.3

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/PressOutline.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  useActiveAnchor,
+  useOutline,
+} from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { useThemeConfig } from '../composables'
+
+const { t } = useI18n()
+const themeConfig = useThemeConfig()
+
+const container = ref()
+const marker = ref()
+
+useActiveAnchor(container, marker)
+
+const { headers, handleClick } = useOutline()
+</script>
+
+<template>
+  <div v-show="headers.length" ref="container">
+    <div class="content">
+      <div class="outline-title">
+        {{ themeConfig.outlineTitle || t('sidebar.toc') }}
+      </div>
+
+      <div ref="marker" class="outline-marker" />
+
+      <nav aria-labelledby="doc-outline-aria-label">
+        <span id="doc-outline-aria-label" class="visually-hidden">
+          Table of Contents for current page
+        </span>
+
+        <PressOutlineItem
+          class="va-toc relative z-1"
+          :headers="headers"
+          :on-click="handleClick"
+          root
+        />
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  text-align: left;
+
+  .va-toc-item {
+    color: var(--va-c-text-light);
+  }
+}
+
+.content {
+  position: relative;
+  padding-left: 16px;
+  font-size: 14px;
+  text-align: left;
+  border-left: 1px solid var(--pr-aside-divider);
+}
+
+.outline-marker {
+  position: absolute;
+  top: 32px;
+  left: -1px;
+  z-index: 0;
+  opacity: 0;
+  width: 1px;
+  height: 18px;
+  background-color: var(--va-c-brand);
+  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.outline-title {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--pr-c-text-1);
+}
+
+.outline-link {
+  display: block;
+  line-height: 28px;
+  font-size: 13px;
+  color: var(--pr-aside-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--pr-aside-text-1);
+  transition: color 0.25s;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+}
+</style>

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/PressSidebar.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useCategory, usePageList, useSidebar } from 'valaxy'
+import { useThemeConfig } from '../composables'
+
+defineProps<{
+  open: boolean
+}>()
+
+const pages = usePageList()
+const themeConfig = useThemeConfig()
+
+const categories = computed(() => {
+  const cs = useCategory('', pages.value)
+  cs.children.delete('Uncategorized')
+
+  const sidebar = themeConfig.value.sidebar
+  if (sidebar) {
+    cs.children.forEach((_, key) => {
+      if (!themeConfig.value.sidebar.includes(key))
+        cs.children.delete(key)
+    })
+  }
+  return cs
+})
+
+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: 1rem;
+  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;
+  overflow-y: overlay;
+  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;
+    width: var(--va-sidebar-width);
+    max-width: 100%;
+    background-color: var(--va-c-bg-alt);
+    opacity: 1;
+    box-shadow: none;
+    transform: translateX(0);
+  }
+}
+
+@include mobile {
+  .press-sidebar {
+    top: 0;
+  }
+}
+</style>

package/components/PressToggleLocale.vue

@@ -7,7 +7,7 @@ const { toggleLocales } = useLocale()
 </script>
 
 <template>
-  <button class="yun-icon-btn" :title="t('button.toggle_langs')" style="color:var(--va-c-text)" @click="toggleLocales">
+  <button :title="t('button.toggle_langs')" @click="toggleLocales">
     <div i-ri-translate class="transition transform" :class="locale === 'en' ? 'rotate-y-180' : ''" />
   </button>
 </template>

package/components/ValaxyMain.vue

@@ -1,29 +1,47 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { useConfig } from 'valaxy'
+import { useConfig, useFrontmatter, useLayout, useSidebar } from 'valaxy'
 
 defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
+
 const config = useConfig()
+const frontmatter = useFrontmatter()
+
+const { hasSidebar } = useSidebar()
+const isHome = useLayout('home')
 </script>
 
 <template>
-  <main>
-    <div w="full" flex="~">
+  <main
+    class="press-main flex" :class="{
+      'has-sidebar': hasSidebar,
+    }"
+  >
+    <div
+      w="full" flex="~" :class="{
+        'px-6 md:pl-12': hasSidebar,
+      }" p="t-4"
+    >
       <slot name="main">
-        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
+        <div class="content" w="full" :class="{ 'm-auto': !hasSidebar }" flex="~ col grow" p="lt-md:0">
           <slot name="main-header" />
           <slot name="main-header-after" />
 
           <slot name="main-content">
-            <div class="markdown-body prose max-w-none pb-8">
-              <ValaxyMd :frontmatter="frontmatter">
-                <slot name="main-content-md" />
-                <slot />
-              </ValaxyMd>
-            </div>
+            <ValaxyMd class="prose mx-auto w-full max-w-4xl" :frontmatter="frontmatter">
+              <h1 v-if="hasSidebar && !isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
+                {{ frontmatter.title }}
+                <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true">#</a>
+              </h1>
+              <slot name="main-content-md" />
+              <slot />
+            </ValaxyMd>
+
+            <PressDocFooter v-if="!isHome" class="pb-8 max-w-4xl" w="full" m="auto" />
+
             <slot name="main-content-after" />
           </slot>
         </div>
@@ -38,8 +56,34 @@ const config = useConfig()
 
         <slot name="footer" />
       </slot>
-    </div>
 
-    <slot name="aside" />
+      <slot name="aside">
+        <PressAside v-if="!isHome" />
+      </slot>
+    </div>
   </main>
 </template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
+@include media('md') {
+  .press-main {
+    &.has-sidebar {
+      padding-top: var(--pr-nav-height);
+      padding-left: var(--va-sidebar-width);
+    }
+  }
+}
+
+@include media('xl') {
+  .content{
+    // 8px scrollbar width
+    max-width: calc(100vw - 2 * var(--va-sidebar-width) - 2.5rem);
+
+    &.no-aside {
+      max-width: calc(100vw - var(--va-sidebar-width));
+    }
+  }
+}
+</style>

package/components/nav/PressNavBar.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { useConfig, useSidebar } from 'valaxy'
+import { useThemeConfig } from '../../composables'
+import PressSwitchAppearance from './PressSwitchAppearance.vue'
+import PressNavItemLink from './PressNavItemLink.vue'
+import PressNavItemGroup from './PressNavItemGroup.vue'
+
+defineProps<{
+  isScreenOpen?: boolean
+}>()
+
+defineEmits<{
+  (e: 'toggle-screen'): void
+}>()
+
+const { hasSidebar } = useSidebar()
+
+const config = useConfig()
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div class="press-navbar flex justify-between items-center px-6 py-4" :class="{ 'has-sidebar': hasSidebar }">
+    <router-link class="text-xl" to="/" :aria-label="config.title">
+      <span class="md:inline">{{ config.title }}</span>
+    </router-link>
+    <div class="self-stretch flex justify-center items-center text-sm leading-5">
+      <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>
+      <PressToggleLocale p="x-2" />
+      <PressSwitchAppearance m="l-2" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
+:root {
+  --pr-navbar-c-bg: rgba(255, 255, 255, 0.8);
+}
+
+.dark {
+  --pr-navbar-c-bg: rgba(24, 24, 24, 0.8);
+}
+
+.press-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 media('md') {
+  .press-navbar {
+    padding: 0 32px;
+  }
+}
+
+@include media('md') {
+  .press-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)) {
+    .press-navbar.has-sidebar .content {
+      background: rgba(255, 255, 255, 0.95);
+    }
+
+    .dark .press-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);
+}
+
+.menu + .translations::before,
+.menu + .appearance::before,
+.menu + .social-links::before,
+.translations + .appearance::before,
+.appearance + .social-links::before {
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--pr-c-divider-light);
+  content: "";
+}
+
+.menu + .appearance::before,
+.translations + .appearance::before {
+  margin-right: 16px;
+}
+
+.appearance + .social-links::before {
+  margin-left: 16px;
+}
+</style>