valaxy-theme-press 0.26.13 → 0.28.0-beta.1

package/layouts/tags.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { useFrontmatter, useSiteStore, useTags, useValaxyI18n } from 'valaxy'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const frontmatter = useFrontmatter()
+const site = useSiteStore()
+const { $tO } = useValaxyI18n()
+
+const tags = useTags()
+
+const curTag = computed(() => route.query.tag as string || '')
+
+const filteredPosts = computed(() => {
+  return site.postList.filter((post) => {
+    if (post.tags) {
+      if (typeof post.tags === 'string')
+        return post.tags === curTag.value
+      else
+        return post.tags.includes(curTag.value)
+    }
+    return false
+  })
+})
+
+const title = computed(() => $tO(frontmatter.value.title) || 'Tags')
+
+const tagArr = computed(() => Array.from(tags.value).sort())
+
+function getTagSize(count: number) {
+  const counts = Array.from(tags.value).map(([_, v]) => v.count)
+  const max = Math.max(...counts)
+  const min = Math.min(...counts)
+  const range = max - min || 1
+  const percent = (count - min) / range
+  return `${percent * 20 + 14}px`
+}
+
+function selectTag(tag: string) {
+  router.push({ query: { tag } })
+}
+</script>
+
+<template>
+  <Layout>
+    <template #main-content>
+      <div class="max-w-6xl mx-auto w-full pb-12 px-4 sm:px-6 lg:px-8">
+        <div class="pt-6 pb-8 space-y-2 md:space-y-5">
+          <h1 class="text-3xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-13">
+            {{ title }}
+          </h1>
+        </div>
+
+        <!-- Tag Cloud -->
+        <div class="flex flex-wrap items-end gap-3 pb-8">
+          <button
+            v-for="([key, tag]) in tagArr"
+            :key="key"
+            class="inline-flex items-baseline gap-1 rounded-full px-3 py-1 transition-colors border-none cursor-pointer"
+            :class="curTag === key
+              ? 'bg-primary/15 text-primary dark:bg-primary/20 dark:text-primary'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-primary/10 hover:text-primary'"
+            :style="{ fontSize: getTagSize(tag.count) }"
+            @click="selectTag(key.toString())"
+          >
+            <span>#{{ key }}</span>
+            <span class="text-xs op-70">({{ tag.count }})</span>
+          </button>
+        </div>
+
+        <!-- Filtered Posts -->
+        <div v-if="curTag">
+          <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center gap-2">
+            <span class="i-ri-hashtag" />
+            {{ curTag }}
+            <span class="text-sm font-normal text-gray-500">({{ filteredPosts.length }})</span>
+          </h2>
+          <PressPostList :posts="filteredPosts" />
+        </div>
+      </div>
+    </template>
+  </Layout>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.26.13",
+  "version": "0.28.0-beta.1",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -22,10 +22,12 @@
   "main": "node/index.ts",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@docsearch/css": "^3.9.0",
-    "@docsearch/js": "^3.9.0"
+    "@docsearch/css": "^4.6.0",
+    "@docsearch/js": "^4.6.0",
+    "@docsearch/sidepanel-js": "^4.6.0",
+    "reka-ui": "^2.8.2"
   },
   "devDependencies": {
-    "valaxy": "0.26.13"
+    "valaxy": "0.28.0-beta.1"
   }
 }

package/setup/main.ts

@@ -1,5 +1,6 @@
 import { defineAppSetup, scrollTo } from 'valaxy'
 import { nextTick } from 'vue'
+import PressToggleLocale from '../components/PressToggleLocale.vue'
 
 import 'valaxy/client/styles/common/index.scss'
 
@@ -18,7 +19,12 @@ import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css'
 // import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css'
 
 export default defineAppSetup((ctx) => {
-  const { router, isClient } = ctx
+  const { app, router, isClient } = ctx
+
+  // Register components that may appear in post excerpts
+  // (runtime-compiled templates can only resolve globally registered components)
+  app.component('PressToggleLocale', PressToggleLocale)
+
   if (!isClient)
     return
 

package/styles/docsearch.css

@@ -0,0 +1,106 @@
+@import '@docsearch/css/dist/style.css';
+@import '@docsearch/css/dist/sidepanel.css';
+
+/* stylelint-disable selector-class-pattern */
+
+/* Hide docsearch container by default, shown when JS initializes */
+#press-docsearch,
+#press-docsearch-sidepanel,
+.DocSearch-SidepanelButton {
+  display: none;
+}
+
+/* Override DocSearch CSS variables with Press theme variables */
+:root:root {
+  --docsearch-primary-color: var(--va-c-primary);
+  --docsearch-text-color: var(--va-c-text-1);
+  --docsearch-muted-color: var(--va-c-text-2);
+  --docsearch-container-background: rgb(150 150 150 / 0.7);
+  --docsearch-background-color: var(--va-c-bg-soft);
+  --docsearch-modal-background: var(--va-c-bg-soft);
+  --docsearch-modal-shadow: var(--va-shadow-3);
+  --docsearch-searchbox-background: var(--va-c-bg-alt);
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-hit-background: var(--va-c-bg);
+  --docsearch-hit-color: var(--va-c-text-1);
+  --docsearch-hit-active-color: var(--va-c-white);
+  --docsearch-hit-shadow: none;
+  --docsearch-footer-background: var(--va-c-bg-alt);
+  --docsearch-footer-shadow: 0 -1px 0 0 var(--va-c-divider);
+  --docsearch-key-background: var(--va-c-code-bg, var(--va-c-bg-soft));
+  --docsearch-key-color: var(--va-c-text-2);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-logo-color: #5468ff;
+  --docsearch-icon-color: var(--va-c-text-2);
+  --docsearch-secondary-text-color: var(--va-c-text-2);
+  --docsearch-focus-color: var(--va-c-primary);
+  --docsearch-subtle-color: var(--va-c-divider);
+  --docsearch-dropdown-menu-background: var(--va-c-bg);
+  --docsearch-soft-primary-color: var(--va-c-primary-soft, rgba(0, 61, 255, 0.1));
+  --docsearch-soft-muted-color: var(--va-c-bg-soft);
+  --docsearch-sidepanel-accent-muted: var(--va-c-text-3, var(--va-c-text-2));
+  --docsearch-sidepanel-text-base: var(--va-c-text-1);
+}
+
+:root.dark {
+  --docsearch-container-background: rgb(0 0 0 / 0.64);
+  --docsearch-modal-shadow: none;
+}
+
+/* DocSearch component tweaks */
+.DocSearch-Commands-Key {
+  padding: 4px;
+  border: 1px solid var(--docsearch-subtle-color);
+  border-radius: 4px;
+}
+
+.DocSearch-Hit a:focus-visible {
+  outline: 2px solid var(--docsearch-focus-color);
+}
+
+.DocSearch-Logo [class^='cls-'] {
+  fill: currentColor;
+}
+
+.DocSearch-Menu-content {
+  margin-top: -4px;
+  padding: 6px;
+  border: 1px solid var(--va-c-divider);
+  border-radius: 6px;
+  box-shadow: var(--va-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.06));
+}
+
+.DocSearch-Menu-item {
+  border-radius: 4px;
+}
+
+.DocSearch-SearchBar + .DocSearch-Footer {
+  border-top-color: transparent;
+}
+
+.DocSearch-Title {
+  font-size: revert;
+  line-height: revert;
+}
+
+/* Sidepanel tweaks */
+.DocSearch-Sidepanel-Prompt--form {
+  border-color: var(--docsearch-subtle-color);
+  transition: border-color 0.2s;
+}
+
+.DocSearch-Sidepanel-Prompt--submit {
+  background-color: var(--docsearch-soft-primary-color);
+  color: var(--docsearch-primary-color);
+}
+
+.DocSearch-Sidepanel-Prompt--submit:hover {
+  background-color: var(--va-c-primary);
+  color: var(--va-c-white);
+}
+
+.DocSearch-Sidepanel-Prompt--submit:disabled,
+.DocSearch-Sidepanel-Prompt--submit[aria-disabled='true'] {
+  background-color: var(--docsearch-soft-muted-color);
+  color: var(--docsearch-muted-color);
+}

package/valaxy.config.ts

@@ -21,7 +21,7 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
         },
 
         optimizeDeps: {
-          exclude: ['@docsearch/js'],
+          exclude: ['@docsearch/css', '@docsearch/js', '@docsearch/sidepanel-js'],
         },
       }
     },