From b135cecad37aea51d8fdd226aff66856bb28e896 Mon Sep 17 00:00:00 2001
From: svyeh <sivanyeh@gmail.com>
Date: Sun, 6 Aug 2023 21:35:22 +0800
Subject: [PATCH 1/3] feat-add an independent page for sponsors

---
 i18n/about/sponsor.i18n.js |  18 ++++
 layouts/ccip.vue           |  58 ++++++++++++
 layouts/sponsor.vue        | 177 +++++++++++++++++++++++++++++++++++++
 pages/about/sponsor.vue    | 102 +++++++++++++++++++++
 4 files changed, 355 insertions(+)
 create mode 100644 i18n/about/sponsor.i18n.js
 create mode 100644 layouts/ccip.vue
 create mode 100644 layouts/sponsor.vue
 create mode 100644 pages/about/sponsor.vue

diff --git a/i18n/about/sponsor.i18n.js b/i18n/about/sponsor.i18n.js
new file mode 100644
index 0000000000..5b7587695f
--- /dev/null
+++ b/i18n/about/sponsor.i18n.js
@@ -0,0 +1,18 @@
+import { genI18nMessages } from '~/utils/i18n.utils'
+
+export default genI18nMessages({
+    'en-us': {
+        title: 'Sponsor',
+        og: {
+            title: 'Sponsor',
+            description: 'Sponsor of PyCon APAC 2023',
+        },
+    },
+    'zh-hant': {
+        title: '贊助夥伴',
+        og: {
+            title: '贊助夥伴',
+            description: 'PyCon APAC 2023 贊助夥伴',
+        },
+    },
+})
diff --git a/layouts/ccip.vue b/layouts/ccip.vue
new file mode 100644
index 0000000000..e74e5e7fee
--- /dev/null
+++ b/layouts/ccip.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="default-layout">
+        <div class="default-layout__body">
+            <Nuxt />
+            <core-footer />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {},
+    data() {
+        return {}
+    },
+    head() {
+        return {}
+    },
+}
+</script>
+
+<style>
+html {
+    @apply bg-black-900 font-sans text-primary-100;
+    font-size: 20px;
+    word-spacing: 1px;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.default-layout__body {
+    display: grid;
+    grid-template-columns: 100%;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+
+.page-enter-active,
+.page-leave-active {
+    transition: 0.3s;
+}
+.page-enter,
+.page-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/layouts/sponsor.vue b/layouts/sponsor.vue
new file mode 100644
index 0000000000..f60c9f528f
--- /dev/null
+++ b/layouts/sponsor.vue
@@ -0,0 +1,177 @@
+<template>
+    <div class="default-layout">
+        <div class="default-layout__header">
+            <core-header />
+        </div>
+        <div class="default-layout__body">
+            <Nuxt keep-alive :keep-alive-props="{ include: includeArr }" />
+            <core-footer />
+        </div>
+    </div>
+</template>
+
+<script>
+import CoreFooter from '~/components/core/footer/Footer'
+import CoreHeader from '~/components/core/header/Header'
+
+export default {
+    components: {
+        CoreHeader,
+        CoreFooter,
+    },
+    data() {
+        return {
+            includeArr: ['PageConferenceSchedule'],
+        }
+    },
+    head() {
+        const conferenceName = this.$store.state.configs.conferenceName
+        const conferenceYear = this.$store.state.configs.conferenceYear
+        return {
+            titleTemplate: (titleChunk) => {
+                const title = `${conferenceName} ${conferenceYear}`
+                return titleChunk && titleChunk !== title
+                    ? `${titleChunk} | ${title}`
+                    : title
+            },
+            meta: [
+                { charset: 'utf-8' },
+                {
+                    name: 'viewport',
+                    content: 'width=device-width, initial-scale=1',
+                },
+                {
+                    hid: 'description',
+                    name: 'description',
+                    content: `${conferenceName} ${conferenceYear}`,
+                },
+                {
+                    hid: 'og:title',
+                    property: 'og:title',
+                    content: `${conferenceName} ${conferenceYear}`,
+                },
+                {
+                    hid: 'og:description',
+                    property: 'og:description',
+                    content: `${conferenceName} ${conferenceYear}`,
+                },
+                {
+                    hid: 'og:image',
+                    property: 'og:image',
+                    content: 'https://tw.pycon.org/2023/og-img.jpg',
+                },
+                {
+                    hid: 'og:url',
+                    property: 'og:url',
+                    content: 'https://tw.pycon.org' + this.$route.path,
+                },
+                { hid: 'og:type', property: 'og:type', content: 'website' },
+            ],
+            link: [
+                {
+                    rel: 'icon',
+                    type: 'image/x-icon',
+                    href: `/${conferenceYear}/favicon.ico`,
+                },
+                {
+                    rel: 'preconnect',
+                    href: 'https://fonts.googleapis.com',
+                },
+                {
+                    rel: 'preconnect',
+                    href: 'https://fonts.gstatic.com',
+                    crossorigin: 'anonymous',
+                },
+                {
+                    rel: 'stylesheet',
+                    href: 'https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&family=Source+Sans+Pro:wght@400;600;700;900&display=swap',
+                },
+                {
+                    rel: 'canonical',
+                    href: 'https://tw.pycon.org' + this.$route.path,
+                },
+                {
+                    rel: 'alternate',
+                    hreflang: 'x-default',
+                    href: `https://tw.pycon.org/${conferenceYear}/en-us`,
+                },
+                {
+                    rel: 'alternate',
+                    hreflang: 'en-us',
+                    href: `https://tw.pycon.org/${conferenceYear}/en-us`,
+                },
+                {
+                    rel: 'alternate',
+                    hreflang: 'zh-hant-tw',
+                    href: `https://tw.pycon.org/${conferenceYear}/zh-hant`,
+                },
+            ],
+            script: [
+                {
+                    type: 'application/ld+json',
+                    json: {
+                        '@context': 'https://schema.org',
+                        '@type': 'Organization',
+                        name: 'PyCon Taiwan',
+                        url: 'https://tw.pycon.org',
+                        logo: `https://tw.pycon.org/${conferenceYear}/og-img.jpg`,
+                        sameAs: [
+                            'https://www.facebook.com/pycontw/',
+                            'https://twitter.com/PyConTW/',
+                            'https://www.linkedin.com/company/pycontw',
+                            'https://www.youtube.com/channel/UCHLnNgRnfGYDzPCCH8qGbQw',
+                            'https://instagram.com/pycontw/',
+                            'https://github.com/pycontw/',
+                            'https://conf.python.tw',
+                        ],
+                    },
+                },
+            ],
+        }
+    },
+}
+</script>
+
+<style>
+html {
+    @apply bg-black-900 font-sans text-primary-100;
+    font-size: 20px;
+    word-spacing: 1px;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.default-layout__header {
+    @apply fixed w-full;
+    z-index: 1000;
+    height: 52px;
+}
+
+.default-layout__body {
+    display: grid;
+    grid-template-columns: 100%;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+
+.page-enter-active,
+.page-leave-active {
+    transition: 0.3s;
+}
+.page-enter,
+.page-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/pages/about/sponsor.vue b/pages/about/sponsor.vue
new file mode 100644
index 0000000000..a222459eee
--- /dev/null
+++ b/pages/about/sponsor.vue
@@ -0,0 +1,102 @@
+<template>
+    <i18n-page-wrapper>
+        <core-h1 :title="$t('title')"></core-h1>
+        <div>
+            <div
+                v-if="showIndexSponsorSection"
+                id="sponsor"
+                class="lg:w-full; pt-12 lg:mx-auto"
+            >
+                <core-h2
+                    :title="$t('sponsorList')"
+                    :is-bulleted="isBulleted"
+                    class="mx-auto justify-center md:justify-start"
+                ></core-h2>
+                <sponsor-card-collection
+                    v-for="(leveledSponsors, i) in sponsorsData"
+                    :key="`index_sponsor_level_${i}`"
+                    v-slot="slotProps"
+                    :level-name="leveledSponsors.level_name"
+                >
+                    <sponsor-card
+                        v-for="(sponsor, j) in leveledSponsors.sponsors"
+                        :key="`index_sponsor_level_${i}_sponsor_${j}`"
+                        :class="slotProps.className"
+                        :sponsor-name="sponsor.name_en_us"
+                        :logo-url="sponsor.logo_url"
+                        :tag="getAttributeByLocale(sponsor, 'subtitle')"
+                        @click.native="showModal(sponsor)"
+                    >
+                    </sponsor-card>
+                </sponsor-card-collection>
+            </div>
+        </div>
+        <transition name="fade">
+            <modal
+                v-if="isOpened"
+                v-model="isOpened"
+                :img-urls="selectedSponsor.logo_url"
+                :img-bg="true"
+                :name="getAttributeByLocale(selectedSponsor, 'name')"
+                :intro="getAttributeByLocale(selectedSponsor, 'intro')"
+                :website-url="selectedSponsor.website_url"
+            />
+        </transition>
+    </i18n-page-wrapper>
+</template>
+
+<script>
+import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
+import CoreH1 from '@/components/core/titles/H1'
+import i18n from '@/i18n/about/sponsor.i18n'
+import SponsorCard from '@/components/sponsors/SponsorCard'
+import SponsorCardCollection from '@/components/sponsors/SponsorCardCollection'
+
+export default {
+    layout(context) {
+        const ccip = context.query.ccip // to determine if it's opass mobile app
+        if (ccip) {
+            return 'ccip'
+        }
+        return 'default'
+    },
+    i18n,
+    name: 'PageSponsor',
+    components: {
+        I18nPageWrapper,
+        CoreH1,
+        SponsorCard,
+        SponsorCardCollection,
+    },
+    data() {
+        return {
+            selectedSponsor: {},
+        }
+    },
+    computed: {
+        isBulleted() {
+            if (process.client) {
+                const width = window.innerWidth
+                if (width < 768) {
+                    return false
+                }
+            }
+            return true
+        },
+        showIndexSponsorSection() {
+            return this.$store.state.configs.showIndexSponsorSection
+        },
+    },
+    created() {
+        this.$store.dispatch('$getSponsorsData')
+    },
+    methods: {
+        showModal(sponsor) {
+            this.isOpened = true
+            this.selectedSponsor = sponsor
+        },
+    },
+}
+</script>
+
+<style lang="postcss" scoped></style>

From 12b5c494bc84ce419163728b8837b14e888cbc71 Mon Sep 17 00:00:00 2001
From: svyeh <sivanyeh@gmail.com>
Date: Sun, 6 Aug 2023 22:03:54 +0800
Subject: [PATCH 2/3] fix-error

---
 layouts/sponsor.vue     | 177 ----------------------------------------
 pages/about/sponsor.vue |   8 +-
 2 files changed, 3 insertions(+), 182 deletions(-)
 delete mode 100644 layouts/sponsor.vue

diff --git a/layouts/sponsor.vue b/layouts/sponsor.vue
deleted file mode 100644
index f60c9f528f..0000000000
--- a/layouts/sponsor.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-    <div class="default-layout">
-        <div class="default-layout__header">
-            <core-header />
-        </div>
-        <div class="default-layout__body">
-            <Nuxt keep-alive :keep-alive-props="{ include: includeArr }" />
-            <core-footer />
-        </div>
-    </div>
-</template>
-
-<script>
-import CoreFooter from '~/components/core/footer/Footer'
-import CoreHeader from '~/components/core/header/Header'
-
-export default {
-    components: {
-        CoreHeader,
-        CoreFooter,
-    },
-    data() {
-        return {
-            includeArr: ['PageConferenceSchedule'],
-        }
-    },
-    head() {
-        const conferenceName = this.$store.state.configs.conferenceName
-        const conferenceYear = this.$store.state.configs.conferenceYear
-        return {
-            titleTemplate: (titleChunk) => {
-                const title = `${conferenceName} ${conferenceYear}`
-                return titleChunk && titleChunk !== title
-                    ? `${titleChunk} | ${title}`
-                    : title
-            },
-            meta: [
-                { charset: 'utf-8' },
-                {
-                    name: 'viewport',
-                    content: 'width=device-width, initial-scale=1',
-                },
-                {
-                    hid: 'description',
-                    name: 'description',
-                    content: `${conferenceName} ${conferenceYear}`,
-                },
-                {
-                    hid: 'og:title',
-                    property: 'og:title',
-                    content: `${conferenceName} ${conferenceYear}`,
-                },
-                {
-                    hid: 'og:description',
-                    property: 'og:description',
-                    content: `${conferenceName} ${conferenceYear}`,
-                },
-                {
-                    hid: 'og:image',
-                    property: 'og:image',
-                    content: 'https://tw.pycon.org/2023/og-img.jpg',
-                },
-                {
-                    hid: 'og:url',
-                    property: 'og:url',
-                    content: 'https://tw.pycon.org' + this.$route.path,
-                },
-                { hid: 'og:type', property: 'og:type', content: 'website' },
-            ],
-            link: [
-                {
-                    rel: 'icon',
-                    type: 'image/x-icon',
-                    href: `/${conferenceYear}/favicon.ico`,
-                },
-                {
-                    rel: 'preconnect',
-                    href: 'https://fonts.googleapis.com',
-                },
-                {
-                    rel: 'preconnect',
-                    href: 'https://fonts.gstatic.com',
-                    crossorigin: 'anonymous',
-                },
-                {
-                    rel: 'stylesheet',
-                    href: 'https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&family=Source+Sans+Pro:wght@400;600;700;900&display=swap',
-                },
-                {
-                    rel: 'canonical',
-                    href: 'https://tw.pycon.org' + this.$route.path,
-                },
-                {
-                    rel: 'alternate',
-                    hreflang: 'x-default',
-                    href: `https://tw.pycon.org/${conferenceYear}/en-us`,
-                },
-                {
-                    rel: 'alternate',
-                    hreflang: 'en-us',
-                    href: `https://tw.pycon.org/${conferenceYear}/en-us`,
-                },
-                {
-                    rel: 'alternate',
-                    hreflang: 'zh-hant-tw',
-                    href: `https://tw.pycon.org/${conferenceYear}/zh-hant`,
-                },
-            ],
-            script: [
-                {
-                    type: 'application/ld+json',
-                    json: {
-                        '@context': 'https://schema.org',
-                        '@type': 'Organization',
-                        name: 'PyCon Taiwan',
-                        url: 'https://tw.pycon.org',
-                        logo: `https://tw.pycon.org/${conferenceYear}/og-img.jpg`,
-                        sameAs: [
-                            'https://www.facebook.com/pycontw/',
-                            'https://twitter.com/PyConTW/',
-                            'https://www.linkedin.com/company/pycontw',
-                            'https://www.youtube.com/channel/UCHLnNgRnfGYDzPCCH8qGbQw',
-                            'https://instagram.com/pycontw/',
-                            'https://github.com/pycontw/',
-                            'https://conf.python.tw',
-                        ],
-                    },
-                },
-            ],
-        }
-    },
-}
-</script>
-
-<style>
-html {
-    @apply bg-black-900 font-sans text-primary-100;
-    font-size: 20px;
-    word-spacing: 1px;
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-    margin: 0;
-}
-
-.default-layout__header {
-    @apply fixed w-full;
-    z-index: 1000;
-    height: 52px;
-}
-
-.default-layout__body {
-    display: grid;
-    grid-template-columns: 100%;
-}
-
-body.modal-open {
-    overflow: hidden;
-}
-
-.page-enter-active,
-.page-leave-active {
-    transition: 0.3s;
-}
-.page-enter,
-.page-leave-to {
-    opacity: 0;
-}
-</style>
diff --git a/pages/about/sponsor.vue b/pages/about/sponsor.vue
index a222459eee..c63b787788 100644
--- a/pages/about/sponsor.vue
+++ b/pages/about/sponsor.vue
@@ -7,11 +7,6 @@
                 id="sponsor"
                 class="lg:w-full; pt-12 lg:mx-auto"
             >
-                <core-h2
-                    :title="$t('sponsorList')"
-                    :is-bulleted="isBulleted"
-                    class="mx-auto justify-center md:justify-start"
-                ></core-h2>
                 <sponsor-card-collection
                     v-for="(leveledSponsors, i) in sponsorsData"
                     :key="`index_sponsor_level_${i}`"
@@ -46,6 +41,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
 import CoreH1 from '@/components/core/titles/H1'
 import i18n from '@/i18n/about/sponsor.i18n'
@@ -70,10 +66,12 @@ export default {
     },
     data() {
         return {
+            isOpened: false,
             selectedSponsor: {},
         }
     },
     computed: {
+        ...mapState(['sponsorsData']),
         isBulleted() {
             if (process.client) {
                 const width = window.innerWidth

From 6c9730bfa273f6915cef3156ef0476b7e661b490 Mon Sep 17 00:00:00 2001
From: svyeh <sivanyeh@gmail.com>
Date: Thu, 24 Aug 2023 18:59:57 +0800
Subject: [PATCH 3/3] fix: cleaner way to switch layout

---
 pages/about/sponsor.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/pages/about/sponsor.vue b/pages/about/sponsor.vue
index c63b787788..03b65ab872 100644
--- a/pages/about/sponsor.vue
+++ b/pages/about/sponsor.vue
@@ -51,10 +51,7 @@ import SponsorCardCollection from '@/components/sponsors/SponsorCardCollection'
 export default {
     layout(context) {
         const ccip = context.query.ccip // to determine if it's opass mobile app
-        if (ccip) {
-            return 'ccip'
-        }
-        return 'default'
+        return ccip ? 'ccip' : 'default'
     },
     i18n,
     name: 'PageSponsor',