build(nuxt-generate): add dynamic routes configuration and update to …

…use asyncData fetching data

nuxt.config.js

@@ -1,3 +1,5 @@
+import axios from 'axios'
+
 const DEFAULT_BASE_URL = 'http://staging.pycon.tw/prs'
 const DEFAULT_ROUTER_BASE = '/2022/'
 const DEFAULT_BUILD_TARGET = 'static'
@@ -11,7 +13,64 @@ export default {
     },
     // Target (https://go.nuxtjs.dev/config-target)
     target: process.env.BUILD_TARGET || DEFAULT_BUILD_TARGET,
-
+    generate: {
+        dir: DEFAULT_ROUTER_BASE.replace(/\/+/g, ''),
+        async routes() {
+            const config = {
+                headers: {
+                    authorization: `Token ${process.env.AUTH_TOKEN}`,
+                },
+            }
+            const talks = await axios.get(
+                `${DEFAULT_BASE_URL}/api/events/speeches/?event_types=talk,sponsored`,
+                config,
+            )
+            const tutorials = await axios.get(
+                `${DEFAULT_BASE_URL}/api/events/speeches/?event_types=tutorial`,
+                config,
+            )
+            const getAllDetailTalks = async () => {
+                const data = await Promise.all(
+                    talks.data.map(async (talk) => {
+                        return await axios
+                            .get(
+                                `${DEFAULT_BASE_URL}/api/events/speeches/${talk.event_type}/${talk.id}/`,
+                                config,
+                            )
+                            .then((response) => response.data)
+                    }),
+                )
+                return data
+            }
+            const getAllDetailTutorials = async () => {
+                const data = await Promise.all(
+                    tutorials.data.map(async (tutorial) => {
+                        return await axios
+                            .get(
+                                `${DEFAULT_BASE_URL}/api/events/speeches/${tutorial.event_type}/${tutorial.id}/`,
+                                config,
+                            )
+                            .then((response) => response.data)
+                    }),
+                )
+                return data
+            }
+            const detailTalks = await getAllDetailTalks()
+            const detailTutorials = await getAllDetailTutorials()
+
+            const routes = [
+                ...detailTalks.map((talk) => ({
+                    route: `/conference/${talk.event_type}/${talk.id}`,
+                    payload: talk,
+                })),
+                ...detailTutorials.map((tutorial) => ({
+                    route: `/conference/${tutorial.event_type}/${tutorial.id}`,
+                    payload: tutorial,
+                })),
+            ]
+            return routes
+        },
+    },
     // Re-route for GitHub Pages to serve with /assets
     router: {
         base: process.env.ROUTER_BASE || DEFAULT_ROUTER_BASE,

package.json

@@ -20,6 +20,7 @@
         "@nuxt/http": "^0.6.2",
         "@nuxtjs/markdownit": "^2.0.0",
         "@tailwindcss/aspect-ratio": "^0.2.1",
+        "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "dayjs": "^1.10.6",
         "nuxt": "^2.15.3",

pages/conference/_eventType/_id.vue

@@ -144,8 +144,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-
 import i18n from '@/i18n/conference/speeches.i18n'
 
 import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
@@ -174,6 +172,19 @@ export default {
         Youtube,
         MarkdownRenderer,
     },
+    async asyncData({ store, params, payload }) {
+        if (payload && Object.keys(payload).length !== 0) {
+            return {
+                speechData: payload,
+            }
+        }
+        await store.dispatch('$getSpeechData', {
+            eventType: params.eventType,
+            eventId: params.id,
+        })
+        const speechData = store.state.speechData
+        return { speechData }
+    },
     data() {
         return {
             data: {
@@ -198,14 +209,7 @@ export default {
             },
         }
     },
-    computed: {
-        ...mapState(['speechData']),
-    },
     async created() {
-        await this.$store.dispatch('$getSpeechData', {
-            eventType: this.$route.params.eventType,
-            eventId: this.$route.params.id,
-        })
         await this.processData()
         this.$root.$emit('initTabs')
     },

pages/conference/_eventType/index.vue

@@ -73,16 +73,23 @@ export default {
         SpeechCardCollection,
         Banner,
     },
-    asyncData({ redirect, params }) {
+    async asyncData({ redirect, params, store }) {
         const eventType = params.eventType
         if (!['talks', 'tutorials'].includes(eventType)) {
             redirect('/')
         }
+        await store.dispatch('$getSpeechesData', eventType)
+        const speechesData = store.state.speechesData.map((speech) => ({
+            ...speech,
+            begin_time: speech.begin_time ? new Date(speech.begin_time) : null,
+        }))
+        return {
+            speechesData,
+            eventType,
+        }
     },
     data() {
         return {
-            eventType: '',
-            speechesData: [],
             checkedCategories: [],
             aboutBanner: AboutBanner,
         }
@@ -133,14 +140,6 @@ export default {
             return false
         },
     },
-    async mounted() {
-        this.eventType = this.$route.params.eventType
-        await this.$store.dispatch('$getSpeechesData', this.eventType)
-        this.speechesData = this.$store.state.speechesData.map((speech) => ({
-            ...speech,
-            begin_time: speech.begin_time ? new Date(speech.begin_time) : null,
-        }))
-    },
     methods: {
         metaInfo() {
             return {

pages/conference/keynotes.vue

@@ -132,6 +132,17 @@ export default {
         GithubIcon,
         TwitterIcon,
     },
+    async asyncData({ store, app }) {
+        await store.dispatch('$getKeynotesData')
+
+        const keynotesData = store.state.keynotesData.map((keynote) => ({
+            ...keynote,
+            id: app.$makeId(),
+        }))
+        return {
+            keynotesData,
+        }
+    },
     data() {
         return {
             keynotesData: [],
@@ -150,13 +161,6 @@ export default {
             }
         },
     },
-    async mounted() {
-        await this.$store.dispatch('$getKeynotesData')
-        this.keynotesData = this.$store.state.keynotesData.map((keynote) => ({
-            ...keynote,
-            id: this.$makeId(),
-        }))
-    },
     methods: {
         getKeynoteId(keynote) {
             return keynote.speaker.name_en_us.split(' ').join('_')

pages/events/jobs.vue

@@ -39,19 +39,24 @@ export default {
         JobsCardCollection,
         JobsPanel,
     },
+    async asyncData({ store, app }) {
+        await store.dispatch('$getJobsData')
+        const jobsData = store.state.jobsData.map((sponsor) => ({
+            ...sponsor,
+            id: app.$makeId(),
+        }))
+        return {
+            jobsData,
+        }
+    },
     data() {
         return {
             selectedSponsor: {},
             jobsData: [],
             pivot: 0,
         }
     },
-    async mounted() {
-        await this.$store.dispatch('$getJobsData')
-        this.jobsData = this.$store.state.jobsData.map((sponsor) => ({
-            ...sponsor,
-            id: this.$makeId(),
-        }))
+    mounted() {
         this.setSelectedSponsor(this.jobsData[0])
         this.setPivot()
     },

pages/index.vue

@@ -96,7 +96,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import i18n from '@/i18n/index.i18n'
 import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
 import TextButton from '~/components/core/buttons/TextButton'
@@ -120,6 +119,13 @@ export default {
         I18nPageWrapper,
         Intro,
     },
+    async asyncData({ store }) {
+        await store.dispatch('$getSponsorsData')
+        const sponsorsData = store.state.sponsorsData
+        return {
+            sponsorsData,
+        }
+    },
     data() {
         return {
             isOpened: false,
@@ -129,7 +135,6 @@ export default {
     },
     fetchOnServer: false,
     computed: {
-        ...mapState(['sponsorsData']),
         isBulleted() {
             if (process.client) {
                 const width = window.innerWidth
@@ -140,9 +145,6 @@ export default {
             return true
         },
     },
-    created() {
-        this.$store.dispatch('$getSponsorsData')
-    },
     methods: {
         showModal(sponsor) {
             this.isOpened = true