chore: merge main to fix/types

CHANGELOG.md

@@ -1,4 +1,35 @@
-# [1.0.0-alpha.1](https://github.com/vuejs/vitepress/compare/v0.22.4...v1.0.0-alpha.1) (2022-06-01)
+## [1.0.0-alpha.2](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-06-14)
+
+### Bug Fixes
+
+* use h1 for title in hero instead of p ([#776](https://github.com/vuejs/vitepress/issues/776)) ([919d230](https://github.com/vuejs/vitepress/commit/919d23079b636c188ea2049039461b88e0c02fc2))
+* add background color in navbar to avoid contrast issues ([#695](https://github.com/vuejs/vitepress/issues/695)) ([305bcc0](https://github.com/vuejs/vitepress/commit/305bcc02e68f8f9aea0000e6950e78455cf572f5))
+* add default value for base in `createMarkdownRenderer` ([#555](https://github.com/vuejs/vitepress/issues/555)) ([#556](https://github.com/vuejs/vitepress/issues/556)) ([78a2e84](https://github.com/vuejs/vitepress/commit/78a2e84e7bb7acfda50e686bbd404961babb91e8))
+* allow lang='ts' on scripts in markdown ([#693](https://github.com/vuejs/vitepress/issues/693)) ([#701](https://github.com/vuejs/vitepress/issues/701)) ([59df105](https://github.com/vuejs/vitepress/commit/59df10590b958bbc39cc2e8c81a2209eda9d431b))
+* better nav item types ([#714](https://github.com/vuejs/vitepress/issues/714)) ([263607b](https://github.com/vuejs/vitepress/commit/263607b279cbfd3db80bbe0ea66000560d24993a))
+* double base in sidebar links ([#756](https://github.com/vuejs/vitepress/issues/756)) ([aa65cb5](https://github.com/vuejs/vitepress/commit/aa65cb58f508bb8e79c20b6370bdfe1b7e470abf))
+* use `pre-wrap` for text and tagline ([#746](https://github.com/vuejs/vitepress/issues/746)) ([94704c9](https://github.com/vuejs/vitepress/commit/94704c95637f1cc844d526d4743818d38d1cbae0))
+* nav nested items type error ([#710](https://github.com/vuejs/vitepress/issues/710)) ([#711](https://github.com/vuejs/vitepress/issues/711)) ([e5bf15a](https://github.com/vuejs/vitepress/commit/e5bf15a21ee777b4e56ad86ec5ebb5b0e161b721))
+* page layout breaks when page name matches the css class name ([#696](https://github.com/vuejs/vitepress/issues/696)) ([#699](https://github.com/vuejs/vitepress/issues/699)) ([9c0ed93](https://github.com/vuejs/vitepress/commit/9c0ed9397f35827a261d45c789d23ce7faa7ecee))
+* remove title bg transition to avoid flush on sidebar on/off ([1942418](https://github.com/vuejs/vitepress/commit/1942418f9570feb81d8066a2413d70b0f36fb8ce))
+* sidebar right blur notch ([#712](https://github.com/vuejs/vitepress/issues/712)) ([64c3654](https://github.com/vuejs/vitepress/commit/64c3654b4ba82c16fefdf396106f3077d066c67b))
+* typo ([#708](https://github.com/vuejs/vitepress/issues/708)) ([#716](https://github.com/vuejs/vitepress/issues/716)) ([1fe5153](https://github.com/vuejs/vitepress/commit/1fe5153f47465efed05e087119c93d50da6e92a3))
+* title in containers not working with markdown content ([#765](https://github.com/vuejs/vitepress/issues/765)) ([#768](https://github.com/vuejs/vitepress/issues/768)) ([c5c3c64](https://github.com/vuejs/vitepress/commit/c5c3c64851b240279a304198fd97e3dc8b5f2fd0))
+* use base in links ([#717](https://github.com/vuejs/vitepress/issues/717)) ([#718](https://github.com/vuejs/vitepress/issues/718)) ([8e50154](https://github.com/vuejs/vitepress/commit/8e5015462c8f42c5404525ac8de33af8862c204d))
+* use h2 for feature headers ([#774](https://github.com/vuejs/vitepress/issues/774)) ([b1ff725](https://github.com/vuejs/vitepress/commit/b1ff72561182c91b4912ebef44204a53ee3aca5e))
+
+### Features
+
+* add `lastUpdated` option to frontmatter ([b31fbf3](https://github.com/vuejs/vitepress/commit/b31fbf3621bbd7f627a1b80c581b7a8444bc6b0d))
+* add doc before and after slot ([#762](https://github.com/vuejs/vitepress/issues/762)) ([#786](https://github.com/vuejs/vitepress/issues/786)) ([9c2a36f](https://github.com/vuejs/vitepress/commit/9c2a36f5428bd98eafb6e2e9bc63f5e532b596b7))
+* allow custom edit links ([#698](https://github.com/vuejs/vitepress/issues/698)) ([535e176](https://github.com/vuejs/vitepress/commit/535e176b9a230f692f58a79813a12d2ffbe90be3)), closes [#694](https://github.com/vuejs/vitepress/issues/694) [#697](https://github.com/vuejs/vitepress/issues/697)
+* allow custom outline title ([#689](https://github.com/vuejs/vitepress/issues/689)) ([#690](https://github.com/vuejs/vitepress/issues/690)) ([a8a1623](https://github.com/vuejs/vitepress/commit/a8a16237cd8e3e4bb180fbd523a4668a4555b732))
+* allow external links in sidebar ([#205](https://github.com/vuejs/vitepress/issues/205)) ([#686](https://github.com/vuejs/vitepress/issues/686)) ([ce17f50](https://github.com/vuejs/vitepress/commit/ce17f5035cbbd1e07373ce0f44913f25269bd80b))
+* support custom content in home layout ([#702](https://github.com/vuejs/vitepress/issues/702)) ([92659a2](https://github.com/vuejs/vitepress/commit/92659a2e9dde13e35fadf2d2dca157d648bc9013))
+* emit 404.html on build ([#729](https://github.com/vuejs/vitepress/issues/729)) ([#740](https://github.com/vuejs/vitepress/issues/740)) ([23276ba](https://github.com/vuejs/vitepress/commit/23276bae050190b6c1d57347424360fe2c3a57be))
+* setup devtools and remove debug component ([#721](https://github.com/vuejs/vitepress/issues/721)) ([421f641](https://github.com/vuejs/vitepress/commit/421f641a76ddc0e8b0f23ab7ad711833fc98c245))
+
+## [1.0.0-alpha.1](https://github.com/vuejs/vitepress/compare/v0.22.4...v1.0.0-alpha.1) (2022-06-01)
 
 Complete rewrite on default theme, with bunch of features added. Please refer to the docs for the new feature and changes.
 

docs/guide/deploying.md

@@ -258,3 +258,23 @@ Go to https://vercel.com/new and import the project into Vercel using your Git o
 After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.
 
 Once deployed, you will get a URL to see your app live, such as the following: https://vitepress.vercel.app
+
+## Layer0
+
+See [Creating and Deploying a VitePress App with Layer0](https://docs.layer0.co/guides/vitepress).
+
+## Cloudflare Pages
+
+1. Go to [Cloudflare dashboard](https://dash.cloudflare.com/) > Account Home > Pages and selecting **Create a project**.
+2. You will see three options, just select first **Connect to a git provider**.
+3. Click Connect GitHub or Connect GitLab. Then select the repo you want to deploy.
+4. Set up build docs command, like `npm run build` or `npm run docs:build`.
+5. Now deploy, you will get a domain like `my-project.pages.dev`.
+
+::: warning Do not Auto Minify HTML
+If you want or are using Cloudflare's Auto minify feature, you should not check the html box.
+
+With Auto Minify, Cloudflare will automatically remove the comments in the html file, however, html comments for Vue has meanings. For example, it works as a placeholder for `v-if`.
+
+If it gets removed, then you will probably see a hydration mismatch error.
+:::

docs/guide/migration-from-vuepress.md

@@ -1,3 +1,24 @@
 # Migration from VuePress
 
-Coming soon...
+## Markdown
+
+### Images
+
+Unlike VuePress, VitePress handles [`base`](/guide/asset-handling.html#base-url) of your config automatically when you use static image.
+
+Hence, now you can render images without `img` tag.
+
+```diff
+- <img :src="$withBase('/foo.png')" alt="foo">
++ ![foo](/foo.png)
+```
+
+::: warning
+For dynamic images you still need `withBase` as shown in [Base URL guide](/guide/asset-handling.html#base-url).
+:::
+
+Use `<img.*withBase\('(.*)'\).*alt="([^"]*)".*>` regex to find and replace it with `![$2]($1)` to replace all the images with `![](...)` syntax.
+
+---
+
+more to follow...

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Vite & Vue powered static site generator",
   "type": "module",
   "packageManager": "pnpm@7.1.7",

scripts/release.js

@@ -33,7 +33,7 @@ async function main() {
     message: 'Select release type',
     choices: versions
   })
-  console.log(release, release === 3)
+
   if (release === 3) {
     targetVersion = (
       await prompts({

src/client/app/data.ts

@@ -1,6 +1,6 @@
 import { InjectionKey, Ref, shallowRef, readonly, computed, inject } from 'vue'
 import { Route } from './router'
-import serializedSiteData from '@siteData'
+import siteData from '@siteData'
 import {
   PageData,
   SiteData,
@@ -25,17 +25,14 @@ export interface VitePressData<T = any> {
 // site data is a singleton
 export type SiteDataRef<T = any> = Ref<SiteData<T>>
 
-export const siteDataRef: Ref<SiteData> = shallowRef(parse(serializedSiteData))
-
-function parse(data: string): SiteData {
-  const parsed = JSON.parse(data)
-  return (import.meta.env.DEV ? readonly(parsed) : parsed) as SiteData
-}
+export const siteDataRef: Ref<SiteData> = shallowRef(
+  import.meta.env.PROD ? siteData : readonly(siteData)
+)
 
 // hmr
 if (import.meta.hot) {
   import.meta.hot!.accept('/@siteData', (m) => {
-    siteDataRef.value = parse(m.default)
+    siteDataRef.value = m.default
   })
 }
 

src/client/shim.d.ts

@@ -10,7 +10,8 @@ declare module '*.vue' {
 }
 
 declare module '@siteData' {
-  const data: string
+  import type { SiteData } from './shared'
+  const data: SiteData
   export default data
 }
 

src/client/theme-default/components/VPBox.vue → src/client/theme-default/components/VPFeature.vue

@@ -7,16 +7,16 @@ defineProps<{
 </script>
 
 <template>
-  <article class="VPBox">
+  <article class="VPFeature">
     <div v-if="icon" class="icon">{{ icon }}</div>
     <h2 class="title">{{ title }}</h2>
     <p class="details">{{ details }}</p>
   </article>
 </template>
 
 <style scoped>
-.VPBox {
-  border: 1px solid var(--vp-c-divider-light);
+.VPFeature {
+  border: 1px solid var(--vp-c-bg-soft);
   border-radius: 12px;
   padding: 24px;
   height: 100%;

src/client/theme-default/components/VPFeatures.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import VPFeature from './VPFeature.vue'
+
+export interface Feature {
+  icon?: string
+  title: string
+  details: string
+}
+
+const props = defineProps<{
+  features: Feature[]
+}>()
+
+const grid = computed(() => {
+  const length = props.features.length
+
+  if (!length) {
+    return
+  } else if (length === 2) {
+    return 'grid-2'
+  } else if (length === 3) {
+    return 'grid-3'
+  } else if (length % 3 === 0) {
+    return 'grid-6'
+  } else if (length % 2 === 0) {
+    return 'grid-4'
+  }
+})
+</script>
+
+<template>
+  <div v-if="features" class="VPFeatures">
+    <div class="container">
+      <div class="items">
+        <div v-for="feature in features" :key="feature.title" class="item" :class="[grid]">
+          <VPFeature
+            :icon="feature.icon"
+            :title="feature.title"
+            :details="feature.details"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFeatures {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-2,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-2,
+  .item.grid-4 {
+    width: calc(100% / 2);
+  }
+
+  .item.grid-3,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+}
+</style>

src/client/theme-default/components/VPHero.vue

@@ -1,22 +1,19 @@
 <script setup lang="ts">
+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
 }
 
-export interface Image {
-  src: string
-  alt?: string
-}
-
 defineProps<{
   name?: string
   text: string
   tagline?: string
-  image?: Image
+  image?: DefaultTheme.ThemeableImage
   actions?: HeroAction[]
 }>()
 </script>
@@ -25,7 +22,9 @@ defineProps<{
   <div class="VPHero" :class="{ 'has-image': image }">
     <div class="container">
       <div class="main">
-        <h1 v-if="name" class="name"><span class="clip">{{ name }}</span></h1>
+        <h1 v-if="name" class="name">
+          <span class="clip">{{ name }}</span>
+        </h1>
         <p v-if="text" class="text">{{ text }}</p>
         <p v-if="tagline" class="tagline">{{ tagline }}</p>
 
@@ -45,7 +44,7 @@ defineProps<{
       <div v-if="image" class="image">
         <div class="image-container">
           <div class="image-bg" />
-          <img class="image-src" :src="image.src" :alt="image.alt">
+          <VPImage class="image-src" :image="image" />
         </div>
       </div>
     </div>
@@ -64,11 +63,17 @@ defineProps<{
   }
 }
 
+@media (min-width: 960px) {
+  .VPHero {
+    padding: calc(var(--vp-nav-height) + 80px) 64px 64px;
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 1152px;
 }
 
 @media (min-width: 960px) {
@@ -98,13 +103,11 @@ defineProps<{
 @media (min-width: 960px) {
   .main {
     order: 1;
+    width: calc((100% / 3) * 2);
   }
-}
 
-@media (min-width: 960px) {
-  .main {
-    width: 100%;
-    max-width: calc((100% / 3) * 2);
+  .VPHero.has-image .main {
+    max-width: 592px;
   }
 }
 
@@ -157,7 +160,7 @@ defineProps<{
 }
 
 .tagline {
-  padding-top: 16px;
+  padding-top: 8px;
   max-width: 392px;
   line-height: 28px;
   font-size: 18px;
@@ -172,7 +175,7 @@ defineProps<{
 
 @media (min-width: 640px) {
   .tagline {
-    padding-top: 24px;
+    padding-top: 12px;
     max-width: 576px;
     line-height: 32px;
     font-size: 20px;
@@ -181,7 +184,6 @@ defineProps<{
 
 @media (min-width: 960px) {
   .tagline {
-    padding-top: 24px;
     line-height: 36px;
     font-size: 24px;
   }
@@ -232,9 +234,9 @@ defineProps<{
 
 @media (min-width: 960px) {
   .image {
+    flex-grow: 1;
     order: 2;
     margin: 0;
-    width: calc(100% / 3);
     min-height: 100%;
   }
 }
@@ -290,7 +292,7 @@ defineProps<{
   }
 }
 
-.image-src {
+:deep(.image-src) {
   position: absolute;
   top: 50%;
   left: 50%;