From 6d1238417048c4849d92850d2f922b86ea07527a Mon Sep 17 00:00:00 2001
From: Dennis Theisen <dennis@shopify.com>
Date: Tue, 6 Apr 2021 02:36:24 -0400
Subject: [PATCH] Add RSS button and discovery tag in head

---
 package.json         |  1 +
 public/rss.svg       | 18 ++++++++++++++++++
 src/main.js          |  2 ++
 src/views/Videos.vue | 23 ++++++++++++++++++++++-
 yarn.lock            |  5 +++++
 5 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 public/rss.svg

diff --git a/package.json b/package.json
index 2554a7d..d77e961 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "firebaseui": "^4.6.1",
     "vue": "^2.6.11",
     "vue-gtag": "^1.9.1",
+    "vue-head": "^2.2.0",
     "vue-router": "^3.2.0",
     "vuefire": "^2.2.2",
     "vuetify": "^2.2.11",
diff --git a/public/rss.svg b/public/rss.svg
new file mode 100644
index 0000000..a7f9cf1
--- /dev/null
+++ b/public/rss.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     id="RSSicon"
+     viewBox="0 0 8 8" width="256" height="256">
+
+  <title>RSS feed icon</title>
+
+  <style type="text/css">
+    .button {stroke: none; fill: orange;}
+    .symbol {stroke: none; fill: white;}
+  </style>
+
+  <rect   class="button" width="8" height="8" rx="1.5" />
+  <circle class="symbol" cx="2" cy="6" r="1" />
+  <path   class="symbol" d="m 1,4 a 3,3 0 0 1 3,3 h 1 a 4,4 0 0 0 -4,-4 z" />
+  <path   class="symbol" d="m 1,2 a 5,5 0 0 1 5,5 h 1 a 6,6 0 0 0 -6,-6 z" />
+
+</svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 54a907c..b6fbdb6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import store from './store'
 import { firestorePlugin } from 'vuefire'
 import vuetify from './plugins/vuetify'
 import VueGtag from 'vue-gtag'
+import VueHead from 'vue-head'
 import { config } from '@/../firebase.config.js'
 
 Vue.use(
@@ -15,6 +16,7 @@ Vue.use(
   router
 )
 Vue.use(firestorePlugin)
+Vue.use(VueHead)
 
 Vue.config.productionTip = false
 
diff --git a/src/views/Videos.vue b/src/views/Videos.vue
index b9c1b1f..71962dd 100644
--- a/src/views/Videos.vue
+++ b/src/views/Videos.vue
@@ -12,7 +12,7 @@
       </v-col>
     </v-row>
     <v-row>
-      <v-col>
+      <v-col cols="12" lg="10">
         <GATrack event-name="clickCategoryFromList" event-label="All">
           <v-chip class="mr-1 mb-2" to="/videos" :label="!videoCategory">
             All
@@ -29,6 +29,14 @@
           </v-chip>
         </GATrack>
       </v-col>
+      <v-col class="text-lg-right">
+        <v-chip label outlined @click="visitRSS()">
+          <v-avatar left tile>
+            <v-img src="/rss.svg"></v-img>
+          </v-avatar>
+          Subscribe via RSS
+        </v-chip>
+      </v-col>
     </v-row>
 
     <v-row>
@@ -94,7 +102,20 @@ export default {
   methods: {
     categoryObject(category) {
       return new Category(category)
+    },
+    visitRSS() {
+      window.location.href = 'http://localhost:8080/feed.xml'
     }
+  },
+  head: {
+    link: [
+      {
+        rel: 'alternate',
+        type: 'application/rss+xml',
+        title: 'Gunchained videos feed',
+        href: '/feed.xml'
+      }
+    ]
   }
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 88a26d5..82a60db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9833,6 +9833,11 @@ vue-gtag@^1.9.1:
   resolved "https://registry.yarnpkg.com/vue-gtag/-/vue-gtag-1.9.1.tgz#d5b20774b298e3aa330580d66783715fd3eded16"
   integrity sha512-pVQyBaczTR7ZYxuxu8JjbHP8p41o1G/5hBDykONpU6EyRsHHx/B7PO2ZtW38/QYn0msuSyGkWulS1tliLuOXLQ==
 
+vue-head@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vue-head/-/vue-head-2.2.0.tgz#9e3a141d5a011599a3f6d7adb42a65c428cf73e1"
+  integrity sha512-Oss1gakOSPQ4e/XZ0yM7yolnhSDvfDYZbM6CDD3xkCpAyPfTR+Bv3tabgtKE41gHr5GzC/NJh1EwQSu7o05XRw==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"