mirror of
https://github.com/pomerium/pomerium.git
synced 2025-05-10 23:57:34 +02:00
site: fix site on mobile (#597)
Signed-off-by: Bobby DeSimone <bobbydesimone@gmail.com>
This commit is contained in:
Bobby DeSimone
GitHub
parent
8111a3d1b5
commit
ad56322c7e
31 changed files with 233 additions and 2324 deletions
|
|
@ -1,18 +1,18 @@
|
|||
// .vuepress/config.js
|
||||
module.exports = {
|
||||
title: "Pomerium",
|
||||
// title: "Pomerium",
|
||||
description:
|
||||
"Pomerium is a beyond-corp inspired, zero trust, open source identity-aware access proxy.",
|
||||
plugins: {
|
||||
sitemap: {
|
||||
hostname: "https://www.pomerium.io"
|
||||
hostname: "https://www.pomerium.io",
|
||||
},
|
||||
"@vuepress/google-analytics": {
|
||||
ga: "UA-129872447-2"
|
||||
}
|
||||
ga: "UA-129872447-2",
|
||||
},
|
||||
},
|
||||
markdown: {
|
||||
externalLinkSymbol: false
|
||||
externalLinkSymbol: false,
|
||||
},
|
||||
themeConfig: {
|
||||
logo: "/logo-long-civez.png",
|
||||
|
|
@ -38,13 +38,13 @@ module.exports = {
|
|||
{ text: "v0.4.x", link: "https://0-4-0.docs.pomerium.io/docs" },
|
||||
{ text: "v0.3.x", link: "https://0-3-0.docs.pomerium.io/docs" },
|
||||
{ text: "v0.2.x", link: "https://0-2-0.docs.pomerium.io/docs" },
|
||||
{ text: "v0.1.x", link: "https://0-1-0.docs.pomerium.io/docs" }
|
||||
]
|
||||
}
|
||||
{ text: "v0.1.x", link: "https://0-1-0.docs.pomerium.io/docs" },
|
||||
],
|
||||
},
|
||||
],
|
||||
algolia: {
|
||||
apiKey: "1653e881f3a6c17d3ad37f4d4c428e20",
|
||||
indexName: "pomerium"
|
||||
indexName: "pomerium",
|
||||
},
|
||||
sidebar: {
|
||||
"/docs/": [
|
||||
|
|
@ -59,8 +59,8 @@ module.exports = {
|
|||
"releases",
|
||||
"upgrading",
|
||||
"CHANGELOG",
|
||||
"FAQ"
|
||||
]
|
||||
"FAQ",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Quick Start",
|
||||
|
|
@ -74,8 +74,8 @@ module.exports = {
|
|||
"quick-start/helm",
|
||||
"quick-start/kubernetes",
|
||||
"quick-start/synology",
|
||||
"quick-start/from-source"
|
||||
]
|
||||
"quick-start/from-source",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Identity Providers",
|
||||
|
|
@ -90,8 +90,8 @@ module.exports = {
|
|||
"identity-providers/gitlab",
|
||||
"identity-providers/google",
|
||||
"identity-providers/okta",
|
||||
"identity-providers/one-login"
|
||||
]
|
||||
"identity-providers/one-login",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
|
|
@ -103,8 +103,8 @@ module.exports = {
|
|||
"community/",
|
||||
"community/contributing",
|
||||
"community/code-of-conduct",
|
||||
"community/security"
|
||||
]
|
||||
"community/security",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Reference",
|
||||
|
|
@ -118,9 +118,9 @@ module.exports = {
|
|||
"reference/impersonation",
|
||||
"reference/programmatic-access",
|
||||
"reference/getting-users-identity",
|
||||
"reference/production-deployment"
|
||||
]
|
||||
}
|
||||
"reference/production-deployment",
|
||||
],
|
||||
},
|
||||
],
|
||||
"/recipes/": [
|
||||
{
|
||||
|
|
@ -129,8 +129,8 @@ module.exports = {
|
|||
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
children: ["", "ad-guard", "vs-code-server", "kubernetes"]
|
||||
}
|
||||
children: ["", "ad-guard", "vs-code-server", "kubernetes"],
|
||||
},
|
||||
],
|
||||
"/enterprise/": [
|
||||
{
|
||||
|
|
@ -138,8 +138,8 @@ module.exports = {
|
|||
type: "group",
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
children: [""]
|
||||
}
|
||||
children: [""],
|
||||
},
|
||||
],
|
||||
"/configuration/": [
|
||||
{
|
||||
|
|
@ -147,9 +147,9 @@ module.exports = {
|
|||
type: "group",
|
||||
collapsable: false,
|
||||
sidebarDepth: 1,
|
||||
children: ["", "examples"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
children: ["", "examples"],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
74
docs/.vuepress/styles/palette.styl
Normal file
74
docs/.vuepress/styles/palette.styl
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// colors
|
||||
$mainColor= #6E43E8
|
||||
|
||||
|
||||
$sidebarColor=#FAFAFC
|
||||
$accentColor = #6E43E8
|
||||
$textColor =rgb(51, 51, 51)
|
||||
$headerColor=rgb(17, 17, 17)
|
||||
$borderColor = #e8e8fb
|
||||
$codeBgColor = #282c34
|
||||
$arrowBgColor = #ccc
|
||||
$section-color=#f7f7f7;
|
||||
$fontSize = 16px
|
||||
|
||||
// navbar
|
||||
// $navbarHeight = 5.2rem
|
||||
$navbar-vertical-padding = 1.4rem;
|
||||
$navbar-horizontal-padding = 1.4rem;
|
||||
$navbar-background = #6E43E8;
|
||||
$navbar-text-color = #ffffff;
|
||||
|
||||
$sidebarWidth = 16rem
|
||||
$contentWidth = 960px
|
||||
|
||||
// // responsive breakpoints
|
||||
$MQNarrow = 959px
|
||||
$MQMobile = 719px
|
||||
$MQMobileNarrow = 419px
|
||||
|
||||
.icon.outbound
|
||||
display none !important
|
||||
|
||||
.navbar
|
||||
background-color: $navbar-background !important
|
||||
border-bottom 1px solid $navbar-background !important
|
||||
.logo
|
||||
height $navbarHeight - 3.2rem
|
||||
min-width $navbarHeight - 3.2rem
|
||||
margin-right 0.8rem
|
||||
vertical-align top
|
||||
.links
|
||||
background-color: $navbar-background !important
|
||||
color: $navbar-text-color !important
|
||||
padding-left 0rem
|
||||
|
||||
.nav-links
|
||||
a
|
||||
&:hover, &.router-link-active
|
||||
color lighten($textColor, 8%) !important
|
||||
|
||||
@media (min-width: $MQMobile)
|
||||
.nav-links a
|
||||
&:hover, &.router-link-active
|
||||
color lighten($navbar-text-color, 8%) !important
|
||||
.nav-item > a:not(.external)
|
||||
&:hover, &.router-link-active
|
||||
margin-bottom -2px
|
||||
border-bottom 2px solid lighten($navbar-text-color, 8%) !important
|
||||
|
||||
|
||||
|
||||
.dropdown-wrapper
|
||||
.dropdown-title
|
||||
color $navbar-text-color !important
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.dropdown-wrapper
|
||||
.dropdown-title
|
||||
color $textColor !important
|
||||
|
||||
@media (min-width: $MQMobile)
|
||||
.dropdown-wrapper
|
||||
.dropdown-title
|
||||
color $navbar-text-color !important
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
<template>
|
||||
<form id="search-form" class="algolia-search-wrapper search-box" role="search">
|
||||
<input id="algolia-search-input" class="search-query" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["options"],
|
||||
|
||||
mounted() {
|
||||
this.initialize(this.options, this.$lang);
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize(userOptions, lang) {
|
||||
Promise.all([
|
||||
import(
|
||||
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"
|
||||
),
|
||||
import(
|
||||
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"
|
||||
)
|
||||
]).then(([docsearch]) => {
|
||||
docsearch = docsearch.default;
|
||||
const { algoliaOptions = {} } = userOptions;
|
||||
docsearch(
|
||||
Object.assign({}, userOptions, {
|
||||
inputSelector: "#algolia-search-input",
|
||||
// #697 Make docsearch work well at i18n mode.
|
||||
algoliaOptions: Object.assign(
|
||||
{
|
||||
facetFilters: [`lang:${lang}`].concat(
|
||||
algoliaOptions.facetFilters || []
|
||||
)
|
||||
},
|
||||
algoliaOptions
|
||||
),
|
||||
handleSelected: (input, event, suggestion) => {
|
||||
const { pathname, hash } = new URL(suggestion.url);
|
||||
this.$router.push(`${pathname}${hash}`);
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
update(options, lang) {
|
||||
this.$el.innerHTML =
|
||||
'<input id="algolia-search-input" class="search-query">';
|
||||
this.initialize(options, lang);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$lang(newValue) {
|
||||
this.update(this.options, newValue);
|
||||
},
|
||||
|
||||
options(newValue) {
|
||||
this.update(newValue, this.$lang);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.algolia-search-wrapper {
|
||||
& > span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.algolia-autocomplete {
|
||||
line-height: normal;
|
||||
|
||||
.ds-dropdown-menu {
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin: 6px 0 0;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
[class*=ds-dataset-] {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ds-suggestions {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ds-suggestion {
|
||||
border-bottom: 1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #2c815b;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion {
|
||||
border-color: $borderColor;
|
||||
padding: 0;
|
||||
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
padding: 5px 10px;
|
||||
margin-top: 0;
|
||||
background: $accentColor;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
vertical-align: top;
|
||||
padding: 5px 7px 5px 5px;
|
||||
border-color: $borderColor;
|
||||
background: #f1f3f5;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column-text {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-footer {
|
||||
border-color: $borderColor;
|
||||
}
|
||||
|
||||
.ds-cursor .algolia-docsearch-suggestion--content {
|
||||
background-color: #e7edf3 !important;
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $MQMobile) {
|
||||
.algolia-search-wrapper {
|
||||
.algolia-autocomplete {
|
||||
.algolia-docsearch-suggestion {
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
float: none;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--content {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ds-dropdown-menu {
|
||||
min-width: 515px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.algolia-search-wrapper {
|
||||
.ds-dropdown-menu {
|
||||
min-width: calc(100vw - 4rem) !important;
|
||||
max-width: calc(100vw - 4rem) !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--wrapper {
|
||||
padding: 5px 7px 5px 5px !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
padding: 0 !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column-text:after {
|
||||
content: ' > ';
|
||||
font-size: 10px;
|
||||
line-height: 14.4px;
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
margin: -3px 3px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
<template>
|
||||
<div class="dropdown-wrapper" :class="{ open }">
|
||||
<a class="dropdown-title" @click="toggle">
|
||||
<span class="title">{{ item.text }}</span>
|
||||
<span class="arrow" :class="open ? 'down' : 'right'"></span>
|
||||
</a>
|
||||
|
||||
<DropdownTransition>
|
||||
<ul class="nav-dropdown" v-show="open">
|
||||
<li
|
||||
class="dropdown-item"
|
||||
:key="subItem.link || index"
|
||||
v-for="(subItem, index) in item.items"
|
||||
>
|
||||
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
|
||||
|
||||
<ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
|
||||
<li
|
||||
class="dropdown-subitem"
|
||||
:key="childSubItem.link"
|
||||
v-for="childSubItem in subItem.items"
|
||||
>
|
||||
<NavLink :item="childSubItem" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<NavLink v-else :item="subItem" />
|
||||
</li>
|
||||
</ul>
|
||||
</DropdownTransition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavLink from "@theme/components/NavLink.vue";
|
||||
import DropdownTransition from "@theme/components/DropdownTransition.vue";
|
||||
|
||||
export default {
|
||||
components: { NavLink, DropdownTransition },
|
||||
|
||||
data() {
|
||||
return {
|
||||
open: false
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
item: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
this.open = !this.open;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.dropdown-wrapper {
|
||||
cursor: pointer;
|
||||
|
||||
.dropdown-title {
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
.dropdown-item {
|
||||
color: inherit;
|
||||
line-height: 1.7rem;
|
||||
|
||||
h4 {
|
||||
margin: 0.45rem 0 0;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 0.45rem 1.5rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.dropdown-subitem-wrapper {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.dropdown-subitem {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
line-height: 1.7rem;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0;
|
||||
padding: 0 1.5rem 0 1.25rem;
|
||||
color: $accentColor;
|
||||
|
||||
&:hover {
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
color: $accentColor;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid $accentColor;
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
position: absolute;
|
||||
top: calc(50% - 2px);
|
||||
left: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child h4 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.dropdown-wrapper {
|
||||
&.open .dropdown-title {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
transition: height 0.1s ease-out;
|
||||
overflow: hidden;
|
||||
|
||||
.dropdown-item {
|
||||
h4 {
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h4, & > a {
|
||||
font-size: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-subitem {
|
||||
font-size: 14px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $MQMobile) {
|
||||
.dropdown-wrapper {
|
||||
height: 1.8rem;
|
||||
|
||||
&:hover .nav-dropdown {
|
||||
// override the inline style.
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.dropdown-title .arrow {
|
||||
// make the arrow always down at desktop
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 6px solid $arrowBgColor;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
display: none;
|
||||
// Avoid height shaked by clicking
|
||||
height: auto !important;
|
||||
box-sizing: border-box;
|
||||
max-height: calc(100vh - 2.7rem);
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 0.6rem 0;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: #ccc;
|
||||
text-align: left;
|
||||
border-radius: 0.25rem;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<transition
|
||||
name="dropdown"
|
||||
@enter="setHeight"
|
||||
@after-enter="unsetHeight"
|
||||
@before-leave="setHeight"
|
||||
>
|
||||
<slot/>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DropdownTransition',
|
||||
|
||||
methods: {
|
||||
setHeight (items) {
|
||||
// explicitly set height so that it can be transitioned
|
||||
items.style.height = items.scrollHeight + 'px'
|
||||
},
|
||||
|
||||
unsetHeight (items) {
|
||||
items.style.height = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.dropdown-enter, .dropdown-leave-to
|
||||
height 0 !important
|
||||
|
||||
</style>
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import NavLink from "@theme/components/NavLink.vue";
|
||||
import NavLink from "@parent-theme/components/NavLink.vue";
|
||||
|
||||
export default {
|
||||
components: { NavLink },
|
||||
|
|
@ -122,10 +122,10 @@ export default {
|
|||
actionLink() {
|
||||
return {
|
||||
link: this.data.actionLink,
|
||||
text: this.data.actionText
|
||||
text: this.data.actionText,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<router-link class="nav-link" :to="link" v-if="!isExternal(link)" :exact="exact">{{ item.text }}</router-link>
|
||||
<a
|
||||
v-else
|
||||
:href="link"
|
||||
class="nav-link external"
|
||||
:target="isMailto(link) || isTel(link) ? null : '_blank'"
|
||||
:rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
|
||||
>
|
||||
{{ item.text }}
|
||||
<OutboundLink />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isExternal, isMailto, isTel, ensureExt } from "../util";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
link() {
|
||||
return ensureExt(this.item.link);
|
||||
},
|
||||
|
||||
exact() {
|
||||
if (this.$site.locales) {
|
||||
return Object.keys(this.$site.locales).some(
|
||||
rootLink => rootLink === this.link
|
||||
);
|
||||
}
|
||||
return this.link === "/";
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
isExternal,
|
||||
isMailto,
|
||||
isTel
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<template>
|
||||
<nav class="nav-links" v-if="userLinks.length || repoLink">
|
||||
<!-- user links -->
|
||||
<div class="nav-item" v-for="item in userLinks" :key="item.link">
|
||||
<DropdownLink v-if="item.type === 'links'" :item="item" />
|
||||
<NavLink v-else :item="item" />
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownLink from "@theme/components/DropdownLink.vue";
|
||||
import { resolveNavLinkItem } from "../util";
|
||||
import NavLink from "@theme/components/NavLink.vue";
|
||||
|
||||
export default {
|
||||
components: { NavLink, DropdownLink },
|
||||
|
||||
computed: {
|
||||
userNav() {
|
||||
return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || [];
|
||||
},
|
||||
|
||||
nav() {
|
||||
const { locales } = this.$site;
|
||||
if (locales && Object.keys(locales).length > 1) {
|
||||
const currentLink = this.$page.path;
|
||||
const routes = this.$router.options.routes;
|
||||
const themeLocales = this.$site.themeConfig.locales || {};
|
||||
const languageDropdown = {
|
||||
text: this.$themeLocaleConfig.selectText || "Languages",
|
||||
items: Object.keys(locales).map(path => {
|
||||
const locale = locales[path];
|
||||
const text =
|
||||
(themeLocales[path] && themeLocales[path].label) || locale.lang;
|
||||
let link;
|
||||
// Stay on the current page
|
||||
if (locale.lang === this.$lang) {
|
||||
link = currentLink;
|
||||
} else {
|
||||
// Try to stay on the same page
|
||||
link = currentLink.replace(this.$localeConfig.path, path);
|
||||
// fallback to homepage
|
||||
if (!routes.some(route => route.path === link)) {
|
||||
link = path;
|
||||
}
|
||||
}
|
||||
return { text, link };
|
||||
})
|
||||
};
|
||||
return [...this.userNav, languageDropdown];
|
||||
}
|
||||
return this.userNav;
|
||||
},
|
||||
|
||||
userLinks() {
|
||||
return (this.nav || []).map(link => {
|
||||
return Object.assign(resolveNavLinkItem(link), {
|
||||
items: (link.items || []).map(resolveNavLinkItem)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.nav-links {
|
||||
display: inline-block;
|
||||
color: $navbar-text-color;
|
||||
|
||||
a {
|
||||
line-height: 1.4rem;
|
||||
color: $navbar-text-color;
|
||||
|
||||
&:hover, &.router-link-active {
|
||||
color: $navbar-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-link {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.nav-links {
|
||||
.nav-item, .repo-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $MQMobile) {
|
||||
.nav-links a {
|
||||
&:hover, &.router-link-active {
|
||||
color: $navbar-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item > a:not(.external) {
|
||||
&:hover, &.router-link-active {
|
||||
margin-bottom: -2px;
|
||||
border-bottom: 2px solid darken($navbar-text-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<template>
|
||||
<header class="navbar">
|
||||
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
|
||||
|
||||
<router-link :to="$localePath" class="home-link">
|
||||
<img
|
||||
class="logo"
|
||||
v-if="$site.themeConfig.logo"
|
||||
:src="$withBase($site.themeConfig.logo)"
|
||||
:alt="$siteTitle"
|
||||
/>
|
||||
</router-link>
|
||||
|
||||
<div
|
||||
class="links"
|
||||
:style="linksWrapMaxWidth ? {
|
||||
'max-width': linksWrapMaxWidth + 'px'
|
||||
} : {}"
|
||||
>
|
||||
<NavLinks class="can-hide" />
|
||||
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
|
||||
<SearchBox
|
||||
v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlgoliaSearchBox from "@AlgoliaSearchBox";
|
||||
import SearchBox from "@SearchBox";
|
||||
import SidebarButton from "@theme/components/SidebarButton.vue";
|
||||
import NavLinks from "@theme/components/NavLinks.vue";
|
||||
|
||||
export default {
|
||||
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
|
||||
|
||||
data() {
|
||||
return {
|
||||
linksWrapMaxWidth: null
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
|
||||
const NAVBAR_VERTICAL_PADDING =
|
||||
parseInt(css(this.$el, "paddingLeft")) +
|
||||
parseInt(css(this.$el, "paddingRight"));
|
||||
const handleLinksWrapWidth = () => {
|
||||
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
|
||||
this.linksWrapMaxWidth = null;
|
||||
} else {
|
||||
this.linksWrapMaxWidth =
|
||||
this.$el.offsetWidth -
|
||||
NAVBAR_VERTICAL_PADDING -
|
||||
((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
|
||||
}
|
||||
};
|
||||
handleLinksWrapWidth();
|
||||
window.addEventListener("resize", handleLinksWrapWidth, false);
|
||||
},
|
||||
|
||||
computed: {
|
||||
algolia() {
|
||||
return (
|
||||
this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
|
||||
);
|
||||
},
|
||||
|
||||
isAlgoliaSearch() {
|
||||
return this.algolia && this.algolia.apiKey && this.algolia.indexName;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function css(el, property) {
|
||||
// NOTE: Known bug, will return 'auto' if style value is 'auto'
|
||||
const win = el.ownerDocument.defaultView;
|
||||
// null means not to return pseudo styles
|
||||
return win.getComputedStyle(el, null)[property];
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
$navbar-vertical-padding = 0.7rem;
|
||||
$navbar-horizontal-padding = 1.5rem;
|
||||
|
||||
.navbar {
|
||||
padding: $navbar-vertical-padding $navbar-horizontal-padding;
|
||||
line-height: $navbarHeight - 1.4rem;
|
||||
background: $navbar-background;
|
||||
|
||||
a, span, img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: $navbarHeight - 3.1rem;
|
||||
margin-right: 0.2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: $textColor;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.links {
|
||||
// padding-left: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
background-color: $navbar-background;
|
||||
white-space: nowrap;
|
||||
font-size: 0.95rem;
|
||||
position: absolute;
|
||||
right: $navbar-horizontal-padding;
|
||||
top: $navbar-vertical-padding;
|
||||
display: flex;
|
||||
|
||||
.search-box {
|
||||
padding-left: 1.5rem;
|
||||
flex: 0 0 auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.navbar {
|
||||
padding-left: 4rem;
|
||||
|
||||
.can-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.links {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
<template>
|
||||
<main class="page">
|
||||
<slot name="top" />
|
||||
|
||||
<Content class="theme-default-content" />
|
||||
|
||||
<footer class="page-edit">
|
||||
<div class="edit-link" v-if="editLink">
|
||||
<a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
|
||||
<OutboundLink />
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { resolvePage, outboundRE, endingSlashRE } from "../util";
|
||||
|
||||
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() {
|
||||
const prev = this.$page.frontmatter.prev;
|
||||
if (prev === false) {
|
||||
return;
|
||||
} else if (prev) {
|
||||
return resolvePage(this.$site.pages, prev, this.$route.path);
|
||||
} else {
|
||||
return resolvePrev(this.$page, this.sidebarItems);
|
||||
}
|
||||
},
|
||||
|
||||
next() {
|
||||
const next = this.$page.frontmatter.next;
|
||||
if (next === false) {
|
||||
return;
|
||||
} else if (next) {
|
||||
return resolvePage(this.$site.pages, next, this.$route.path);
|
||||
} else {
|
||||
return resolveNext(this.$page, this.sidebarItems);
|
||||
}
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.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: 0.5rem;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 0.8em;
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<template>
|
||||
<aside class="sidebar">
|
||||
<NavLinks />
|
||||
<slot name="top" />
|
||||
<SidebarLinks :depth="0" :items="items" />
|
||||
<slot name="bottom" />
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarLinks from "@theme/components/SidebarLinks.vue";
|
||||
import NavLinks from "@theme/components/NavLinks.vue";
|
||||
|
||||
export default {
|
||||
name: "Sidebar",
|
||||
|
||||
components: { SidebarLinks, NavLinks },
|
||||
|
||||
props: ["items"]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.sidebar {
|
||||
background-color: $sidebarColor;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none;
|
||||
border-bottom: 1px solid $borderColor;
|
||||
padding: 0.5rem 0 0.75rem 0;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-item, .repo-link {
|
||||
display: block;
|
||||
line-height: 1.15rem;
|
||||
font-size: 1.1em;
|
||||
padding: 0.5rem 0 0.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > .sidebar-links {
|
||||
padding: 1.5rem 0;
|
||||
|
||||
& > li > a.sidebar-link {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& > li:not(:first-child) {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobileNarrow) {
|
||||
.sidebar {
|
||||
background-color: #6E43E8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.sidebar {
|
||||
background-color: #6E43E8;
|
||||
|
||||
.nav-links {
|
||||
display: block;
|
||||
|
||||
.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
|
||||
top: calc(1rem - 2px);
|
||||
}
|
||||
}
|
||||
|
||||
& > .sidebar-links {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<template>
|
||||
<div class="sidebar-button" @click="$emit('toggle-sidebar')">
|
||||
<svg
|
||||
class="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
|
||||
class
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.sidebar-button {
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
position: absolute;
|
||||
padding: 0.6rem;
|
||||
top: 0.6rem;
|
||||
left: 1rem;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.sidebar-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
<template>
|
||||
<section
|
||||
class="sidebar-group"
|
||||
:class="[
|
||||
{
|
||||
collapsable,
|
||||
'is-sub-group': depth !== 0
|
||||
},
|
||||
`depth-${depth}`
|
||||
]"
|
||||
>
|
||||
<router-link
|
||||
v-if="item.path"
|
||||
class="sidebar-heading clickable"
|
||||
:class="{
|
||||
open,
|
||||
'active': isActive($route, item.path)
|
||||
}"
|
||||
:to="item.path"
|
||||
@click.native="$emit('toggle')"
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
<span class="arrow" v-if="collapsable" :class="open ? 'down' : 'right'"></span>
|
||||
</router-link>
|
||||
|
||||
<p v-else class="sidebar-heading" :class="{ open }" @click="$emit('toggle')">
|
||||
<span>{{ item.title }}</span>
|
||||
<span class="arrow" v-if="collapsable" :class="open ? 'down' : 'right'"></span>
|
||||
</p>
|
||||
|
||||
<DropdownTransition>
|
||||
<SidebarLinks
|
||||
class="sidebar-group-items"
|
||||
:items="item.children"
|
||||
v-if="open || !collapsable"
|
||||
:sidebarDepth="item.sidebarDepth"
|
||||
:depth="depth + 1"
|
||||
/>
|
||||
</DropdownTransition>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isActive } from "../util";
|
||||
import DropdownTransition from "@theme/components/DropdownTransition.vue";
|
||||
|
||||
export default {
|
||||
name: "SidebarGroup",
|
||||
props: ["item", "open", "collapsable", "depth"],
|
||||
components: { DropdownTransition },
|
||||
// ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
|
||||
beforeCreate() {
|
||||
this.$options.components.SidebarLinks = require("./SidebarLinks.vue").default;
|
||||
},
|
||||
methods: { isActive }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.sidebar-group {
|
||||
.sidebar-group {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
&:not(.collapsable) {
|
||||
.sidebar-heading:not(.clickable) {
|
||||
cursor: auto;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// refine styles of nested sidebar groups
|
||||
&.is-sub-group {
|
||||
padding-left: 0;
|
||||
|
||||
& > .sidebar-heading {
|
||||
font-size: 0.95em;
|
||||
line-height: 1.4;
|
||||
font-weight: normal;
|
||||
padding-left: 2rem;
|
||||
|
||||
&:not(.clickable) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
& > .sidebar-group-items {
|
||||
padding-left: 1rem;
|
||||
|
||||
& > li > .sidebar-link {
|
||||
font-size: 0.95em;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.depth-2 {
|
||||
& > .sidebar-heading {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
color: lighten($textColor, 50%);
|
||||
transition: color 0.15s ease;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
// text-transform uppercase
|
||||
padding: 0.35rem 1.5rem 0.35rem 1.25rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border-left: 0.25rem solid transparent;
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
top: -0.12em;
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
&:hover {
|
||||
color: $accentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-group-items {
|
||||
transition: height 0.1s ease-out;
|
||||
font-size: 0.95em;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
<script>
|
||||
import { isActive, hashRE, groupHeaders } from "../util";
|
||||
|
||||
export default {
|
||||
functional: true,
|
||||
|
||||
props: ["item", "sidebarDepth"],
|
||||
|
||||
render(
|
||||
h,
|
||||
{
|
||||
parent: { $page, $site, $route, $themeConfig, $themeLocaleConfig },
|
||||
props: { item, sidebarDepth }
|
||||
}
|
||||
) {
|
||||
// use custom active class matching logic
|
||||
// due to edge case of paths ending with / + hash
|
||||
const selfActive = isActive($route, item.path);
|
||||
// for sidebar: auto pages, a hash link should be active if one of its child
|
||||
// matches
|
||||
const active =
|
||||
item.type === "auto"
|
||||
? selfActive ||
|
||||
item.children.some(c =>
|
||||
isActive($route, item.basePath + "#" + c.slug)
|
||||
)
|
||||
: selfActive;
|
||||
const link =
|
||||
item.type === "external"
|
||||
? renderExternal(h, item.path, item.title || item.path)
|
||||
: renderLink(h, item.path, item.title || item.path, active);
|
||||
|
||||
const configDepth =
|
||||
$page.frontmatter.sidebarDepth ||
|
||||
sidebarDepth ||
|
||||
$themeLocaleConfig.sidebarDepth ||
|
||||
$themeConfig.sidebarDepth;
|
||||
|
||||
const maxDepth = configDepth == null ? 1 : configDepth;
|
||||
|
||||
const displayAllHeaders =
|
||||
$themeLocaleConfig.displayAllHeaders || $themeConfig.displayAllHeaders;
|
||||
|
||||
if (item.type === "auto") {
|
||||
return [
|
||||
link,
|
||||
renderChildren(h, item.children, item.basePath, $route, maxDepth)
|
||||
];
|
||||
} else if (
|
||||
(active || displayAllHeaders) &&
|
||||
item.headers &&
|
||||
!hashRE.test(item.path)
|
||||
) {
|
||||
const children = groupHeaders(item.headers);
|
||||
return [link, renderChildren(h, children, item.path, $route, maxDepth)];
|
||||
} else {
|
||||
return link;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function renderLink(h, to, text, active) {
|
||||
return h(
|
||||
"router-link",
|
||||
{
|
||||
props: {
|
||||
to,
|
||||
activeClass: "",
|
||||
exactActiveClass: ""
|
||||
},
|
||||
class: {
|
||||
active,
|
||||
"sidebar-link": true
|
||||
}
|
||||
},
|
||||
text
|
||||
);
|
||||
}
|
||||
|
||||
function renderChildren(h, children, path, route, maxDepth, depth = 1) {
|
||||
if (!children || depth > maxDepth) return null;
|
||||
return h(
|
||||
"ul",
|
||||
{ class: "sidebar-sub-headers" },
|
||||
children.map(c => {
|
||||
const active = isActive(route, path + "#" + c.slug);
|
||||
return h("li", { class: "sidebar-sub-header" }, [
|
||||
renderLink(h, path + "#" + c.slug, c.title, active),
|
||||
renderChildren(h, c.children, path, route, maxDepth, depth + 1)
|
||||
]);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function renderExternal(h, to, text) {
|
||||
return h(
|
||||
"a",
|
||||
{
|
||||
attrs: {
|
||||
href: to,
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
},
|
||||
class: {
|
||||
"sidebar-link": true
|
||||
}
|
||||
},
|
||||
[text, h("OutboundLink")]
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.sidebar .sidebar-sub-headers {
|
||||
padding-left: 1rem;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
a.sidebar-link {
|
||||
// font-size: 0.95em;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
color: $textColor;
|
||||
border-left: 0.25rem solid transparent;
|
||||
padding: 0.35rem 1rem 0.35rem 1.25rem;
|
||||
line-height: 1.3;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
.sidebar-group & {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.sidebar-sub-headers & {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-left: none;
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<template>
|
||||
<ul class="sidebar-links" v-if="items.length">
|
||||
<li v-for="(item, i) in items" :key="i">
|
||||
<SidebarGroup
|
||||
v-if="item.type === 'group'"
|
||||
:item="item"
|
||||
:open="i === openGroupIndex"
|
||||
:collapsable="item.collapsable || item.collapsible"
|
||||
:depth="depth"
|
||||
@toggle="toggleGroup(i)"
|
||||
/>
|
||||
<SidebarLink v-else :sidebarDepth="sidebarDepth" :item="item" />
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarGroup from "@theme/components/SidebarGroup.vue";
|
||||
import SidebarLink from "@theme/components/SidebarLink.vue";
|
||||
import { isActive } from "../util";
|
||||
|
||||
export default {
|
||||
name: "SidebarLinks",
|
||||
|
||||
components: { SidebarGroup, SidebarLink },
|
||||
|
||||
props: [
|
||||
"items",
|
||||
"depth", // depth of current sidebar links
|
||||
"sidebarDepth" // depth of headers to be extracted
|
||||
],
|
||||
|
||||
data() {
|
||||
return {
|
||||
openGroupIndex: 0
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.refreshIndex();
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route() {
|
||||
this.refreshIndex();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
refreshIndex() {
|
||||
const index = resolveOpenGroupIndex(this.$route, this.items);
|
||||
if (index > -1) {
|
||||
this.openGroupIndex = index;
|
||||
}
|
||||
},
|
||||
|
||||
toggleGroup(index) {
|
||||
this.openGroupIndex = index === this.openGroupIndex ? -1 : index;
|
||||
},
|
||||
|
||||
isActive(page) {
|
||||
return isActive(this.$route, page.regularPath);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function resolveOpenGroupIndex(route, items) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
if (
|
||||
item.type === "group" &&
|
||||
item.children.some(c => c.type === "page" && isActive(route, c.path))
|
||||
) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<script>
|
||||
export default {
|
||||
functional: true,
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "tip"
|
||||
},
|
||||
text: String,
|
||||
vertical: {
|
||||
type: String,
|
||||
default: "top"
|
||||
}
|
||||
},
|
||||
render(h, { props, slots }) {
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
class: ["badge", props.type],
|
||||
style: {
|
||||
verticalAlign: props.vertical
|
||||
}
|
||||
},
|
||||
props.text || slots().default
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 3px;
|
||||
padding: 0 6px;
|
||||
color: white;
|
||||
background-color: #42b983;
|
||||
|
||||
&.tip, &.green {
|
||||
background-color: #42b983;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: #DA5961; // #f66
|
||||
}
|
||||
|
||||
&.warning, &.warn, &.yellow {
|
||||
background-color: darken(#ffe564, 35%);
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,52 +1,3 @@
|
|||
const path = require("path");
|
||||
|
||||
// Theme API.
|
||||
module.exports = (options, ctx) => ({
|
||||
alias() {
|
||||
const { themeConfig, siteConfig } = ctx;
|
||||
// resolve algolia
|
||||
const isAlgoliaSearch =
|
||||
themeConfig.algolia ||
|
||||
Object.keys((siteConfig.locales && themeConfig.locales) || {}).some(
|
||||
base => themeConfig.locales[base].algolia
|
||||
);
|
||||
return {
|
||||
"@AlgoliaSearchBox": isAlgoliaSearch
|
||||
? path.resolve(__dirname, "components/AlgoliaSearchBox.vue")
|
||||
: path.resolve(__dirname, "noopModule.js")
|
||||
};
|
||||
},
|
||||
|
||||
plugins: [
|
||||
["@vuepress/active-header-links", options.activeHeaderLinks],
|
||||
"@vuepress/search",
|
||||
"@vuepress/plugin-nprogress",
|
||||
[
|
||||
"container",
|
||||
{
|
||||
type: "tip",
|
||||
defaultTitle: {
|
||||
"/zh/": "提示"
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
"container",
|
||||
{
|
||||
type: "warning",
|
||||
defaultTitle: {
|
||||
"/zh/": "注意"
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
"container",
|
||||
{
|
||||
type: "danger",
|
||||
defaultTitle: {
|
||||
"/zh/": "警告"
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
});
|
||||
module.exports = {
|
||||
extend: '@vuepress/theme-default'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<div class="theme-container">
|
||||
<div class="theme-default-content">
|
||||
<h1>404</h1>
|
||||
<blockquote>{{ getMsg() }}</blockquote>
|
||||
<router-link to="/">Take me home.</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const msgs = [
|
||||
`There's nothing here.`,
|
||||
`How did we get here?`,
|
||||
`That's a Four-Oh-Four.`,
|
||||
`Looks like we've got some broken links.`
|
||||
];
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
getMsg() {
|
||||
return msgs[Math.floor(Math.random() * msgs.length)];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -15,7 +15,6 @@
|
|||
</Sidebar>
|
||||
|
||||
<Home v-if="$page.frontmatter.home" />
|
||||
|
||||
<Page v-else :sidebar-items="sidebarItems">
|
||||
<slot name="page-top" slot="top" />
|
||||
<slot name="page-bottom" slot="bottom" />
|
||||
|
|
@ -25,9 +24,9 @@
|
|||
|
||||
<script>
|
||||
import Home from "@theme/components/Home.vue";
|
||||
import Navbar from "@theme/components/Navbar.vue";
|
||||
import Page from "@theme/components/Page.vue";
|
||||
import Sidebar from "@theme/components/Sidebar.vue";
|
||||
import Navbar from "@parent-theme/components/Navbar.vue";
|
||||
import Page from "@parent-theme/components/Page.vue";
|
||||
import Sidebar from "@parent-theme/components/Sidebar.vue";
|
||||
import { resolveSidebarItems } from "../util";
|
||||
|
||||
export default {
|
||||
|
|
@ -35,7 +34,7 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
isSidebarOpen: false
|
||||
isSidebarOpen: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -79,11 +78,11 @@ export default {
|
|||
{
|
||||
"no-navbar": !this.shouldShowNavbar,
|
||||
"sidebar-open": this.isSidebarOpen,
|
||||
"no-sidebar": !this.shouldShowSidebar
|
||||
"no-sidebar": !this.shouldShowSidebar,
|
||||
},
|
||||
userPageClass
|
||||
userPageClass,
|
||||
];
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -101,7 +100,7 @@ export default {
|
|||
onTouchStart(e) {
|
||||
this.touchStart = {
|
||||
x: e.changedTouches[0].clientX,
|
||||
y: e.changedTouches[0].clientY
|
||||
y: e.changedTouches[0].clientY,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -115,7 +114,7 @@ export default {
|
|||
this.toggleSidebar(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export default {}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
{
|
||||
"name": "@vuepress/theme-default",
|
||||
"version": "1.0.2",
|
||||
"description": "Default theme for VuePress",
|
||||
"main": "index.js",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vuejs/vuepress.git",
|
||||
"directory": "packages/@vuepress/theme-default"
|
||||
},
|
||||
"keywords": [
|
||||
"documentation",
|
||||
"vue",
|
||||
"vuepress",
|
||||
"generator"
|
||||
],
|
||||
"author": "Evan You",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "ULIVZ",
|
||||
"email": "chl814@foxmail.com"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/vuejs/vuepress/issues"
|
||||
},
|
||||
"homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-default#readme",
|
||||
"dependencies": {
|
||||
"@vuepress/plugin-active-header-links": "^1.0.2",
|
||||
"@vuepress/plugin-nprogress": "^1.0.2",
|
||||
"@vuepress/plugin-search": "^1.0.2",
|
||||
"docsearch.js": "^2.5.2",
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"vuepress-plugin-container": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
@require './config'
|
||||
|
||||
.arrow
|
||||
display inline-block
|
||||
width 0
|
||||
height 0
|
||||
&.up
|
||||
border-left 4px solid transparent
|
||||
border-right 4px solid transparent
|
||||
border-bottom 6px solid $arrowBgColor
|
||||
&.down
|
||||
border-left 4px solid transparent
|
||||
border-right 4px solid transparent
|
||||
border-top 6px solid $arrowBgColor
|
||||
&.right
|
||||
border-top 4px solid transparent
|
||||
border-bottom 4px solid transparent
|
||||
border-left 6px solid $arrowBgColor
|
||||
&.left
|
||||
border-top 4px solid transparent
|
||||
border-bottom 4px solid transparent
|
||||
border-right 6px solid $arrowBgColor
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
{$contentClass}
|
||||
code
|
||||
color lighten($textColor, 20%)
|
||||
padding 0.25rem 0.5rem
|
||||
margin 0
|
||||
font-size 0.85em
|
||||
background-color rgba(27,31,35,0.05)
|
||||
border-radius 3px
|
||||
.token
|
||||
&.deleted
|
||||
color #EC5975
|
||||
&.inserted
|
||||
color $accentColor
|
||||
|
||||
{$contentClass}
|
||||
pre, pre[class*="language-"]
|
||||
line-height 1.4
|
||||
padding 1.25rem 1.5rem
|
||||
margin 0.85rem 0
|
||||
background-color $codeBgColor
|
||||
border-radius 6px
|
||||
overflow auto
|
||||
code
|
||||
color #fff
|
||||
padding 0
|
||||
background-color transparent
|
||||
border-radius 0
|
||||
|
||||
div[class*="language-"]
|
||||
position relative
|
||||
background-color $codeBgColor
|
||||
border-radius 6px
|
||||
.highlight-lines
|
||||
user-select none
|
||||
padding-top 1.3rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
line-height 1.4
|
||||
.highlighted
|
||||
background-color rgba(0, 0, 0, 66%)
|
||||
pre, pre[class*="language-"]
|
||||
background transparent
|
||||
position relative
|
||||
z-index 1
|
||||
&::before
|
||||
position absolute
|
||||
z-index 3
|
||||
top 0.8em
|
||||
right 1em
|
||||
font-size 0.75rem
|
||||
color rgba(255, 255, 255, 0.4)
|
||||
&:not(.line-numbers-mode)
|
||||
.line-numbers-wrapper
|
||||
display none
|
||||
&.line-numbers-mode
|
||||
.highlight-lines .highlighted
|
||||
position relative
|
||||
&:before
|
||||
content ' '
|
||||
position absolute
|
||||
z-index 3
|
||||
left 0
|
||||
top 0
|
||||
display block
|
||||
width $lineNumbersWrapperWidth
|
||||
height 100%
|
||||
background-color rgba(0, 0, 0, 66%)
|
||||
pre
|
||||
padding-left $lineNumbersWrapperWidth + 1 rem
|
||||
vertical-align middle
|
||||
.line-numbers-wrapper
|
||||
position absolute
|
||||
top 0
|
||||
width $lineNumbersWrapperWidth
|
||||
text-align center
|
||||
color rgba(255, 255, 255, 0.3)
|
||||
padding 1.25rem 0
|
||||
line-height 1.4
|
||||
br
|
||||
user-select none
|
||||
.line-number
|
||||
position relative
|
||||
z-index 4
|
||||
user-select none
|
||||
font-size 0.85em
|
||||
&::after
|
||||
content ''
|
||||
position absolute
|
||||
z-index 2
|
||||
top 0
|
||||
left 0
|
||||
width $lineNumbersWrapperWidth
|
||||
height 100%
|
||||
border-radius 6px 0 0 6px
|
||||
border-right 1px solid rgba(0, 0, 0, 66%)
|
||||
background-color $codeBgColor
|
||||
|
||||
|
||||
for lang in $codeLang
|
||||
div{'[class~="language-' + lang + '"]'}
|
||||
&:before
|
||||
content ('' + lang)
|
||||
|
||||
div[class~="language-javascript"]
|
||||
&:before
|
||||
content "js"
|
||||
|
||||
div[class~="language-typescript"]
|
||||
&:before
|
||||
content "ts"
|
||||
|
||||
div[class~="language-markup"]
|
||||
&:before
|
||||
content "html"
|
||||
|
||||
div[class~="language-markdown"]
|
||||
&:before
|
||||
content "md"
|
||||
|
||||
div[class~="language-json"]:before
|
||||
content "json"
|
||||
|
||||
div[class~="language-ruby"]:before
|
||||
content "rb"
|
||||
|
||||
div[class~="language-python"]:before
|
||||
content "py"
|
||||
|
||||
div[class~="language-bash"]:before
|
||||
content "sh"
|
||||
|
||||
div[class~="language-sh"]:before
|
||||
content "sh"
|
||||
|
||||
div[class~="language-php"]:before
|
||||
content "php"
|
||||
|
||||
@import '~prismjs/themes/prism-tomorrow.css'
|
||||
|
|
@ -1 +0,0 @@
|
|||
$contentClass = '.theme-default-content'
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
.custom-block
|
||||
.custom-block-title
|
||||
font-weight 600
|
||||
margin-bottom -0.4rem
|
||||
&.tip, &.warning, &.danger
|
||||
padding .1rem 1.5rem
|
||||
border-left-width .5rem
|
||||
border-left-style solid
|
||||
margin 1rem 0
|
||||
&.tip
|
||||
background-color #f3f5f7
|
||||
border-color #42b983
|
||||
&.warning
|
||||
background-color rgba(255,229,100,.3)
|
||||
border-color darken(#ffe564, 35%)
|
||||
color darken(#ffe564, 70%)
|
||||
.custom-block-title
|
||||
color darken(#ffe564, 50%)
|
||||
a
|
||||
color $textColor
|
||||
&.danger
|
||||
background-color #ffe6e6
|
||||
border-color darken(red, 20%)
|
||||
color darken(red, 70%)
|
||||
.custom-block-title
|
||||
color darken(red, 40%)
|
||||
a
|
||||
color $textColor
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,203 +0,0 @@
|
|||
@require './config'
|
||||
@require './code'
|
||||
@require './custom-blocks'
|
||||
@require './arrow'
|
||||
@require './wrapper'
|
||||
@require './toc'
|
||||
|
||||
html, body
|
||||
padding 0
|
||||
margin 0
|
||||
background-color #fff
|
||||
|
||||
body
|
||||
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
|
||||
-webkit-font-smoothing antialiased
|
||||
-moz-osx-font-smoothing grayscale
|
||||
font-size $fontSize
|
||||
color $textColor
|
||||
|
||||
.page
|
||||
padding-left $sidebarWidth
|
||||
|
||||
.navbar
|
||||
position fixed
|
||||
z-index 20
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
height $navbarHeight
|
||||
background-color $navbar-background
|
||||
box-sizing border-box
|
||||
border-bottom 1px solid $accentColor
|
||||
|
||||
.sidebar-mask
|
||||
position fixed
|
||||
z-index 9
|
||||
top 0
|
||||
left 0
|
||||
width 100vw
|
||||
height 100vh
|
||||
display none
|
||||
|
||||
.sidebar
|
||||
font-size 16px
|
||||
background-color $sidebarColor
|
||||
width $sidebarWidth
|
||||
position fixed
|
||||
z-index 10
|
||||
margin 0
|
||||
top $navbarHeight
|
||||
left 0
|
||||
bottom 0
|
||||
box-sizing border-box
|
||||
border-right 1px solid $borderColor
|
||||
overflow-y auto
|
||||
|
||||
{$contentClass}:not(.custom)
|
||||
@extend $wrapper
|
||||
> *:first-child
|
||||
margin-top $navbarHeight
|
||||
|
||||
a:hover
|
||||
text-decoration underline
|
||||
|
||||
p.demo
|
||||
padding 1rem 1.5rem
|
||||
border 1px solid #ddd
|
||||
border-radius 4px
|
||||
|
||||
img
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width 92%
|
||||
|
||||
{$contentClass}.custom
|
||||
padding 0
|
||||
margin 0
|
||||
|
||||
img
|
||||
max-width 100%
|
||||
|
||||
a
|
||||
font-weight 500
|
||||
color $accentColor
|
||||
text-decoration none
|
||||
|
||||
p a code
|
||||
font-weight 400
|
||||
color $accentColor
|
||||
|
||||
kbd
|
||||
background #eee
|
||||
border solid 0.15rem #ddd
|
||||
border-bottom solid 0.25rem #ddd
|
||||
border-radius 0.15rem
|
||||
padding 0 0.15em
|
||||
|
||||
blockquote
|
||||
font-size 1rem
|
||||
color #999;
|
||||
border-left .2rem solid #dfe2e5
|
||||
margin 1rem 0
|
||||
padding .25rem 0 .25rem 1rem
|
||||
|
||||
& > p
|
||||
margin 0
|
||||
|
||||
ul, ol
|
||||
padding-left 1.2em
|
||||
|
||||
strong
|
||||
font-weight 600
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-weight 600
|
||||
line-height 1.25
|
||||
|
||||
{$contentClass}:not(.custom) > &
|
||||
margin-top (0.5rem - $navbarHeight)
|
||||
padding-top ($navbarHeight + 1rem)
|
||||
margin-bottom 0
|
||||
|
||||
&:first-child
|
||||
margin-top -1.5rem
|
||||
margin-bottom 1rem
|
||||
|
||||
+ p, + pre, + .custom-block
|
||||
margin-top 2rem
|
||||
|
||||
&:hover .header-anchor
|
||||
opacity: 1
|
||||
|
||||
h1
|
||||
font-size 2.2rem
|
||||
|
||||
h2
|
||||
font-size 1.65rem
|
||||
padding-bottom .3rem
|
||||
border-bottom 1px solid $borderColor
|
||||
|
||||
h3
|
||||
font-size 1.35rem
|
||||
|
||||
a.header-anchor
|
||||
font-size 0.85em
|
||||
float left
|
||||
margin-left -0.87em
|
||||
padding-right 0.23em
|
||||
margin-top 0.125em
|
||||
opacity 0
|
||||
|
||||
&:hover
|
||||
text-decoration none
|
||||
|
||||
code, kbd, .line-number
|
||||
font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
|
||||
|
||||
p, ul, ol
|
||||
line-height 1.7
|
||||
|
||||
hr
|
||||
border 0
|
||||
border-top 1px solid $borderColor
|
||||
|
||||
table
|
||||
border-collapse collapse
|
||||
margin 1rem 0
|
||||
display: block
|
||||
overflow-x: auto
|
||||
|
||||
tr
|
||||
border-top 1px solid #dfe2e5
|
||||
|
||||
&:nth-child(2n)
|
||||
background-color #f6f8fa
|
||||
|
||||
th, td
|
||||
border 1px solid #dfe2e5
|
||||
padding .6em 1em
|
||||
|
||||
.theme-container
|
||||
&.sidebar-open
|
||||
.sidebar-mask
|
||||
display: block
|
||||
|
||||
&.no-navbar
|
||||
{$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
|
||||
margin-top 1.5rem
|
||||
padding-top 0
|
||||
|
||||
.sidebar
|
||||
top 0
|
||||
|
||||
|
||||
@media (min-width: ($MQMobile + 1px))
|
||||
.theme-container.no-sidebar
|
||||
.sidebar
|
||||
display none
|
||||
|
||||
.page
|
||||
padding-left 0
|
||||
|
||||
@require 'mobile.styl'
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
@require './config'
|
||||
|
||||
$mobileSidebarWidth = $sidebarWidth * 0.82
|
||||
|
||||
// narrow desktop / iPad
|
||||
@media (max-width: $MQNarrow)
|
||||
.sidebar
|
||||
font-size 15px
|
||||
width $mobileSidebarWidth
|
||||
.page
|
||||
padding-left $mobileSidebarWidth
|
||||
|
||||
// wide mobile
|
||||
@media (max-width: $MQMobile)
|
||||
.sidebar
|
||||
top 0
|
||||
padding-top $navbarHeight
|
||||
transform translateX(-100%)
|
||||
transition transform .2s ease
|
||||
.page
|
||||
padding-left 0
|
||||
.theme-container
|
||||
&.sidebar-open
|
||||
.sidebar
|
||||
transform translateX(0)
|
||||
&.no-navbar
|
||||
.sidebar
|
||||
padding-top: 0
|
||||
|
||||
// narrow mobile
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
h1
|
||||
font-size 1.9rem
|
||||
{$contentClass}
|
||||
div[class*="language-"]
|
||||
margin 0.85rem -1.5rem
|
||||
border-radius 0
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
// colors
|
||||
$mainColor= #6E43E8
|
||||
|
||||
|
||||
$sidebarColor=#FAFAFC
|
||||
$accentColor = #6E43E8
|
||||
$textColor =rgb(51, 51, 51)
|
||||
$headerColor=rgb(17, 17, 17)
|
||||
$borderColor = #e8e8fb
|
||||
$codeBgColor = #282c34
|
||||
$arrowBgColor = #ccc
|
||||
$navbar-background = #6E43E8;
|
||||
$navbar-text-color = #ffffff;
|
||||
$section-color=#f7f7f7;
|
||||
$fontSize = 16px
|
||||
|
||||
// layout
|
||||
$navbarHeight = 5.2rem
|
||||
$navbar-vertical-padding = 1.4rem;
|
||||
$navbar-horizontal-padding = 1.4rem;
|
||||
|
||||
$sidebarWidth = 16rem
|
||||
$contentWidth = 960px
|
||||
|
||||
// // responsive breakpoints
|
||||
$MQNarrow = 959px
|
||||
$MQMobile = 719px
|
||||
$MQMobileNarrow = 419px
|
||||
|
||||
.icon.outbound
|
||||
display none !important
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.table-of-contents
|
||||
.badge
|
||||
vertical-align middle
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
$wrapper
|
||||
max-width $contentWidth
|
||||
margin 0 auto
|
||||
padding 2rem 2.5rem
|
||||
@media (max-width: $MQNarrow)
|
||||
padding 2rem
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
padding 1.5rem
|
||||
|
||||
|
|
@ -1,119 +1,117 @@
|
|||
export const hashRE = /#.*$/;
|
||||
export const extRE = /\.(md|html)$/;
|
||||
export const endingSlashRE = /\/$/;
|
||||
export const outboundRE = /^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;
|
||||
export const hashRE = /#.*$/
|
||||
export const extRE = /\.(md|html)$/
|
||||
export const endingSlashRE = /\/$/
|
||||
export const outboundRE = /^[a-z]+:/i
|
||||
|
||||
export function normalize(path) {
|
||||
export function normalize (path) {
|
||||
return decodeURI(path)
|
||||
.replace(hashRE, "")
|
||||
.replace(extRE, "");
|
||||
.replace(hashRE, '')
|
||||
.replace(extRE, '')
|
||||
}
|
||||
|
||||
export function getHash(path) {
|
||||
const match = path.match(hashRE);
|
||||
export function getHash (path) {
|
||||
const match = path.match(hashRE)
|
||||
if (match) {
|
||||
return match[0];
|
||||
return match[0]
|
||||
}
|
||||
}
|
||||
|
||||
export function isExternal(path) {
|
||||
return outboundRE.test(path);
|
||||
export function isExternal (path) {
|
||||
return outboundRE.test(path)
|
||||
}
|
||||
|
||||
export function isMailto(path) {
|
||||
return /^mailto:/.test(path);
|
||||
export function isMailto (path) {
|
||||
return /^mailto:/.test(path)
|
||||
}
|
||||
|
||||
export function isTel(path) {
|
||||
return /^tel:/.test(path);
|
||||
export function isTel (path) {
|
||||
return /^tel:/.test(path)
|
||||
}
|
||||
|
||||
export function ensureExt(path) {
|
||||
export function ensureExt (path) {
|
||||
if (isExternal(path)) {
|
||||
return path;
|
||||
return path
|
||||
}
|
||||
const hashMatch = path.match(hashRE);
|
||||
const hash = hashMatch ? hashMatch[0] : "";
|
||||
const normalized = normalize(path);
|
||||
const hashMatch = path.match(hashRE)
|
||||
const hash = hashMatch ? hashMatch[0] : ''
|
||||
const normalized = normalize(path)
|
||||
|
||||
if (endingSlashRE.test(normalized)) {
|
||||
return path;
|
||||
return path
|
||||
}
|
||||
return normalized + ".html" + hash;
|
||||
return normalized + '.html' + hash
|
||||
}
|
||||
|
||||
export function isActive(route, path) {
|
||||
const routeHash = route.hash;
|
||||
const linkHash = getHash(path);
|
||||
export function isActive (route, path) {
|
||||
const routeHash = decodeURIComponent(route.hash)
|
||||
const linkHash = getHash(path)
|
||||
if (linkHash && routeHash !== linkHash) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
const routePath = normalize(route.path);
|
||||
const pagePath = normalize(path);
|
||||
return routePath === pagePath;
|
||||
const routePath = normalize(route.path)
|
||||
const pagePath = normalize(path)
|
||||
return routePath === pagePath
|
||||
}
|
||||
|
||||
export function resolvePage(pages, rawPath, base) {
|
||||
export function resolvePage (pages, rawPath, base) {
|
||||
if (isExternal(rawPath)) {
|
||||
return {
|
||||
type: "external",
|
||||
type: 'external',
|
||||
path: rawPath
|
||||
};
|
||||
}
|
||||
}
|
||||
if (base) {
|
||||
rawPath = resolvePath(rawPath, base);
|
||||
rawPath = resolvePath(rawPath, base)
|
||||
}
|
||||
const path = normalize(rawPath);
|
||||
const path = normalize(rawPath)
|
||||
for (let i = 0; i < pages.length; i++) {
|
||||
if (normalize(pages[i].regularPath) === path) {
|
||||
return Object.assign({}, pages[i], {
|
||||
type: "page",
|
||||
type: 'page',
|
||||
path: ensureExt(pages[i].path)
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
console.error(
|
||||
`[vuepress] No matching page found for sidebar item "${rawPath}"`
|
||||
);
|
||||
return {};
|
||||
console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
|
||||
return {}
|
||||
}
|
||||
|
||||
function resolvePath(relative, base, append) {
|
||||
const firstChar = relative.charAt(0);
|
||||
if (firstChar === "/") {
|
||||
return relative;
|
||||
function resolvePath (relative, base, append) {
|
||||
const firstChar = relative.charAt(0)
|
||||
if (firstChar === '/') {
|
||||
return relative
|
||||
}
|
||||
|
||||
if (firstChar === "?" || firstChar === "#") {
|
||||
return base + relative;
|
||||
if (firstChar === '?' || firstChar === '#') {
|
||||
return base + relative
|
||||
}
|
||||
|
||||
const stack = base.split("/");
|
||||
const stack = base.split('/')
|
||||
|
||||
// remove trailing segment if:
|
||||
// - not appending
|
||||
// - appending to trailing slash (last segment is empty)
|
||||
if (!append || !stack[stack.length - 1]) {
|
||||
stack.pop();
|
||||
stack.pop()
|
||||
}
|
||||
|
||||
// resolve relative path
|
||||
const segments = relative.replace(/^\//, "").split("/");
|
||||
const segments = relative.replace(/^\//, '').split('/')
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
const segment = segments[i];
|
||||
if (segment === "..") {
|
||||
stack.pop();
|
||||
} else if (segment !== ".") {
|
||||
stack.push(segment);
|
||||
const segment = segments[i]
|
||||
if (segment === '..') {
|
||||
stack.pop()
|
||||
} else if (segment !== '.') {
|
||||
stack.push(segment)
|
||||
}
|
||||
}
|
||||
|
||||
// ensure leading slash
|
||||
if (stack[0] !== "") {
|
||||
stack.unshift("");
|
||||
if (stack[0] !== '') {
|
||||
stack.unshift('')
|
||||
}
|
||||
|
||||
return stack.join("/");
|
||||
return stack.join('/')
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -123,26 +121,26 @@ function resolvePath(relative, base, append) {
|
|||
* @param { string } localePath
|
||||
* @returns { SidebarGroup }
|
||||
*/
|
||||
export function resolveSidebarItems(page, regularPath, site, localePath) {
|
||||
const { pages, themeConfig } = site;
|
||||
export function resolveSidebarItems (page, regularPath, site, localePath) {
|
||||
const { pages, themeConfig } = site
|
||||
|
||||
const localeConfig =
|
||||
localePath && themeConfig.locales
|
||||
? themeConfig.locales[localePath] || themeConfig
|
||||
: themeConfig;
|
||||
const localeConfig = localePath && themeConfig.locales
|
||||
? themeConfig.locales[localePath] || themeConfig
|
||||
: themeConfig
|
||||
|
||||
const pageSidebarConfig =
|
||||
page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar;
|
||||
if (pageSidebarConfig === "auto") {
|
||||
return resolveHeaders(page);
|
||||
const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
|
||||
if (pageSidebarConfig === 'auto') {
|
||||
return resolveHeaders(page)
|
||||
}
|
||||
|
||||
const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar;
|
||||
const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
|
||||
if (!sidebarConfig) {
|
||||
return [];
|
||||
return []
|
||||
} else {
|
||||
const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig);
|
||||
return config ? config.map(item => resolveItem(item, pages, base)) : [];
|
||||
const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
|
||||
return config
|
||||
? config.map(item => resolveItem(item, pages, base))
|
||||
: []
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,43 +148,41 @@ export function resolveSidebarItems(page, regularPath, site, localePath) {
|
|||
* @param { Page } page
|
||||
* @returns { SidebarGroup }
|
||||
*/
|
||||
function resolveHeaders(page) {
|
||||
const headers = groupHeaders(page.headers || []);
|
||||
return [
|
||||
{
|
||||
type: "group",
|
||||
collapsable: false,
|
||||
title: page.title,
|
||||
path: null,
|
||||
children: headers.map(h => ({
|
||||
type: "auto",
|
||||
title: h.title,
|
||||
basePath: page.path,
|
||||
path: page.path + "#" + h.slug,
|
||||
children: h.children || []
|
||||
}))
|
||||
}
|
||||
];
|
||||
function resolveHeaders (page) {
|
||||
const headers = groupHeaders(page.headers || [])
|
||||
return [{
|
||||
type: 'group',
|
||||
collapsable: false,
|
||||
title: page.title,
|
||||
path: null,
|
||||
children: headers.map(h => ({
|
||||
type: 'auto',
|
||||
title: h.title,
|
||||
basePath: page.path,
|
||||
path: page.path + '#' + h.slug,
|
||||
children: h.children || []
|
||||
}))
|
||||
}]
|
||||
}
|
||||
|
||||
export function groupHeaders(headers) {
|
||||
export function groupHeaders (headers) {
|
||||
// group h3s under h2
|
||||
headers = headers.map(h => Object.assign({}, h));
|
||||
let lastH2;
|
||||
headers = headers.map(h => Object.assign({}, h))
|
||||
let lastH2
|
||||
headers.forEach(h => {
|
||||
if (h.level === 2) {
|
||||
lastH2 = h;
|
||||
lastH2 = h
|
||||
} else if (lastH2) {
|
||||
(lastH2.children || (lastH2.children = [])).push(h);
|
||||
(lastH2.children || (lastH2.children = [])).push(h)
|
||||
}
|
||||
});
|
||||
return headers.filter(h => h.level === 2);
|
||||
})
|
||||
return headers.filter(h => h.level === 2)
|
||||
}
|
||||
|
||||
export function resolveNavLinkItem(linkItem) {
|
||||
export function resolveNavLinkItem (linkItem) {
|
||||
return Object.assign(linkItem, {
|
||||
type: linkItem.items && linkItem.items.length ? "links" : "link"
|
||||
});
|
||||
type: linkItem.items && linkItem.items.length ? 'links' : 'link'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -194,54 +190,51 @@ export function resolveNavLinkItem(linkItem) {
|
|||
* @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
|
||||
* @returns { base: string, config: SidebarConfig }
|
||||
*/
|
||||
export function resolveMatchingConfig(regularPath, config) {
|
||||
export function resolveMatchingConfig (regularPath, config) {
|
||||
if (Array.isArray(config)) {
|
||||
return {
|
||||
base: "/",
|
||||
base: '/',
|
||||
config: config
|
||||
};
|
||||
}
|
||||
}
|
||||
for (const base in config) {
|
||||
if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
|
||||
return {
|
||||
base,
|
||||
config: config[base]
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return {};
|
||||
return {}
|
||||
}
|
||||
|
||||
function ensureEndingSlash(path) {
|
||||
return /(\.html|\/)$/.test(path) ? path : path + "/";
|
||||
function ensureEndingSlash (path) {
|
||||
return /(\.html|\/)$/.test(path)
|
||||
? path
|
||||
: path + '/'
|
||||
}
|
||||
|
||||
function resolveItem(item, pages, base, groupDepth = 1) {
|
||||
if (typeof item === "string") {
|
||||
return resolvePage(pages, item, base);
|
||||
function resolveItem (item, pages, base, groupDepth = 1) {
|
||||
if (typeof item === 'string') {
|
||||
return resolvePage(pages, item, base)
|
||||
} else if (Array.isArray(item)) {
|
||||
return Object.assign(resolvePage(pages, item[0], base), {
|
||||
title: item[1]
|
||||
});
|
||||
})
|
||||
} else {
|
||||
if (groupDepth > 3) {
|
||||
console.error("[vuepress] detected a too deep nested sidebar group.");
|
||||
}
|
||||
const children = item.children || [];
|
||||
const children = item.children || []
|
||||
if (children.length === 0 && item.path) {
|
||||
return Object.assign(resolvePage(pages, item.path, base), {
|
||||
title: item.title
|
||||
});
|
||||
})
|
||||
}
|
||||
return {
|
||||
type: "group",
|
||||
type: 'group',
|
||||
path: item.path,
|
||||
title: item.title,
|
||||
sidebarDepth: item.sidebarDepth,
|
||||
children: children.map(child =>
|
||||
resolveItem(child, pages, base, groupDepth + 1)
|
||||
),
|
||||
children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
|
||||
collapsable: item.collapsable !== false
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue