From 4f22190209b7f30677b7f3b93295e9c660f25621 Mon Sep 17 00:00:00 2001 From: rockleona Date: Sat, 9 Dec 2023 20:13:39 +0800 Subject: [PATCH 1/4] Setup for Archive PyCon TW 2023 --- nuxt.config.js | 60 +++++++++++++++++++ package-lock.json | 28 +++++++-- package.json | 2 + pages/about/sponsor.vue | 14 +++-- pages/conference/_eventType/_id.vue | 17 ++++-- pages/conference/_eventType/index.vue | 23 ++++---- pages/conference/keynotes.vue | 19 +++--- pages/conference/schedule.vue | 9 ++- pages/events/jobs-gather.vue | 17 +++--- pages/events/jobs.vue | 17 +++--- pages/index.vue | 11 +++- pages/venue/venueMap.vue | 84 +++++++++++++-------------- 12 files changed, 206 insertions(+), 95 deletions(-) diff --git a/nuxt.config.js b/nuxt.config.js index 12f13734e6..55c0c0f729 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,9 +1,69 @@ +import axios from 'axios' const DEFAULT_BASE_URL = 'https://tw.pycon.org/prs' const DEFAULT_ROUTER_BASE = '/2023/' const DEFAULT_BUILD_TARGET = 'static' const DEFAULT_VUE_DEVTOOL = false export default { + target:"static", + 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 8e5ce9bba4..5b6eb2ba80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4789,8 +4789,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", @@ -4816,6 +4815,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", @@ -6167,7 +6187,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" } @@ -7178,8 +7197,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 f15674cf77..5fc993cbe0 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", + "preview": "nuxt preview", "serve": "npm run build && npm run start", "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", "lint": "npm run lint:js", @@ -23,6 +24,7 @@ "@nuxtjs/markdownit": "^2.0.0", "@nuxtjs/sitemap": "^2.4.0", "@tailwindcss/aspect-ratio": "^0.2.1", + "axios": "^0.27.2", "core-js": "^3.6.5", "dayjs": "^1.10.6", "leaflet": "^1.9.4", diff --git a/pages/about/sponsor.vue b/pages/about/sponsor.vue index 24f071d369..55e0c7ac51 100644 --- a/pages/about/sponsor.vue +++ b/pages/about/sponsor.vue @@ -59,18 +59,20 @@ export default { const ccip = context.query.ccip // to determine if it's opass mobile app return ccip ? 'ccip' : 'default' }, + async asyncData({ store, payload }) { + if (payload) return { sponsorsData: payload } + await store.dispatch('$getSponsorsData') + const sponsorsData = store.state.sponsorsData + return { + sponsorsData, + } + }, data() { return { isOpened: false, selectedSponsor: {}, } }, - computed: { - ...mapState(['sponsorsData']), - }, - created() { - this.$store.dispatch('$getSponsorsData') - }, methods: { showModal(sponsor) { this.isOpened = true diff --git a/pages/conference/_eventType/_id.vue b/pages/conference/_eventType/_id.vue index eb2b15401b..7434055d91 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: '', @@ -207,10 +220,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 06a2416942..609c7e6d6e 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, store, params, payload }) { 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 b7d46a2d31..cc7cd378e8 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,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) { if (keynote.speaker.name_en_us) { diff --git a/pages/conference/schedule.vue b/pages/conference/schedule.vue index e003263931..01f3141ea3 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, @@ -132,8 +138,7 @@ 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 08165ae478..c3c2882482 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 ce9ad79cd1..9787844e5b 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() { if (this.jobsData.length > 0) { this.setSelectedSponsor(this.jobsData[0]) } diff --git a/pages/index.vue b/pages/index.vue index 707189db0a..3a16512c5e 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -145,6 +145,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, @@ -178,9 +186,6 @@ export default { return this.$store.state.configs.showIndexSponsorSection }, }, - created() { - this.$store.dispatch('$getSponsorsData') - }, methods: { showModal(sponsor) { this.isOpened = true diff --git a/pages/venue/venueMap.vue b/pages/venue/venueMap.vue index 21ae11623c..de42f3165a 100644 --- a/pages/venue/venueMap.vue +++ b/pages/venue/venueMap.vue @@ -1,48 +1,48 @@