From bee061782da2b50f7bc7b09815885b2c3320326c Mon Sep 17 00:00:00 2001 From: Kia King Ishii Date: Thu, 26 Nov 2020 19:37:39 +0900 Subject: [PATCH] style: adjust few code orders and such --- docs/.vitepress/config.js | 4 +- docs/guide/frontmatter.md | 2 +- docs/guide/global-computed.md | 120 ++++++------------ src/client/app/index.ts | 10 +- .../theme-default/components/NavBarTitle.vue | 11 +- src/node/markdownToVue.ts | 6 + types/shared.d.ts | 4 +- 7 files changed, 58 insertions(+), 99 deletions(-) diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index f4e3f83f..ca10e3c7 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -44,8 +44,8 @@ function getGuideSidebar() { text: 'Advanced', children: [ { text: 'Frontmatter', link: '/guide/frontmatter' }, - { text: 'Customization', link: '/guide/customization' }, - { text: 'Global Computed', link: '/guide/global-computed' } + { text: 'Global Computed', link: '/guide/global-computed' }, + { text: 'Customization', link: '/guide/customization' } ] } ] diff --git a/docs/guide/frontmatter.md b/docs/guide/frontmatter.md index bc7ad57e..71f28bee 100644 --- a/docs/guide/frontmatter.md +++ b/docs/guide/frontmatter.md @@ -9,7 +9,7 @@ editLink: true --- ``` -Between the triple-dashed lines, you can set [predefined variables](#predefined-variables), or even create custom ones of your own. These variables can be used via the \$frontmatter variable. +Between the triple-dashed lines, you can set [predefined variables](#predefined-variables), or even create custom ones of your own. These variables can be used via the $frontmatter variable. Here’s an example of how you could use it in your Markdown file: diff --git a/docs/guide/global-computed.md b/docs/guide/global-computed.md index 0d58f3cb..7221534a 100644 --- a/docs/guide/global-computed.md +++ b/docs/guide/global-computed.md @@ -1,57 +1,66 @@ # Global Computed -In VitePress, some core [computed properties](https://v3.vuejs.org/guide/computed.html#computed-properties) can be used by the default theme or custom themes. Or directly in Markdown pages using vue, for example using `{{ $frontmatter.title }}` to access the title defined in the frontmatter section of the page. +In VitePress, some core [computed properties](https://v3.vuejs.org/guide/computed.html#computed-properties) can be used by the default theme or custom themes. Or directly in Markdown pages using vue, for example using `$frontmatter.title` to access the title defined in the frontmatter section of the page. ## $site -This is the `$site` value of the site you’re currently reading: +This is the `$site` value of the site you're currently reading: -```json +```js { - "title": "VitePress", - "description": "Vite & Vue powered static site generator.", - "lang": "en-US", - "locales": {}, - "base": "/", - "head": [], - "themeConfig: $themeConfig + base: '/', + lang: 'en-US', + title: 'VitePress', + description: 'Vite & Vue powered static site generator.', + head: [], + locales: {}, + themeConfig: $themeConfig +} +``` + +## $themeConfig + +Refers to `$site.themeConfig`. + +```js +{ + locales: {}, + repo: 'vuejs/vitepress', + docsDir: 'docs', + editLinks: true, + editLinkText: 'Edit this page on GitHub', + lastUpdated: 'Last Updated', + nav: [...], + sidebar: { ... } } ``` ## $page -This is the `$page` value of the page you’re currently reading: +This is the `$page` value of the page you're currently reading: -```json +```js { - "title": "Global Computed", - "relativePath": "guide/global-computed.md", - "lastUpdated": 1606297645000 - "headers": [ - { - "level": 2, - "title": "$site", - "slug": "site" - }, - { - "level": 2, - "title": "$page", - "slug": "$page" - }, + relativePath: 'guide/global-computed.md', + title: 'Global Computed', + headers: [ + { level: 2, title: '$site', slug: 'site' }, + { level: 2, title: '$page', slug: '$page' }, ... ], - "frontmatter": $frontmatter, + frontmatter: $frontmatter, + lastUpdated: 1606297645000 } ``` ## $frontmatter -Reference of [$page](#page).frontmatter. +Reference of `$page.frontmatter`. -```json +```js { - "title": "Docs with VitePress", - "editLink": true + title: 'Docs with VitePress', + editLink: true } ``` @@ -62,52 +71,3 @@ Value of the `` label used for the current page. ## $description The content value of the `<meta name= "description" content= "...">` for the current page. - -## $themeConfig - -Refers to `$site.themeConfig`. - -```json -{ - "repo": "vuejs/vitepress", - "docsDir": "docs", - "locales": {}, - "editLinks": true, - "editLinkText": "Edit this page on GitHub", - "lastUpdated": "Last Updated", - "nav": [ - { - "text": "Guide", - "link": "/" - }, - ... - ], - "sidebar": { - "/": [ - { - "text": "Introduction", - "children": [ - { - "text": "What is VitePress?", - "link": "/" - }, - ... - ] - } - ], - "/guide/": [ - { - "text": "Introduction", - "children": [ - { - "text": "What is VitePress?", - "link": "/" - }, - ... - ] - } - ], - ... - }, -} -``` diff --git a/src/client/app/index.ts b/src/client/app/index.ts index 0bfc2409..5ae7de79 100644 --- a/src/client/app/index.ts +++ b/src/client/app/index.ts @@ -82,6 +82,11 @@ export function createApp() { return siteDataByRouteRef.value } }, + $themeConfig: { + get() { + return siteDataByRouteRef.value.themeConfig + } + }, $page: { get() { return router.route.data @@ -103,11 +108,6 @@ export function createApp() { router.route.data.description || siteDataByRouteRef.value.description ) } - }, - $themeConfig: { - get() { - return siteDataByRouteRef.value.themeConfig - } } }) diff --git a/src/client/theme-default/components/NavBarTitle.vue b/src/client/theme-default/components/NavBarTitle.vue index 58338fda..124560b6 100644 --- a/src/client/theme-default/components/NavBarTitle.vue +++ b/src/client/theme-default/components/NavBarTitle.vue @@ -14,15 +14,8 @@ </a> </template> -<script lang="ts"> -import { defineComponent } from 'vue' +<script setup lang="ts"> import { withBase } from '../utils' - -export default defineComponent({ - setup() { - return { withBase } - } -}) </script> <style scoped> @@ -37,7 +30,7 @@ export default defineComponent({ } .logo { - margin-right: 0.75rem; + margin-right: .75rem; height: 1.3rem; vertical-align: bottom; } diff --git a/src/node/markdownToVue.ts b/src/node/markdownToVue.ts index 0f6279a3..55a48f61 100644 --- a/src/node/markdownToVue.ts +++ b/src/node/markdownToVue.ts @@ -109,6 +109,10 @@ const inferTitle = (frontmatter: any, content: string) => { } const inferDescription = (frontmatter: Record<string, any>) => { + if (!frontmatter.head) { + return '' + } + return getHeadMetaContent(frontmatter.head, 'description') || '' } @@ -119,8 +123,10 @@ const getHeadMetaContent = ( if (!head || !head.length) { return undefined } + const meta = head.find(([tag, attrs = {}]) => { return tag === 'meta' && attrs.name === name && attrs.content }) + return meta && meta[1].content } diff --git a/types/shared.d.ts b/types/shared.d.ts index df809e41..8ecfea93 100644 --- a/types/shared.d.ts +++ b/types/shared.d.ts @@ -24,11 +24,11 @@ export type HeadConfig = | [string, Record<string, string>, string] export interface PageData { + relativePath: string title: string description: string - frontmatter: Record<string, any> headers: Header[] - relativePath: string + frontmatter: Record<string, any> lastUpdated: number }