feat(theme-press): add social links

docs/valaxy.config.ts

@@ -6,6 +6,8 @@ const commitRef = COMMIT_ID?.slice(0, 8) || 'dev'
 
 const safelist = [
   'i-ri-home-line',
+
+  'i-ri-github-line'
 ]
 
 export default defineValaxyConfig<PressTheme.Config>({
@@ -17,6 +19,9 @@ export default defineValaxyConfig<PressTheme.Config>({
   themeConfig: {
     logo: '/favicon.svg',
     sidebar: ['Getting Started', 'Guide', 'Migration', 'built-ins', 'Third', 'Custom', 'Theme', 'Addon', 'Dev'],
+    socialLinks: [
+      { icon: 'i-ri-github-line', link: 'https://github.com/YunYouJun/valaxy' }
+    ],
     nav: [
       {
         text: 'Docs',

packages/valaxy-theme-press/components/PressFeatures.vue

@@ -17,7 +17,7 @@ const grid = computed(() => {
 
 <template>
   <div class="press-features">
-    <div class="m-auto container grid gap-4" :class="[grid]">
+    <div class="m-auto container grid gap-4" p="x-4" :class="[grid]">
       <div v-for="feature in features" :key="feature.title" class="inline-grid">
         <PressFeature :feature="feature" />
       </div>

packages/valaxy-theme-press/components/PressFooter.vue

@@ -29,7 +29,7 @@ const { hasSidebar } = useSidebar()
 }
 
 @media (min-width: 768px) {
-  .VPFooter {
+  .pr-footer {
     padding: 32px;
   }
 }

packages/valaxy-theme-press/components/PressLocalNav.vue

@@ -21,7 +21,7 @@ function scrollToTop() {
     <button
       class="menu"
       :aria-expanded="open"
-      aria-controls="VPSidebarNav"
+      aria-controls="pr-sidebar-nav"
       @click="$emit('openMenu')"
     >
       <div i-ri-align-left class="menu-icon" />
@@ -92,12 +92,12 @@ function scrollToTop() {
   line-height: 24px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--vp-c-text-2);
+  color: var(--pr-c-text-2);
   transition: color 0.5s;
 }
 
 .top-link:hover {
-  color: var(--vp-c-text-1);
+  color: var(--pr-c-text-1);
   transition: color 0.25s;
 }
 

packages/valaxy-theme-press/components/nav/PressNavBar.vue

@@ -26,6 +26,7 @@ const themeConfig = useThemeConfig()
       <PressNavBarMenu p="x-2" />
       <PressNavBarTranslations p="x-2" />
       <PressNavBarAppearance p="x-2" />
+      <PressNavBarSocialLinks p="x-2" />
 
       <PressNavBarHamburger :active="isScreenOpen" @click="$emit('toggleScreen')" />
     </div>

packages/valaxy-theme-press/components/nav/PressNavBarSocialLinks.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../../composables'
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <PressSocialLinks
+    v-if="themeConfig.socialLinks"
+    class="pr-nav-bar-social-links"
+    :links="themeConfig.socialLinks"
+  />
+</template>
+
+<style scoped>
+.pr-nav-bar-social-links {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .pr-nav-bar-social-links {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

packages/valaxy-theme-press/components/nav/PressNavScreen.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'
-// import VPNavScreenMenu from './VPNavScreenMenu.vue'
-// import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
-// import VPNavScreenTranslations from './VPNavScreenTranslations.vue'
-// import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
 
 defineProps<{
   open: boolean
@@ -30,10 +26,11 @@ function unlockBodyScroll() {
     <div v-if="open" ref="screen" class="pr-NavScreen">
       <div class="container" flex="~ col">
         <slot name="nav-screen-content-before" />
-        <!-- <VPNavScreenMenu class="menu" /> -->
+        <PressNavScreenMenu class="menu" />
         <PressNavScreenTranslations class="translations" />
         <PressNavScreenAppearance class="appearance" />
-        <!-- <VPNavScreenSocialLinks class="social-links" /> -->
+        <PressNavScreenSocialLinks class="social-links" />
+
         <slot name="nav-screen-content-after" />
       </div>
     </div>

packages/valaxy-theme-press/components/nav/PressNavScreenMenuGroup.vue

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import VPIconPlus from './icons/VPIconPlus.vue'
-import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
-import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
 
 const props = defineProps<{
   text: string
@@ -21,7 +18,7 @@ function toggle() {
 </script>
 
 <template>
-  <div class="VPNavScreenMenuGroup" :class="{ open: isOpen }">
+  <div class="pr-nav-screen-menu-group" :class="{ open: isOpen }">
     <button
       class="button"
       :aria-controls="groupId"
@@ -35,14 +32,14 @@ function toggle() {
     <div :id="groupId" class="items">
       <template v-for="item in items" :key="item.text">
         <div v-if="'link' in item" :key="item.text" class="item">
-          <VPNavScreenMenuGroupLink
+          <PressNavScreenMenuGroupLink
             :text="item.text"
             :link="item.link"
           />
         </div>
 
         <div v-else class="group">
-          <VPNavScreenMenuGroupSection
+          <PressNavScreenMenuGroupSection
             :text="item.text"
             :items="item.items"
           />
@@ -53,32 +50,32 @@ function toggle() {
 </template>
 
 <style scoped>
-.VPNavScreenMenuGroup {
-  border-bottom: 1px solid var(--vp-c-divider);
+.pr-nav-screen-menu-group {
+  border-bottom: 1px solid var(--pr-c-divider);
   height: 48px;
   overflow: hidden;
   transition: border-color 0.5s;
 }
 
-.VPNavScreenMenuGroup .items {
+.pr-nav-screen-menu-group .items {
   visibility: hidden;
 }
 
-.VPNavScreenMenuGroup.open .items {
+.pr-nav-screen-menu-group.open .items {
   visibility: visible;
 }
 
-.VPNavScreenMenuGroup.open {
+.pr-nav-screen-menu-group.open {
   padding-bottom: 10px;
   height: auto;
 }
 
-.VPNavScreenMenuGroup.open .button {
+.pr-nav-screen-menu-group.open .button {
   padding-bottom: 6px;
-  color: var(--vp-c-brand);
+  color: var(--pr-c-brand);
 }
 
-.VPNavScreenMenuGroup.open .button-icon {
+.pr-nav-screen-menu-group.open .button-icon {
   /*rtl:ignore*/
   transform: rotate(45deg);
 }
@@ -92,18 +89,18 @@ function toggle() {
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-text-1);
+  color: var(--pr-c-text-1);
   transition: color 0.25s;
 }
 
 .button:hover {
-  color: var(--vp-c-brand);
+  color: var(--pr-c-brand);
 }
 
 .button-icon {
   width: 14px;
   height: 14px;
-  fill: var(--vp-c-text-2);
+  fill: var(--pr-c-text-2);
   transition: fill 0.5s, transform 0.25s;
 }
 

packages/valaxy-theme-press/components/nav/PressNavScreenMenuGroupLink.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
-import VPLink from './VPLink.vue'
 
 defineProps<{
   text: string
@@ -11,23 +10,23 @@ const closeScreen = inject('close-screen') as () => void
 </script>
 
 <template>
-  <VPLink class="VPNavScreenMenuGroupLink" :href="link" @click="closeScreen">
+  <AppLink class="pr-nav-screen-menu-group-link" :href="link" @click="closeScreen">
     {{ text }}
-  </VPLink>
+  </AppLink>
 </template>
 
 <style scoped>
-.VPNavScreenMenuGroupLink {
+.pr-nav-screen-menu-group-link {
   display: block;
   margin-left: 12px;
   line-height: 32px;
   font-size: 14px;
   font-weight: 400;
-  color: var(--vp-c-text-1);
+  color: var(--pr-c-text-1);
   transition: color 0.25s;
 }
 
-.VPNavScreenMenuGroupLink:hover {
-  color: var(--vp-c-brand);
+.pr-nav-screen-menu-group-link:hover {
+  color: var(--pr-c-brand);
 }
 </style>

packages/valaxy-theme-press/components/nav/PressNavScreenMenuGroupSection.vue

@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="VPNavScreenMenuGroupSection">
+  <div class="pr-nav-screen-menu-group-section">
     <p v-if="text" class="title">
       {{ text }}
     </p>
@@ -22,7 +22,7 @@ defineProps<{
 </template>
 
 <style scoped>
-.VPNavScreenMenuGroupSection {
+.pr-nav-screen-menu-group-section {
   display: block;
 }
 
@@ -30,7 +30,7 @@ defineProps<{
   line-height: 32px;
   font-size: 13px;
   font-weight: 700;
-  color: var(--vp-c-text-2);
+  color: var(--pr-c-text-2);
   transition: color 0.25s;
 }
 </style>

packages/valaxy-theme-press/components/nav/PressNavScreenMenuLink.vue

@@ -10,24 +10,24 @@ const closeScreen = inject('close-screen') as () => void
 </script>
 
 <template>
-  <AppLink class="VPNavScreenMenuLink" :href="link" @click="closeScreen">
+  <AppLink class="pr-nav-screen-menu-link" :href="link" @click="closeScreen">
     {{ text }}
   </AppLink>
 </template>
 
 <style scoped>
-.VPNavScreenMenuLink {
+.pr-nav-screen-menu-link {
   display: block;
-  border-bottom: 1px solid var(--vp-c-divider);
+  border-bottom: 1px solid var(--pr-c-divider);
   padding: 12px 0 11px;
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-text-1);
+  color: var(--pr-c-text-1);
   transition: border-color 0.25s, color 0.25s;
 }
 
-.VPNavScreenMenuLink:hover {
-  color: var(--vp-c-brand);
+.pr-nav-screen-menu-link:hover {
+  color: var(--pr-c-brand);
 }
 </style>

packages/valaxy-theme-press/components/nav/PressNavScreenSocialLinks.vue

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

packages/valaxy-theme-press/components/nav/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>

packages/valaxy-theme-press/components/nav/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>

packages/valaxy-theme-press/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: {},
 }

packages/valaxy-theme-press/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.
@@ -50,11 +55,13 @@ export namespace PressTheme {
 
     footer: Footer
 
+    socialLinks: SocialLink[]
+
     // label
     /**
      * Toggle dark label
      */
-    darkModeSwitchLabel: string
+    darkModeSwitchLabel?: string
   }
 }
 

packages/valaxy/client/components/AppLink.vue

@@ -4,7 +4,8 @@ import { computed } from 'vue'
 
 const props = defineProps<{
   showExternalIcon?: boolean
-  to: string
+  to?: string
+  href?: string
 }>()
 
 const isExternalLink = computed(() => {
@@ -13,7 +14,7 @@ const isExternalLink = computed(() => {
 </script>
 
 <template>
-  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
+  <a v-if="isExternalLink || href" v-bind="$attrs" :href="href" target="_blank">
     <slot />
     <div v-if="showExternalIcon" class="icon-link inline-block" i-ri-arrow-right-up-line />
   </a>

packages/valaxy/client/composables/outline/anchor.ts

@@ -28,6 +28,9 @@ export function useActiveAnchor(
   })
 
   function setActiveLink() {
+    if (!container.value)
+      return
+
     const links = [].slice.call(
       container.value.querySelectorAll('.outline-link'),
     ) as HTMLAnchorElement[]