vitepress 1.0.0-draft.2 → 1.0.0-draft.5

package/dist/client/theme-default/composables/copy-code.js

@@ -0,0 +1,33 @@
+import { nextTick, watch } from 'vue';
+import { inBrowser, useData } from 'vitepress';
+export function useCopyCode() {
+    const { page } = useData();
+    if (inBrowser)
+        watch(() => page.value.relativePath, () => {
+            nextTick(() => {
+                document
+                    .querySelectorAll('.vp-doc div[class*="language-"]>span.copy')
+                    .forEach(handleElement);
+            });
+        }, { immediate: true, flush: 'post' });
+}
+function handleElement(el) {
+    el.onclick = () => {
+        const parent = el.parentElement;
+        if (!parent) {
+            return;
+        }
+        const isShell = parent.classList.contains('language-sh') ||
+            parent.classList.contains('language-bash');
+        let { innerText: text = '' } = parent;
+        if (isShell) {
+            text = text.replace(/^ *\$ /gm, '');
+        }
+        navigator.clipboard.writeText(text).then(() => {
+            el.classList.add('copied');
+            setTimeout(() => {
+                el.classList.remove('copied');
+            }, 3000);
+        });
+    };
+}

package/dist/client/theme-default/composables/outline.js

@@ -1,8 +1,18 @@
-import { onMounted, onUpdated, onUnmounted } from 'vue';
-import { useMediaQuery } from '@vueuse/core';
+import { computed, onMounted, onUpdated, onUnmounted } from 'vue';
+import { useData } from 'vitepress';
+import { useAside } from '../composables/aside';
 import { throttleAndDebounce } from '../support/utils';
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 56;
+export function useOutline() {
+    const { page } = useData();
+    const hasOutline = computed(() => {
+        return page.value.headers.length > 0;
+    });
+    return {
+        hasOutline
+    };
+}
 export function resolveHeaders(headers) {
     return mapHeaders(groupHeaders(headers));
 }
@@ -29,7 +39,7 @@ function mapHeaders(headers) {
     }));
 }
 export function useActiveAnchor(container, marker) {
-    const isOutlineEnabled = useMediaQuery('(min-width: 1280px)');
+    const { isAsideEnabled } = useAside();
     const onScroll = throttleAndDebounce(setActiveLink, 100);
     let prevActiveLink = null;
     onMounted(() => {
@@ -44,7 +54,7 @@ export function useActiveAnchor(container, marker) {
         window.removeEventListener('scroll', onScroll);
     });
     function setActiveLink() {
-        if (!isOutlineEnabled.value) {
+        if (!isAsideEnabled.value) {
             return;
         }
         const links = [].slice.call(container.value.querySelectorAll('.outline-link'));

package/dist/client/theme-default/composables/sponsor-grid.js

@@ -5,14 +5,16 @@ import { throttleAndDebounce } from '../support/utils';
  *
  * [Screen widh, Column size]
  *
- * It sets grid size on matching screen size. For example, `[768, 5]` will set
- * 5 columns when screen size is bigger or equal to 768px.
+ * It sets grid size on matching screen size. For example, `[768, 5]` will
+ * set 5 columns when screen size is bigger or equal to 768px.
  *
  * Column will set only when item size is bigger than the column size. For
- * example, even we want 5 columns, if we only have 1 sponsor yet, we would
- * like to show it in 1 column.
+ * example, even we define 5 columns, if we only have 1 sponsor yet, we would
+ * like to show it in 1 column to make it stand out.
  */
 const GridSettings = {
+    xmini: [[0, 2]],
+    mini: [],
     small: [
         [920, 6],
         [768, 5],
@@ -31,7 +33,7 @@ const GridSettings = {
         [640, 2]
     ]
 };
-export function useSponsorsGrid(options) {
+export function useSponsorsGrid({ el, size = 'medium' }) {
     const onResize = throttleAndDebounce(manage, 100);
     onMounted(() => {
         manage();
@@ -41,7 +43,7 @@ export function useSponsorsGrid(options) {
         window.removeEventListener('resize', onResize);
     });
     function manage() {
-        adjustSlots(options.el.value, options.size);
+        adjustSlots(el.value, size);
     }
 }
 function adjustSlots(el, size) {

package/dist/client/theme-default/index.js

@@ -2,13 +2,15 @@ import './styles/fonts.css';
 import './styles/vars.css';
 import './styles/base.css';
 import './styles/utils.css';
-import './styles/vp-doc.css';
-import './styles/vp-sponsor.css';
+import './styles/components/custom-block.css';
+import './styles/components/vp-doc.css';
+import './styles/components/vp-sponsor.css';
 import Layout from './Layout.vue';
 import NotFound from './NotFound.vue';
 export { default as VPHomeHero } from './components/VPHomeHero.vue';
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';
 export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';
+export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';
 const theme = {
     Layout,
     NotFound

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

@@ -10,6 +10,10 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+html.dark {
+  color-scheme: dark;
+}
+
 body {
   margin: 0;
   width: 100%;
@@ -20,7 +24,7 @@ body {
   font-size: 16px;
   font-weight: 400;
   color: var(--vp-c-text-1);
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
   direction: ltr;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -92,6 +96,10 @@ ul {
   padding: 0;
 }
 
+blockquote {
+  margin: 0;
+}
+
 pre,
 code,
 kbd,

package/dist/client/theme-default/styles/components/custom-block.css

@@ -0,0 +1,90 @@
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.custom-block.info {
+  border-color: var(--vp-custom-block-info-border);
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+}
+
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--vp-custom-block-tip-border);
+  color: var(--vp-custom-block-tip-text);
+  background-color: var(--vp-custom-block-tip-bg);
+}
+
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--vp-custom-block-warning-border);
+  color: var(--vp-custom-block-warning-text);
+  background-color: var(--vp-custom-block-warning-bg);
+}
+
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--vp-custom-block-danger-border);
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+}
+
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--vp-custom-block-details-border);
+  color: var(--vp-custom-block-details-text);
+  background-color: var(--vp-custom-block-details-bg);
+}
+
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 700;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0 0 8px;
+  font-weight: 700;
+}
+
+.custom-block.details summary + p {
+  margin: 8px 0;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  transition: opacity 0.25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.6;
+}
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}

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

@@ -115,18 +115,27 @@
 
 .vp-doc ul,
 .vp-doc ol {
+  padding-left: 1.25rem;
   margin: 16px 0;
 }
 
 .vp-doc ul {
-  padding-left: 1.25rem;
   list-style: disc;
 }
 
+.vp-doc ol {
+  list-style: decimal;
+}
+
 .vp-doc li + li {
   margin-top: 8px;
 }
 
+.vp-doc li > ol,
+.vp-doc li > ul {
+  margin: 8px 0 0;
+}
+
 /**
  * Table
  * -------------------------------------------------------------------------- */
@@ -147,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);
@@ -177,6 +182,49 @@
   border-top: 1px solid var(--vp-c-divider-light);
 }
 
+/**
+ * Custom Block
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  transition: opacity .25s;
+}
+
+.vp-doc .custom-block a:hover {
+  opacity: 0.6;
+}
+
+.vp-doc .custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+  font-weight: 700;
+  color: inherit;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: var(--vp-code-block-bg);
+}
+
 /**
  * Code
  * -------------------------------------------------------------------------- */
@@ -200,19 +248,18 @@
   font-size: 0.9em;
 }
 
-@media (min-width: 768px) {
-  .vp-doc :not(pre) > code {
-    white-space: nowrap;
-  }
+.vp-doc a > code {
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
 }
 
-.vp-doc a > code {
+.vp-doc a:hover > code {
   color: var(--vp-c-brand-dark);
 }
 
 .vp-doc div[class*='language-'] {
   position: relative;
-  margin: 20px -24px;
+  margin: 16px -24px;
   background-color: var(--vp-code-block-bg);
   overflow-x: auto;
   transition: background-color 0.5s;
@@ -221,7 +268,7 @@
 @media (min-width: 640px) {
   .vp-doc div[class*='language-'] {
     border-radius: 8px;
-    margin: 24px 0;
+    margin: 16px 0;
   }
 }
 
@@ -234,7 +281,7 @@
 .vp-doc div[class*='language-'] + div[class*='language-'],
 .vp-doc div[class$='-api'] + div[class*='language-'],
 .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -12px;
+  margin-top: -8px;
 }
 
 .vp-doc [class*='language-'] pre,
@@ -276,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'; }