From ca6eea61eae76f99f752e098db9d799b63be850e Mon Sep 17 00:00:00 2001 From: SeanHsieh Date: Tue, 21 Feb 2023 13:01:13 +0800 Subject: [PATCH 1/3] feat: add dynamic routes configuration for generate --- nuxt.config.js | 61 ++++++++++++++++++++++++++- package-lock.json | 28 +++++++++--- 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, 158 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..21f64b8b47 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,27 @@ "postcss-value-parser": "^4.1.0" } }, + "axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "requires": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + }, + "dependencies": { + "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 +5925,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 +6935,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", 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 From 38dfeaee16996bc5ddf014402ee3882aa1cb6ad5 Mon Sep 17 00:00:00 2001 From: SeanHsieh Date: Tue, 21 Feb 2023 13:03:40 +0800 Subject: [PATCH 2/3] chore: update api end point --- .github/workflows/cd.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index 254a292853..edd99696bd 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -37,7 +37,7 @@ jobs: env: ROUTER_BASE: /pycontw-2021/ # repo name BUILD_TARGET: static - API_URL_BROWSER: https://staging.pycon.tw/prs + API_URL_BROWSER: https://tw.pycon.org/temp AUTH_TOKEN: ${{ secrets.AUTH_TOKEN }} GOOGLE_TAG_MANAGER_ID: ${{ secrets.GOOGLE_TAG_MANAGER_ID }} From b06502c4f626ba60b2a430d466a49ddde8557ed3 Mon Sep 17 00:00:00 2001 From: SeanHsieh Date: Tue, 21 Feb 2023 13:19:36 +0800 Subject: [PATCH 3/3] chore: update cd route config --- .github/workflows/cd.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index edd99696bd..88438245b0 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -35,7 +35,7 @@ jobs: - name: Build 👷🏽 run: npm run generate env: - ROUTER_BASE: /pycontw-2021/ # repo name + ROUTER_BASE: /pycontw-frontend/ # repo name BUILD_TARGET: static API_URL_BROWSER: https://tw.pycon.org/temp AUTH_TOKEN: ${{ secrets.AUTH_TOKEN }}