Skip to content

Commit 404a0a1

Browse files
yyx990803yyx990803
committed
wip mobile
1 parent b4ca0e4 commit 404a0a1

13 files changed

+134
-43
lines changed

Diff for: ‎docs/.vuepress/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = {
1515
'/assets',
1616
'/using-vue',
1717
'/config',
18+
'/default-theme',
1819
'/theming',
1920
'/deploy'
2021
]

Diff for: ‎docs/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ navTitle: Getting Started
88
99
## Why
1010

11-
- Writing first: minimal setup, all you need is a markdown file.
11+
- **Writing First**: minimal setup, all you need is a markdown file.
1212

13-
- Vue-powered: the layout system is a Vue app. It's also pre-rendered into static HTML. And you can register and use Vue components inside markdown content.
13+
- **Vue-powered**: Use custom Vue components inside markdown, and develop custom themes using Vue single file components.
1414

15-
- Flexible: develop with full power of webpack (hot-reload, pre-processors support), generate SEO-friendly static HTML, and works as an SPA after initial page load.
15+
- **Great Dev Experience**: enjoy the same enjoyable development experience of a Vue app. Leverage the full power of webpack (hot-reload, pre-processors), generate SEO-friendly static HTML, and works as an SPA after initial page load.
1616

17-
- Optimized for docs: many built-in markdown extensions and default theme features for writing great documentation.
17+
- **Optimized for Docs**: many [built-in markdown extensions](./markdown.md) and default theme features for writing great documentation.
1818

19-
- GitHub friendly: pages can link to each other using relative links that ends in `.md`, auto-generates GitHub link and page edit links if a repo is provided.
19+
- **GitHub Friendly**: source markdown files can link to each other using relative links that ends in `.md` so they are also readable on GitHub, auto-generates page edit links if a repo is provided.
2020

2121
## Quickstart
2222

Diff for: ‎docs/config.md

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020

2121
### themeConfig
2222

23+
Also see [config options for the default theme](./default-theme.md).
24+
2325
## Markdown
2426

2527
### markdown.anchor

Diff for: ‎docs/default-theme.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Default Theme Configuration

Diff for: ‎docs/theming.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Theming
1+
# Custom Themes
22

33
VuePress uses Vue single file components for custom themes. To use a custom layout, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:
44

Diff for: ‎docs/using-vue.md

+16-2
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,32 @@ The compiled component does not have any private data but do have access to the
4242

4343
**Output**
4444

45-
<pre><code>{{ $page }}</code></pre>
45+
``` json
46+
{
47+
"path": "/using-vue.html",
48+
"title": "Using Vue in Markdown",
49+
"frontmatter": {}
50+
}
51+
```
4652

4753
## Escaping
4854

4955
By default, fenced code blocks are automatically wrapped with `v-pre`. If you want to display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the `v-pre` custom container:
5056

57+
**Input**
58+
5159
``` markdown
5260
::: v-pre
5361
`{{ This will be displayed as-is }}`
5462
:::
5563
```
5664

65+
**Output**
66+
67+
::: v-pre
68+
`{{ This will be displayed as-is }}`
69+
:::
70+
5771
## Using Components
5872

5973
Any `*.vue` file found in `.vuepress/components` are automatically registered as global async components. For example:
@@ -77,7 +91,7 @@ Inside any markdown file you can then directly use the components (names are inf
7791

7892
<OtherComponent/>
7993

80-
::: warning
94+
::: warning IMPORTANT
8195
Make sure a custom component's names either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
8296
:::
8397

Diff for: ‎lib/app/index.dev.html

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
56
<title></title>
67
</head>
78
<body>

Diff for: ‎lib/app/index.ssr.html

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="{{ lang }}">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
56
<title>{{ title }}</title>
67
{{{ userHeadTags }}}
78
{{{ pageMeta }}}

Diff for: ‎lib/default-theme/Layout.vue

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<template>
22
<div class="theme-container">
3-
<ul class="sidebar">
4-
<li v-for="page in sortedPages">
5-
<router-link :to="page.path">
6-
{{ page.frontmatter.navTitle || page.title || page.path }}
7-
</router-link>
8-
</li>
9-
</ul>
3+
<div class="sidebar">
4+
<ul>
5+
<li v-for="page in sortedPages">
6+
<router-link :to="page.path">
7+
{{ page.frontmatter.navTitle || page.title || page.path }}
8+
</router-link>
9+
</li>
10+
</ul>
11+
</div>
1012
<Index v-if="$page.path === '/index'" />
1113
<Page v-else />
1214
</div>

Diff for: ‎lib/default-theme/theme.stylus

+63-14
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,45 @@
1-
.theme-container
1+
body
22
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
33
-webkit-font-smoothing antialiased
44
-moz-osx-font-smoothing grayscale
5-
padding 0 30px
65
font-size 16px
76
color #2c3e50
87

9-
.markdown
10-
max-width 800px
11-
margin-left 300px
12-
margin-bottom 30px
8+
.page
9+
padding-left 300px
1310

1411
.sidebar
12+
width 300px
1513
position fixed
1614
margin 0
17-
top 30px
15+
top 0
16+
left 0
17+
bottom 0
18+
padding 2em 0
19+
box-sizing border-box
20+
border-right 1px solid #eaecef
21+
overflow-y scroll
22+
ul
23+
padding 0
24+
margin 0
25+
list-style-type none
26+
a
27+
display inline-block
28+
color #2c3e50
29+
border-left 4px solid transparent
30+
padding 0.25em
31+
padding-left 1.25em
32+
&:hover
33+
color darken(#41b883, 5%)
34+
&.router-link-exact-active
35+
font-weight 600
36+
color darken(#41b883, 5%)
37+
border-left-color darken(#41b883, 5%)
38+
39+
.markdown
40+
max-width 720px
41+
margin 2em auto
42+
padding 0 2em
1843

1944
blockquote
2045
font-size 1.25em
@@ -64,7 +89,7 @@ code
6489
font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
6590

6691
p, ul, ol
67-
line-height 1.5
92+
line-height 1.7
6893

6994
p, h1, h2, h3, h4, h5, h6
7095
code
@@ -81,19 +106,19 @@ pre, pre[class*="language-"]
81106
background-color #2d2d2d
82107
color white
83108
line-height 1.4
84-
border-radius 5px
85-
padding 1.3rem 1.575rem
109+
border-radius 6px
110+
padding 1.4em 1.6em
86111
white-space pre-wrap
87112
word-break break-word
88113
overflow auto
89114
code
90-
font-size .88em
115+
font-size 0.85em
91116

92117
.highlighted-line
93118
background-color #14161a
94119
display block
95-
margin 0 -1.575rem
96-
padding 0.2rem 1.575rem 0
120+
margin 0 -1.6em
121+
padding 0.2em 1.6em 0
97122

98123
.custom-block
99124
.custom-block-title
@@ -105,7 +130,7 @@ pre, pre[class*="language-"]
105130
border-left-style solid
106131
margin 1em 0
107132
&.tip
108-
background-color #f1f3f5
133+
background-color #f3f5f7
109134
border-color #42b983
110135
&.warning
111136
background-color rgba(255,229,100,.3)
@@ -125,3 +150,27 @@ p
125150
padding 1rem
126151
border 1px solid #ddd
127152
border-radius 4px
153+
154+
@media (max-width: 879px)
155+
body
156+
font-size 15px
157+
.sidebar
158+
font-size 14px
159+
width 250px
160+
.page
161+
padding-left 250px
162+
.markdown
163+
margin 1.5em 0
164+
padding 0 1.5em
165+
166+
@media (max-width: 639px)
167+
body
168+
font-size 15px
169+
.sidebar
170+
width 275px
171+
display none
172+
.page
173+
padding-left 0
174+
.markdown
175+
margin 1em 0
176+
padding 0 1em

Diff for: ‎lib/prepare.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const globby = require('globby')
44
const mkdirp = require('mkdirp')
55
const yaml = require('yaml-front-matter')
66
const tempPath = path.resolve(__dirname, 'app/.temp')
7+
const { inferTitle } = require('./util')
78

89
mkdirp(tempPath)
910

@@ -114,9 +115,9 @@ async function resolveOptions (sourceDir) {
114115
// extract yaml frontmatter
115116
const frontmatter = yaml.loadFront(content)
116117
// infer title
117-
const titleMatch = frontmatter.__content.trim().match(/^#+\s+(.*)/)
118-
if (titleMatch) {
119-
data.title = titleMatch[1]
118+
const title = inferTitle(frontmatter)
119+
if (title) {
120+
data.title = title
120121
}
121122
delete frontmatter.__content
122123
if (Object.keys(frontmatter).length) {

Diff for: ‎lib/util.js

+10
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,13 @@ exports.applyUserWebpackConfig = function (userConfig, config, isServer) {
2424
}
2525
return config
2626
}
27+
28+
exports.inferTitle = function (frontmatter) {
29+
if (frontmatter.title) {
30+
return frontmatter.title
31+
}
32+
const match = frontmatter.__content.trim().match(/^#+\s+(.*)/)
33+
if (match) {
34+
return match[1]
35+
}
36+
}

Diff for: ‎lib/webpack/markdownLoader.js

+20-11
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
11
const { EventEmitter } = require('events')
22
const { getOptions } = require('loader-utils')
3-
const frontmatter = require('yaml-front-matter')
3+
const yaml = require('yaml-front-matter')
4+
const { inferTitle } = require('../util')
45

5-
const frontmatterCache = new Map()
6+
const cache = new Map()
67

78
module.exports = function (src) {
89
const { markdown } = getOptions(this)
9-
const parsed = frontmatter.loadFront(src)
10-
const content = parsed.__content
11-
delete parsed.__content
1210

13-
// diff frontmatter, since it's not going to be part of the returned
14-
// component, changes in frontmatter do not trigger hot updates
15-
const serializedData = JSON.stringify(parsed)
16-
const cachedData = frontmatterCache.get(this.resourcePath)
17-
if (cachedData != null && cachedData !== serializedData) {
11+
const frontmatter = yaml.loadFront(src)
12+
const inferredTitle = inferTitle(frontmatter)
13+
const content = frontmatter.__content
14+
delete frontmatter.__content
15+
16+
// diff frontmatter and title, since they are not going to be part of the
17+
// returned component, changes in frontmatter do not trigger proper updates
18+
const cachedData = cache.get(this.resourcePath)
19+
if (cachedData && (
20+
cachedData.inferredTitle !== inferredTitle ||
21+
JSON.stringify(cachedData.frontmatter) !== JSON.stringify(frontmatter)
22+
)) {
1823
// frontmatter changed... need to do a full reload
1924
module.exports.frontmatterEmitter.emit('update')
2025
}
21-
frontmatterCache.set(this.resourcePath, serializedData)
26+
27+
cache.set(this.resourcePath, {
28+
frontmatter,
29+
inferredTitle
30+
})
2231

2332
const { html, hoistedTags } = markdown.renderWithHoisting(content)
2433
return (

0 commit comments

Comments
 (0)