valaxy-theme-press 0.0.3 → 0.1.0

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

@@ -5,10 +5,8 @@ import {
   useOutline,
 } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { useThemeConfig } from '../composables'
 
 const { t } = useI18n()
-const themeConfig = useThemeConfig()
 
 const container = ref()
 const marker = ref()
@@ -22,7 +20,7 @@ const { headers, handleClick } = useOutline()
   <div v-show="headers.length" ref="container">
     <div class="content">
       <div class="outline-title">
-        {{ themeConfig.outlineTitle || t('sidebar.toc') }}
+        {{ t('theme.outlineTitle') }}
       </div>
 
       <div ref="marker" class="outline-marker" />
@@ -33,7 +31,7 @@ const { headers, handleClick } = useOutline()
         </span>
 
         <PressOutlineItem
-          class="va-toc relative z-1"
+          class="va-toc relative z-1 css-i18n-toc"
           :headers="headers"
           :on-click="handleClick"
           root
@@ -58,6 +56,7 @@ const { headers, handleClick } = useOutline()
   font-size: 14px;
   text-align: left;
   border-left: 1px solid var(--pr-aside-divider);
+  width: var(--va-aside-width + 16px);
 }
 
 .outline-marker {

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,16 +11,16 @@ 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>
   <ul class="divide-y divide-gray-200">
-    <Transition v-for="post, i in posts" :key="i" name="fade">
-      <li class="py-12">
+    <TransitionGroup name="fade">
+      <li v-for="post, i in posts" :key="i" class="py-12">
         <PressArticleCard :post="post" />
       </li>
-    </Transition>
+    </TransitionGroup>
   </ul>
 </template>

package/components/PressSidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useCategory, usePageList, useSidebar } from 'valaxy'
+import { removeItemFromCategory, useCategory, usePageList, useSidebar } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
 defineProps<{
@@ -12,16 +12,17 @@ const themeConfig = useThemeConfig()
 
 const categories = computed(() => {
   const cs = useCategory('', pages.value)
-  cs.children.delete('Uncategorized')
+  const cList = cs.value
+  removeItemFromCategory(cList, 'Uncategorized')
 
   const sidebar = themeConfig.value.sidebar
   if (sidebar) {
-    cs.children.forEach((_, key) => {
-      if (!themeConfig.value.sidebar.includes(key))
-        cs.children.delete(key)
+    cList.children.forEach((item) => {
+      if (!themeConfig.value.sidebar.includes(item.name))
+        removeItemFromCategory(cList, item.name)
     })
   }
-  return cs
+  return cList
 })
 
 const { hasSidebar } = useSidebar()
@@ -40,7 +41,7 @@ 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;
@@ -49,7 +50,7 @@ const { hasSidebar } = useSidebar()
   left: 0;
   padding: 1rem;
   top: var(--pr-nav-height);
-  z-index: var(--pr-z-index-sidebar);
+  z-index: var(--pr-z-sidebar);
   width: calc(100vw - 64px);
   max-width: 320px;
   background-color: var(--va-c-bg);
@@ -68,7 +69,7 @@ const { hasSidebar } = useSidebar()
   }
 }
 
-@include media('md') {
+@include screen('md') {
   .press-sidebar {
     z-index: 1;
     width: var(--va-sidebar-width);

package/components/PressSocialLink.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+defineProps<{
+  icon: string
+  link: string
+}>()
+</script>
+
+<template>
+  <a
+    class="pr-social-link"
+    :href="link"
+    target="_blank"
+    rel="noopener"
+  >
+    <div :class="icon" />
+  </a>
+</template>
+
+<style scoped>
+.pr-social-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  color: var(--pr-c-text-2);
+  transition: color 0.5s;
+}
+
+.pr-social-link:hover {
+  color: var(--pr-c-text-1);
+  transition: color 0.25s;
+}
+
+.pr-social-link > :deep(svg) {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+</style>

package/components/PressSocialLinks.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { PressTheme } from '../types'
+
+defineProps<{
+  links: PressTheme.SocialLink[]
+}>()
+</script>
+
+<template>
+  <div class="pr-social-links">
+    <PressSocialLink
+      v-for="{ link, icon } in links"
+      :key="link"
+      :icon="icon"
+      :link="link"
+    />
+  </div>
+</template>
+
+<style scoped>
+.pr-social-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+</style>

package/components/ValaxyMain.vue

@@ -1,73 +1,86 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { useConfig, useFrontmatter, useLayout, useSidebar } from 'valaxy'
+import { useFrontmatter, useLayout, useSidebar, useSiteConfig } from 'valaxy'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getLocaleTitle } from '../utils'
 
 defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()
 
 const { hasSidebar } = useSidebar()
 const isHome = useLayout('home')
+const layout = useLayout()
+
+const { locale } = useI18n()
+const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.value))
 </script>
 
 <template>
   <main
     class="press-main flex" :class="{
-      'has-sidebar': hasSidebar,
+      'has-sidebar': hasSidebar && layout !== 'post',
     }"
   >
     <div
       w="full" flex="~" :class="{
         'px-6 md:pl-12': hasSidebar,
+        'has-aside': !isHome,
       }" p="t-4"
+      class="relative"
     >
-      <slot name="main">
-        <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" />
+      <div class="container" flex="~ grow" justify="between">
+        <slot name="main">
+          <div class="vp-doc 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">
-            <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>
+            <slot name="main-content">
+              <Transition appear>
+                <ValaxyMd class="prose mx-auto w-full max-w-4xl" :frontmatter="frontmatter">
+                  <h1 v-if="hasSidebar && !isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
+                    {{ localeTitle }}
+                    <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true" />
+                  </h1>
+                  <slot name="main-content-md" />
+                  <slot />
+                </ValaxyMd>
+              </Transition>
 
-            <PressDocFooter v-if="!isHome" class="pb-8 max-w-4xl" w="full" m="auto" />
+              <PressDocFooter v-if="!isHome" class="pb-8 max-w-4xl" w="full" m="auto" />
 
-            <slot name="main-content-after" />
-          </slot>
-        </div>
+              <slot name="main-content-after" />
+            </slot>
+          </div>
 
-        <slot name="main-nav-before" />
+          <slot name="main-nav-before" />
 
-        <slot name="main-nav" />
+          <slot name="main-nav" />
 
-        <slot name="main-nav-after" />
+          <slot name="main-nav-after" />
 
-        <slot v-if="config.comment.enable && frontmatter.comment !== false" name="comment" />
+          <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment" />
 
-        <slot name="footer" />
-      </slot>
+          <slot name="footer" />
+        </slot>
 
-      <slot name="aside">
-        <PressAside v-if="!isHome" />
-      </slot>
+        <slot name="aside">
+          <PressAside v-if="!isHome" />
+        </slot>
+      </div>
     </div>
   </main>
 </template>
 
-<style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+<style lang="scss" scoped>
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
-@include media('md') {
+@include screen('md') {
   .press-main {
     &.has-sidebar {
       padding-top: var(--pr-nav-height);
@@ -76,7 +89,7 @@ const isHome = useLayout('home')
   }
 }
 
-@include media('xl') {
+@include screen('xl') {
   .content{
     // 8px scrollbar width
     max-width: calc(100vw - 2 * var(--va-sidebar-width) - 2.5rem);

package/composables/config.ts

@@ -4,7 +4,6 @@ import type { ThemeConfig } from '../types'
 
 /**
  * getThemeConfig
- * @returns
  */
 export function useThemeConfig<T = ThemeConfig>() {
   const config = useConfig<T>()

package/composables/nav.ts

@@ -0,0 +1,37 @@
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function useNav() {
+  const isScreenOpen = ref(false)
+
+  function openScreen() {
+    isScreenOpen.value = true
+    window.addEventListener('resize', closeScreenOnTabletWindow)
+  }
+
+  function closeScreen() {
+    isScreenOpen.value = false
+    window.removeEventListener('resize', closeScreenOnTabletWindow)
+  }
+
+  function toggleScreen() {
+    isScreenOpen.value ? closeScreen() : openScreen()
+  }
+
+  /**
+   * Close screen when the user resizes the window wider than tablet size.
+   */
+  function closeScreenOnTabletWindow() {
+    window.outerWidth >= 768 && closeScreen()
+  }
+
+  const route = useRoute()
+  watch(() => route.path, closeScreen)
+
+  return {
+    isScreenOpen,
+    openScreen,
+    closeScreen,
+    toggleScreen,
+  }
+}

package/config/index.ts

@@ -1,11 +1,10 @@
 import type { ThemeConfig } from '../types'
 
-export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
-
 /**
  * Default Config
  */
 export const defaultThemeConfig: ThemeConfig = {
+  logo: '',
   outlineTitle: 'On this page',
 
   colors: {
@@ -20,5 +19,9 @@ export const defaultThemeConfig: ThemeConfig = {
     text: 'Edit this page on GitHub',
   },
 
+  socialLinks: [
+
+  ],
+
   footer: {},
 }

package/layouts/layout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useLayout, useSidebar } from 'valaxy'
+import { asAny, useLayout, useSidebar } from 'valaxy'
 
 const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar()
 const layout = useLayout()
@@ -16,7 +16,7 @@ const layout = useLayout()
 
     <slot>
       <router-view v-slot="{ Component }">
-        <component :is="Component">
+        <component :is="asAny(Component)">
           <template #main-header>
             <slot name="main-header" />
           </template>
@@ -55,4 +55,3 @@ const layout = useLayout()
     <PressFooter />
   </div>
 </template>
-

package/locales/en.yml

@@ -0,0 +1,4 @@
+valaxy_theme_press: Valaxy Theme Press
+
+theme:
+  outlineTitle: On this page

package/locales/zh-CN.yml

@@ -0,0 +1,4 @@
+valaxy_theme_press: Valaxy 主题 Press
+
+theme:
+  outlineTitle: 本页

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -19,20 +19,10 @@
   "main": "node/index.ts",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@docsearch/css": "^3.3.0",
-    "@docsearch/js": "^3.3.0"
+    "@docsearch/css": "^3.5.2",
+    "@docsearch/js": "^3.5.2"
   },
   "devDependencies": {
     "valaxy": "workspace:*"
-  },
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@algolia/client-search",
-        "@types/react",
-        "react",
-        "react-dom"
-      ]
-    }
   }
 }

package/pages/{[..all].vue → [...all].vue}

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+
 const { t } = useI18n()
 </script>
 

package/setup/main.ts

@@ -1,6 +1,17 @@
 import { defineAppSetup } from 'valaxy'
 import { nextTick } from 'vue'
 
+import 'vitepress/dist/client/theme-default/styles/vars.css'
+
+// import 'vitepress/dist/client/theme-default/styles/base.css'
+// import 'vitepress/dist/client/theme-default/styles/utils.css'
+// import 'vitepress/dist/client/theme-default/styles/components/vp-code.css'
+import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
+import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css'
+import 'vitepress/dist/client/theme-default/styles/components/custom-block.css'
+
+// import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css'
+
 export default defineAppSetup((ctx) => {
   const { router, isClient } = ctx
   if (!isClient)
@@ -8,7 +19,7 @@ export default defineAppSetup((ctx) => {
 
   window.addEventListener(
     'click',
-    (e) => {
+    async (e) => {
       const link = (e.target as Element).closest('a')
       if (link) {
         const { protocol, hostname, pathname, hash, target } = link
@@ -29,7 +40,9 @@ export default defineAppSetup((ctx) => {
             e.preventDefault()
             // scroll between hash anchors in the same page
             if (hash && hash !== currentUrl.hash) {
-              history.pushState(null, '', hash)
+              await router.push({ hash })
+              history.replaceState({ ...history.state }, '')
+
               // still emit the event so we can listen to it in themes
               window.dispatchEvent(new Event('hashchange'))
               // use smooth scroll when clicking on header anchor links
@@ -61,7 +74,7 @@ function scrollTo(el: HTMLElement, hash: string, smooth = false) {
   try {
     target = el.classList.contains('header-anchor')
       ? el
-      : (decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null
+      : ((decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null)
   }
   catch (e) {
     console.warn(e)

package/styles/css-vars.scss

@@ -3,8 +3,11 @@
 }
 
 :root {
+  --pr-c-bg: var(--va-c-bg);
+
   --pr-c-text-code: #374562;
   --pr-c-text-1: #213547;
+  --pr-c-text-2: rgba(60, 60, 60, .7);
 
   // aside
   --pr-aside-text-1: var(--pr-c-text-1);
@@ -18,14 +21,15 @@
   --pr-nav-height: var(--pr-nav-height-mobile);
   --pr-nav-height-mobile: 60px;
   --pr-nav-text: var(--pr-c-text-1);
+  --pr-nav-screen-bg-color: var(--pr-c-bg);
 
   // z-index
-  --va-z-overlay: var(--pr-z-index-backdrop);
-  --pr-z-index-local-nav: 8;
-  --pr-z-index-nav: 9;
-  --pr-z-index-backdrop: 10;
-  --pr-z-index-aside: 11;
-  --pr-z-index-sidebar: 12;
+  --va-z-overlay: var(--pr-z-backdrop);
+  --pr-z-local-nav: 8;
+  --pr-z-nav: 9;
+  --pr-z-backdrop: 10;
+  --pr-z-aside: 11;
+  --pr-z-sidebar: 12;
 
   // switch
   --pr-switch-divider: rgba(60, 60, 60, 0.29);
@@ -35,6 +39,7 @@
 .dark {
   --pr-c-text-code: var(--pr-c-indigo-lighter);
   --pr-c-text-1: #ffffffde;
+  --pr-c-text-2: rgba(235, 235, 235, .6);
 
   // aside
   --pr-aside-text-2: #ebebeb99;

package/styles/markdown.scss

@@ -1,4 +1,8 @@
-@use "valaxy/client/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
+
+:root {
+  --va-code-mobile-margin-x: -1.5rem;
+}
 
 .prose {
   --un-prose-body: var(--va-c-text);
@@ -17,10 +21,6 @@
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: all 0.4s;
-
-    &:hover {
-      border-bottom-color: var(--va-c-brand);
-    }
   }
 
   code:not(pre > code) {
@@ -38,12 +38,9 @@
       content: none;
     }
   }
-}
 
-@include mobile {
-  .markdown-body {
-    div[class*="language-"] {
-      margin: 0 -1.5rem;
-    }
+  ul {
+    margin-top: 0em;
+    margin-bottom: 0.25em;
   }
-}
+}

package/tsconfig.json

@@ -2,26 +2,26 @@
   // we need tsconfig.json to compile without
   // error: This is likely not portable. A type annotation is necessary.
   "compilerOptions": {
-    "allowJs": true,
-    "baseUrl": ".",
-    "module": "ESNext",
     "target": "ESNext",
     "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
     "jsx": "preserve",
-    "skipLibCheck": true,
+    "module": "ESNext",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "types": [
       "vite/client",
       "vue/ref-macros",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
-    ]
+    ],
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
   },
   "exclude": ["**/dist/**", "node_modules"]
 }