vitepress 1.0.0-draft.4 → 1.0.0-draft.5

package/dist/client/theme-default/styles/components/vp-doc.css

@@ -156,10 +156,6 @@
   background-color: var(--vp-c-bg-soft);
 }
 
-.dark .vp-doc tr:nth-child(2n) {
-  background-color: var(--vp-c-bg-mute);
-}
-
 .vp-doc th,
 .vp-doc td {
   border: 1px solid var(--vp-c-divider);
@@ -216,7 +212,7 @@
 
 .vp-doc .custom-block code {
   font-size: var(--vp-custom-block-code-font-size);
-  font-weight: 600;
+  font-weight: 700;
   color: inherit;
 }
 
@@ -253,6 +249,11 @@
 }
 
 .vp-doc a > code {
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+
+.vp-doc a:hover > code {
   color: var(--vp-c-brand-dark);
 }
 
@@ -322,150 +323,140 @@
   top: 0;
   bottom: 0;
   left: 0;
-  padding: 13px 0 11px;
+  padding-top: 16px;
   width: 100%;
-  font-family: var(--vp-font-family-mono);
   line-height: var(--vp-code-line-height);
+  font-family: var(--vp-font-family-mono);
   font-size: var(--vp-code-font-size);
   user-select: none;
   overflow: hidden;
 }
 
 .vp-doc .highlight-lines .highlighted {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--vp-code-line-highlight-color);
   transition: background-color 0.5s;
 }
 
-.dark .vp-doc .highlight-lines .highlighted {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
 .vp-doc div[class*='language-'].line-numbers-mode {
   padding-left: 32px;
 }
 
+.vp-doc div[class*='language-'].line-numbers-mode pre {
+  padding-left: 16px;
+}
+
 .vp-doc .line-numbers-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   z-index: 3;
-  border-right: 1px solid var(--vp-c-divider-light);
-  padding: 13px 0 11px;
+  border-right: 1px solid var(--vp-c-divider-dark-2);
+  padding-top: 16px;
   width: 32px;
   text-align: center;
   font-family: var(--vp-font-family-mono);
   line-height: var(--vp-code-line-height);
   font-size: var(--vp-code-font-size);
-  color: var(--vp-c-text-3);
+  color: var(--vp-code-line-number-color);
   transition: border-color 0.5s, color 0.5s;
 }
 
-.vp-doc [class*='language-']:before {
+.vp-doc [class*='language-'] > span.copy {
   position: absolute;
-  top: 4px;
-  right: 10px;
+  top: 8px;
+  right: 8px;
   z-index: 2;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--vp-c-text-dark-3);
-  transition: color 0.5s;
-}
-
-.vp-doc [class~='language-vue']:before      { content: 'vue'; }
-.vp-doc [class~='language-html']:before     { content: 'html'; }
-.vp-doc [class~='language-vue-html']:before { content: 'template'; }
-.vp-doc [class~='language-css']:before      { content: 'css'; }
-.vp-doc [class~='language-js']:before       { content: 'js'; }
-.vp-doc [class~='language-jsx']:before      { content: 'jsx'; }
-.vp-doc [class~='language-ts']:before       { content: 'ts'; }
-.vp-doc [class~='language-tsx']:before      { content: 'tsx'; }
-.vp-doc [class~='language-json']:before     { content: 'json'; }
-.vp-doc [class~='language-yaml']:before     { content: 'yaml'; }
-.vp-doc [class~='language-yml']:before      { content: 'yaml'; }
-.vp-doc [class~='language-sh']:before       { content: 'sh'; }
-.vp-doc [class~='language-bash']:before     { content: 'sh'; }
-
-/**
- * Code: Highlight
- *
- * prism.js tomorrow night eighties theme.
- * https://github.com/chriskempson/tomorrow-theme
- *
- * @author Rose Pritchard
- * -------------------------------------------------------------------------- */
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #999;
-}
-
-.token.punctuation {
-  color: #ccc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #e2777a;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
+  display: block;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--vp-code-block-bg);
+  opacity: 0;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(235,235,235,0.38)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition: opacity 0.25s;
 }
 
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #cc99cd;
+.vp-doc [class*='language-']:hover > span.copy {
+  opacity: 1;
 }
 
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #7ec699;
+.vp-doc [class*='language-'] > span.copy:hover {
+  background-color: var(--vp-code-copy-code-hover-bg);
 }
 
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
+.vp-doc [class*='language-'] > span.copy.copied,
+.vp-doc [class*='language-'] > span.copy:hover.copied {
+  border-radius: 0 4px 4px 0;
+  background-color: var(--vp-code-copy-code-hover-bg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(235,235,235,0.5)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
 }
 
-.token.important,
-.token.bold {
-  font-weight: bold;
+.vp-doc [class*='language-'] > span.copy.copied::before,
+.vp-doc [class*='language-'] > span.copy:hover.copied::before {
+  position: relative;
+  left: -65px;
+  display: block;
+  border-radius: 4px 0 0 4px;
+  padding-top: 8px;
+  width: 64px;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-dark-2);
+  background-color: var(--vp-code-copy-code-hover-bg);
+  white-space: nowrap;
+  content: "Copied";
 }
 
-.token.italic {
-  font-style: italic;
+.vp-doc [class*='language-']:before {
+  position: absolute;
+  top: 6px;
+  right: 12px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-dark-3);
+  transition: color 0.5s, opacity 0.5s;
 }
 
-.token.entity {
-  cursor: help;
+.vp-doc [class*='language-']:hover:before {
+  opacity: 0;
 }
 
-.token.inserted {
-  color: green;
-}
+.vp-doc [class~='language-c']:before          { content: 'c'; }
+.vp-doc [class~='language-css']:before        { content: 'css'; }
+.vp-doc [class~='language-go']:before         { content: 'go'; }
+.vp-doc [class~='language-html']:before       { content: 'html'; }
+.vp-doc [class~='language-java']:before       { content: 'java'; }
+.vp-doc [class~='language-javascript']:before { content: 'js'; }
+.vp-doc [class~='language-js']:before         { content: 'js'; }
+.vp-doc [class~='language-json']:before       { content: 'json'; }
+.vp-doc [class~='language-jsx']:before        { content: 'jsx'; }
+.vp-doc [class~='language-less']:before       { content: 'less'; }
+.vp-doc [class~='language-markdown']:before   { content: 'md'; }
+.vp-doc [class~='language-md']:before         { content: 'md' }
+.vp-doc [class~='language-php']:before        { content: 'php'; }
+.vp-doc [class~='language-python']:before     { content: 'py'; }
+.vp-doc [class~='language-py']:before         { content: 'py'; }
+.vp-doc [class~='language-rb']:before         { content: 'rb'; }
+.vp-doc [class~='language-ruby']:before       { content: 'rb'; }
+.vp-doc [class~='language-rust']:before       { content: 'rust'; }
+.vp-doc [class~='language-sass']:before       { content: 'sass'; }
+.vp-doc [class~='language-scss']:before       { content: 'scss'; }
+.vp-doc [class~='language-sh']:before         { content: 'sh'; }
+.vp-doc [class~='language-bash']:before       { content: 'sh'; }
+.vp-doc [class~='language-stylus']:before     { content: 'styl'; }
+.vp-doc [class~='language-vue-html']:before   { content: 'template'; }
+.vp-doc [class~='language-typescript']:before { content: 'ts'; }
+.vp-doc [class~='language-ts']:before         { content: 'ts'; }
+.vp-doc [class~='language-tsx']:before        { content: 'tsx'; }
+.vp-doc [class~='language-vue']:before        { content: 'vue'; }
+.vp-doc [class~='language-yaml']:before       { content: 'yaml'; }

package/dist/client/theme-default/styles/components/vp-sponsor.css

@@ -1,9 +1,57 @@
+/**
+ * VPSponsors styles are defined as global because a new class gets
+ * allied in onMounted` hook and we can't use socped style.
+ */
+.vp-sponsor {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.vp-sponsor.aside {
+  border-radius: 12px;
+}
+
+.vp-sponsor-section + .vp-sponsor-section {
+  margin-top: 4px;
+}
+
+.vp-sponsor-tier {
+  margin-bottom: 4px;
+  text-align: center;
+  letter-spacing: 1px;
+  line-height: 24px;
+  width: 100%;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-sponsor.normal .vp-sponsor-tier {
+  padding: 13px 0 11px;
+  font-size: 14px;
+}
+
+.vp-sponsor.aside .vp-sponsor-tier {
+  padding: 9px 0 7px;
+  font-size: 12px;
+}
+
+.vp-sponsor-grid + .vp-sponsor-tier {
+  margin-top: 4px;
+}
+
 .vp-sponsor-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
 }
 
+.vp-sponsor-grid.xmini .vp-sponsor-grid-link   { height: 64px; }
+.vp-sponsor-grid.xmini .vp-sponsor-grid-image  { max-width: 64px; max-height: 22px }
+
+.vp-sponsor-grid.mini .vp-sponsor-grid-link   { height: 72px; }
+.vp-sponsor-grid.mini .vp-sponsor-grid-image  { max-width: 96px; max-height: 24px }
+
 .vp-sponsor-grid.small .vp-sponsor-grid-link   { height: 96px; }
 .vp-sponsor-grid.small .vp-sponsor-grid-image  { max-width: 96px; max-height: 24px }
 
@@ -36,12 +84,12 @@
 .vp-sponsor-grid-item {
   flex-shrink: 0;
   width: 100%;
-  background-color: var(--vp-c-white-soft);
+  background-color: var(--vp-c-bg-soft);
   transition: background-color 0.25s;
 }
 
 .vp-sponsor-grid-item:hover {
-  background-color: var(--vp-c-white-mute);
+  background-color: var(--vp-c-bg-mute);
 }
 
 .vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
@@ -49,11 +97,7 @@
 }
 
 .vp-sponsor-grid-item.empty:hover {
-  background-color: var(--vp-c-white-soft);
-}
-
-.dark .vp-sponsor-grid-item {
-  background-color: var(--vp-c-black-mute);
+  background-color: var(--vp-c-bg-soft);
 }
 
 .dark .vp-sponsor-grid-item:hover {

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

@@ -55,21 +55,27 @@
   --vp-c-green-lighter: #35eb9a;
   --vp-c-green-dark: #33a06f;
   --vp-c-green-darker: #155f3e;
-  --vp-c-green-dimm: rgba(66, 184, 131, 0.08);
+  --vp-c-green-dimm-1: rgba(66, 184, 131, 0.5);
+  --vp-c-green-dimm-2: rgba(66, 184, 131, 0.25);
+  --vp-c-green-dimm-3: rgba(66, 184, 131, 0.05);
 
   --vp-c-yellow: #ffc517;
-  --vp-c-yellow-light: #ffe417;
-  --vp-c-yellow-lighter: #ffff17;
+  --vp-c-yellow-light: #fcd253;
+  --vp-c-yellow-lighter: #fcfc7c;
   --vp-c-yellow-dark: #e0ad15;
   --vp-c-yellow-darker: #ad850e;
-  --vp-c-yellow-dimm: rgba(255, 197, 23, 0.08);
+  --vp-c-yellow-dimm-1: rgba(255, 197, 23, 0.5);
+  --vp-c-yellow-dimm-2: rgba(255, 197, 23, 0.25);
+  --vp-c-yellow-dimm-3: rgba(255, 197, 23, 0.05);
 
   --vp-c-red: #ed3c50;
-  --vp-c-red-light: #f43771;
+  --vp-c-red-light: #f54e82;
   --vp-c-red-lighter: #fd1d7c;
   --vp-c-red-dark: #cd2d3f;
   --vp-c-red-darker: #ab2131;
-  --vp-c-red-dimm: rgba(237, 60, 80, 0.08);
+  --vp-c-red-dimm-1: rgba(237, 60, 80, 0.5);
+  --vp-c-red-dimm-2: rgba(237, 60, 80, 0.25);
+  --vp-c-red-dimm-3: rgba(237, 60, 80, 0.05);
 }
 
 /**
@@ -80,8 +86,7 @@
   --vp-c-bg: var(--vp-c-white);
   --vp-c-bg-soft: var(--vp-c-white-soft);
   --vp-c-bg-mute: var(--vp-c-white-mute);
-  --vp-c-bg-content: var(--vp-c-white);
-  --vp-c-bg-sidebar: var(--vp-c-white-soft);
+  --vp-c-bg-alt: var(--vp-c-white-soft);
 
   --vp-c-divider: var(--vp-c-divider-light-1);
   --vp-c-divider-light: var(--vp-c-divider-light-2);
@@ -111,11 +116,10 @@
 }
 
 .dark {
-  --vp-c-bg: var(--vp-c-black);
-  --vp-c-bg-soft: var(--vp-c-black-soft);
-  --vp-c-bg-mute: var(--vp-c-black-mute);
-  --vp-c-bg-content: var(--vp-c-bg-soft);
-  --vp-c-bg-sidebar: var(--vp-c-bg);
+  --vp-c-bg: var(--vp-c-black-soft);
+  --vp-c-bg-soft: var(--vp-c-black-mute);
+  --vp-c-bg-mute: var(--vp-c-gray-dark-3);
+  --vp-c-bg-alt: var(--vp-c-black);
 
   --vp-c-divider: var(--vp-c-divider-dark-1);
   --vp-c-divider-light: var(--vp-c-divider-dark-2);
@@ -133,7 +137,7 @@
   --vp-c-text-inverse-3: var(--vp-c-text-light-3);
   --vp-c-text-inverse-4: var(--vp-c-text-light-4);
 
-  --vp-c-text-code: var(--vp-c-indigo-light);
+  --vp-c-text-code: var(--vp-c-indigo-lighter);
 }
 
 /**
@@ -184,15 +188,23 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-code-line-height: 24px;
-  --vp-code-font-size: 14px;
+  --vp-code-line-height: 1.7;
+  --vp-code-font-size: 0.875em;
 
   --vp-code-block-color: var(--vp-c-text-dark-1);
   --vp-code-block-bg: #292d3e;
+
+  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
+
+  --vp-code-line-number-color: var(--vp-c-text-dark-3);
+
+  --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
 }
 
 .dark {
-  --vp-code-block-bg: var(--vp-c-bg-sidebar);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
+
+  --vp-code-line-number-color: var(--vp-c-text-dark-3);
 }
 
 /**
@@ -247,7 +259,7 @@
   --vp-button-alt-bg: var(--vp-c-bg-mute);
   --vp-button-alt-hover-border: var(--vp-c-gray-dark-2);
   --vp-button-alt-hover-text: var(--vp-c-text-dark-1);
-  --vp-button-alt-hover-bg: var(--vp-c-gray-dark-3);
+  --vp-button-alt-hover-bg: var(--vp-c-gray-dark-2);
   --vp-button-alt-active-border: var(--vp-c-gray-dark-2);
   --vp-button-alt-active-text: var(--vp-c-text-dark-1);
   --vp-button-alt-active-bg: var(--vp-button-alt-bg);
@@ -268,19 +280,19 @@
   --vp-custom-block-info-bg: var(--vp-c-white-soft);
   --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);
 
-  --vp-custom-block-tip-border: var(--vp-c-green);
+  --vp-custom-block-tip-border: var(--vp-c-green-dimm-1);
   --vp-custom-block-tip-text: var(--vp-c-green-darker);
-  --vp-custom-block-tip-bg: var(--vp-c-green-dimm);
+  --vp-custom-block-tip-bg: var(--vp-c-green-dimm-3);
   --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
 
-  --vp-custom-block-warning-border: var(--vp-c-yellow);
+  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1);
   --vp-custom-block-warning-text: var(--vp-c-yellow-darker);
-  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm);
+  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3);
   --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
 
-  --vp-custom-block-danger-border: var(--vp-c-red);
+  --vp-custom-block-danger-border: var(--vp-c-red-dimm-1);
   --vp-custom-block-danger-text: var(--vp-c-red-darker);
-  --vp-custom-block-danger-bg: var(--vp-c-red-dimm);
+  --vp-custom-block-danger-bg: var(--vp-c-red-dimm-3);
   --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
@@ -294,11 +306,14 @@
   --vp-custom-block-info-bg: var(--vp-c-black-mute);
   --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
 
-  --vp-custom-block-tip-text: var(--vp-c-green);
+  --vp-custom-block-tip-border: var(--vp-c-green-dimm-2);
+  --vp-custom-block-tip-text: var(--vp-c-green-light);
 
-  --vp-custom-block-warning-text: var(--vp-c-yellow);
+  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2);
+  --vp-custom-block-warning-text: var(--vp-c-yellow-light);
 
-  --vp-custom-block-danger-text: var(--vp-c-red);
+  --vp-custom-block-danger-border: var(--vp-c-red-dimm-2);
+  --vp-custom-block-danger-text: var(--vp-c-red-light);
 }
 
 /**

package/dist/node/cli.js

@@ -1,26 +1,25 @@
-'use strict';
-
-var serve = require('./serve-b3182d88.js');
-require('fs');
-require('path');
-require('url');
-require('vite');
-require('readline');
-require('assert');
-require('events');
-require('stream');
-require('util');
-require('buffer');
-require('punycode');
-require('prismjs');
-require('child_process');
-require('querystring');
-require('tty');
-require('net');
-require('zlib');
-require('constants');
-require('os');
-require('http');
+import { h as c, e as createServer, g as build, s as serve } from './serve-f7c10936.js';
+import 'shiki';
+import 'fs';
+import 'path';
+import 'url';
+import 'vite';
+import 'readline';
+import 'os';
+import 'tty';
+import 'assert';
+import 'events';
+import 'stream';
+import 'util';
+import 'buffer';
+import 'module';
+import 'child_process';
+import 'punycode';
+import 'querystring';
+import 'net';
+import 'zlib';
+import 'http';
+import 'constants';
 
 var minimist = function (args, opts) {
     if (!opts) opts = {};
@@ -267,35 +266,37 @@ function isNumber (x) {
     return /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(e[-+]?\d+)?$/.test(x);
 }
 
+var version = "1.0.0-draft.4";
+
 const argv = minimist(process.argv.slice(2));
-console.log(serve.source.cyan(`vitepress v${require("../../package.json").version}`));
+console.log(c.cyan(`vitepress v${version}`));
 const command = argv._[0];
 const root = argv._[command ? 1 : 0];
 if (root) {
   argv.root = root;
 }
 if (!command || command === "dev") {
-  serve.createServer(root, argv).then((server) => server.listen()).then((server) => {
+  createServer(root, argv).then((server) => server.listen()).then((server) => {
     console.log();
     server.printUrls();
   }).catch((err) => {
-    console.error(serve.source.red(`failed to start server. error:
+    console.error(c.red(`failed to start server. error:
 `), err);
     process.exit(1);
   });
 } else if (command === "build") {
-  serve.build(root, argv).catch((err) => {
-    console.error(serve.source.red(`build error:
+  build(root, argv).catch((err) => {
+    console.error(c.red(`build error:
 `), err);
     process.exit(1);
   });
 } else if (command === "serve") {
-  serve.serve(argv).catch((err) => {
-    console.error(serve.source.red(`failed to start server. error:
+  serve(argv).catch((err) => {
+    console.error(c.red(`failed to start server. error:
 `), err);
     process.exit(1);
   });
 } else {
-  console.log(serve.source.red(`unknown command "${command}".`));
+  console.log(c.red(`unknown command "${command}".`));
   process.exit(1);
 }