From 1968a2220da61d5aa1f3a11b7d02cc9bc7041d0c Mon Sep 17 00:00:00 2001 From: SeanHsieh Date: Tue, 21 Feb 2023 12:17:48 +0800 Subject: [PATCH] feat: add dynamic routes configuration for generate --- nuxt.config.js | 61 ++++++++++++++++++++++++++- package-lock.json | 39 ++++++++++++++--- package.json | 1 + pages/conference/_eventType/_id.vue | 17 ++++++-- pages/conference/_eventType/index.vue | 23 +++++----- pages/conference/keynotes.vue | 20 +++++---- pages/conference/schedule.vue | 11 ++++- pages/events/jobs-gather.vue | 17 +++++--- pages/events/jobs.vue | 17 +++++--- pages/index.vue | 11 +++-- 10 files changed, 169 insertions(+), 48 deletions(-) diff --git a/nuxt.config.js b/nuxt.config.js index 8f9c8e1883..beeda7d090 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,9 +1,68 @@ -const DEFAULT_BASE_URL = 'http://staging.pycon.tw/prs' +import axios from 'axios' +const DEFAULT_BASE_URL = 'https://tw.pycon.org/temp' const DEFAULT_ROUTER_BASE = '/2022/' const DEFAULT_BUILD_TARGET = 'static' const DEFAULT_VUE_DEVTOOL = false export default { + generate: { + 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 + }, + }, vue: { config: { devtools: process.env.VUE_DEVTOOL || DEFAULT_VUE_DEVTOOL, diff --git a/package-lock.json b/package-lock.json index e648f73c62..2beb2bda22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4527,8 +4527,7 @@ "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, "at-least-node": { "version": "1.0.0", @@ -4554,6 +4553,33 @@ "postcss-value-parser": "^4.1.0" } }, + "axios": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.3.tgz", + "integrity": "sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" + }, + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "babel-code-frame": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", @@ -5905,7 +5931,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "requires": { "delayed-stream": "~1.0.0" } @@ -6916,8 +6941,7 @@ "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, "delegates": { "version": "1.0.0", @@ -16167,6 +16191,11 @@ "ipaddr.js": "1.9.1" } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", diff --git a/package.json b/package.json index 4cb5eb1b2e..3e99ab579b 100644 --- a/package.json +++ b/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", diff --git a/pages/conference/_eventType/_id.vue b/pages/conference/_eventType/_id.vue index 3a737aba64..be2c9c935e 100644 --- a/pages/conference/_eventType/_id.vue +++ b/pages/conference/_eventType/_id.vue @@ -184,6 +184,19 @@ export default { MarkdownRenderer, RelatedCardCollection, }, + 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 { eventType: '', @@ -213,10 +226,6 @@ export default { ...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') await this.$store.dispatch('$getRelatedData', this.data.category) diff --git a/pages/conference/_eventType/index.vue b/pages/conference/_eventType/index.vue index 5474f4d247..8d6b2f4e5c 100644 --- a/pages/conference/_eventType/index.vue +++ b/pages/conference/_eventType/index.vue @@ -73,16 +73,25 @@ export default { SpeechCardCollection, Banner, }, - asyncData({ redirect, params }) { + async asyncData({ redirect, params, payload, store }) { const eventType = params.eventType if (!['talks', 'tutorials'].includes(eventType)) { redirect('/') } + if (payload && Object.keys(payload).length !== 0) + return { eventType, speechesData: payload } + 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 { + eventType, + speechesData, + } }, data() { return { - eventType: '', - speechesData: [], checkedCategories: [], aboutBanner: AboutBanner, } @@ -133,14 +142,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 { diff --git a/pages/conference/keynotes.vue b/pages/conference/keynotes.vue index c9010596b4..079b8b08ea 100644 --- a/pages/conference/keynotes.vue +++ b/pages/conference/keynotes.vue @@ -141,9 +141,19 @@ export default { GithubIcon, TwitterIcon, }, + async asyncData({ store, app, payload }) { + if (payload) return { keynotesData: payload } + await store.dispatch('$getKeynotesData') + const keynotesData = store.state.keynotesData.map((keynote) => ({ + ...keynote, + id: app.$makeId(), + })) + return { + keynotesData, + } + }, data() { return { - keynotesData: [], aboutBanner: AboutBanner, } }, @@ -159,13 +169,7 @@ 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 diff --git a/pages/conference/schedule.vue b/pages/conference/schedule.vue index dbc5518a23..a3fafe0c98 100644 --- a/pages/conference/schedule.vue +++ b/pages/conference/schedule.vue @@ -101,6 +101,12 @@ export default { ScheduleEvent, ScheduleTick, }, + async asyncData({ store, payload }) { + if (payload) return { schedulesData: payload } + await store.dispatch('$getSchedulesData') + const schedulesData = store.state.schedulesData + return { schedulesData } + }, data() { return { selectedDayIndex: 0, @@ -118,6 +124,7 @@ export default { }, } }, + computed: { ...mapState(['schedulesData']), table() { @@ -132,8 +139,8 @@ export default { this.makeRooms() }, }, - async created() { - await this.$store.dispatch('$getSchedulesData') + + created() { this.processData() }, activated() { diff --git a/pages/events/jobs-gather.vue b/pages/events/jobs-gather.vue index 2c31d7816e..60cde12117 100644 --- a/pages/events/jobs-gather.vue +++ b/pages/events/jobs-gather.vue @@ -45,19 +45,22 @@ export default { JobsCardCollection, JobsPanel, }, + async asyncData({ store, app, payload }) { + if (payload) return { jobsData: payload } + 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() }, diff --git a/pages/events/jobs.vue b/pages/events/jobs.vue index 4bbe722b23..fb88c1a07f 100644 --- a/pages/events/jobs.vue +++ b/pages/events/jobs.vue @@ -39,19 +39,22 @@ export default { JobsCardCollection, JobsPanel, }, + async asyncData({ store, app, payload }) { + if (payload) return { jobsData: payload } + 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() }, diff --git a/pages/index.vue b/pages/index.vue index 567d6141f1..7ffabc8fad 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -120,6 +120,14 @@ export default { I18nPageWrapper, Intro, }, + async asyncData({ store, payload }) { + if (payload) return { sponsorsData: payload } + await store.dispatch('$getSponsorsData') + const sponsorsData = store.state.sponsorsData + return { + sponsorsData, + } + }, data() { return { isOpened: false, @@ -140,9 +148,6 @@ export default { return true }, }, - created() { - this.$store.dispatch('$getSponsorsData') - }, methods: { showModal(sponsor) { this.isOpened = true