From 6dd56637f8d84ddbd3e405f240fbf9da2dbe4e19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 24 Jun 2021 09:32:07 +0200
Subject: [PATCH] :zap: Add Feedback component to layout (#563)

---
 .github/workflows/deploy.yml           |  2 +
 docs/.vuepress/components/Feedback.vue | 53 ++++++++++++++++++++++++++
 docs/.vuepress/theme-test/Layout.vue   |  6 ---
 docs/.vuepress/theme/Layout.vue        | 14 +++++++
 docs/.vuepress/theme/index.js          |  3 ++
 5 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 docs/.vuepress/components/Feedback.vue
 delete mode 100644 docs/.vuepress/theme-test/Layout.vue
 create mode 100644 docs/.vuepress/theme/Layout.vue
 create mode 100644 docs/.vuepress/theme/index.js

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 65db325b8..d9ab0d4a5 100644
--- a/.github/workflows/deploy.yml
+++ b/.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
diff --git a/docs/.vuepress/components/Feedback.vue b/docs/.vuepress/components/Feedback.vue
new file mode 100644
index 000000000..f36126b9f
--- /dev/null
+++ b/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>
diff --git a/docs/.vuepress/theme-test/Layout.vue b/docs/.vuepress/theme-test/Layout.vue
deleted file mode 100644
index defd2b3df..000000000
--- a/docs/.vuepress/theme-test/Layout.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-	<div class="theme-container">
-		Read time: {{$page.readingTime.text}}
-		<Content/>
-	</div>
-</template>
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
new file mode 100644
index 000000000..29a06af86
--- /dev/null
+++ b/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>
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
new file mode 100644
index 000000000..48fc5efee
--- /dev/null
+++ b/docs/.vuepress/theme/index.js
@@ -0,0 +1,3 @@
+module.exports = {
+	extend: '@vuepress/theme-default',
+}