update to Nuxt v2.7. Possibly fix RSS

api/config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   space: process.env.SPACE,
   accessToken: process.env.ACCESS_TOKEN,
   host: process.env.HOST,

components/Issue.vue

@@ -16,9 +16,9 @@ article.issue
 import Story from './Story'
 import Library from './Library'
 import PlayPodcastButton from './PlayPodcastButton'
-import eventBus from '~/helpers/eventBus'
-import IssueHeader from '~/components/IssueHeader'
-import MarkdownRenderer from '~/components/MarkdownRenderer'
+import eventBus from '@/helpers/eventBus'
+import IssueHeader from '@/components/IssueHeader'
+import MarkdownRenderer from '@/components/MarkdownRenderer'
 
 export default {
   components: { Story, Library, PlayPodcastButton, IssueHeader, MarkdownRenderer },

components/IssueHeader.vue

@@ -7,7 +7,7 @@ nuxt-link(:to="{ name: 'issues-number', params: { number: issue.issueNumber } }"
 </template>
 
 <script>
-import { parseDate } from '~/helpers/parsers'
+import { parseDate } from '@/helpers/parsers'
 
 export default {
   props: {

components/PlayPodcastButton.vue

@@ -16,7 +16,7 @@ button.button.play-podcast-button
 <style lang="sass">
 @import 'assets/branding'
 
-.play-podcast-button
+.button.play-podcast-button
   background-color: $color-green
   color: #fff
   padding: 5px 20px 5px 5px

components/PodcastPlayer.vue

@@ -36,7 +36,7 @@
 <script>
 import ProgressBar from './ProgressBar'
 import { mapGetters } from 'vuex'
-import eventBus from '~/helpers/eventBus'
+import eventBus from '@/helpers/eventBus'
 import Icon from '@fortawesome/vue-fontawesome'
 
 export default {

components/ProgressBar.vue

@@ -48,7 +48,7 @@ export default {
 
 .podcast-progress
   height: 10px
-  background: linear-gradient(right, lighten($color-green, 5%), darken($color-green, 5%))
+  background: linear-gradient(to left, lighten($color-green, 5%), darken($color-green, 5%))
   pointer-events: none
   position: relative
 </style>

components/SideBar.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import SubscribeContent from '~/components/SubscribeContent'
+import SubscribeContent from '@/components/SubscribeContent'
 
 export default {
   components: { SubscribeContent }
@@ -30,7 +30,7 @@ export default {
 .sidebar-header
   font-size: 20px
   font-weight: 600
-  margin: 40px 0 10px
+  margin: 30px 0 10px
 
 .h1
   margin-bottom: 10px

components/Story.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import MarkdownRenderer from '~/components/MarkdownRenderer'
+import MarkdownRenderer from '@/components/MarkdownRenderer'
 
 export default {
   components: { MarkdownRenderer },
@@ -69,7 +69,7 @@ export default {
     specialTypeStory () {
       switch (true) {
         case this.tagNames.includes('tweet'):
-          return () => import('~/components/stories/TweetStory')
+          return () => import('@/components/stories/TweetStory')
         default:
           return false
       }

components/SubscribeContent.vue

@@ -24,6 +24,15 @@ div
     )
     small.small Previously known as Vue.js Newsletter
 
+  h2.sidebar-header Or subscribe using
+  a.button.podcast-subscribe(
+    href="https://news.vuejs.org/feed.xml"
+    target="_blank"
+    rel="noopener"
+    @click="subscribe"
+  )
+    | RSS
+
   h2.sidebar-header Subscribe to the podcast
   .podcast-list
     a.button.podcast-subscribe(
@@ -53,7 +62,7 @@ div
       rel="noopener"
       @click="subscribe"
     )
-      | RSS
+      | Podcast RSS
 </template>
 
 <script>
@@ -86,7 +95,7 @@ export default {
     outline: none
     border-color: #42b983
 
-.newsletter-button
+.button.newsletter-button
   position: absolute
   padding: 4px 20px
   right: 4px

components/stories/TweetStory.vue

@@ -9,7 +9,7 @@
 
 <script>
 import { Tweet } from 'vue-tweet-embed'
-import Spinner from '~/components/Spinner'
+import Spinner from '@/components/Spinner'
 
 export default {
   components: { Tweet, Spinner },

helpers/parsers.js

@@ -6,7 +6,7 @@ const dateOptions = {
   timeZone: 'UTC'
 }
 
-function flattenIssue (issue) {
+export function flattenIssue (issue) {
   return {
     id: issue.sys.id,
     issueNumber: issue.fields.issueNumber,
@@ -19,7 +19,7 @@ function flattenIssue (issue) {
   }
 }
 
-function flattenPodcast (podcast) {
+export function flattenPodcast (podcast) {
   return {
     id: podcast.fields.id,
     source: podcast.fields.source,
@@ -29,21 +29,14 @@ function flattenPodcast (podcast) {
   }
 }
 
-function flattenTag (tag) {
+export function flattenTag (tag) {
   return {
     id: tag.sys.id,
     name: tag.fields.name
   }
 }
 
-function parseDate (publishedOn) {
+export function parseDate (publishedOn) {
   const date = new Date(publishedOn)
   return date.toLocaleString('en-US', dateOptions)
 }
-
-module.exports = {
-  flattenIssue,
-  flattenPodcast,
-  flattenTag,
-  parseDate
-}