docs: add version dropdown

Signed-off-by: Bobby DeSimone <bobbydesimone@gmail.com>

docs/.vuepress/config.js

@@ -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",

docs/.vuepress/theme/components/DropdownLink.vue

@@ -1,24 +1,12 @@
 <template>
-  <div
+  <div class="dropdown-wrapper" :class="{ open }">
-    class="dropdown-wrapper"
+    <a class="dropdown-title" @click="toggle">
-    :class="{ open }"
-  >
-    <a
-      class="dropdown-title"
-      @click="toggle"
-    >
       <span class="title">{{ item.text }}</span>
-      <span
+      <span class="arrow" :class="open ? 'down' : 'right'"></span>
-        class="arrow"
-        :class="open ? 'down' : 'right'"
-      ></span>
     </a>
 
     <DropdownTransition>
-      <ul
+      <ul class="nav-dropdown" v-show="open">
-        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
+          <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
-            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
+          <NavLink v-else :item="subItem" />
-            v-else
-            :item="subItem"
-          />
         </li>
       </ul>
     </DropdownTransition>
@@ -50,16 +32,16 @@
 </template>
 
 <script>
-import NavLink from '@theme/components/NavLink.vue'
+import NavLink from "@theme/components/NavLink.vue";
-import DropdownTransition from '@theme/components/DropdownTransition.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 () {
+    toggle() {
-      this.open = !this.open
+      this.open = !this.open;
     }
   }
-}
+};
 </script>
 
 <style lang="stylus">
-.dropdown-wrapper
+.dropdown-wrapper {
-  cursor pointer
+  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
 
-@media (max-width: $MQMobile)
+  .dropdown-title {
-  .dropdown-wrapper
+    display: block;
-    &.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
 
-@media (min-width: $MQMobile)
+    &:hover {
-  .dropdown-wrapper
+      border-color: transparent;
-    height 1.8rem
+    }
-    &:hover .nav-dropdown
+
+    .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
+      display: block !important;
-    .dropdown-title .arrow
+    }
+
+    .dropdown-title .arrow {
       // make the arrow always down at desktop
-      border-left 4px solid transparent
+      border-left: 4px solid transparent;
-      border-right 4px solid transparent
+      border-right: 4px solid transparent;
-      border-top 6px solid $arrowBgColor
+      border-top: 6px solid $arrowBgColor;
-      border-bottom 0
+      border-bottom: 0;
-    .nav-dropdown
+    }
-      display none
+
+    .nav-dropdown {
+      display: none;
       // Avoid height shaked by clicking
-      height auto !important
+      height: auto !important;
-      box-sizing border-box;
+      box-sizing: border-box;
-      max-height calc(100vh - 2.7rem)
+      max-height: calc(100vh - 2.7rem);
-      overflow-y auto
+      overflow-y: auto;
-      position absolute
+      position: absolute;
-      top 100%
+      top: 100%;
-      right 0
+      right: 0;
-      background-color #fff
+      background-color: #fff;
-      padding 0.6rem 0
+      padding: 0.6rem 0;
-      border 1px solid #ddd
+      border: 1px solid #ddd;
-      border-bottom-color #ccc
+      border-bottom-color: #ccc;
-      text-align left
+      text-align: left;
-      border-radius 0.25rem
+      border-radius: 0.25rem;
-      white-space nowrap
+      white-space: nowrap;
-      margin 0
+      margin: 0;
+    }
+  }
+}
 </style>

docs/.vuepress/theme/components/NavLinks.vue

@@ -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";
     }
   }
 };

docs/docs/reference/examples/docker/basic.docker-compose.yml

@@ -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=

docs/docs/reference/examples/docker/nginx.docker-compose.yml

@@ -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

docs/docs/reference/examples/kubernetes/pomerium-authenticate.yml

@@ -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

docs/docs/reference/examples/kubernetes/pomerium-authorize.yml

@@ -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

docs/docs/reference/examples/kubernetes/pomerium-proxy.yml

@@ -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