valaxy-theme-press 1.0.0-rc.2 → 1.0.0-rc.4

package/components/PressGetStarted.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useSiteConfig, withBase } from 'valaxy'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
@@ -8,6 +10,10 @@ defineProps<{
 }>()
 
 const { t } = useI18n()
+const siteConfig = useSiteConfig()
+const iconStyle = computed(() => ({
+  maskImage: `url("${withBase(siteConfig.value.favicon)}")`,
+}))
 </script>
 
 <template>
@@ -19,7 +25,7 @@ const { t } = useI18n()
   >
     <div class="flex justify-center items-center">
       <div class="svg-wrapper">
-        <div class="icon" />
+        <div class="icon" :style="iconStyle" />
       </div>
       <span>
         {{ t(text) }}
@@ -48,8 +54,6 @@ const { t } = useI18n()
     transform-origin: center center;
     transition: all var(--va-transition-duration) ease-in-out;
 
-    // mask
-    mask-image: url('/favicon.svg');
     mask-size: 100% 100%;
     background-color: white;
     width: 1.2em;

package/components/PressHomeHero.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import type { Hero } from '../types'
 import { useFrontmatter } from 'valaxy'
 import { computed } from 'vue'
 import { useLocaleConfig } from '../composables'
 import PressButton from './PressButton.vue'
 
 const fm = useFrontmatter()
+const hero = computed(() => fm.value.hero as Hero | undefined)
 
 const { currentLocale, currentLocaleKey, hasLocales } = useLocaleConfig()
 
@@ -20,7 +22,7 @@ function resolveLocaleLink(link: string): string {
 }
 
 const actions = computed(() => {
-  return (fm.value.hero?.actions || []).map((action: any) => ({
+  return (hero.value?.actions || []).map(action => ({
     ...action,
     link: resolveLocaleLink(action.link),
   }))
@@ -28,20 +30,23 @@ const actions = computed(() => {
 </script>
 
 <template>
-  <template v-if="fm.hero">
+  <template v-if="hero">
     <div text="center" m="md:t-24 t-10 md:t-20" flex="~ col" justify="center" items="center">
-      <ValaxyLogo mb="2" />
+      <div v-if="hero.image" class="press-hero-image" mb="2">
+        <div class="press-hero-image-bg" />
+        <PressImage class="fly-animation h-50" :image="hero.image" />
+      </div>
       <h1 my="10" text="4xl md:8xl" font="black" class="gradient-text from-purple-800 to-blue-500 bg-gradient-to-r">
-        {{ fm.hero.name }}
+        {{ hero.name }}
       </h1>
     </div>
 
-    <h2 v-if="fm.hero?.text" flex="~ wrap justify-center" px="2" m="b-10" text="center 6xl" font="black" leading="tight">
-      {{ fm.hero.text }}
+    <h2 v-if="hero.text" flex="~ wrap justify-center" px="2" m="b-10" text="center 6xl" font="black" leading="tight">
+      {{ hero.text }}
     </h2>
 
-    <p v-if="fm.hero?.tagline" m="b-10" text="center xl" op="80">
-      {{ fm.hero.tagline }}
+    <p v-if="hero.tagline" m="b-10" text="center xl" op="80">
+      {{ hero.tagline }}
     </p>
 
     <div v-if="actions.length" p="2" text="center" class="flex justify-center items-center">
@@ -64,3 +69,34 @@ const actions = computed(() => {
     <br>
   </template>
 </template>
+
+<style scoped>
+.press-hero-image {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.press-hero-image-bg {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(72px);
+  width: 150%;
+  height: 150%;
+  background-image: linear-gradient(-45deg, rgb(108 34 236) 50%, rgb(59 130 246) 50%);
+  opacity: 0.3;
+  transition: opacity var(--va-transition-duration-fast);
+}
+
+.press-hero-image:hover .press-hero-image-bg {
+  opacity: 0.4;
+}
+
+.press-hero-image :deep(img) {
+  position: relative;
+  z-index: 1;
+  margin: auto;
+  object-fit: contain;
+}
+</style>

package/components/PressImage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ThemeableImage } from '../types'
+import { withBase } from 'valaxy'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  image: ThemeableImage
+  alt?: string
+}>()
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+      v-if="typeof image === 'string' || 'src' in image"
+      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      :src="withBase(typeof image === 'string' ? image : image.src)"
+      :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+    >
+    <template v-else>
+      <PressImage
+        class="dark"
+        :image="image.dark"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+      <PressImage
+        class="light"
+        :image="image.light"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) img.dark {
+  display: none;
+}
+
+.dark img.light {
+  display: none;
+}
+</style>

package/components/PressNavBar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useSidebar, useSiteConfig } from 'valaxy'
+import { useSidebar, useSiteConfig, withBase } from 'valaxy'
 import { computed } from 'vue'
 import { useLocaleConfig } from '../composables'
 
@@ -24,7 +24,7 @@ const homeLink = computed(() => hasLocales.value ? currentLocale.value.link : '/
       class="text-xl flex justify-center items-center font-black gradient-text from-purple-800 to-blue-500 bg-gradient-to-r"
       :to="homeLink" :aria-label="siteConfig.title"
     >
-      <img v-if="localeConfig.logo" class="logo" :src="localeConfig.logo" alt="LOGO">
+      <img v-if="localeConfig.logo" class="logo" :src="withBase(localeConfig.logo)" alt="LOGO">
       <span class="inline-flex">{{ siteConfig.title }}</span>
     </RouterLink>
     <div class="self-stretch flex justify-center items-center text-sm leading-5">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Docs (VitePress-like) theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -37,6 +37,6 @@
     "vitepress": "^2.0.0-alpha.17"
   },
   "devDependencies": {
-    "valaxy": "1.0.0-rc.2"
+    "valaxy": "1.0.0-rc.4"
   }
 }

package/types/home.d.ts

@@ -1,3 +1,23 @@
+export type ThemeableImage
+  = | string
+    | { src: string, alt?: string, [prop: string]: any }
+    | { light: string, dark: string, alt?: string, [prop: string]: any }
+
+export interface HeroAction {
+  theme: 'brand' | 'alt'
+  text: string
+  link: string
+  type?: 'fly'
+}
+
+export interface Hero {
+  name?: string
+  text?: string
+  tagline?: string
+  image?: ThemeableImage
+  actions?: HeroAction[]
+}
+
 export interface Feature {
   icon?: string
   title: string