Merge branch 'vuejs:master' into fix/last-updated-time

.github/workflows/test.yml

@@ -18,3 +18,6 @@ jobs:
         run: |
           yarn install
           yarn test
+      - name: build
+        run: |
+          yarn build

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [0.16.1](https://github.com/vuejs/vitepress/compare/v0.16.0...v0.16.1) (2021-08-11)
+
+### Features
+
+- info custom container ([4925fb5](https://github.com/vuejs/vitepress/commit/4925fb5c29c59b7e17d050ab4346f71afc0463cd))
+
+# [0.16.0](https://github.com/vuejs/vitepress/compare/v0.15.6...v0.16.0) (2021-08-10)
+
+This version uses Vue 3.2.0.
+
+### Bug Fixes
+
+- override target and rel links attribute in config ([#332](https://github.com/vuejs/vitepress/issues/332)) ([9d98dbb](https://github.com/vuejs/vitepress/commit/9d98dbbe60d477a78d6dc0e80d16fdddedcd4ed5))
+- **edit-link:** let frontmatter overwrite global editLink ([#340](https://github.com/vuejs/vitepress/issues/340)) ([cfbba80](https://github.com/vuejs/vitepress/commit/cfbba80a0a6e33bcb2ca3d4450fb9624dcd6d140))
+
 ## [0.15.6](https://github.com/vuejs/vitepress/compare/v0.15.5...v0.15.6) (2021-07-02)
 
 ### Bug Fixes

docs/guide/markdown.md

@@ -128,6 +128,10 @@ Custom containers can be defined by their types, titles, and contents.
 This is a tip
 :::
 
+::: info
+This is an info box
+:::
+
 ::: warning
 This is a warning
 :::
@@ -143,6 +147,10 @@ This is a dangerous warning
 This is a tip
 :::
 
+::: info
+This is an info box
+:::
+
 ::: warning
 This is a warning
 :::

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress",
-  "version": "0.15.6",
+  "version": "0.16.1",
   "description": "Vite & Vue powered static site generator",
   "main": "dist/node/index.js",
   "typings": "types/index.d.ts",
@@ -66,9 +66,9 @@
     "@docsearch/css": "^1.0.0-alpha.28",
     "@docsearch/js": "^1.0.0-alpha.28",
     "@types/markdown-it": "^12.0.1",
-    "@vitejs/plugin-vue": "^1.2.3",
+    "@vitejs/plugin-vue": "^1.4.0",
-    "@vue/compiler-sfc": "^3.1.1",
+    "@vue/compiler-sfc": "^3.2.1",
-    "@vue/server-renderer": "^3.1.1",
+    "@vue/server-renderer": "^3.2.1",
     "chalk": "^4.1.1",
     "compression": "^1.7.4",
     "debug": "^4.3.2",
@@ -88,8 +88,8 @@
     "polka": "^0.5.2",
     "prismjs": "^1.23.0",
     "sirv": "^1.0.12",
-    "vite": "^2.3.7",
+    "vite": "^2.5.0",
-    "vue": "^3.1.1"
+    "vue": "^3.2.1"
   },
   "devDependencies": {
     "@types/compression": "^1.7.0",

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

@@ -2,7 +2,7 @@
 import '@docsearch/css'
 import docsearch from '@docsearch/js'
 import { useRoute, useRouter, useData } from 'vitepress'
-import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
+import { getCurrentInstance, onMounted, watch } from 'vue'
 import type { DefaultTheme } from '../config'
 import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, onMounted } from 'vue'
+import { onMounted } from 'vue'
 
 // global _bsa
 const ID = 'bsa-cpc-script'
@@ -45,6 +45,10 @@ onMounted(() => {
 
 function load() {
   if (typeof _bsa !== 'undefined' && _bsa) {
+    const parent = document.querySelector('.bsa-cpc')!
+    // cleanup any existing ad to avoid them stacking
+    parent.innerHTML = ''
+
     _bsa.init('default', code, `placement:${placement}`, {
       target: '.bsa-cpc',
       align: 'horizontal',

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const { code, placement } = defineProps<{
   code: string

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { defineEmit } from 'vue'
 import NavBarTitle from './NavBarTitle.vue'
 import NavLinks from './NavLinks.vue'
 import ToggleSideBarButton from './ToggleSideBarButton.vue'
 
-defineEmit(['toggle'])
+defineEmits(['toggle'])
 </script>
 
 <template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute } from 'vitepress'
 import type { DefaultTheme } from '../config'
 import NavDropdownLinkItem from './NavDropdownLinkItem.vue'

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'

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

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import NavLinks from './NavLinks.vue'
 import SideBarLinks from './SideBarLinks.vue'
 
-defineProps({
+defineProps<{ open: boolean }>()
-  open: { type: Boolean, required: true }
-})
 </script>
 
 <template>

src/client/theme-default/composables/navLink.ts

@@ -28,8 +28,8 @@ export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>) {
         isExternal
       },
       href: isExternal ? item.value.link : withBase(item.value.link),
-      target: item.value.target || isExternal ? `_blank` : null,
+      target: item.value.target || (isExternal ? `_blank` : null),
-      rel: item.value.rel || isExternal ? `noopener noreferrer` : null,
+      rel: item.value.rel || (isExternal ? `noopener noreferrer` : null),
       'aria-label': item.value.ariaLabel
     }
   })

src/client/theme-default/composables/repo.ts

@@ -1,6 +1,7 @@
 import { computed } from 'vue'
 import { useData } from 'vitepress'
 import type { DefaultTheme } from '../config'
+import { EXTERNAL_URL_RE } from '../../shared'
 
 export const platforms = ['GitHub', 'GitLab', 'Bitbucket'].map((platform) => {
   return [platform, new RegExp(platform, 'i')] as const
@@ -26,7 +27,7 @@ export function useRepo() {
 
 function getRepoUrl(repo: string): string {
   // if the full url is not provided, default to GitHub repo
-  return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
+  return EXTERNAL_URL_RE.test(repo) ? repo : `https://github.com/${repo}`
 }
 
 function getRepoText(url: string, text?: string): string {

src/client/theme-default/styles/custom-blocks.css

@@ -1,4 +1,5 @@
 .custom-block.tip,
+.custom-block.info,
 .custom-block.warning,
 .custom-block.danger {
   margin: 1rem 0;
@@ -12,6 +13,11 @@
   border-color: var(--c-brand);
 }
 
+.custom-block.info {
+  background-color: #f3f5f7;
+  border-color: var(--c-text-light-2);
+}
+
 .custom-block.warning {
   border-color: #e7c000;
   color: #6b5900;

src/node/build/bundle.ts

@@ -64,7 +64,9 @@ export async function bundle(
                   if (!chunk.isEntry && /runtime/.test(chunk.name)) {
                     return `assets/framework.[hash].js`
                   }
-                  return `assets/[name].[hash].js`
+                  return adComponentRE.test(chunk.name)
+                    ? `assets/ui-custom.[hash].js`
+                    : `assets/[name].[hash].js`
                 }
               })
         }
@@ -95,3 +97,5 @@ export async function bundle(
 
   return [clientResult, serverResult, pageToHashMap]
 }
+
+const adComponentRE = /(?:Carbon|BuySell)Ads/

src/node/config.ts

@@ -111,20 +111,22 @@ export async function resolveConfig(
   return config
 }
 
-export async function resolveUserConfig(root: string) {
+export async function resolveUserConfig(root: string): Promise<UserConfig> {
   // load user config
   const configPath = resolve(root, 'config.js')
   const hasUserConfig = await fs.pathExists(configPath)
   // always delete cache first before loading config
   delete require.cache[configPath]
-  const userConfig: UserConfig = hasUserConfig ? require(configPath) : {}
+  const userConfig: UserConfig | (() => UserConfig) = hasUserConfig
+    ? require(configPath)
+    : {}
   if (hasUserConfig) {
     debug(`loaded config at ${chalk.yellow(configPath)}`)
   } else {
     debug(`no config file found.`)
   }
 
-  return userConfig
+  return typeof userConfig === 'function' ? userConfig() : userConfig
 }
 
 export async function resolveSiteData(

src/node/markdown/plugins/component.ts

@@ -5,8 +5,8 @@ import { RuleBlock } from 'markdown-it/lib/parser_block'
 // root level
 
 const blockNames: string[] = require('markdown-it/lib/common/html_blocks')
-const HTML_OPEN_CLOSE_TAG_RE: RegExp = require('markdown-it/lib/common/html_re')
+const HTML_OPEN_CLOSE_TAG_RE: RegExp =
-  .HTML_OPEN_CLOSE_TAG_RE
+  require('markdown-it/lib/common/html_re').HTML_OPEN_CLOSE_TAG_RE
 
 // An array of opening and corresponding closing sequences for html tags,
 // last argument defines whether it can terminate a paragraph or not

src/node/markdown/plugins/containers.ts

@@ -5,6 +5,7 @@ const container = require('markdown-it-container')
 
 export const containerPlugin = (md: MarkdownIt) => {
   md.use(...createContainer('tip', 'TIP'))
+    .use(...createContainer('info', 'INFO'))
     .use(...createContainer('warning', 'WARNING'))
     .use(...createContainer('danger', 'WARNING'))
     // explicitly escape Vue syntax

src/node/markdown/plugins/link.ts

@@ -5,6 +5,7 @@
 import MarkdownIt from 'markdown-it'
 import { MarkdownParsedData } from '../markdown'
 import { URL } from 'url'
+import { EXTERNAL_URL_RE } from '../../shared'
 
 const indexRE = /(^|.*\/)index.md(#?.*)$/i
 
@@ -18,7 +19,7 @@ export const linkPlugin = (
     if (hrefIndex >= 0) {
       const hrefAttr = token.attrs![hrefIndex]
       const url = hrefAttr[1]
-      const isExternal = /^https?:/.test(url)
+      const isExternal = EXTERNAL_URL_RE.test(url)
       if (isExternal) {
         Object.entries(externalAttrs).forEach(([key, val]) => {
           token.attrSet(key, val)

src/node/markdownToVue.ts

@@ -11,11 +11,13 @@ import chalk from 'chalk'
 
 const debug = require('debug')('vitepress:md')
 const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 })
+const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g
 
 export interface MarkdownCompileResult {
   vueSrc: string
   pageData: PageData
   deadLinks: string[]
+  includes: string[]
 }
 
 export function createMarkdownToVueRenderFn(
@@ -34,6 +36,7 @@ export function createMarkdownToVueRenderFn(
     publicDir: string
   ): MarkdownCompileResult => {
     const relativePath = slash(path.relative(srcDir, file))
+    const dir = path.dirname(file)
 
     const cached = cache.get(src)
     if (cached) {
@@ -43,6 +46,16 @@ export function createMarkdownToVueRenderFn(
 
     const start = Date.now()
 
+    // resolve includes
+    let includes: string[] = []
+    src = src.replace(includesRE, (_, m1) => {
+      const includePath = path.join(dir, m1)
+      console.log(includePath)
+      const content = fs.readFileSync(includePath, 'utf-8')
+      includes.push(slash(includePath))
+      return content
+    })
+
     const { content, data: frontmatter } = matter(src)
     let { html, data } = md.render(content)
 
@@ -130,7 +143,8 @@ export function createMarkdownToVueRenderFn(
     const result = {
       vueSrc,
       pageData,
-      deadLinks
+      deadLinks,
+      includes
     }
     cache.set(src, result)
     return result

src/node/plugin.ts

@@ -106,10 +106,19 @@ export function createVitePressPlugin(
     transform(code, id) {
       if (id.endsWith('.md')) {
         // transform .md files into vueSrc so plugin-vue can handle it
-        const { vueSrc, deadLinks } = markdownToVue(code, id, config.publicDir)
+        const { vueSrc, deadLinks, includes } = markdownToVue(
+          code,
+          id,
+          config.publicDir
+        )
         if (deadLinks.length) {
           hasDeadLinks = true
         }
+        if (includes.length) {
+          includes.forEach((i) => {
+            this.addWatchFile(i)
+          })
+        }
         return vueSrc
       }
     },