vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/components/VPHero.vue

@@ -1,26 +1,31 @@
-<script setup lang="ts">
-import { type Ref, inject } from 'vue'
-import type { DefaultTheme } from 'vitepress/theme'
-import VPButton from './VPButton.vue'
-import VPImage from './VPImage.vue'
-
-export interface HeroAction {
-  theme?: 'brand' | 'alt'
-  text: string
-  link: string
-  target?: string
-  rel?: string
-}
-
-defineProps<{
-  name?: string
-  text?: string
-  tagline?: string
-  image?: DefaultTheme.ThemeableImage
-  actions?: HeroAction[]
-}>()
-
-const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+<script setup>
+import { computed, inject } from "vue";
+import { layoutInfoInjectionKey } from "../composables/layout";
+import VPButton from "./VPButton.vue";
+import VPImage from "./VPImage.vue";
+defineProps({
+	name: {
+		type: String,
+		required: false
+	},
+	text: {
+		type: String,
+		required: false
+	},
+	tagline: {
+		type: String,
+		required: false
+	},
+	image: {
+		type: [String, Object],
+		required: false
+	},
+	actions: {
+		type: Array,
+		required: false
+	}
+});
+const { heroImageSlotExists } = inject(layoutInfoInjectionKey, { heroImageSlotExists: computed(() => false) });
 </script>
 
 <template>
@@ -30,14 +35,15 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
         <slot name="home-hero-info-before" />
         <slot name="home-hero-info">
           <h1 class="heading">
-            <span v-if="name" v-html="name" class="name clip"></span>
-            <span v-if="text" v-html="text" class="text"></span>
+            <span v-if="name" dir="auto" v-html="name" class="name clip"></span>
+            <span v-if="text" dir="auto" v-html="text" class="text"></span>
           </h1>
-          <p v-if="tagline" v-html="tagline" class="tagline"></p>
+          <p v-if="tagline" class="tagline"><bdi v-html="tagline" /></p>
         </slot>
         <slot name="home-hero-info-after" />
 
         <div v-if="actions" class="actions">
+          <slot name="home-hero-actions-before-actions" />
           <div v-for="action in actions" :key="action.link" class="action">
             <VPButton
               tag="a"
@@ -57,7 +63,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
         <div class="image-container">
           <div class="image-bg" />
           <slot name="home-hero-image">
-            <VPImage v-if="image" class="image-src" :image="image" />
+            <VPImage v-if="image" class="image-src" :image />
           </slot>
         </div>
       </div>
@@ -68,18 +74,18 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 <style scoped>
 .VPHero {
   margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
-  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 3rem) 1.5rem 3rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 5rem) 3rem 4rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 5rem) 4rem 4rem;
   }
 }
 
@@ -87,10 +93,10 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .container {
     flex-direction: row;
   }
@@ -108,20 +114,20 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   text-align: center;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHero.has-image .container {
-    text-align: left;
+    text-align: start;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .main {
     order: 1;
     width: calc((100% / 3) * 2);
   }
 
   .VPHero.has-image .main {
-    max-width: 592px;
+    max-width: 37rem;
   }
 }
 
@@ -133,12 +139,17 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 .name,
 .text {
   width: fit-content;
-  max-width: 392px;
-  letter-spacing: -0.4px;
-  line-height: 40px;
-  font-size: 32px;
+  max-width: 24.5rem;
+  letter-spacing: -0.025rem;
+  line-height: 1.25;
+  font-size: 2rem;
   font-weight: 700;
   white-space: pre-wrap;
+
+  &:lang(ja) {
+    font-feature-settings: 'palt';
+    word-break: auto-phrase;
+  }
 }
 
 .VPHero.has-image .name,
@@ -157,20 +168,20 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   -webkit-text-fill-color: var(--vp-home-hero-name-color);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .name,
   .text {
-    max-width: 576px;
-    line-height: 56px;
-    font-size: 48px;
+    max-width: 36rem;
+    line-height: 1.1666667;
+    font-size: 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .name,
   .text {
-    line-height: 64px;
-    font-size: 56px;
+    line-height: 1.1428571;
+    font-size: 3.5rem;
   }
 
   .VPHero.has-image .name,
@@ -180,10 +191,10 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 }
 
 .tagline {
-  padding-top: 8px;
-  max-width: 392px;
-  line-height: 28px;
-  font-size: 18px;
+  padding-top: 0.5rem;
+  max-width: 24.5rem;
+  line-height: 1.5555556;
+  font-size: 1.125rem;
   font-weight: 500;
   white-space: pre-wrap;
   color: var(--vp-c-text-2);
@@ -193,19 +204,19 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   margin: 0 auto;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .tagline {
-    padding-top: 12px;
-    max-width: 576px;
-    line-height: 32px;
-    font-size: 20px;
+    padding-top: 0.75rem;
+    max-width: 36rem;
+    line-height: 1.6;
+    font-size: 1.25rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .tagline {
-    line-height: 36px;
-    font-size: 24px;
+    line-height: 1.5;
+    font-size: 1.5rem;
   }
 
   .VPHero.has-image .tagline {
@@ -216,21 +227,21 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 .actions {
   display: flex;
   flex-wrap: wrap;
-  margin: -6px;
-  padding-top: 24px;
+  margin: -0.375rem;
+  padding-top: 1.5rem;
 }
 
 .VPHero.has-image .actions {
   justify-content: center;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .actions {
-    padding-top: 32px;
+    padding-top: 2rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPHero.has-image .actions {
     justify-content: flex-start;
   }
@@ -238,21 +249,21 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 
 .action {
   flex-shrink: 0;
-  padding: 6px;
+  padding: 0.375rem;
 }
 
 .image {
   order: 1;
-  margin: -76px -24px -48px;
+  margin: -4.75rem -1.5rem -3rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .image {
-    margin: -108px -24px -48px;
+    margin: -6.75rem -1.5rem -3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .image {
     flex-grow: 1;
     order: 2;
@@ -264,79 +275,78 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 .image-container {
   position: relative;
   margin: 0 auto;
-  width: 320px;
-  height: 320px;
+  width: 20rem;
+  height: 20rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .image-container {
-    width: 392px;
-    height: 392px;
+    width: 24.5rem;
+    height: 24.5rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .image-container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
-    /*rtl:ignore*/
-    transform: translate(-32px, -32px);
+    transform: translate(calc(-2rem * var(--vp-direction-multiplier)), -2rem);
   }
 }
 
 .image-bg {
   position: absolute;
   top: 50%;
-  /*rtl:ignore*/
   left: 50%;
   border-radius: 50%;
-  width: 192px;
-  height: 192px;
+  width: 12rem;
+  height: 12rem;
   background-image: var(--vp-home-hero-image-background-image);
+  will-change: filter;
   filter: var(--vp-home-hero-image-filter);
-  /*rtl:ignore*/
   transform: translate(-50%, -50%);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .image-bg {
-    width: 256px;
-    height: 256px;
+    width: 16rem;
+    height: 16rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .image-bg {
-    width: 320px;
-    height: 320px;
+    width: 20rem;
+    height: 20rem;
   }
 }
 
 :deep(.image-src) {
   position: absolute;
   top: 50%;
-  /*rtl:ignore*/
   left: 50%;
-  max-width: 192px;
-  max-height: 192px;
-  /*rtl:ignore*/
+  max-width: 12rem;
+  max-height: 12rem;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
   transform: translate(-50%, -50%);
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   :deep(.image-src) {
-    max-width: 256px;
-    max-height: 256px;
+    max-width: 16rem;
+    max-height: 16rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   :deep(.image-src) {
-    max-width: 320px;
-    max-height: 320px;
+    max-width: 20rem;
+    max-height: 20rem;
   }
 }
 </style>

package/dist/client/theme-default/components/VPHome.d.vue.ts

@@ -0,0 +1,31 @@
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_27: {}, __VLS_29: {}, __VLS_36: {};
+type __VLS_Slots = {} & {
+    'home-hero-before'?: (props: typeof __VLS_1) => any;
+} & {
+    'home-hero-info-before'?: (props: typeof __VLS_10) => any;
+} & {
+    'home-hero-info'?: (props: typeof __VLS_13) => any;
+} & {
+    'home-hero-info-after'?: (props: typeof __VLS_16) => any;
+} & {
+    'home-hero-actions-after'?: (props: typeof __VLS_19) => any;
+} & {
+    'home-hero-actions-before-actions'?: (props: typeof __VLS_22) => any;
+} & {
+    'home-hero-image'?: (props: typeof __VLS_25) => any;
+} & {
+    'home-hero-after'?: (props: typeof __VLS_27) => any;
+} & {
+    'home-features-before'?: (props: typeof __VLS_29) => any;
+} & {
+    'home-features-after'?: (props: typeof __VLS_36) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/client/theme-default/components/VPHome.vue

@@ -1,24 +1,23 @@
-<script setup lang="ts">
-import VPHomeHero from './VPHomeHero.vue'
-import VPHomeFeatures from './VPHomeFeatures.vue'
-import VPHomeContent from './VPHomeContent.vue'
-import { useData } from '../composables/data'
-
-const { frontmatter, theme } = useData()
+<script setup>
+import { useData } from "../composables/data";
+import VPHomeContent from "./VPHomeContent.vue";
+import VPHomeFeatures from "./VPHomeFeatures.vue";
+import VPHomeHero from "./VPHomeHero.vue";
+const { frontmatter, theme } = useData();
 </script>
 
 <template>
-  <div 
-    class="VPHome" 
-    :class="{
-      'external-link-icon-enabled': theme.externalLinkIcon
-    }">
+  <div
+    class="VPHome"
+    :class="{ 'external-link-icon-enabled': theme.externalLinkIcon }"
+  >
     <slot name="home-hero-before" />
     <VPHomeHero>
       <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
       <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
       <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-actions-before-actions><slot name="home-hero-actions-before-actions" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
     </VPHomeHero>
     <slot name="home-hero-after" />
@@ -36,12 +35,13 @@ const { frontmatter, theme } = useData()
 
 <style scoped>
 .VPHome {
-  margin-bottom: 96px;
+  overflow-x: clip;
+  margin-bottom: 6rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPHome {
-    margin-bottom: 128px;
+    margin-bottom: 8rem;
   }
 }
 </style>

package/dist/client/theme-default/components/VPHomeContent.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/client/theme-default/components/VPHomeContent.vue

@@ -1,17 +1,5 @@
-<script setup lang="ts">
-import { useWindowSize } from '@vueuse/core'
-
-const { width: vw } = useWindowSize({
-  initialWidth: 0,
-  includeScrollbar: false
-})
-</script>
-
 <template>
-  <div
-    class="vp-doc container"
-    :style="vw ? { '--vp-offset': `calc(50% - ${vw / 2}px)` } : {}"
-  >
+  <div class="VPHomeContent vp-doc container">
     <slot />
   </div>
 </template>
@@ -20,35 +8,29 @@ const { width: vw } = useWindowSize({
 .container {
   margin: auto;
   width: 100%;
-  max-width: 1280px;
-  padding: 0 24px;
+  max-width: 80rem;
+  padding: 0 1.5rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .container {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .container {
     width: 100%;
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 
+/* stretch to full viewport width, overflow is clipped by .VPHome */
 .vp-doc :deep(.VPHomeSponsors),
 .vp-doc :deep(.VPTeamPage) {
-  margin-left: var(--vp-offset, calc(50% - 50vw));
-  margin-right: var(--vp-offset, calc(50% - 50vw));
-}
-
-.vp-doc :deep(.VPHomeSponsors h2) {
-  border-top: none;
-  letter-spacing: normal;
+  margin-inline: calc(50% - 50vw);
 }
 
-.vp-doc :deep(.VPHomeSponsors a),
 .vp-doc :deep(.VPTeamPage a) {
   text-decoration: none;
 }

package/dist/client/theme-default/components/VPHomeFeatures.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/client/theme-default/components/VPHomeFeatures.vue

@@ -1,8 +1,7 @@
-<script setup lang="ts">
-import { useData } from '../composables/data'
-import VPFeatures from './VPFeatures.vue'
-
-const { frontmatter: fm } = useData()
+<script setup>
+import { useData } from "../composables/data";
+import VPFeatures from "./VPFeatures.vue";
+const { frontmatter: fm } = useData();
 </script>
 
 <template>

package/dist/client/theme-default/components/VPHomeHero.d.vue.ts

@@ -0,0 +1,23 @@
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {};
+type __VLS_Slots = {} & {
+    'home-hero-info-before'?: (props: typeof __VLS_8) => any;
+} & {
+    'home-hero-info'?: (props: typeof __VLS_11) => any;
+} & {
+    'home-hero-info-after'?: (props: typeof __VLS_14) => any;
+} & {
+    'home-hero-actions-after'?: (props: typeof __VLS_17) => any;
+} & {
+    'home-hero-actions-before-actions'?: (props: typeof __VLS_20) => any;
+} & {
+    'home-hero-image'?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/client/theme-default/components/VPHomeHero.vue

@@ -1,8 +1,7 @@
-<script setup lang="ts">
-import { useData } from '../composables/data'
-import VPHero from './VPHero.vue'
-
-const { frontmatter: fm } = useData()
+<script setup>
+import { useData } from "../composables/data";
+import VPHero from "./VPHero.vue";
+const { frontmatter: fm } = useData();
 </script>
 
 <template>
@@ -19,6 +18,7 @@ const { frontmatter: fm } = useData()
     <template #home-hero-info><slot name="home-hero-info" /></template>
     <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
     <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+    <template #home-hero-actions-before-actions><slot name="home-hero-actions-before-actions" /></template>
     <template #home-hero-image><slot name="home-hero-image" /></template>
   </VPHero>
 </template>

package/dist/client/theme-default/components/VPHomeSponsors.d.vue.ts

@@ -0,0 +1,21 @@
+export interface Sponsors {
+    tier: string;
+    size?: 'medium' | 'big';
+    items: Sponsor[];
+}
+export interface Sponsor {
+    name: string;
+    img: string;
+    url: string;
+}
+interface Props {
+    message?: string;
+    actionText?: string;
+    actionLink?: string;
+    data: Sponsors[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    actionText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;