valaxy-theme-press 0.0.3 → 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,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="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">#</a>
+                  </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/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,6 +6,7 @@ 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 +21,9 @@ export const defaultThemeConfig: ThemeConfig = {
     text: 'Edit this page on GitHub',
   },
 
+  socialLinks: [
+
+  ],
+
   footer: {},
 }

package/layouts/layout.vue

@@ -55,4 +55,3 @@ const layout = useLayout()
     <PressFooter />
   </div>
 </template>
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -19,8 +19,8 @@
   "main": "node/index.ts",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@docsearch/css": "^3.3.0",
-    "@docsearch/js": "^3.3.0"
+    "@docsearch/css": "^3.3.3",
+    "@docsearch/js": "^3.3.3"
   },
   "devDependencies": {
     "valaxy": "workspace:*"

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
@@ -61,7 +63,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);
@@ -19,7 +23,7 @@
     transition: all 0.4s;
 
     &:hover {
-      border-bottom-color: var(--va-c-brand);
+      // border-bottom-color: var(--va-c-brand);
     }
   }
 
@@ -38,12 +42,9 @@
       content: none;
     }
   }
-}
 
-@include mobile {
-  .markdown-body {
-    div[class*="language-"] {
-      margin: 0 -1.5rem;
-    }
+  ul {
+    margin-top: 0em;
+    margin-bottom: 0.25em;
   }
-}
+}

package/types/index.d.ts

@@ -9,6 +9,11 @@ export namespace PressTheme {
     copyright?: string;
   }
 
+  export interface SocialLink {
+    icon: string
+    link: string
+  }
+
   export interface EditLink {
     /**
      * Pattern for edit link.
@@ -26,6 +31,8 @@ export namespace PressTheme {
   }
 
   export interface Config {
+    logo: string
+
     /**
      * toc title
      * @default 'On this page'
@@ -39,6 +46,7 @@ export namespace PressTheme {
        */
       primary: string
     }
+    
 
     nav: Array<NavItem>
     sidebar: string[]
@@ -46,6 +54,14 @@ export namespace PressTheme {
     editLink: EditLink
 
     footer: Footer
+
+    socialLinks: SocialLink[]
+
+    // label
+    /**
+     * Toggle dark label
+     */
+    darkModeSwitchLabel?: string
   }
 }
 
@@ -68,4 +84,4 @@ export type NavItem = NavItemLink | NavItemGroup
  * Theme Config
  */
 export type ThemeConfig = PressTheme.Config
-export type ThemeUserConfig = Partial<ThemeConfig>
+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

@@ -32,6 +32,11 @@ export default defineTheme<ThemeConfig>((options) => {
   return {
     themeConfig: defaultThemeConfig,
     vite: {
+      build: {
+        rollupOptions: {
+          external: ['valaxy-addon-algolia'],
+        },
+      },
       plugins: [ThemeVitePlugin(options)],
     },
   }

package/components/DocsBoard.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <YunBoard m="t-4">
-    这里是 Valaxy 的文档兼测试站点
-
-    <ul>
-      <li>
-        <router-link to="/docs" :title="t('docs.view_docs')">
-          {{ t('docs.view_docs') }}
-        </router-link>
-      </li>
-      <li>
-        <router-link class="flex justify-center" to="/examples">
-          Examples
-        </router-link>
-      </li>
-    </ul>
-  </YunBoard>
-</template>

package/components/nav/PressNavBar.vue

@@ -1,111 +0,0 @@
-<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>