migrate to Nuxt 3

.env

@@ -1,3 +1,3 @@
-SPACE=fvjzlvrkinc4
-ACCESS_TOKEN=4f4f9e133b04281c5b172963a693cc7881f8db9646426dd6bd179c646b6ee714
-HOST=preview.contentful.com
+NUXT_PUBLIC_CONTENTFUL_SPACE=fvjzlvrkinc4
+NUXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=4f4f9e133b04281c5b172963a693cc7881f8db9646426dd6bd179c646b6ee714
+NUXT_PUBLIC_CONTENTFUL_HOST=preview.contentful.com

.env.example

@@ -1,3 +1,3 @@
-SPACE=YOUR_KEYS_HERE
-ACCESS_TOKEN=YOUR_KEYS_HERE
-HOST=YOUR_KEYS_HERE
+CONTENTFUL_SPACE=
+CONTENTFUL_ACCESS_TOKEN=
+CONTENTFUL_HOST=

api/config.js

@@ -1,12 +1 @@
-export default {
-  space: process.env.SPACE,
-  accessToken: process.env.ACCESS_TOKEN,
-  host: process.env.HOST,
-  contentTypes: {
-    issues: 'issueNumber',
-    stories: 'stories',
-    authors: 'authors',
-    podcasts: 'podcast',
-    tags: 'tag'
-  }
-}
+// This file has been deleted.

api/index.js

@@ -1,59 +1,60 @@
 import { createClient } from 'contentful'
-import config from './config'
 
 const client = createClient({
   space: config.space,
   accessToken: config.accessToken,
   host: config.host
 })
 
-export default {
-  async getIssues () {
-    const data = await client.getEntries({
-      content_type: config.contentTypes.issues
-    })
-    return data.items
-  },
-  async getPodcasts () {
-    const data = await client.getEntries({
-      content_type: config.contentTypes.podcasts
-    })
-    return data.items
-  },
-  async getIssueByNumber (issueNumber) {
-    const data = await client.getEntries({
-      content_type: config.contentTypes.issues,
-      'fields.issueNumber': issueNumber
-    })
-    return data.items[0]
-  },
-  async getAuthors () {
-    const data = await client.getEntries({
-      content_type: config.contentTypes.authors
-    })
-    return data.items
-  },
-  async getTags () {
-    const data = await client.getEntries({
-      content_type: config.contentTypes.tags
-    })
-    return data.items
-  },
-  async getStoriesByContent (query = '', tags = []) {
-    let params = {
-      content_type: config.contentTypes.stories,
-      'query': query
-    }
-    if (tags.length) {
-      params = {
-        ...params,
-        'fields.tags[exists]': true,
-        'fields.tags.sys.id': tags.map(tag => tag.id).join(',')
+export default function (config) {
+  return {
+    async getIssues () {
+      const data = await client.getEntries({
+        content_type: config.contentTypes.issues
+      })
+      return data.items
+    },
+    async getPodcasts () {
+      const data = await client.getEntries({
+        content_type: config.contentTypes.podcasts
+      })
+      return data.items
+    },
+    async getIssueByNumber (issueNumber) {
+      const data = await client.getEntries({
+        content_type: config.contentTypes.issues,
+        'fields.issueNumber': issueNumber
+      })
+      return data.items[0]
+    },
+    async getAuthors () {
+      const data = await client.getEntries({
+        content_type: config.contentTypes.authors
+      })
+      return data.items
+    },
+    async getTags () {
+      const data = await client.getEntries({
+        content_type: config.contentTypes.tags
+      })
+      return data.items
+    },
+    async getStoriesByContent (query = '', tags = []) {
+      let params = {
+        content_type: config.contentTypes.stories,
+        'query': query
+      }
+      if (tags.length) {
+        params = {
+          ...params,
+          'fields.tags[exists]': true,
+          'fields.tags.sys.id': tags.map(tag => tag.id).join(',')
+        }
       }
-    }
 
-    const data = await client.getEntries(params)
+      const data = await client.getEntries(params)
 
-    return data.items
+      return data.items
+    }
   }
 }

app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

components/Issue.vue

@@ -3,7 +3,7 @@ article.issue
   IssueHeader(:issue="issue")
   .issue-description
     MarkdownRenderer(:content="issue.description")
-  PlayPodcastButton(v-if="podcastExists", @click.native="playPodcast")
+  //- PlayPodcastButton(v-if="podcastExists", @click="playPodcast")
   hr.hr
   h1.issue-section-header Stories
   Story(v-for="story of stories", :story="story", :key="story.url")
@@ -12,52 +12,53 @@ article.issue
   Library(v-for="library of libraries", :library="library", :key="library.url")
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue'
 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'
 
-export default {
-  components: { Story, Library, PlayPodcastButton, IssueHeader, MarkdownRenderer },
-  props: {
-    issue: {
-      type: Object
-    }
-  },
-  computed: {
-    stories () {
-      if (!this.issue.stories) return []
-      return this.issue.stories
-        .filter(story => !story.fields.isLibrary)
-        .map(story => story.fields)
-    },
-    libraries () {
-      if (!this.issue.stories) return []
-      return this.issue.stories
-        .filter(story => story.fields.isLibrary)
-        .map(library => library.fields)
-    },
-    podcastExists () {
-      return !!this.issue.podcast.source
-    }
-  },
-  methods: {
-    playPodcast () {
-      this.$store.commit('SET_CURRENT_PODCAST', this.issue.issueNumber)
-      eventBus.$emit('play')
-    }
-  },
-  mounted () {
-    this.$ga.event('issue', 'open', this.issue.issueNumber)
+const props = defineProps<{
+  issue: {
+    issueNumber: number
+    description: string
+    stories: Array<{ fields: any }>
+    podcast: { source: string }
   }
+}>()
+
+const store = useStore()
+
+const stories = computed(() => {
+  if (!props.issue.stories) return []
+  return props.issue.stories
+    .filter(story => !story.fields.isLibrary)
+    .map(story => story.fields)
+})
+
+const libraries = computed(() => {
+  if (!props.issue.stories) return []
+  return props.issue.stories
+    .filter(story => story.fields.isLibrary)
+    .map(library => library.fields)
+})
+
+const podcastExists = computed(() => !!props.issue.podcast.source)
+
+const playPodcast = () => {
+  store.currentPodcastNumber = props.issue.issueNumber
+  // eventBus.$emit('play')
 }
+
+// onMounted(() => {
+//   this.$ga.event('issue', 'open', props.issue.issueNumber)
+// })
 </script>
 
 <style lang="sass" scoped>
-@import 'assets/branding'
+@use '~/assets/branding'
 
 .issue
   padding: 0 0 20px

components/IssueHeader.vue

@@ -6,26 +6,23 @@ nuxt-link(:to="{ name: 'issues-number', params: { number: issue.issueNumber } }"
     .issue-title {{ issue.title }}
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue'
 import { parseDate } from '@/helpers/parsers'
 
-export default {
-  props: {
-    issue: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    issueDate () {
-      return parseDate(this.issue.publishedOn)
-    }
+const props = defineProps<{
+  issue: {
+    issueNumber: number
+    publishedOn: string
+    title: string
   }
-}
+}>()
+
+const issueDate = computed(() => parseDate(props.issue.publishedOn))
 </script>
 
 <style lang="sass">
-@import '~assets/branding'
+@use '~/assets/branding'
 
 .issue-title
   font-weight: 400
@@ -42,17 +39,17 @@ export default {
   cursor: pointer
 
   &:hover
-    color: $color-green
+    color: branding.$color-green
 
 .issue-number
-  font-family: $secondary-font-stack
+  font-family: branding.$secondary-font-stack
   font-weight: 500
   font-size: 0.9em
-  color: $color-green
+  color: branding.$color-green
   display: inline-block
   margin-right: 6px
 
-  @media #{$large-up}
+  @media #{branding.$large-up}
     transform: translateX(-100%)
     position: absolute
     top: 2px