Upgrade to VuePress 1.0

docs/.vuepress/components/HomePage.vue → docs/.vuepress/components/Home.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="home">
-    <div class="hero">
-      <img id="hero-image" v-if="data.heroImage" :src="$withBase(data.heroImage)" alt="hero">
+  <main class="home" aria-labelledby="main-title">
+    <header class="hero">
+      <img v-if="data.heroImage" :src="$withBase(data.heroImage)" alt="hero">
 
-      <h1 id="title">{{ data.heroText || $title }}</h1>
+      <h1 id="main-title">{{ data.heroText || $title }}</h1>
 
-      <p id="description" class="description" v-html="data.tagline || $description"></p>
+      <p class="description" v-html="data.tagline || $description"></p>
 
       <p>
         <StarButton/>
@@ -17,23 +17,22 @@
         Latest release:
         <strong>{{ $version }}</strong>
       </p>
-    </div>
+    </header>
 
     <div id="home-main">
-      <Content custom class="home-content"/>
+      <Content class="theme-default-content custom home-content"/>
       <HomeSideBar/>
     </div>
 
     <div class="footer" v-if="data.footer">{{ data.footer }}</div>
-  </div>
+  </main>
 </template>
 
 <script>
-import NavLink from "@theme/NavLink.vue";
+import Home from "@theme/components/Home.vue";
 
 export default {
-  components: { NavLink },
-
+  extends: Home, // Get default styles
   computed: {
     data() {
       return this.$page.frontmatter;
@@ -45,21 +44,17 @@ export default {
 <style lang="stylus" scoped>
 @import './config.styl';
 
-.home {
-  padding-top: 0 !important;
-}
-
-#hero-image {
+.hero img {
   margin-top: 1em;
   margin-bottom: 0;
 }
 
-#title {
+#main-title {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-#description {
+.description {
   margin-top: 0.5rem;
 }
 
@@ -71,10 +66,6 @@ export default {
 }
 
 @media (max-width: $MQMobile) {
-  .home {
-    padding: 0 !important;
-  }
-
   .home-content {
     padding: 0 2rem;
   }

docs/.vuepress/components/HomeLayout.vue

@@ -0,0 +1,9 @@
+<script>
+import Layout from "@theme/layouts/Layout.vue";
+import Home from "./Home.vue";
+
+export default {
+  extends: Layout,
+  components: { Home }
+};
+</script>

docs/.vuepress/components/Jumbotron.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="wrapper header">
+  <section class="header">
     <h1>{{ title }}</h1>
     <p v-if="description">{{ description }}</p>
   </section>
@@ -18,7 +18,6 @@ export default {
 };
 </script>
 
-
 <style lang="stylus" scoped>
 h1 {
   padding-bottom: 0;

docs/.vuepress/components/Post.vue

@@ -1,24 +1,30 @@
 <template>
-  <Page :sidebarItems="[]">
-    <template slot="top">
-      <p class="wrapper">
+  <Layout>
+    <template slot="page-top">
+      <p class="navbar-fix page-width">
         <router-link to="/news/">← Back to posts</router-link>
       </p>
 
       <PostShare :page="$page"/>
 
       <PostJumbotron :post="$page.frontmatter"/>
 
-      <div class="wrapper">
+      <div class="page-width">
         <hr>
       </div>
     </template>
-  </Page>
+  </Layout>
 </template>
 
 <script>
-import Page from "@theme/Page";
+import Layout from "@theme/layouts/Layout.vue";
 import PostShare from "./PostShare";
 
-export default { components: { Page, PostShare } };
+export default { components: { Layout, PostShare } };
 </script>
+
+<style scoped>
+.navbar-fix {
+  padding: 4em 2rem 0 2rem;
+}
+</style>

docs/.vuepress/components/PostJumbotron.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="wrapper">
+  <section class="page-width">
     <h1>{{ post.title }}</h1>
     <PostMeta :post="post"/>
     <p v-if="post.description">{{ post.description }}</p>

docs/.vuepress/components/b-action-link.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import NavLink from "@theme/NavLink.vue";
+import NavLink from "@theme/components/NavLink.vue";
 export default {
   components: { NavLink },
   props: {

docs/.vuepress/config.js

@@ -10,7 +10,7 @@ module.exports = {
   description: project.description,
   lastUpdated: true,
   head,
-  serviceWorker: true,
+  plugins: ["@vuepress/pwa"],
   themeConfig: {
     repo: project.repo,
     docsDir: "docs",
@@ -19,7 +19,11 @@ module.exports = {
     editLinkText: "Edit this page on GitHub",
     sidebarDepth: 1,
     lastUpdated: true,
-    serviceWorker: { updatePopup: true },
+    plugins: {
+      "@vuepress/pwa": {
+        updatePopup: true
+      }
+    },
     algolia:
       process.env.NODE_ENV === "production"
         ? {

docs/.vuepress/style.styl → docs/.vuepress/styles/index.styl

@@ -1,12 +1,13 @@
-@require './override.styl';
+@require './palette.styl';
 
-.wrapper {
-  padding: 1em 2rem 0 2rem;
+
+.page-width {
   max-width: 740px;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.content:not(.custom) > *:first-child {
+.theme-default-content:not(.custom) > *:first-child {
   margin-top: 0 !important;
 }
 

docs/README.md

@@ -1,6 +1,6 @@
 ---
-layout: HomePage
 home: true
+layout: HomeLayout
 heroImage: /social-image.png
 actionText: Get Started →
 actionLink: /guide/

docs/guide/tutorial.md

@@ -61,7 +61,7 @@ $ tree
 
 4. Edit `requirements.txt` to add Chatterbot there:
 
-```txt
+```
 bocadillo >= 0.14
 chatterbot
 pytz  # Required by Chatterbot

docs/how-to/heroku.md

@@ -25,15 +25,15 @@ The [Procfile](https://devcenter.heroku.com/articles/procfile) is a text file lo
 
 As described in [Deployment](/discussions/deployment.md#running-with-gunicorn), the following should fit most use cases:
 
-```txt
+```
 web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker app:app
 ```
 
 ### `requirements.txt`
 
 Heroku recognizes a Python app by the existence of `requirements.txt` file in the root directory (see [Python Dependencies via Pip](https://devcenter.heroku.com/articles/python-pip)). Here's an example of what yours may look like:
 
-```txt
+```
 bocadillo
 gunicorn
 ```
@@ -42,7 +42,7 @@ gunicorn
 
 Place this file in the root directory with a specific Python version. [Heroku will look at it](https://devcenter.heroku.com/articles/python-runtimes) to determine which Python version to use.
 
-```txt
+```
 python-3.6.8
 ```