wip: Implement PyCast page

pages/events/pycast.vue

@@ -0,0 +1,101 @@
+<template>
+    <i18n-page-wrapper class="px-8 sm:px-10 md:px-32 lg:px-60" custom-x>
+        <core-h1 title="PyCast"></core-h1>
+        <p class="intro whitespace-pre-line">{{ description }}</p>
+        <h2>Hosts</h2>
+
+        <h2>Platforms</h2>
+
+        <h2>Episodes</h2>
+        <div v-for="podcast in podcasts" :key="podcast.id">
+            <h3>{{ podcast.title }}</h3>
+            <markdown-renderer :markdown="podcast.description">
+            </markdown-renderer>
+            <iframe
+                :src="`https://open.spotify.com/embed/episode/${podcast.id}?theme=0`"
+                width="100%"
+                height="232"
+                frameBorder="0"
+                allowfullscreen=""
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            ></iframe>
+        </div>
+    </i18n-page-wrapper>
+</template>
+
+<script>
+import i18n from '@/i18n/events/open-spaces.i18n'
+import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
+import CoreH1 from '@/components/core/titles/H1'
+import MarkdownRenderer from '@/components/core/markdown/MarkdownRenderer'
+
+export default {
+    i18n,
+    name: 'PageEventsPycast',
+    components: {
+        I18nPageWrapper,
+        CoreH1,
+        MarkdownRenderer,
+    },
+    data() {
+        return {
+            title: 'PyCast',
+            description:
+                'PyCast 是由 PyCon Taiwan 熱血志工組成的 Podcast 節目，在這個節目中，' +
+                '我們將邀請 Python 社群元老級人物、 神人講者以及 PyCon TW 歷年志工來和' +
+                '我們聊聊與 Python 相關的二三事，歡迎跟我們一起「Py」起來！',
+            hosts: [
+                { name: '四貓', photo: '' },
+                { name: 'Benson', photo: '' },
+            ],
+            platforms: [
+                { tag: '', icon: '', link: '' },
+                { tag: '', icon: '', link: '' },
+                { tag: '', icon: '', link: '' },
+                { tag: '', icon: '', link: '' },
+                { tag: '', icon: '', link: '' },
+                { tag: '', icon: '', link: '' },
+            ],
+            podcasts: [],
+        }
+    },
+    async mounted() {
+        await this.$store.dispatch('$getPycastData')
+        this.podcasts = this.$store.state.pycastData
+    },
+    head() {
+        return {
+            title: this.title,
+            meta: [
+                {
+                    hid: 'og:title',
+                    property: 'og:title',
+                    content: this.title,
+                },
+                {
+                    hid: 'og:description',
+                    property: 'og:description',
+                    content: this.description,
+                },
+                {
+                    hid: 'description',
+                    name: 'description',
+                    content: this.description,
+                },
+            ],
+        }
+    },
+}
+</script>
+
+<style lang="postcss" scoped>
+h2 {
+    @apply font-serif font-black text-base md:text-lg text-center mx-auto;
+    margin-top: 3rem !important;
+    color: #f3cc39;
+}
+h3 {
+    @apply font-serif font-black text-base md:text-lg;
+    color: #9387ff;
+}
+</style>

store/index.js

@@ -8,6 +8,7 @@ export const state = () => ({
     youtubeInfo: [],
     speechesData: [],
     speechData: {},
+    pycastData: [],
 })
 
 export const mutations = {
@@ -18,6 +19,7 @@ export const mutations = {
     setYoutubeInfo: set('youtubeInfo'),
     setSpeechesData: set('speechesData'),
     setSpeechData: set('speechData'),
+    setPycastData: set('pycastData'),
 }
 
 export const actions = {
@@ -62,4 +64,8 @@ export const actions = {
         const speechData = await this.$http.$get(endpoint)
         commit('setSpeechData', speechData)
     },
+    async $getPycastData({ commit }) {
+        const pycastList = await this.$http.$get('/api/events/pycast/')
+        commit('setPycastData', pycastList)
+    },
 }