Merge branch 'main' into fix/edit-link

pull/698/head
Divyansh Singh 3 years ago committed by GitHub
commit 074d268077
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -16,7 +16,7 @@ All **static** path references, including absolute paths, should be based on you
## Public Files
Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components (for example, favicons and PWA icons). The `public` directory under project root can be used as an escape hatch to provide static assets that either are never referenced in source code (e.g. `robots.txt`), or must retain the exact same file name (without hashing).
Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components (for example, favicons and PWA icons). The `public` directory under project root (`docs` folder if you're running `vitepress build docs`) can be used as an escape hatch to provide static assets that either are never referenced in source code (e.g. `robots.txt`), or must retain the exact same file name (without hashing).
Assets placed in `public` will be copied to the root of the dist directory as-is.

@ -15,12 +15,12 @@ The essential file for configuring a VitePress site is `.vitepress/config.js`, w
```js
export default {
title: 'Hello VitePress',
title: 'VitePress',
description: 'Just playing around.'
}
```
In the above example, the site will have the title of `VitePress`, and `Just playing around` as description meta tag.
In the above example, the site will have the title of `VitePress`, and `Just playing around.` as the description meta tag.
Learn everything about VitePress features at [Theme: Introduction](./theme-introduction) to find how to configure specific features with in this config file.

@ -364,12 +364,12 @@ It also supports [line highlighting](#line-highlighting-in-code-blocks):
The value of `@` corresponds to the source root. By default it's the VitePress project root, unless `srcDir` is configured.
:::
You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath (`snippet` by default):
You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath:
**Input**
```md
<<< @/snippets/snippet-with-region.js{1}
<<< @/snippets/snippet-with-region.js#snippet{1}
```
**Code file**

@ -68,7 +68,7 @@ export default {
## Multiple Sidebars
You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and `Config` page.
You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and "Config" page.
To do so, first organize your pages into directories for each desired section:
@ -92,27 +92,31 @@ export default {
sidebar: {
// This sidebar gets displayed when user is
// under `guide` directory.
'/guide/': {
text: 'Guide',
items: [
// This shows `/guide/index.md` page.
{ text: 'Index', link: '/guide/' }, // /guide/index.md
{ text: 'One', link: '/guide/one' }, // /guide/one.md
{ text: 'Two', link: '/guide/two' } // /guide/two.md
]
},
'/guide/': [
{
text: 'Guide',
items: [
// This shows `/guide/index.md` page.
{ text: 'Index', link: '/guide/' }, // /guide/index.md
{ text: 'One', link: '/guide/one' }, // /guide/one.md
{ text: 'Two', link: '/guide/two' } // /guide/two.md
]
}
],
// This sidebar gets displayed when user is
// under `config` directory.
'/config/': {
text: 'Config',
items: [
// This shows `/guide/index.md` page.
{ text: 'Index', link: '/config/' }, // /config/index.mdasdfasdfasdfasdfaf
{ text: 'Three', link: '/config/three' }, // /config/three.md
{ text: 'Four', link: '/config/four' } // /config/four.md
]
}
'/config/': [
{
text: 'Config',
items: [
// This shows `/guide/index.md` page.
{ text: 'Index', link: '/config/' }, // /config/index.md
{ text: 'Three', link: '/config/three' }, // /config/three.md
{ text: 'Four', link: '/config/four' } // /config/four.md
]
}
]
}
}
}

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue'
import { withBase } from 'vitepress'
const props = defineProps<{
tag?: string
@ -30,7 +31,7 @@ const component = computed(() => {
:is="component"
class="VPButton"
:class="classes"
:href="href"
:href="href ? withBase(href) : undefined"
:target="isExternal ? '_blank' : undefined"
:rel="isExternal ? 'noopener noreferrer' : undefined"
>

@ -1,16 +1,13 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useData } from 'vitepress'
import { useRoute } from 'vitepress'
import { useSidebar } from '../composables/sidebar'
import VPDocAside from './VPDocAside.vue'
import VPDocFooter from './VPDocFooter.vue'
const { page } = useData()
const { path } = useRoute()
const { hasSidebar } = useSidebar()
const pageName = computed(() => {
return page.value.relativePath.slice(0, page.value.relativePath.indexOf('/'))
})
const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
</script>
<template>

@ -7,7 +7,7 @@ import {
useActiveAnchor
} from '../composables/outline'
const { page, frontmatter } = useData()
const { page, frontmatter, theme } = useData()
const { hasOutline } = useOutline()
@ -32,7 +32,9 @@ function handleClick({ target: el }: Event) {
<div class="content">
<div class="outline-marker" ref="marker" />
<div class="outline-title">On this page</div>
<div class="outline-title">
{{ theme.outlineTitle || 'On this page' }}
</div>
<nav aria-labelledby="doc-outline-aria-label">
<span class="visually-hidden" id="doc-outline-aria-label">

@ -98,7 +98,7 @@ function onBlur() {
display: flex;
align-items: center;
line-height: var(--vp-nav-height-mobile);
font-size: 13px;
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color 0.25s;

@ -12,6 +12,8 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
<slot name="home-features-before" />
<VPHomeFeatures />
<slot name="home-features-after" />
<Content />
</div>
</template>

@ -33,8 +33,13 @@ provide('close-screen', closeScreen)
}
.VPNav.no-sidebar {
backdrop-filter: saturate(50%) blur(8px);
-webkit-backdrop-filter: saturate(50%) blur(8px);
backdrop-filter: saturate(50%) blur(8px);
background: rgba(255, 255, 255, 0.7);
}
.dark .VPNav.no-sidebar {
background: rgba(36, 36, 36, 0.7);
}
@supports not (backdrop-filter: saturate(50%) blur(8px)) {

@ -65,8 +65,13 @@ const { hasSidebar } = useSidebar()
}
.VPNavBar.has-sidebar .content {
backdrop-filter: saturate(50%) blur(8px);
-webkit-backdrop-filter: saturate(50%) blur(8px);
backdrop-filter: saturate(50%) blur(8px);
background: rgba(255, 255, 255, 0.7);
}
.dark .VPNavBar.has-sidebar .content {
background: rgba(36, 36, 36, 0.7);
}
@supports not (backdrop-filter: saturate(50%) blur(8px)) {

@ -8,7 +8,7 @@ const { hasSidebar } = useSidebar()
<template>
<div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
<a class="title" href="/">
<a class="title" :href="site.base">
<img v-if="theme.logo" class="logo" :src="theme.logo">
<template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
<template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>

@ -6,7 +6,7 @@ import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
import VPSidebarLink from './VPSidebarLink.vue'
const props = defineProps<{
text: string
text?: string
items: DefaultTheme.SidebarItem[]
collapsible?: boolean
collapsed?: boolean
@ -23,7 +23,12 @@ function toggle() {
<template>
<section class="VPSidebarGroup" :class="{ collapsible, collapsed }">
<div class="title" :role="collapsible ? 'button' : undefined" @click="toggle">
<div
v-if="text"
class="title"
:role="collapsible ? 'button' : undefined"
@click="toggle"
>
<h2 class="title-text">{{ text }}</h2>
<div class="action">
<VPIconMinusSquare class="icon minus" />

@ -3,6 +3,7 @@ import { inject } from 'vue'
import { useData } from 'vitepress'
import { DefaultTheme } from '../config'
import { isActive, normalizeLink } from '../support/utils'
import VPLink from './VPLink.vue'
defineProps<{
item: DefaultTheme.SidebarItem
@ -14,37 +15,40 @@ const closeSideBar = inject('close-sidebar') as () => void
</script>
<template>
<a
class="link"
<VPLink
:class="{ active: isActive(page.relativePath, item.link) }"
:href="normalizeLink(item.link)"
@click="closeSideBar"
>
<p class="link-text">{{ item.text }}</p>
</a>
<span class="link-text">{{ item.text }}</span>
</VPLink>
</template>
<style scoped>
.link {
display: block;
padding: 6px 0;
color: var(--vp-c-text-2);
transition: color 0.5s;
}
.link:hover .link-text {
.link:hover {
color: var(--vp-c-text-1);
transition: color 0.25s;
}
.link.active .link-text {
.link.active {
color: var(--vp-c-brand);
transition: color 0.25s;
}
.link :deep(.icon) {
width: 12px;
height: 12px;
fill: currentColor;
}
.link-text {
line-height: 20px;
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color 0.5s;
}
</style>

@ -56,7 +56,7 @@ export type { Header }
export const createMarkdownRenderer = async (
srcDir: string,
options: MarkdownOptions = {},
base: string
base = '/'
): Promise<MarkdownRenderer> => {
const md = MarkdownIt({
html: true,

@ -27,7 +27,7 @@ export async function createMarkdownToVueRenderFn(
pages: string[],
userDefines: Record<string, any> | undefined,
isBuild = false,
base: string,
base = '/',
includeLastUpdatedData = false
) {
const md = await createMarkdownRenderer(srcDir, options, base)
@ -162,8 +162,9 @@ export async function createMarkdownToVueRenderFn(
}
const scriptRE = /<\/script>/
const scriptLangTsRE = /<\s*script[^>]*\blang=['"]ts['"][^>]*/
const scriptSetupRE = /<\s*script[^>]*\bsetup\b[^>]*/
const scriptClientRe = /<\s*script[^>]*\bclient\b[^>]*/
const scriptClientRE = /<\s*script[^>]*\bclient\b[^>]*/
const defaultExportRE = /((?:^|\n|;)\s*)export(\s*)default/
const namedDefaultExportRE = /((?:^|\n|;)\s*)export(.+)as(\s*)default/
@ -176,10 +177,12 @@ function genPageDataCode(tags: string[], data: PageData) {
return (
scriptRE.test(tag) &&
!scriptSetupRE.test(tag) &&
!scriptClientRe.test(tag)
!scriptClientRE.test(tag)
)
})
const isUsingTS = tags.findIndex((tag) => scriptLangTsRE.test(tag)) > -1
if (existingScriptIndex > -1) {
const tagSrc = tags[existingScriptIndex]
// user has <script> tag inside markdown
@ -196,7 +199,9 @@ function genPageDataCode(tags: string[], data: PageData) {
)
} else {
tags.unshift(
`<script>${code}\nexport default {name:'${data.relativePath}'}</script>`
`<script ${isUsingTS ? 'lang="ts"' : ''}>${code}\nexport default {name:'${
data.relativePath
}'}</script>`
)
}

@ -13,6 +13,13 @@ export namespace DefaultTheme {
*/
siteTitle?: string | false
/**
* Custom outline title in the aside component.
*
* @default 'On this page'
*/
outlineTitle?: string
/**
* The nav items.
*/
@ -81,7 +88,7 @@ export namespace DefaultTheme {
export interface NavItemWithChildren {
text?: string
items: NavItemWithLink[]
items: NavItem[]
}
// sidebar -------------------------------------------------------------------
@ -93,7 +100,7 @@ export namespace DefaultTheme {
}
export interface SidebarGroup {
text: string
text?: string
items: SidebarItem[]
/**

Loading…
Cancel
Save