-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor($theme-default): extract page components (#1427)
* refactor(default-theme): Extract PageEdit component and Extract PageNav component.
- Loading branch information
Showing
4 changed files
with
276 additions
and
252 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,267 +1,29 @@ | ||
| <template> | ||
| <main class="page"> | ||
| <slot name="top"/> | ||
| <slot name="top" /> | ||
|
|
||
| <Content class="theme-default-content"/> | ||
| <Content /> | ||
| <PageEdit /> | ||
|
|
||
| <footer class="page-edit"> | ||
| <div | ||
| class="edit-link" | ||
| v-if="editLink" | ||
| > | ||
| <a | ||
| :href="editLink" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >{{ editLinkText }}</a> | ||
| <OutboundLink/> | ||
| </div> | ||
| <PageNav v-bind="{ sidebarItems }" /> | ||
|
|
||
| <div | ||
| class="last-updated" | ||
| v-if="lastUpdated" | ||
| > | ||
| <span class="prefix">{{ lastUpdatedText }}: </span> | ||
| <span class="time">{{ lastUpdated }}</span> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <div class="page-nav" v-if="prev || next"> | ||
| <p class="inner"> | ||
| <span | ||
| v-if="prev" | ||
| class="prev" | ||
| > | ||
| ← | ||
| <router-link | ||
| v-if="prev" | ||
| class="prev" | ||
| :to="prev.path" | ||
| > | ||
| {{ prev.title || prev.path }} | ||
| </router-link> | ||
| </span> | ||
|
|
||
| <span | ||
| v-if="next" | ||
| class="next" | ||
| > | ||
| <router-link | ||
| v-if="next" | ||
| :to="next.path" | ||
| > | ||
| {{ next.title || next.path }} | ||
| </router-link> | ||
| → | ||
| </span> | ||
| </p> | ||
| </div> | ||
|
|
||
| <slot name="bottom"/> | ||
| <slot name="bottom" /> | ||
| </main> | ||
| </template> | ||
|
|
||
| <script> | ||
| import isString from 'lodash/isString' | ||
| import isNil from 'lodash/isNil' | ||
| import { resolvePage, outboundRE, endingSlashRE } from '../util' | ||
| import PageEdit from '@theme/components/PageEdit.vue' | ||
| import PageNav from '@theme/components/PageNav.vue' | ||
| export default { | ||
| props: ['sidebarItems'], | ||
| computed: { | ||
| lastUpdated () { | ||
| return this.$page.lastUpdated | ||
| }, | ||
| lastUpdatedText () { | ||
| if (typeof this.$themeLocaleConfig.lastUpdated === 'string') { | ||
| return this.$themeLocaleConfig.lastUpdated | ||
| } | ||
| if (typeof this.$site.themeConfig.lastUpdated === 'string') { | ||
| return this.$site.themeConfig.lastUpdated | ||
| } | ||
| return 'Last Updated' | ||
| }, | ||
| prev () { | ||
| return resolvePageLink(LINK_TYPES.PREV, this) | ||
| }, | ||
| next () { | ||
| return resolvePageLink(LINK_TYPES.NEXT, this) | ||
| }, | ||
| editLink () { | ||
| if (this.$page.frontmatter.editLink === false) { | ||
| return | ||
| } | ||
| const { | ||
| repo, | ||
| editLinks, | ||
| docsDir = '', | ||
| docsBranch = 'master', | ||
| docsRepo = repo | ||
| } = this.$site.themeConfig | ||
| if (docsRepo && editLinks && this.$page.relativePath) { | ||
| return this.createEditLink(repo, docsRepo, docsDir, docsBranch, this.$page.relativePath) | ||
| } | ||
| }, | ||
| editLinkText () { | ||
| return ( | ||
| this.$themeLocaleConfig.editLinkText | ||
| || this.$site.themeConfig.editLinkText | ||
| || `Edit this page` | ||
| ) | ||
| } | ||
| }, | ||
| methods: { | ||
| createEditLink (repo, docsRepo, docsDir, docsBranch, path) { | ||
| const bitbucket = /bitbucket.org/ | ||
| if (bitbucket.test(repo)) { | ||
| const base = outboundRE.test(docsRepo) | ||
| ? docsRepo | ||
| : repo | ||
| return ( | ||
| base.replace(endingSlashRE, '') | ||
| + `/src` | ||
| + `/${docsBranch}/` | ||
| + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') | ||
| + path | ||
| + `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default` | ||
| ) | ||
| } | ||
| const base = outboundRE.test(docsRepo) | ||
| ? docsRepo | ||
| : `https://github.com/${docsRepo}` | ||
| return ( | ||
| base.replace(endingSlashRE, '') | ||
| + `/edit` | ||
| + `/${docsBranch}/` | ||
| + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') | ||
| + path | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| function resolvePrev (page, items) { | ||
| return find(page, items, -1) | ||
| } | ||
| function resolveNext (page, items) { | ||
| return find(page, items, 1) | ||
| } | ||
| const LINK_TYPES = { | ||
| NEXT: { | ||
| resolveLink: resolveNext, | ||
| getThemeLinkConfig: ({ nextLinks }) => nextLinks, | ||
| getPageLinkConfig: ({ frontmatter }) => frontmatter.next | ||
| }, | ||
| PREV: { | ||
| resolveLink: resolvePrev, | ||
| getThemeLinkConfig: ({ prevLinks }) => prevLinks, | ||
| getPageLinkConfig: ({ frontmatter }) => frontmatter.prev | ||
| } | ||
| } | ||
| function resolvePageLink (linkType, { $themeConfig, $page, $route, $site, sidebarItems }) { | ||
| const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType | ||
| // Get link config from theme | ||
| const themeLinkConfig = getThemeLinkConfig($themeConfig) | ||
| // Get link config from current page | ||
| const pageLinkConfig = getPageLinkConfig($page) | ||
| // Page link config will overwrite global theme link config if defined | ||
| const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig | ||
| if (link === false) { | ||
| return | ||
| } else if (isString(link)) { | ||
| return resolvePage($site.pages, link, $route.path) | ||
| } else { | ||
| return resolveLink($page, sidebarItems) | ||
| } | ||
| } | ||
| function find (page, items, offset) { | ||
| const res = [] | ||
| flatten(items, res) | ||
| for (let i = 0; i < res.length; i++) { | ||
| const cur = res[i] | ||
| if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) { | ||
| return res[i + offset] | ||
| } | ||
| } | ||
| components: { PageEdit, PageNav }, | ||
| props: ['sidebarItems'] | ||
| } | ||
| function flatten (items, res) { | ||
| for (let i = 0, l = items.length; i < l; i++) { | ||
| if (items[i].type === 'group') { | ||
| flatten(items[i].children || [], res) | ||
| } else { | ||
| res.push(items[i]) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="stylus"> | ||
| @require '../styles/wrapper.styl' | ||
| .page | ||
| padding-bottom 2rem | ||
| display block | ||
| .page-edit | ||
| @extend $wrapper | ||
| padding-top 1rem | ||
| padding-bottom 1rem | ||
| overflow auto | ||
| .edit-link | ||
| display inline-block | ||
| a | ||
| color lighten($textColor, 25%) | ||
| margin-right 0.25rem | ||
| .last-updated | ||
| float right | ||
| font-size 0.9em | ||
| .prefix | ||
| font-weight 500 | ||
| color lighten($textColor, 25%) | ||
| .time | ||
| font-weight 400 | ||
| color #aaa | ||
| .page-nav | ||
| @extend $wrapper | ||
| padding-top 1rem | ||
| padding-bottom 0 | ||
| .inner | ||
| min-height 2rem | ||
| margin-top 0 | ||
| border-top 1px solid $borderColor | ||
| padding-top 1rem | ||
| overflow auto // clear float | ||
| .next | ||
| float right | ||
| @media (max-width: $MQMobile) | ||
| .page-edit | ||
| .edit-link | ||
| margin-bottom .5rem | ||
| .last-updated | ||
| font-size .8em | ||
| float none | ||
| text-align left | ||
| .page { | ||
| padding-bottom: 2rem; | ||
| display: block; | ||
| } | ||
| </style> |
Oops, something went wrong.