Skip to content

Commit e0d8ed1

Browse files
mathieutumathieutu
committed
refactor(default-theme): Extract PageEdit component.
1 parent cb02f26 commit e0d8ed1

File tree

2 files changed

+141
-127
lines changed

2 files changed

+141
-127
lines changed

Diff for: ‎packages/@vuepress/theme-default/components/Page.vue

+4-127
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,7 @@
44

55
<Content/>
66

7-
<footer class="page-edit">
8-
<div
9-
class="edit-link"
10-
v-if="editLink"
11-
>
12-
<a
13-
:href="editLink"
14-
target="_blank"
15-
rel="noopener noreferrer"
16-
>{{ editLinkText }}</a>
17-
<OutboundLink/>
18-
</div>
19-
20-
<div
21-
class="last-updated"
22-
v-if="lastUpdated"
23-
>
24-
<span class="prefix">{{ lastUpdatedText }}: </span>
25-
<span class="time">{{ lastUpdated }}</span>
26-
</div>
27-
</footer>
7+
<PageEdit/>
288

299
<div class="page-nav" v-if="prev || next">
3010
<p class="inner">
@@ -62,26 +42,14 @@
6242
</template>
6343

6444
<script>
65-
import { resolvePage, normalize, outboundRE, endingSlashRE } from '../util'
45+
import { resolvePage } from '../util'
46+
import PageEdit from '@theme/components/PageEdit'
6647
6748
export default {
49+
components: { PageEdit },
6850
props: ['sidebarItems'],
6951
7052
computed: {
71-
lastUpdated () {
72-
return this.$page.lastUpdated
73-
},
74-
75-
lastUpdatedText () {
76-
if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
77-
return this.$themeLocaleConfig.lastUpdated
78-
}
79-
if (typeof this.$site.themeConfig.lastUpdated === 'string') {
80-
return this.$site.themeConfig.lastUpdated
81-
}
82-
return 'Last Updated'
83-
},
84-
8553
prev () {
8654
const prev = this.$page.frontmatter.prev
8755
if (prev === false) {
@@ -102,67 +70,6 @@ export default {
10270
} else {
10371
return resolveNext(this.$page, this.sidebarItems)
10472
}
105-
},
106-
107-
editLink () {
108-
if (this.$page.frontmatter.editLink === false) {
109-
return
110-
}
111-
const {
112-
repo,
113-
editLinks,
114-
docsDir = '',
115-
docsBranch = 'master',
116-
docsRepo = repo
117-
} = this.$site.themeConfig
118-
119-
let path = normalize(this.$page.path)
120-
if (endingSlashRE.test(path)) {
121-
path += 'README.md'
122-
} else {
123-
path += '.md'
124-
}
125-
if (docsRepo && editLinks) {
126-
return this.createEditLink(repo, docsRepo, docsDir, docsBranch, path)
127-
}
128-
},
129-
130-
editLinkText () {
131-
return (
132-
this.$themeLocaleConfig.editLinkText
133-
|| this.$site.themeConfig.editLinkText
134-
|| `Edit this page`
135-
)
136-
}
137-
},
138-
139-
methods: {
140-
createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
141-
const bitbucket = /bitbucket.org/
142-
if (bitbucket.test(repo)) {
143-
const base = outboundRE.test(docsRepo)
144-
? docsRepo
145-
: repo
146-
return (
147-
base.replace(endingSlashRE, '')
148-
+ `/src`
149-
+ `/${docsBranch}`
150-
+ (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
151-
+ path
152-
+ `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
153-
)
154-
}
155-
156-
const base = outboundRE.test(docsRepo)
157-
? docsRepo
158-
: `https://github.com/${docsRepo}`
159-
160-
return (
161-
base.replace(endingSlashRE, '')
162-
+ `/edit/${docsBranch}`
163-
+ (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
164-
+ path
165-
)
16673
}
16774
}
16875
}
@@ -205,26 +112,6 @@ function flatten (items, res) {
205112
padding-bottom 2rem
206113
display block
207114
208-
.page-edit
209-
@extend $wrapper
210-
padding-top 1rem
211-
padding-bottom 1rem
212-
overflow auto
213-
.edit-link
214-
display inline-block
215-
a
216-
color lighten($textColor, 25%)
217-
margin-right 0.25rem
218-
.last-updated
219-
float right
220-
font-size 0.9em
221-
.prefix
222-
font-weight 500
223-
color lighten($textColor, 25%)
224-
.time
225-
font-weight 400
226-
color #aaa
227-
228115
.page-nav
229116
@extend $wrapper
230117
padding-top 1rem
@@ -237,14 +124,4 @@ function flatten (items, res) {
237124
overflow auto // clear float
238125
.next
239126
float right
240-
241-
@media (max-width: $MQMobile)
242-
.page-edit
243-
.edit-link
244-
margin-bottom .5rem
245-
.last-updated
246-
font-size .8em
247-
float none
248-
text-align left
249-
250127
</style>

Diff for: ‎packages/@vuepress/theme-default/components/PageEdit.vue

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<template>
2+
<footer class="page-edit">
3+
<div
4+
class="edit-link"
5+
v-if="editLink"
6+
>
7+
<a
8+
:href="editLink"
9+
target="_blank"
10+
rel="noopener noreferrer"
11+
>{{ editLinkText }}</a>
12+
<OutboundLink/>
13+
</div>
14+
15+
<div
16+
class="last-updated"
17+
v-if="lastUpdated"
18+
>
19+
<span class="prefix">{{ lastUpdatedText }}: </span>
20+
<span class="time">{{ lastUpdated }}</span>
21+
</div>
22+
</footer>
23+
</template>
24+
<script>
25+
import { endingSlashRE, normalize, outboundRE } from '../util'
26+
27+
export default {
28+
name: 'PageEdit',
29+
computed: {
30+
lastUpdated () {
31+
return this.$page.lastUpdated
32+
},
33+
34+
lastUpdatedText () {
35+
if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
36+
return this.$themeLocaleConfig.lastUpdated
37+
}
38+
if (typeof this.$site.themeConfig.lastUpdated === 'string') {
39+
return this.$site.themeConfig.lastUpdated
40+
}
41+
return 'Last Updated'
42+
},
43+
44+
editLink () {
45+
if (this.$page.frontmatter.editLink === false) {
46+
return
47+
}
48+
const {
49+
repo,
50+
editLinks,
51+
docsDir = '',
52+
docsBranch = 'master',
53+
docsRepo = repo
54+
} = this.$site.themeConfig
55+
56+
let path = normalize(this.$page.path)
57+
if (endingSlashRE.test(path)) {
58+
path += 'README.md'
59+
} else {
60+
path += '.md'
61+
}
62+
if (docsRepo && editLinks) {
63+
return this.createEditLink(repo, docsRepo, docsDir, docsBranch, path)
64+
}
65+
},
66+
67+
editLinkText () {
68+
return (
69+
this.$themeLocaleConfig.editLinkText
70+
|| this.$site.themeConfig.editLinkText
71+
|| `Edit this page`
72+
)
73+
}
74+
},
75+
76+
methods: {
77+
createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
78+
const bitbucket = /bitbucket.org/
79+
if (bitbucket.test(repo)) {
80+
const base = outboundRE.test(docsRepo)
81+
? docsRepo
82+
: repo
83+
return (
84+
base.replace(endingSlashRE, '')
85+
+ `/src`
86+
+ `/${docsBranch}`
87+
+ (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
88+
+ path
89+
+ `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
90+
)
91+
}
92+
93+
const base = outboundRE.test(docsRepo)
94+
? docsRepo
95+
: `https://github.com/${docsRepo}`
96+
97+
return (
98+
base.replace(endingSlashRE, '')
99+
+ `/edit/${docsBranch}`
100+
+ (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
101+
+ path
102+
)
103+
}
104+
}
105+
}
106+
</script>
107+
<style lang="stylus">
108+
@require '../styles/wrapper.styl'
109+
.page-edit
110+
@extend $wrapper
111+
padding-top 1rem
112+
padding-bottom 1rem
113+
overflow auto
114+
.edit-link
115+
display inline-block
116+
a
117+
color lighten($textColor, 25%)
118+
margin-right 0.25rem
119+
.last-updated
120+
float right
121+
font-size 0.9em
122+
.prefix
123+
font-weight 500
124+
color lighten($textColor, 25%)
125+
.time
126+
font-weight 400
127+
color #aaa
128+
129+
@media (max-width: $MQMobile)
130+
.page-edit
131+
.edit-link
132+
margin-bottom .5rem
133+
.last-updated
134+
font-size .8em
135+
float none
136+
text-align left
137+
</style>

0 commit comments

Comments
 (0)