vitepress 1.0.0-draft.5 → 1.0.0-draft.6

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

@@ -17,7 +17,7 @@ defineProps<{
 <style scoped>
 .VPBox {
   border: 1px solid var(--vp-c-divider-light);
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 24px;
   height: 100%;
   background-color: var(--vp-c-bg-soft);

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

@@ -42,7 +42,6 @@ const component = computed(() => {
 .VPButton {
   display: inline-block;
   border: 1px solid transparent;
-
   text-align: center;
   font-weight: 500;
   white-space: nowrap;

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

@@ -7,30 +7,45 @@ export interface HeroAction {
   link: string
 }
 
+export interface Image {
+  light: string
+  dark: string
+}
+
 defineProps<{
   name?: string
   text: string
   tagline?: string
+  image?: Image
   actions?: HeroAction[]
 }>()
 </script>
 
 <template>
-  <div class="VPHero">
+  <div class="VPHero" :class="{ 'has-image': image }">
     <div class="container">
-      <p v-if="name" class="name"><span class="clip">{{ name }}</span></p>
-      <h1 v-if="text" class="text">{{ text }}</h1>
-      <p v-if="tagline" class="tagline">{{ tagline }}</p>
-
-      <div v-if="actions" class="actions">
-        <div v-for="action in actions" :key="action.link" class="action">
-          <VPButton
-            tag="a"
-            size="big"
-            :theme="action.theme"
-            :text="action.text"
-            :href="action.link"
-          />
+      <div class="main">
+        <p v-if="name" class="name"><span class="clip">{{ name }}</span></p>
+        <h1 v-if="text" class="text">{{ text }}</h1>
+        <p v-if="tagline" class="tagline">{{ tagline }}</p>
+
+        <div v-if="actions" class="actions">
+          <div v-for="action in actions" :key="action.link" class="action">
+            <VPButton
+              tag="a"
+              size="medium"
+              :theme="action.theme"
+              :text="action.text"
+              :href="action.link"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div v-if="image" class="image">
+        <div class="image-container">
+          <img class="image-src light" :src="image.light">
+          <img class="image-src dark" :src="image.dark">
         </div>
       </div>
     </div>
@@ -41,6 +56,7 @@ defineProps<{
 .VPHero {
   margin-top: calc(var(--vp-nav-height) * -1);
   padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+  overflow: hidden;
 }
 
 @media (min-width: 640px) {
@@ -50,66 +66,113 @@ defineProps<{
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
   margin: 0 auto;
   max-width: 960px;
 }
 
+@media (min-width: 960px) {
+  .container {
+    flex-direction: row;
+  }
+}
+
+.main {
+  position: relative;
+  z-index: 10;
+  order: 2;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.VPHero.has-image .container {
+  text-align: center;
+}
+
+@media (min-width: 960px) {
+  .VPHero.has-image .container {
+    text-align: left;
+  }
+}
+
+@media (min-width: 960px) {
+  .main {
+    order: 1;
+  }
+}
+
+@media (min-width: 960px) {
+  .main {
+    width: 100%;
+    max-width: calc((100% / 3) * 2);
+  }
+}
+
 .name,
 .text {
-  line-height: 48px;
-  font-size: 40px;
+  max-width: 392px;
+  letter-spacing: -0.4px;
+  line-height: 40px;
+  font-size: 32px;
   font-weight: 700;
 }
 
+.VPHero.has-image .name,
+.VPHero.has-image .text {
+  margin: 0 auto;
+}
+
 .name {
-  padding-bottom: 4px;
   color: var(--vp-home-hero-name-color);
 }
 
 .clip {
   background: var(--vp-home-hero-name-background);
-  -webkit-text-fill-color: var(--vp-home-hero-name-color);
   -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--vp-home-hero-name-color);
 }
 
 @media (min-width: 640px) {
   .name,
   .text {
-    max-width: 640px;
+    max-width: 576px;
     line-height: 56px;
     font-size: 48px;
   }
-
-  .name {
-    padding-bottom: 6px;
-  }
 }
 
 @media (min-width: 960px) {
   .name,
   .text {
-    max-width: 720px;
     line-height: 64px;
     font-size: 56px;
   }
 
-  .name {
-    padding-bottom: 6px;
+  .VPHero.has-image .name,
+  .VPHero.has-image .text {
+    margin: 0;
   }
 }
 
 .tagline {
   padding-top: 16px;
+  max-width: 392px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
+.VPHero.has-image .tagline {
+  margin: 0 auto;
+}
+
 @media (min-width: 640px) {
   .tagline {
     padding-top: 24px;
-    max-width: 540px;
+    max-width: 576px;
     line-height: 32px;
     font-size: 20px;
   }
@@ -118,27 +181,105 @@ defineProps<{
 @media (min-width: 960px) {
   .tagline {
     padding-top: 24px;
-    max-width: 640px;
     line-height: 36px;
     font-size: 24px;
   }
+
+  .VPHero.has-image .tagline {
+    margin: 0;
+  }
 }
 
 .actions {
   display: flex;
   flex-wrap: wrap;
-  margin: -8px;
+  margin: -6px;
   padding-top: 24px;
 }
 
+.VPHero.has-image .actions {
+  justify-content: center;
+}
+
 @media (min-width: 640px) {
   .actions {
     padding-top: 32px;
   }
 }
 
+@media (min-width: 960px) {
+  .VPHero.has-image .actions {
+    justify-content: flex-start;
+  }
+}
+
 .action {
   flex-shrink: 0;
-  padding: 8px;
+  padding: 6px;
+}
+
+.image {
+  order: 1;
+  margin: -76px -24px -48px;
+}
+
+@media (min-width: 640px) {
+  .image {
+    margin: -108px -24px -48px;
+  }
+}
+
+.image-container {
+  position: relative;
+  margin: 0 auto;
+  width: 320px;
+  height: 320px;
+}
+
+@media (min-width: 640px) {
+  .image-container {
+    width: 392px;
+    height: 392px;
+  }
+}
+
+.image-src {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 392px;
+  transform: translate(-50%, -50%);
+}
+
+.image-src.light { opacity: 1; }
+.image-src.dark  { opacity: 0; }
+
+.dark .image-src.light { opacity: 0; }
+.dark .image-src.dark  { opacity: 1; }
+
+@media (min-width: 640px) {
+  .image-src {
+    max-width: 512px;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@media (min-width: 960px) {
+  .image {
+    order: 2;
+    margin: -8px 0;
+    width: calc(100% / 3);
+    min-height: 100%;
+  }
+
+  .image-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .image-src {
+    max-width: 640px;
+    transform: translate(calc(-50% - 32px), calc(-50% - 32px));
+  }
 }
 </style>

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

@@ -42,6 +42,7 @@ const grid = computed(() => {
 
 <style scoped>
 .VPHomeFeatures {
+  position: relative;
   padding: 0 24px;
 }
 

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

@@ -11,6 +11,7 @@ const { frontmatter: fm } = useData()
       :name="fm.hero.name"
       :text="fm.hero.text"
       :tagline="fm.hero.tagline"
+      :image="fm.hero.image"
       :actions="fm.hero.actions"
     />
   </div>

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

@@ -42,7 +42,7 @@ defineProps<{
 
 .VPMenu :deep(.group + .group) {
   border-top: 1px solid var(--vp-c-divider-light);
-  padding: 11px 0 12px;
+  padding: 11px 12px 12px;
 }
 
 .VPMenu :deep(.group:last-child) {

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

@@ -53,10 +53,6 @@ const { site, theme } = useData()
   }
 }
 
-.trans {
-  padding: 2px 16px 0;
-}
-
 .trans-title {
   padding: 0 24px 0 12px;
   line-height: 32px;
@@ -69,7 +65,7 @@ const { site, theme } = useData()
 .item.social-links {
   display: flex;
   align-items: center;
-  padding: 0 24px;
+  padding: 0 12px;
 }
 
 .item.appearance {

package/dist/client/theme-default/styles/base.css

@@ -119,6 +119,10 @@ object {
   vertical-align: middle;
 }
 
+figure {
+  margin: 0;
+}
+
 img,
 video {
   max-width: 100%;

package/dist/node/cli.js

@@ -1,4 +1,4 @@
-import { h as c, e as createServer, g as build, s as serve } from './serve-f7c10936.js';
+import { h as c, e as createServer, g as build, s as serve } from './serve-9c85885c.js';
 import 'shiki';
 import 'fs';
 import 'path';
@@ -266,7 +266,7 @@ function isNumber (x) {
     return /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(e[-+]?\d+)?$/.test(x);
 }
 
-var version = "1.0.0-draft.4";
+var version = "1.0.0-draft.6";
 
 const argv = minimist(process.argv.slice(2));
 console.log(c.cyan(`vitepress v${version}`));

package/dist/node/index.js

@@ -1,4 +1,4 @@
-export { g as build, f as createMarkdownRenderer, e as createServer, d as defineConfig, a as defineConfigWithTheme, r as resolveConfig, b as resolveSiteData, c as resolveSiteDataByRoute, s as serve } from './serve-f7c10936.js';
+export { g as build, f as createMarkdownRenderer, e as createServer, d as defineConfig, a as defineConfigWithTheme, r as resolveConfig, b as resolveSiteData, c as resolveSiteDataByRoute, s as serve } from './serve-9c85885c.js';
 import 'vite';
 import 'path';
 import 'readline';
@@ -10,11 +10,11 @@ import 'stream';
 import 'util';
 import 'buffer';
 import 'module';
+import 'url';
 import 'fs';
 import 'child_process';
 import 'punycode';
 import 'shiki';
-import 'url';
 import 'querystring';
 import 'net';
 import 'zlib';

package/dist/node/{serve-f7c10936.js → serve-9c85885c.js}

@@ -9,12 +9,12 @@ import require$$0$8 from 'stream';
 import require$$0$9 from 'util';
 import require$$0$d from 'buffer';
 import { createRequire } from 'module';
+import { fileURLToPath, URL, pathToFileURL } from 'url';
 import * as require$$0$6 from 'fs';
 import require$$0__default, { readdirSync, statSync as statSync$1 } from 'fs';
 import require$$0$c from 'child_process';
 import require$$8 from 'punycode';
 import { getHighlighter } from 'shiki';
-import { fileURLToPath, URL } from 'url';
 import * as qs from 'querystring';
 import qs__default from 'querystring';
 import require$$4 from 'net';
@@ -39508,7 +39508,7 @@ var ora = ora$1.exports;
 
 const require = createRequire(import.meta.url);
 async function renderPage(config, page, result, appChunk, cssChunk, pageToHashMap, hashMapString) {
-  const { createApp } = await import(path$q.join(config.tempDir, `app.js`));
+  const { createApp } = await import(pathToFileURL(path$q.join(config.tempDir, `app.js`)).toString());
   const { app, router } = createApp();
   const routePath = `/${page.replace(/\.md$/, "")}`;
   const siteData = resolveSiteDataByRoute(config.site, routePath);
@@ -39521,12 +39521,12 @@ async function renderPage(config, page, result, appChunk, cssChunk, pageToHashMa
   } catch (e) {
     rendererPath = require.resolve("vue/server-renderer");
   }
-  const content = await import(rendererPath).then((r) => r.renderToString(app));
+  const content = await import(pathToFileURL(rendererPath).toString()).then((r) => r.renderToString(app));
   const pageName = page.replace(/\//g, "_");
   const pageServerJsFileName = pageName + ".js";
   const pageHash = pageToHashMap[pageName.toLowerCase()];
   const pageClientJsFileName = `assets/${pageName}.${pageHash}.lean.js`;
-  const { __pageData } = await import(path$q.join(config.tempDir, pageServerJsFileName));
+  const { __pageData } = await import(pathToFileURL(path$q.join(config.tempDir, pageServerJsFileName)).toString());
   const pageData = JSON.parse(__pageData);
   let preloadLinks = config.mpa ? appChunk ? [appChunk.fileName] : [] : result && appChunk ? [
     .../* @__PURE__ */ new Set([

package/dist/node-cjs/cli.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var serve = require('./serve-c220f0a8.cjs');
+var serve = require('./serve-a73b4871.cjs');
 require('shiki');
 require('fs');
 require('path');
@@ -268,7 +268,7 @@ function isNumber (x) {
     return /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(e[-+]?\d+)?$/.test(x);
 }
 
-var version = "1.0.0-draft.4";
+var version = "1.0.0-draft.6";
 
 const argv = minimist(process.argv.slice(2));
 console.log(serve.c.cyan(`vitepress v${version}`));

package/dist/node-cjs/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var serve = require('./serve-c220f0a8.cjs');
+var serve = require('./serve-a73b4871.cjs');
 require('vite');
 require('path');
 require('readline');
@@ -14,11 +14,11 @@ require('stream');
 require('util');
 require('buffer');
 require('module');
+require('url');
 require('fs');
 require('child_process');
 require('punycode');
 require('shiki');
-require('url');
 require('querystring');
 require('net');
 require('zlib');

package/dist/node-cjs/{serve-c220f0a8.cjs → serve-a73b4871.cjs}

@@ -11,11 +11,11 @@ var require$$0$7 = require('stream');
 var require$$0$9 = require('util');
 var require$$0$d = require('buffer');
 var module$1 = require('module');
+var url$1 = require('url');
 var require$$0$8 = require('fs');
 var require$$0$c = require('child_process');
 var require$$8 = require('punycode');
 var shiki = require('shiki');
-var url$1 = require('url');
 var qs = require('querystring');
 var require$$4 = require('net');
 var require$$7 = require('zlib');
@@ -9414,8 +9414,8 @@ function cleanRoute(siteData, route) {
   return route.slice(baseWithoutSuffix.length);
 }
 
-const require$2 = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-c220f0a8.cjs', document.baseURI).href)));
-const PKG_ROOT = path$q.resolve(url$1.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-c220f0a8.cjs', document.baseURI).href))), "../..");
+const require$2 = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-a73b4871.cjs', document.baseURI).href)));
+const PKG_ROOT = path$q.resolve(url$1.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-a73b4871.cjs', document.baseURI).href))), "../..");
 const DIST_CLIENT_PATH = path$q.resolve(PKG_ROOT, "client");
 const APP_PATH = path$q.join(DIST_CLIENT_PATH, "app");
 path$q.join(DIST_CLIENT_PATH, "shared");
@@ -39546,9 +39546,9 @@ ora$1.exports.promise = (action, options) => {
 
 var ora = ora$1.exports;
 
-const require$1 = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-c220f0a8.cjs', document.baseURI).href)));
+const require$1 = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-a73b4871.cjs', document.baseURI).href)));
 async function renderPage(config, page, result, appChunk, cssChunk, pageToHashMap, hashMapString) {
-  const { createApp } = await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(path__default["default"].join(config.tempDir, `app.js`));
+  const { createApp } = await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(url$1.pathToFileURL(path__default["default"].join(config.tempDir, `app.js`)).toString());
   const { app, router } = createApp();
   const routePath = `/${page.replace(/\.md$/, "")}`;
   const siteData = resolveSiteDataByRoute(config.site, routePath);
@@ -39561,12 +39561,12 @@ async function renderPage(config, page, result, appChunk, cssChunk, pageToHashMa
   } catch (e) {
     rendererPath = require$1.resolve("vue/server-renderer");
   }
-  const content = await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(rendererPath).then((r) => r.renderToString(app));
+  const content = await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(url$1.pathToFileURL(rendererPath).toString()).then((r) => r.renderToString(app));
   const pageName = page.replace(/\//g, "_");
   const pageServerJsFileName = pageName + ".js";
   const pageHash = pageToHashMap[pageName.toLowerCase()];
   const pageClientJsFileName = `assets/${pageName}.${pageHash}.lean.js`;
-  const { __pageData } = await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(path__default["default"].join(config.tempDir, pageServerJsFileName));
+  const { __pageData } = await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(url$1.pathToFileURL(path__default["default"].join(config.tempDir, pageServerJsFileName)).toString());
   const pageData = JSON.parse(__pageData);
   let preloadLinks = config.mpa ? appChunk ? [appChunk.fileName] : [] : result && appChunk ? [
     .../* @__PURE__ */ new Set([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress",
-  "version": "1.0.0-draft.5",
+  "version": "1.0.0-draft.6",
   "description": "Vite & Vue powered static site generator",
   "type": "module",
   "packageManager": "pnpm@7.0.1",
@@ -113,7 +113,7 @@
     "vitest": "^0.10.4"
   },
   "simple-git-hooks": {
-    "pre-commit": "lint-staged"
+    "pre-commit": "pnpm lint-staged"
   },
   "lint-staged": {
     "*": [