⚡ Add Feedback component to layout (#563)

.github/workflows/deploy.yml

@@ -6,6 +6,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: '--max_old_space_size=4096'
     steps:
       - uses: actions/checkout@v2
       - name: Build and deploy

docs/.vuepress/components/Feedback.vue

@@ -0,0 +1,53 @@
+<template>
+	<div style="max-width: 740px; margin: 0 auto;">
+		<div style="margin-bottom: 2px;">Was this page helpful?</div>
+		<div v-if="!submitted" style="max-width: 100px; font-size:24px;">
+			<font-awesome-icon class="btn" icon="thumbs-up" v-on:click="submitFeedback(1)" />
+			<font-awesome-icon class="btn" icon="thumbs-down" v-on:click="submitFeedback(-1)" />
+		</div>
+		<div v-else>
+			<p>{{message}}</p>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			submitted: false,
+			message: '',
+			url: 'https://internal.users.n8n.cloud/webhook/d1b83b83-e584-45fe-a28c-a12a4272e472'
+		}
+	},
+	methods: {
+		submitFeedback: async function(value) {
+			if(!this.submitted){
+				const path = this.$page.path;
+				fetch(`${this.url}?feedback=${value}&path=${path}`, {
+					method: 'GET',
+				})
+				.then(res => {
+					this.submitted = true;
+					return res.json()
+				})
+				.then(response => {
+					if(response.message) {
+						this.message = response.message;
+					}
+				})
+				.catch(err => console.log(err));
+			}
+		}
+	}
+}
+</script>
+
+<style scoped>
+.btn {
+	cursor: pointer;
+	color: #bfbfbf;
+	padding-right: 16px;
+	padding-top: 4px;
+}
+</style>

docs/.vuepress/theme-test/Layout.vue

@@ -1,6 +0,0 @@
-<template>
-	<div class="theme-container">
-		Read time: {{$page.readingTime.text}}
-		<Content/>
-	</div>
-</template>

docs/.vuepress/theme/Layout.vue

@@ -0,0 +1,14 @@
+<template>
+  <Layout>
+    <template slot="page-bottom">
+			<Feedback />
+    </template>
+  </Layout>
+</template>
+
+<script>
+import Layout from "@vuepress/theme-default/layouts/Layout.vue";
+export default {
+  components: { Layout },
+};
+</script>

docs/.vuepress/theme/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+	extend: '@vuepress/theme-default',
+}