feat: content status with related resources

docs/.vuepress/config.js

@@ -19,6 +19,8 @@ module.exports = {
     }
   },
   themeConfig: {
+    betaTestFormUrl:
+      'https://docs.google.com/forms/d/1LVaD1B2uyW6Ff0jfU_iQ5mCeyQcHfyQO6BDD99XAgK0/viewform',
     // edit links
     repo: 'ipfs/ipfs-docs-v2',
     docsRepo: 'ipfs/ipfs-docs-v2',

docs/.vuepress/nav/en.js

@@ -1 +1,6 @@
-module.exports = []
+module.exports = [
+  {
+    text: 'Suggest a Feature',
+    link: 'https://ipfs.canny.io/docs-features'
+  }
+]

docs/.vuepress/theme/global-components/ContentStatus.vue

@@ -1,22 +1,139 @@
 <template>
-  <main>
-    <h1>This content is still preparing for liftoff!</h1>
-    <img src="../assets/pencil-rocket.svg" />
-    {{ $page }}
+  <main class="content-status">
+    <div>
+      <div class="illustration">
+        <img src="../assets/pencil-rocket.svg" />
+      </div>
+      <h2>{{ title }}</h2>
+      <div v-if="issueNum" class="content-status-status">
+        <a
+          target="_blank"
+          :href="`https://github.com/${repo}/issue/${issueNum}`"
+          >Check the status</a
+        >
+        of this page on GitHub.
+      </div>
+      <div class="section content-status-vote">
+        <h3>Is this topic important to you?</h3>
+        <button>Yes</button>
+        <button>Not really</button>
+      </div>
+      <div class="section content-status-info">
+        <h3>Give us a hand</h3>
+        <ul>
+          <li v-if="issueNum">
+            <a :href="`https://github.com/${repo}/issue/${issueNum}`"
+              >Help write this page</a
+            >
+          </li>
+          <li v-if="$site.themeConfig.betaTestFormUrl">
+            <a :href="$site.themeConfig.betaTestFormUrl" target="_blank"
+              >Sign up to be a beta tester</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="content-status-info" style="clear: both">
+      <div v-if="related" class="section content-other-resources">
+        <h3>Other resources to try</h3>
+        <ul>
+          <li v-for="(item, title) in related">
+            <a :href="item" :alt="title" target="_blank">{{ title }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
   </main>
 </template>
 
 <script>
 export default {
-  name: 'ContentStatus',
+  computed: {
+    issueNum: function() {
+      return this.$frontmatter && this.$frontmatter.issueNum
+    },
+    repo: function() {
+      return this.$site && this.$site.themeConfig && this.$site.themeConfig.repo
+    },
+    related: function() {
+      return this.$frontmatter.related
+    }
+  },
   props: {
-    test: String
+    title: {
+      type: String,
+      default: 'This content is still preparing for liftoff!'
+    }
   }
 }
 </script>
 
-<style scoped>
-h1 {
-  color: red;
+<style lang="stylus" scoped>
+h2, h3 {
+  border-bottom: none;
+  margin: 0.5rem 0; // TODO: make global
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.content-status-vote {
+  margin-top: 3rem;
+}
+
+.illustration {
+  width: 20%;
+  float: right;
+}
+
+// TODO: make global
+.section {
+  margin-bottom: 3rem;
+}
+
+// TODO: make global
+.content-status-vote {
+  button {
+    font-weight: bold;
+    padding: 10px 15px;
+    background-color: darken($accentColor, 30%);
+    border: none;
+    font-size: 1em;
+    color: white;
+    margin-right: 10px;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.3s;
+    min-width: 45%;
+
+    &:hover {
+      background-color: $accentColor;
+    }
+
+    outline: none;
+  }
+}
+
+@media (min-width: $MQNarrow) {
+  .illustration {
+    width: 40%;
+    float: right;
+  }
+
+  .content-status-vote {
+    button {
+      min-width: auto;
+    }
+  }
 }
 </style>

docs/.vuepress/theme/styles/layout-center.styl

@@ -5,17 +5,25 @@
 	@extend .relative;
 }
 
+.navbar {
+	position: sticky;
+}
+
+.theme-default-content:not(.custom) {
+	margin: inherit;
+
+	& > h1 {
+		padding-top: 1em;
+	}
+}
+
 @media (min-width: $MQNarrow) {
 	.sidebar {
 		position: fixed;
 		left: inherit;
 		border-right: none;
 	}
 
-	.navbar {
-		position: sticky;
-	}
-
 	// center links/search
 	header.navbar .links {
 		right: inherit;
@@ -38,12 +46,4 @@
 	footer.page-edit {
 		margin: inherit;
 	}
-}
-
-.theme-default-content:not(.custom) {
-	margin: inherit;
-
-	& > h1 {
-		padding-top: 1em;
-	}
 }

docs/.vuepress/theme/styles/palette.styl

@@ -18,4 +18,5 @@ $MQNarrow = 959px;
 $MQMobile = 719px;
 $MQMobileNarrow = 419px;
 $maxWidth = 1280px;
-$contentWidth = 740px;
+$contentWidth = 740px;
+$gutterWidth = 1rem;

docs/.vuepress/theme/styles/util.styl

@@ -16,6 +16,10 @@
 	float: left;
 }
 
+.float-r {
+	float: right;
+}
+
 // margins
 .mx-auto {
 	margin-left: auto;

docs/essentials/bitswap.md

@@ -1,8 +1,14 @@
 ---
 title: Bitswap
 sidebarDepth: 0
+issueNum: 333
+related:
+  an interesting article: https://ipfs.io
+  another interesting article: https://ipfs.io
 ---
 
 # Bitswap
 
-> This content is still preparing for liftoff. In the meantime, check out [this video from IPFS Camp 2019](https://www.youtube.com/watch?v=fLUq0RkiTBA) on how Bitswap fits into the overall lifecycle of data in IPFS!
+<ContentStatus />
+
+In the meantime, check out [this video from IPFS Camp 2019](https://www.youtube.com/watch?v=fLUq0RkiTBA) on how Bitswap fits into the overall lifecycle of data in IPFS!

package.json

@@ -16,10 +16,10 @@
     "markdown-it-footnote": "^3.0.2",
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-video": "^0.6.3",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "stylus-supremacy": "^2.14.0",
     "vuepress": "^1.2.0",
-    "vuepress-plugin-clean-urls": "^1.1.0"
+    "vuepress-plugin-clean-urls": "^1.1.1"
   },
   "prettier": {
     "arrowParens": "avoid",