feature (#170): add temporary beta banner (#175)

* feature (#170): add temporary beta banner

* feature (#170): improve phrasing

Co-authored-by: Natalia Tepluhina <[email protected]>

* fix (#170): update home page with beta banner

* docs (#170): improve phrasing

Co-authored-by: Natalia Tepluhina <[email protected]>

Author: bencodezen

src/.vuepress/components/BetaBanner.vue

@@ -0,0 +1,14 @@
+<script>
+export default {}
+</script>
+
+<template>
+  <aside class="beta-banner">
+    <p>
+      ⚠️ Beta Version: Docs are still under development and are subject to
+      change. ⚠️
+    </p>
+  </aside>
+</template>
+
+<style></style>

src/.vuepress/styles/index.styl

@@ -125,6 +125,21 @@
   }
 }
 
+.beta-banner
+  position fixed
+  z-index 20
+  top $navbarHeight
+  left 0
+  right 0
+  height 3rem
+  display flex
+  align-items center
+  justify-content center
+  background-color #fffedb
+  box-sizing border-box
+  border-bottom 1px solid $borderColor
+  font-weight bold
+
 .scrimba,
 .vueschool {
   background-color: #e7ecf3;

src/.vuepress/theme/components/Home.vue

@@ -144,7 +144,7 @@ export default {
 @import '@theme/styles/_settings.scss';
 
 .hero {
-  padding: 100px 40px 30px;
+  padding: calc(100px + 3rem) 40px 30px; // add $betaBannerHeight
 
   .inner {
     max-width: 1260px;

src/.vuepress/theme/components/Sidebar.vue

@@ -4,10 +4,7 @@
 
     <slot name="top" />
 
-    <SidebarLinks
-      :depth="0"
-      :items="items"
-    />
+    <SidebarLinks :depth="0" :items="items" />
     <slot name="bottom" />
   </aside>
 </template>
@@ -45,7 +42,7 @@ export default {
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
   & > .sidebar-links
-    padding 1.5rem 0
+    padding calc(1.5rem + 3rem) 0 // add $betaBannerHeight
     & > li > a.sidebar-link
       font-size 1.1em
       line-height 1.7

src/.vuepress/theme/layouts/Layout.vue

@@ -5,20 +5,12 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
-    <Navbar
-      v-if="shouldShowNavbar"
-      @toggle-sidebar="toggleSidebar"
-    />
-
-    <div
-      class="sidebar-mask"
-      @click="toggleSidebar(false)"
-    />
-
-    <Sidebar
-      :items="sidebarItems"
-      @toggle-sidebar="toggleSidebar"
-    >
+    <BetaBanner />
+    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
+
+    <div class="sidebar-mask" @click="toggleSidebar(false)" />
+
+    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
       <template #top>
         <slot name="sidebar-top" />
       </template>
@@ -29,10 +21,7 @@
 
     <Home v-if="$page.frontmatter.home" />
 
-    <Page
-      v-else
-      :sidebar-items="sidebarItems"
-    >
+    <Page v-else :sidebar-items="sidebarItems">
       <template #top>
         <slot name="page-top" />
       </template>
@@ -60,40 +49,38 @@ export default {
     Navbar
   },
 
-  data () {
+  data() {
     return {
       isSidebarOpen: false
     }
   },
 
   computed: {
-    shouldShowNavbar () {
+    shouldShowNavbar() {
       const { themeConfig } = this.$site
       const { frontmatter } = this.$page
-      if (
-        frontmatter.navbar === false
-        || themeConfig.navbar === false) {
+      if (frontmatter.navbar === false || themeConfig.navbar === false) {
         return false
       }
       return (
-        this.$title
-        || themeConfig.logo
-        || themeConfig.repo
-        || themeConfig.nav
-        || this.$themeLocaleConfig.nav
+        this.$title ||
+        themeConfig.logo ||
+        themeConfig.repo ||
+        themeConfig.nav ||
+        this.$themeLocaleConfig.nav
       )
     },
 
-    shouldShowSidebar () {
+    shouldShowSidebar() {
       const { frontmatter } = this.$page
       return (
-        !frontmatter.home
-        && frontmatter.sidebar !== false
-        && this.sidebarItems.length
+        !frontmatter.home &&
+        frontmatter.sidebar !== false &&
+        this.sidebarItems.length
       )
     },
 
-    sidebarItems () {
+    sidebarItems() {
       return resolveSidebarItems(
         this.$page,
         this.$page.regularPath,
@@ -102,7 +89,7 @@ export default {
       )
     },
 
-    pageClasses () {
+    pageClasses() {
       const userPageClass = this.$page.frontmatter.pageClass
       return [
         {
@@ -115,27 +102,27 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
   },
 
   methods: {
-    toggleSidebar (to) {
+    toggleSidebar(to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
       this.$emit('toggle-sidebar', this.isSidebarOpen)
     },
 
     // side swipe
-    onTouchStart (e) {
+    onTouchStart(e) {
       this.touchStart = {
         x: e.changedTouches[0].clientX,
         y: e.changedTouches[0].clientY
       }
     },
 
-    onTouchEnd (e) {
+    onTouchEnd(e) {
       const dx = e.changedTouches[0].clientX - this.touchStart.x
       const dy = e.changedTouches[0].clientY - this.touchStart.y
       if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {

src/.vuepress/theme/styles/config.styl

@@ -1,2 +1,3 @@
 $contentClass = '.theme-default-content'
 $fontPrimary = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
+$betaBannerHeight = 3rem

src/.vuepress/theme/styles/wrapper.styl

@@ -1,9 +1,9 @@
 $wrapper
   max-width $contentWidth
   margin 0 auto
-  padding 2rem 2.5rem
+  padding calc(2rem + 3rem) 2.5rem // added $betaBannerHeight
   @media (max-width: $MQNarrow)
-    padding 2rem
+    padding calc(2rem + 3rem) 2rem // added $betaBannerHeight
   @media (max-width: $MQMobileNarrow)
-    padding 1.5rem
+    padding calc(2rem + 3rem) 1.5rem // added $betaBannerHeight