feat: ContentStatus

docs/.vuepress/config.js

@@ -21,6 +21,7 @@ module.exports = {
   themeConfig: {
     // edit links
     repo: 'ipfs/ipfs-docs-v2',
+    docsRepo: 'ipfs/ipfs-docs-v2',
     docsDir: 'docs',
     docsBranch: 'master',
     editLinks: true,

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

@@ -0,0 +1,22 @@
+<template>
+  <main>
+    <h1>This content is still preparing for liftoff!</h1>
+    <img src="../assets/pencil-rocket.svg" />
+    {{ $page }}
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'ContentStatus',
+  props: {
+    test: String
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>

docs/.vuepress/theme/styles/index.styl

@@ -1,11 +1,9 @@
+@import 'util';
+@import 'layout-center';
 @import 'sidebar';
 @import 'video';
 
 #app {
-	.theme-container {
-		max-width: 1080px;
-	}
-
 	.navbar .logo {
 		margin-right: 0.5rem;
 	}
@@ -28,4 +26,12 @@
 			}
 		}
 	}
+}
+
+:root {
+	--accent-color: $accentColor;
+	--text-color: $textColor;
+	--border-color: $borderColor;
+	--code-bg-color: $codeBgColor;
+	--highlight-color: $highlightColor;
 }

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

@@ -0,0 +1,49 @@
+// draft center layout
+.theme-container, .navbar {
+	@extend .max-w-screen-xl;
+	@extend .mx-auto;
+	@extend .relative;
+}
+
+@media (min-width: $MQNarrow) {
+	.sidebar {
+		position: fixed;
+		left: inherit;
+		border-right: none;
+	}
+
+	.navbar {
+		position: sticky;
+	}
+
+	// center links/search
+	header.navbar .links {
+		right: inherit;
+		left: 21rem;
+
+		.nav-links {
+			margin-left: auto;
+		}
+	}
+
+	div.search-box {
+		margin-right: 0;
+
+		input, .suggestions {
+			width: 30em;
+			border-radius: 3px;
+		}
+	}
+
+	footer.page-edit {
+		margin: inherit;
+	}
+}
+
+.theme-default-content:not(.custom) {
+	margin: inherit;
+
+	& > h1 {
+		padding-top: 1em;
+	}
+}

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

@@ -1,14 +1,21 @@
-// showing default values
+// colors
 $accentColor = #5db5be;
 $textColor = #000000cc;
+$sidebarTextColor = #5d646f;
 $borderColor = #eaecef;
 $codeBgColor = #0e2233;
+$arrowBgColor = #ccc;
+$badgeTipColor = #42b983;
+$badgeWarningColor = darken(#ffe564, 35%);
+$badgeErrorColor = #DA5961;
 $highlightColor = #ffffa0;
-
-:root {
-	--accent-color: $accentColor;
-	--text-color: $textColor;
-	--border-color: $borderColor;
-	--code-bg-color: $codeBgColor;
-	--highlight-color: $highlightColor;
-}
+// layout
+$navbarHeight = 3.6rem;
+$sidebarWidth = 20rem;
+$contentWidth = 740px;
+// responsive breakpoints
+$MQNarrow = 959px;
+$MQMobile = 719px;
+$MQMobileNarrow = 419px;
+$maxWidth = 1280px;
+$contentWidth = 740px;

docs/.vuepress/theme/styles/sidebar.styl

@@ -1,7 +1,12 @@
-// custom sidebar overrides
-#app {
-	.sidebar-group a.sidebar-link {
-		padding-left: 1.25rem;
+li > a.sidebar-link {
+	padding-left: 1.25rem;
+	color: $sidebarTextColor;
+	font-weight: 500;
+}
+
+.sidebar {
+	.sidebar-heading {
+		font-weight: 700 !important;
 	}
 
 	.sidebar-group .arrow {
@@ -10,35 +15,42 @@
 
 	.sidebar-group.is-sub-group a.sidebar-link {
 		padding-left: 0.25rem;
+		margin-bottom: 0.2rem;
 	}
 
 	.sidebar-group.is-sub-group > .sidebar-group-items {
-		padding-left: 1.25rem;
+		padding-left: 1.25rem !important;
 	}
 
 	.sidebar-group.is-sub-group {
 		margin-bottom: 0.5rem;
 	}
 
+	.sidebar-group .sidebar-sub-headers {
+		padding-left: 0.5rem;
+	}
+
 	.sidebar-links.sidebar-group-items li:last-child .sidebar-group.is-sub-group {
 		margin-bottom: 0;
 	}
 
 	.sidebar-group.is-sub-group > .sidebar-heading {
-		padding-left: 1.25rem;
+		padding-left: 1.25rem !important;
 	}
 
 	.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
 		opacity: 1;
 		font-weight: bold;
 		text-transform: uppercase;
-		font-size: 0.875em;
+		font-size: 0.8rem;
+		letter-spacing: 0.025em;
 		line-height: 2em;
+		color: lighten($sidebarTextColor, 50%);
 	}
+}
 
-	.icon.outbound {
-		padding-left: 0.2rem;
-	}
+.icon.outbound {
+	padding-left: 0.2rem;
 }
 
 // sidebar scrollbar style
@@ -55,4 +67,4 @@
 
 .sidebar::-webkit-scrollbar-thumb:hover, .sidebar:hover::-webkit-scrollbar-thumb {
 	background: $borderColor;
-}
+}

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

@@ -0,0 +1,23 @@
+// width
+.max-w-screen-xl {
+	max-width: $maxWidth !important;
+}
+
+// position
+.relative {
+	position: relative;
+}
+
+.fixed {
+	position: fixed;
+}
+
+.float-l {
+	float: left;
+}
+
+// margins
+.mx-auto {
+	margin-left: auto;
+	margin-right: auto;
+}

docs/install/README.md

@@ -1,5 +1,5 @@
 ---
-title: Install IPFS
+title: Install IPFS ✨
 sidebarDepth: 0
 ---