mirror of
https://github.com/pomerium/pomerium.git
synced 2025-05-09 23:27:43 +02:00
docs: add version dropdown
Signed-off-by: Bobby DeSimone <bobbydesimone@gmail.com>
This commit is contained in:
Bobby DeSimone
parent
1e4496c2b9
commit
7cef246d53
8 changed files with 173 additions and 165 deletions
|
|
@ -24,7 +24,17 @@ module.exports = {
|
|||
nav: [
|
||||
{ text: "Documentation", link: "/docs/" },
|
||||
{ text: "Recipes", link: "/recipes/" },
|
||||
{ text: "Community", link: "/community/" }
|
||||
{ text: "Community", link: "/community/" },
|
||||
{
|
||||
text: "v0.3.1",
|
||||
ariaLabel: "Version menu",
|
||||
items: [
|
||||
{ text: "🚧Dev", link: "https://master.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" }
|
||||
]
|
||||
}
|
||||
],
|
||||
algolia: {
|
||||
apiKey: "1653e881f3a6c17d3ad37f4d4c428e20",
|
||||
|
|
|
|||
|
|
@ -1,24 +1,12 @@
|
|||
<template>
|
||||
<div
|
||||
class="dropdown-wrapper"
|
||||
:class="{ open }"
|
||||
>
|
||||
<a
|
||||
class="dropdown-title"
|
||||
@click="toggle"
|
||||
>
|
||||
<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>
|
||||
<span class="arrow" :class="open ? 'down' : 'right'"></span>
|
||||
</a>
|
||||
|
||||
<DropdownTransition>
|
||||
<ul
|
||||
class="nav-dropdown"
|
||||
v-show="open"
|
||||
>
|
||||
<ul class="nav-dropdown" v-show="open">
|
||||
<li
|
||||
class="dropdown-item"
|
||||
:key="subItem.link || index"
|
||||
|
|
@ -26,23 +14,17 @@
|
|||
>
|
||||
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
|
||||
|
||||
<ul
|
||||
class="dropdown-subitem-wrapper"
|
||||
v-if="subItem.type === 'links'"
|
||||
>
|
||||
<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"/>
|
||||
<NavLink :item="childSubItem" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<NavLink
|
||||
v-else
|
||||
:item="subItem"
|
||||
/>
|
||||
<NavLink v-else :item="subItem" />
|
||||
</li>
|
||||
</ul>
|
||||
</DropdownTransition>
|
||||
|
|
@ -50,16 +32,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import NavLink from '@theme/components/NavLink.vue'
|
||||
import DropdownTransition from '@theme/components/DropdownTransition.vue'
|
||||
import NavLink from "@theme/components/NavLink.vue";
|
||||
import DropdownTransition from "@theme/components/DropdownTransition.vue";
|
||||
|
||||
export default {
|
||||
components: { NavLink, DropdownTransition },
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -69,111 +51,158 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
toggle () {
|
||||
this.open = !this.open
|
||||
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
|
||||
&: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
|
||||
.dropdown-wrapper {
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.dropdown-wrapper
|
||||
&.open .dropdown-title
|
||||
margin-bottom 0.5rem
|
||||
.nav-dropdown
|
||||
transition height .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
|
||||
.dropdown-title {
|
||||
display: block;
|
||||
|
||||
@media (min-width: $MQMobile)
|
||||
.dropdown-wrapper
|
||||
height 1.8rem
|
||||
&:hover .nav-dropdown
|
||||
&: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
|
||||
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
|
||||
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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@
|
|||
<DropdownLink v-if="item.type === 'links'" :item="item" />
|
||||
<NavLink v-else :item="item" />
|
||||
</div>
|
||||
|
||||
<!-- repo link -->
|
||||
<a v-if="repoLink" :href="repoLink" class="repo-link" target="_blank" rel="noopener noreferrer">
|
||||
{{ repoLabel }}
|
||||
<OutboundLink />
|
||||
</a>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
|
@ -65,31 +59,6 @@ export default {
|
|||
items: (link.items || []).map(resolveNavLinkItem)
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
repoLink() {
|
||||
const { repo } = this.$site.themeConfig;
|
||||
if (repo) {
|
||||
return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`;
|
||||
}
|
||||
},
|
||||
|
||||
repoLabel() {
|
||||
if (!this.repoLink) return;
|
||||
if (this.$site.themeConfig.repoLabel) {
|
||||
return this.$site.themeConfig.repoLabel;
|
||||
}
|
||||
|
||||
const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0];
|
||||
const platforms = ["GitHub", "GitLab", "Bitbucket"];
|
||||
for (let i = 0; i < platforms.length; i++) {
|
||||
const platform = platforms[i];
|
||||
if (new RegExp(platform, "i").test(repoHost)) {
|
||||
return platform;
|
||||
}
|
||||
}
|
||||
|
||||
return "Source";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
version: "3"
|
||||
services:
|
||||
pomerium:
|
||||
image: pomerium/pomerium:v0.3.0
|
||||
image: pomerium/pomerium:master
|
||||
environment:
|
||||
# Generate new secret keys. e.g. `head -c32 /dev/urandom | base64`
|
||||
- COOKIE_SECRET=V2JBZk0zWGtsL29UcFUvWjVDWWQ2UHExNXJ0b2VhcDI=
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ services:
|
|||
- /var/run/docker.sock:/tmp/docker.sock:ro
|
||||
|
||||
pomerium-authenticate:
|
||||
image: pomerium/pomerium:v0.3.0 # or `build: .` to build from source
|
||||
image: pomerium/pomerium:master # or `build: .` to build from source
|
||||
restart: always
|
||||
environment:
|
||||
- SERVICES=authenticate
|
||||
|
|
@ -42,7 +42,7 @@ services:
|
|||
- 443
|
||||
|
||||
pomerium-proxy:
|
||||
image: pomerium/pomerium:v0.3.0 # or `build: .` to build from source
|
||||
image: pomerium/pomerium:master # or `build: .` to build from source
|
||||
restart: always
|
||||
environment:
|
||||
- SERVICES=proxy
|
||||
|
|
@ -68,7 +68,7 @@ services:
|
|||
- 443
|
||||
|
||||
pomerium-authorize:
|
||||
image: pomerium/pomerium:v0.3.0 # or `build: .` to build from source
|
||||
image: pomerium/pomerium:master # or `build: .` to build from source
|
||||
restart: always
|
||||
environment:
|
||||
- SERVICES=authorize
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ spec:
|
|||
app: pomerium-authenticate
|
||||
spec:
|
||||
containers:
|
||||
- image: pomerium/pomerium:v0.3.0
|
||||
- image: pomerium/pomerium:master
|
||||
name: pomerium-authenticate
|
||||
args:
|
||||
- --config=/etc/pomerium/config.yaml
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ spec:
|
|||
app: pomerium-authorize
|
||||
spec:
|
||||
containers:
|
||||
- image: pomerium/pomerium:v0.3.0
|
||||
- image: pomerium/pomerium:master
|
||||
name: pomerium-authorize
|
||||
args:
|
||||
- --config=/etc/pomerium/config.yaml
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ spec:
|
|||
app: pomerium-proxy
|
||||
spec:
|
||||
containers:
|
||||
- image: pomerium/pomerium:v0.3.0
|
||||
- image: pomerium/pomerium:master
|
||||
name: pomerium-proxy
|
||||
args:
|
||||
- --config=/etc/pomerium/config.yaml
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue