valaxy-theme-press 0.0.2 → 0.0.4

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,68 +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="~" p="t-8 x-6 md:x-8">
-      <slot name="main">
-        <div class="content" m="auto y-0" flex="~ col grow" w="full" p="x-12 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">
-                <h1 v-if="!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>
-            </div>
-            <slot name="main-content-after" />
-          </slot>
-        </div>
-
-        <slot name="main-nav-before" />
-
-        <slot name="main-nav" />
-
-        <slot name="main-nav-after" />
-
-        <slot v-if="config.comment.enable && frontmatter.comment !== false" name="comment" />
-
-        <slot name="footer" />
-      </slot>
-
-      <slot name="aside">
-        <PressAside v-if="!isHome" />
-      </slot>
+    <div
+      w="full" flex="~" :class="{
+        'px-6 md:pl-12': hasSidebar,
+        'has-aside': !isHome,
+      }" p="t-4"
+      class="relative"
+    >
+      <div class="container" flex="~ grow" justify="between">
+        <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" />
+
+            <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">#</a>
+                  </h1>
+                  <slot name="main-content-md" />
+                  <slot />
+                </ValaxyMd>
+              </Transition>
+
+              <PressDocFooter v-if="!isHome" class="pb-8 max-w-4xl" w="full" m="auto" />
+
+              <slot name="main-content-after" />
+            </slot>
+          </div>
+
+          <slot name="main-nav-before" />
+
+          <slot name="main-nav" />
+
+          <slot name="main-nav-after" />
+
+          <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment" />
+
+          <slot name="footer" />
+        </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);
@@ -71,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/edit-link.ts

@@ -0,0 +1,14 @@
+import { useData } from 'valaxy'
+import { computed } from 'vue'
+import { useThemeConfig } from '.'
+
+export function useEditLink() {
+  const themeConfig = useThemeConfig()
+  return computed(() => {
+    const { text = 'Edit this page', pattern } = themeConfig.value.editLink || {}
+    const { relativePath } = useData()
+    const url = pattern.replace(/:path/g, relativePath)
+
+    return { url, text }
+  })
+}

package/composables/index.ts

@@ -1 +1,2 @@
 export * from './config'
+export * from './edit-link'

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

@@ -6,13 +6,24 @@ export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
  * Default Config
  */
 export const defaultThemeConfig: ThemeConfig = {
+  logo: '',
   outlineTitle: 'On this page',
 
   colors: {
     primary: '#0078E7',
   },
 
+  sidebar: [],
   nav: [],
-}
 
-export default defaultThemeConfig
+  editLink: {
+    pattern: 'https://github.com/YunYouJun/valaxy/edit/main/docs/:path',
+    text: 'Edit this page on GitHub',
+  },
+
+  socialLinks: [
+
+  ],
+
+  footer: {},
+}

package/layouts/layout.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { useSidebar } from 'valaxy/client'
+import { useLayout, useSidebar } from 'valaxy'
 
 const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar()
+const layout = useLayout()
 </script>
 
 <template>
@@ -9,7 +10,7 @@ const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSid
     <PressNav />
     <PressLocalNav :open="isSidebarOpen" @open-menu="openSidebar()" />
     <slot name="sidebar">
-      <PressSidebar :open="isSidebarOpen" />
+      <PressSidebar v-if="layout !== 'post'" :open="isSidebarOpen" />
     </slot>
     <PressBackdrop :show="isSidebarOpen" @click="closeSidebar" />
 
@@ -50,6 +51,7 @@ const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSid
         </component>
       </router-view>
     </slot>
+
+    <PressFooter />
   </div>
 </template>
-

package/package.json

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

package/pages/[..all].vue

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

package/setup/main.ts

@@ -8,7 +8,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 +29,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
@@ -58,11 +60,10 @@ export default defineAppSetup((ctx) => {
 
 function scrollTo(el: HTMLElement, hash: string, smooth = false) {
   let target: Element | null = null
-
   try {
     target = el.classList.contains('header-anchor')
       ? el
-      : document.querySelector(decodeURIComponent(hash))
+      : ((decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null)
   }
   catch (e) {
     console.warn(e)

package/styles/css-vars.scss

@@ -3,11 +3,15 @@
 }
 
 :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: #213547;
-  --pr-aside-text-2: #3c3c3cb3;
+  --pr-aside-text-1: var(--pr-c-text-1);
+  --pr-aside-text-2: rgba(60, 60, 60, 0.702);
 
   --pr-aside-divider: rgba(60, 60, 60, 0.122);
 
@@ -16,13 +20,16 @@
   // nav
   --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-nav: 8;
-  --pr-z-index-local-nav: 9;
-  --pr-z-index-backdrop: 10;
-  --pr-z-index-sidebar: 11;
+  --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);
@@ -31,9 +38,10 @@
 
 .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-1: #ffffffde;
   --pr-aside-text-2: #ebebeb99;
   --pr-aside-divider: rgba(84, 84, 84, 0.48);
 

package/styles/helper.scss

@@ -28,17 +28,7 @@
 
   border-radius: 50%;
 
-  transition: background-color var(--va-transition-duration);
-
   div {
     font-size: 1.2rem;
   }
-
-  &:hover {
-    background-color: rgba(var(--va-c-primary-rgb), 0.08);
-  }
-
-  &:active {
-    background-color: rgba(var(--va-c-primary-rgb), 0.16);
-  }
 }

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);
@@ -13,12 +17,13 @@
   }
 
   a {
+    display: inline-block;
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: all 0.4s;
 
     &:hover {
-      border-bottom-color: var(--va-c-brand);
+      // border-bottom-color: var(--va-c-brand);
     }
   }
 
@@ -28,13 +33,18 @@
     padding: 3px 6px;
     border-radius: 4px;
     font-weight: 500;
-  }
-}
 
-@include mobile {
-  .markdown-body {
-    div[class*="language-"] {
-      margin: 0 -1.5rem;
+    &::before {
+      content: none;
     }
+
+    &::after {
+      content: none;
+    }
+  }
+
+  ul {
+    margin-top: 0em;
+    margin-bottom: 0.25em;
   }
 }

package/types/index.d.ts

@@ -1,33 +1,87 @@
 export * from '../composables'
 export * from './home.d'
 
-export namespace DocsTheme {
-  export type Config = ThemeConfig
+export namespace PressTheme {
   export type Sidebar = any
-}
 
-/**
- * Theme Config
- */
-export interface ThemeConfig {
-  /**
-   * toc title
-   * @default 'On this page'
-   */
-  outlineTitle: string
-
-  colors: {
+  export interface Footer {
+    message?: string;
+    copyright?: string;
+  }
+
+  export interface SocialLink {
+    icon: string
+    link: string
+  }
+
+  export interface EditLink {
     /**
-     * primary color
-     * @default '#0078E7'
+     * Pattern for edit link.
+     *
+     * @example 'https://github.com/YunYouJun/valaxy/edit/main/docs/:path'
      */
-    primary: string
+    pattern: string
+
+    /**
+     * Custom text for edit link.
+     *
+     * @default 'Edit this page'
+     */
+    text?: string
   }
 
-  nav: {
-    link: string
-    text: string
-  }[]
+  export interface Config {
+    logo: string
+
+    /**
+     * toc title
+     * @default 'On this page'
+     */
+    outlineTitle: string
+
+    colors: {
+      /**
+       * primary color
+       * @default '#0078E7'
+       */
+      primary: string
+    }
+    
+
+    nav: Array<NavItem>
+    sidebar: string[]
+
+    editLink: EditLink
+
+    footer: Footer
+
+    socialLinks: SocialLink[]
+
+    // label
+    /**
+     * Toggle dark label
+     */
+    darkModeSwitchLabel?: string
+  }
+}
+
+export interface NavItemLink {
+  link: string
+  text: string
+  active?: string
 }
 
-export type ThemeUserConfig = Partial<ThemeConfig>
+export interface NavItemGroup {
+  text: string
+  items: NavItemLink[]
+}
+
+export type NavItem = NavItemLink | NavItemGroup
+
+
+
+/**
+ * Theme Config
+ */
+export type ThemeConfig = PressTheme.Config
+export type UserThemeConfig = Partial<ThemeConfig>

package/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * get locale title
+ * @param locale
+ * @param frontmatter
+ * @returns
+ */
+export function getLocaleTitle(locale: string, frontmatter: any) {
+  return frontmatter[`title${locale === 'en' ? '' : `_${locale}`}`]
+}

package/valaxy.config.ts

@@ -1,6 +1,7 @@
 import type { ResolvedValaxyOptions } from 'valaxy'
 import { defineTheme } from 'valaxy'
 import type { Plugin } from 'vite'
+import { defaultThemeConfig } from './config'
 import type { ThemeConfig } from './types'
 
 function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
@@ -29,7 +30,13 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
 
 export default defineTheme<ThemeConfig>((options) => {
   return {
+    themeConfig: defaultThemeConfig,
     vite: {
+      build: {
+        rollupOptions: {
+          external: ['valaxy-addon-algolia'],
+        },
+      },
       plugins: [ThemeVitePlugin(options)],
     },
   }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 云游君 YunYouJun <me@yunyoujun.cn>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.