From f64ee4845638afcba4e58dae6e0126e70460324e Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 7 Jul 2019 11:00:46 +0530
Subject: [PATCH 1/4] Create sidebar component

---
 src/components/Sidebar.vue | 130 +++++++++++++++++++++++++++++++++++++
 src/layouts/Docs.vue       | 117 ---------------------------------
 2 files changed, 130 insertions(+), 117 deletions(-)
 create mode 100644 src/components/Sidebar.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 00000000..bee35192
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,130 @@
+<template>
+	<div>
+		<div v-if="!sidebar" class="sidebar">
+			<template v-for="section in menu" class="sidebar__menu">
+				<h6 :key="`section-${section.section}`" class="sidebar__menu-heading">
+					{{ section.section }}
+				</h6>
+				<template v-for="item in section.topics">
+					<g-link
+						:to="`/docs/${item.slug}`"
+						:key="`${section.section}-item-${item.slug}`"
+						class="sidebar__menu-item"
+						@click.native="toggleSidebar()"
+					>
+						{{ item.title }}
+					</g-link>
+				</template>
+			</template>
+		</div>
+		<div @click="toggleSidebar()" class="sidebar__toggle">
+			<left-arrow v-if="sidebar" />
+			<right-arrow v-else />
+		</div>
+	</div>
+</template>
+
+<script>
+import LeftArrow from "../assets/images/chevrons-left.svg";
+import RightArrow from "../assets/images/chevrons-right.svg";
+
+export default {
+	name: "SidebarMenu",
+	data() {
+		return {
+			toggle: false
+		}
+	},
+	props: {
+		menu: Array
+	},
+	components: {
+		LeftArrow,
+		RightArrow
+	},
+	computed: {
+		sidebar() {
+			return this.toggle && window.innerWidth <= 768;
+		}
+	},
+	methods: {
+		toggleSidebar() {
+			this.toggle = !this.toggle;
+		}
+	}
+};
+</script>
+
+<style lang='sass'>
+.sidebar
+	position: sticky
+	border-right: 1px solid rgba(#474C55, .3)
+	max-width: 300px
+	overflow-y: scroll
+	top: 69px
+	padding:
+		top: 1rem
+		left: 2rem
+		right: 2rem
+		bottom: 2rem
+	height: calc(100vh - 69px)
+	z-index: 5
+	background-color: white
+
+	&__menu
+		&-heading
+			color: rgba(#474C55, .5)
+			font-weight: 600
+			margin-top: 2rem
+			margin-bottom: .5rem
+			border-top: 1px solid rgba(#474C55, .2)
+			padding-top: 2rem
+			text-transform: uppercase
+
+			&:first-child
+				border: none
+				margin-top: 0
+
+		&-item
+			display: flex
+			flex-direction: column
+			padding: 3px 10px
+			margin-bottom: 5px
+			color: rgba(#474C55, .8)
+			font-weight: 500
+			cursor: pointer
+
+			&:hover
+				color: #00ADB5
+
+		&-item.active--exact
+			background-color: rgba(#00ADB5, .1)
+			color: #00ADB5
+			border-radius: 1rem
+
+	&__toggle
+		position: fixed
+		background-color: #00ADB5
+		bottom: 4.225rem
+		cursor: pointer
+		right: 1.5rem
+		display: flex
+		border-radius: 50px
+		padding: .6rem
+
+		svg
+			stroke: white
+			width: 25px
+			height: 25px
+
+@media (max-width: 768px)
+	.sidebar
+		position: fixed
+		padding:
+			left: 1rem
+			right: 1rem
+
+@media (min-width: 768px)
+	.sidebar__toggle
+		display: none
+</style>
diff --git a/src/layouts/Docs.vue b/src/layouts/Docs.vue
index 5c3c0e5f..45bea210 100644
--- a/src/layouts/Docs.vue
+++ b/src/layouts/Docs.vue
@@ -2,25 +2,6 @@
 	<Layout :headerSize="1" :footer="false">
 		<div class="docs">
 			<div class="docs__container">
-				<div :class="{ 'docs__sidebar-none': !sidebar }" class="docs__sidebar">
-					<template v-for="section in menu" class="sidebar__menu">
-						<h6
-							:key="`section-${section.section}`"
-							class="sidebar__menu-heading"
-						>
-							{{ section.section }}
-						</h6>
-						<template v-for="item in section.topics">
-							<g-link
-								:to="`/docs/${item.slug}`"
-								:key="`${section.section}-item-${item.slug}`"
-								class="sidebar__menu-item"
-							>
-								{{ item.title }}
-							</g-link>
-						</template>
-					</template>
-				</div>
 				<div class="docs__content">
 					<div class="docs__content-container">
 						<PostLayout
@@ -32,10 +13,6 @@
 						</PostLayout>
 					</div>
 				</div>
-				<div @click="toggleSidebar()" class="docs__sidebar-toggle">
-					<LeftArrow v-if="sidebar" />
-					<RightArrow v-else />
-				</div>
 			</div>
 		</div>
 	</Layout>
@@ -45,22 +22,13 @@
 import Header from "../components/Header";
 import PostLayout from "./Post";
 import Navbar from "./partials/Navbar";
-import LeftArrow from "../assets/images/chevrons-left.svg";
-import RightArrow from "../assets/images/chevrons-right.svg";
 
 export default {
 	name: "DocsLayout",
-	data() {
-		return {
-			sidebarToggleable: false
-		};
-	},
 	components: {
 		Header,
 		PostLayout,
 		Navbar,
-		LeftArrow,
-		RightArrow
 	},
 	props: {
 		title: String,
@@ -68,19 +36,11 @@ export default {
 		titleBorder: Boolean,
 		menu: Array
 	},
-	computed: {
-		sidebar() {
-			return this.sidebarToggleable && window.innerWidth <= 768;
-		}
-	},
 	methods: {
-		toggleSidebar() {
-			this.sidebarToggleable = !this.sidebarToggleable;
 		},
 		linkToDocs(link) {
 			this.sidebarToggleable = false;
 			this.$router.push(link);
-		}
 	}
 };
 </script>
@@ -91,36 +51,6 @@ export default {
 		display: flex
 		flex-direction: row
 
-	&__sidebar
-		position: sticky
-		border-right: 1px solid rgba(#474C55, .3)
-		max-width: 300px
-		overflow-y: scroll
-		top: 69px
-		padding:
-			top: 1rem
-			left: 2rem
-			right: 2rem
-			bottom: 2rem
-		height: calc(100vh - 69px)
-		z-index: 5
-		background-color: white
-
-		&-toggle
-			position: fixed
-			background-color: #00ADB5
-			bottom: 4.225rem
-			cursor: pointer
-			right: 1.5rem
-			display: flex
-			border-radius: 50px
-			padding: .6rem
-
-			svg
-				stroke: white
-				width: 25px
-				height: 25px
-
 	&__content
 		padding-top: 2rem
 		padding-bottom: 2rem
@@ -132,51 +62,4 @@ export default {
 			margin-right: auto
 			padding-left: 20px
 			padding-right: 20px
-
-.sidebar
-	&__menu
-		&-heading
-			color: rgba(#474C55, .5)
-			font-weight: 600
-			margin-top: 2rem
-			margin-bottom: .5rem
-			border-top: 1px solid rgba(#474C55, .2)
-			padding-top: 2rem
-			text-transform: uppercase
-
-			&:first-child
-				border: none
-				margin-top: 0
-
-		&-item
-			display: flex
-			flex-direction: column
-			padding: 3px 10px
-			margin-bottom: 5px
-			color: rgba(#474C55, .8)
-			font-weight: 500
-			cursor: pointer
-
-			&:hover
-				color: #00ADB5
-
-		&-item.active--exact
-			background-color: rgba(#00ADB5, .1)
-			color: #00ADB5
-			border-radius: 1rem
-
-@media (max-width: 768px)
-	.docs
-		&__sidebar
-			position: fixed
-			padding:
-				left: 1rem
-				right: 1rem
-
-			&-none
-				display: none
-
-@media (min-width: 768px)
-	.docs__sidebar-toggle
-		display: none
 </style>

From 18e360ae0fe26fe34af2fa122246bbb0768526c2 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 7 Jul 2019 11:02:15 +0530
Subject: [PATCH 2/4] Move docs layout to template

---
 src/layouts/Docs.vue      | 65 ---------------------------------------
 src/templates/DocPage.vue | 36 ++++++++++++++--------
 2 files changed, 24 insertions(+), 77 deletions(-)
 delete mode 100644 src/layouts/Docs.vue

diff --git a/src/layouts/Docs.vue b/src/layouts/Docs.vue
deleted file mode 100644
index 45bea210..00000000
--- a/src/layouts/Docs.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-	<Layout :headerSize="1" :footer="false">
-		<div class="docs">
-			<div class="docs__container">
-				<div class="docs__content">
-					<div class="docs__content-container">
-						<PostLayout
-							:title="title"
-							:description="description"
-							:titleBorder="titleBorder"
-						>
-							<slot />
-						</PostLayout>
-					</div>
-				</div>
-			</div>
-		</div>
-	</Layout>
-</template>
-
-<script>
-import Header from "../components/Header";
-import PostLayout from "./Post";
-import Navbar from "./partials/Navbar";
-
-export default {
-	name: "DocsLayout",
-	components: {
-		Header,
-		PostLayout,
-		Navbar,
-	},
-	props: {
-		title: String,
-		description: String,
-		titleBorder: Boolean,
-		menu: Array
-	},
-	methods: {
-		},
-		linkToDocs(link) {
-			this.sidebarToggleable = false;
-			this.$router.push(link);
-	}
-};
-</script>
-
-<style lang='sass'>
-.docs
-	&__container
-		display: flex
-		flex-direction: row
-
-	&__content
-		padding-top: 2rem
-		padding-bottom: 2rem
-		flex: 1
-
-		&-container
-			max-width: 760px
-			margin-left: auto
-			margin-right: auto
-			padding-left: 20px
-			padding-right: 20px
-</style>
diff --git a/src/templates/DocPage.vue b/src/templates/DocPage.vue
index a55f8769..5cfcd0a9 100644
--- a/src/templates/DocPage.vue
+++ b/src/templates/DocPage.vue
@@ -1,20 +1,21 @@
 <template>
-	<DocsLayout
-		:menu="docsmenu"
-		:title="$page.doc.title"
-		:description="$page.doc.description"
-		:titleBorder="$page.doc.titleBorder"
-	>
-		<div v-html="$page.doc.content"></div>
-	</DocsLayout>
+	<layout :headerSize="1" :footer="false">
+		<div style="display: flex; flex-direction: row;">
+			<sidebar :menu="docsmenu" />
+			<div class="docs__content">
+				<div class="docs__content-container">
+				</div>
+			</div>
+		</div>
+	</layout>
 </template>
 
 <script>
-import DocsLayout from "../layouts/Docs";
-import DocsMenu from "../../data/docs-menu.json"
+import DocsMenu from "../../data/docs-menu.json";
+import Sidebar from "../components/Sidebar";
 
 export default {
-	name: "Docs",
+	name: "DocsPage",
 	metaInfo() {
 		return {
 			title: this.$page.doc.title,
@@ -28,7 +29,7 @@ export default {
 		};
 	},
 	components: {
-		DocsLayout
+		Sidebar,
 	},
 	computed: {
 		docsmenu() {
@@ -50,5 +51,16 @@ query DocPage ($path: String!) {
 </page-query>
 
 <style lang='sass'>
+.docs
+	&__content
+		padding-top: 2rem
+		padding-bottom: 2rem
+		flex: 1
 
+		&-container
+			max-width: 760px
+			margin-left: auto
+			margin-right: auto
+			padding-left: 20px
+			padding-right: 20px
 </style>

From fd3ee0d092cad5e467879250608a5cda650226e4 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 7 Jul 2019 11:02:22 +0530
Subject: [PATCH 3/4] Use v-html attribute to attach content

---
 src/layouts/Post.vue      | 9 ++++-----
 src/templates/DocPage.vue | 8 ++++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/layouts/Post.vue b/src/layouts/Post.vue
index fffd3cac..9a30920f 100644
--- a/src/layouts/Post.vue
+++ b/src/layouts/Post.vue
@@ -1,13 +1,11 @@
 <template>
 	<div class="post">
 		<div class="post__meta">
-			<h1 class="post__heading">{{ title }}</h1>
-			<div class="post__description">{{ description }}</div>
+			<h1 v-html="title" class="post__heading" />
+			<div v-html="description" class="post__description" />
 			<hr v-if="titleBorder" class="post__titleBorder" />
 		</div>
-		<div class="post__content">
-			<slot />
-		</div>
+		<div v-html="content" class="post__content" />
 		<a :href="editLink" v-if="editOnGH" target="_blank" class="edit-link">
 			<GitHubIcon />
 			<span>Edit this page on GitHub</span>
@@ -38,6 +36,7 @@ export default {
 		title: String,
 		description: String,
 		titleBorder: Boolean,
+		content: String,
 		editOnGH: {
 			type: Boolean,
 			default: true
diff --git a/src/templates/DocPage.vue b/src/templates/DocPage.vue
index 5cfcd0a9..4db7e868 100644
--- a/src/templates/DocPage.vue
+++ b/src/templates/DocPage.vue
@@ -4,6 +4,12 @@
 			<sidebar :menu="docsmenu" />
 			<div class="docs__content">
 				<div class="docs__content-container">
+					<post-layout
+						:title="$page.doc.title"
+						:description="$page.doc.description"
+						:titleBorder="$page.doc.titleBorder"
+						:content="$page.doc.content"
+					/>
 				</div>
 			</div>
 		</div>
@@ -13,6 +19,7 @@
 <script>
 import DocsMenu from "../../data/docs-menu.json";
 import Sidebar from "../components/Sidebar";
+import PostLayout from "../layouts/Post";
 
 export default {
 	name: "DocsPage",
@@ -30,6 +37,7 @@ export default {
 	},
 	components: {
 		Sidebar,
+		PostLayout
 	},
 	computed: {
 		docsmenu() {

From e2dc1510e2f9505a46f4fd64d2b69441f8e4306a Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 7 Jul 2019 12:17:14 +0530
Subject: [PATCH 4/4] Pass sidebar type props

---
 src/components/Sidebar.vue | 3 ++-
 src/templates/DocPage.vue  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index bee35192..a973326e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -7,7 +7,7 @@
 				</h6>
 				<template v-for="item in section.topics">
 					<g-link
-						:to="`/docs/${item.slug}`"
+						:to="`/${type}/${item.slug}`"
 						:key="`${section.section}-item-${item.slug}`"
 						class="sidebar__menu-item"
 						@click.native="toggleSidebar()"
@@ -36,6 +36,7 @@ export default {
 		}
 	},
 	props: {
+		type: String,
 		menu: Array
 	},
 	components: {
diff --git a/src/templates/DocPage.vue b/src/templates/DocPage.vue
index 4db7e868..ad4199fd 100644
--- a/src/templates/DocPage.vue
+++ b/src/templates/DocPage.vue
@@ -1,7 +1,7 @@
 <template>
 	<layout :headerSize="1" :footer="false">
 		<div style="display: flex; flex-direction: row;">
-			<sidebar :menu="docsmenu" />
+			<sidebar type="docs" :menu="docsmenu" />
 			<div class="docs__content">
 				<div class="docs__content-container">
 					<post-layout