Merge pull request #434 from pycontw/feat/add-shuttle-service-tab

feat(shuttle-service): add shuttle service tab

components/venue/VenueShuttleServiceTab.vue

@@ -0,0 +1,87 @@
+<template>
+    <div
+        class="flex flex-col rounded-xl bg-primary-900 px-6 py-10 md:px-16 md:py-20"
+    >
+        <img class="md:hidden" :src="icon.shuttleServiceGuide" />
+        <img class="hidden md:block" :src="icon.shuttleServiceGuideMd" />
+
+        <VenueDivision>
+            <h3>
+                <img class="mr-1" :src="icon.busAlert" />
+                {{ $t('shuttleService.title') }}
+            </h3>
+        </VenueDivision>
+
+        <div>
+            <i18n
+                path="shuttleService.description"
+                tag="p"
+                class="pb-3 md:pb-0"
+            >
+                <a
+                    :href="shuttleServiceFromLink"
+                    class="text-pink-500 underline"
+                    target="_blank"
+                    >{{ $t('shuttleService.descriptionLink') }}</a
+                >
+            </i18n>
+            <div class="flex items-center pb-3 pt-6 md:pb-4">
+                <img :src="icon.moreTimeWhite" />
+                <h5 class="pl-2">
+                    {{ $t('shuttleService.shuttleTime.title') }}
+                </h5>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 md:gap-10">
+                <div v-for="(shuttleTime, idx) in shuttleTimes" :key="idx">
+                    <p class="pb-2 md:pb-3">{{ shuttleTime.title }}</p>
+                    <ul class="ml-[19px] list-outside list-disc pb-3 md:pb-0">
+                        <li>
+                            {{ shuttleTime.from }}
+                        </li>
+                        <li>
+                            {{ shuttleTime.to }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import i18n from '@/i18n/venue/index.i18n'
+import VenueDivision from './VenueDivision.vue'
+import { venueShuttleServiceIconConfig } from './config/venueIconConfig'
+
+export default {
+    i18n,
+    name: 'VenueShuttleServiceTab',
+    components: { VenueDivision },
+    data() {
+        return {
+            shuttleTimes: [
+                {
+                    title: this.$t('shuttleService.shuttleTime.day1.title'),
+                    from: this.$t('shuttleService.shuttleTime.day1.from'),
+                    to: this.$t('shuttleService.shuttleTime.day1.to'),
+                },
+                {
+                    title: this.$t('shuttleService.shuttleTime.day2.title'),
+                    from: this.$t('shuttleService.shuttleTime.day2.from'),
+                    to: this.$t('shuttleService.shuttleTime.day2.to'),
+                },
+            ],
+            shuttleServiceFromLink:
+                'https://www.google.com/maps/place/YouBike%E5%BE%AE%E7%AC%91%E5%96%AE%E8%BB%8A+2.0:+%E6%8D%B7%E9%81%8B%E5%8D%97%E6%B8%AF%E7%AB%99(1%E8%99%9F%E5%87%BA%E5%8F%A3)/@25.0519359,121.6062539,21z/data=!4m6!3m5!1s0x3442ab5d93d797fb:0xc2121057a7e3a87!8m2!3d25.05192!4d121.60642!16s%2Fg%2F11qg14my35?entry=tts&shorturl=1',
+        }
+    },
+
+    computed: {
+        icon() {
+            return venueShuttleServiceIconConfig[this.$i18n.locale]
+        },
+    },
+}
+</script>
+
+<style lang="postcss" scoped></style>

components/venue/config/venueIconConfig.js

@@ -43,3 +43,18 @@ export const venuePublicTransportIconConfig = {
         airplane: require('~/static/img/venue/airplane.svg'),
     },
 }
+
+export const venueShuttleServiceIconConfig = {
+    'en-us': {
+        shuttleServiceGuide: require('~/static/img/venue/en-us/shuttleServiceGuide.svg'),
+        shuttleServiceGuideMd: require('~/static/img/venue/en-us/shuttleServiceGuide-md.svg'),
+        busAlert: require('~/static/img/venue/bus-alert.svg'),
+        moreTimeWhite: require('~/static/img/venue/more-time-white.svg'),
+    },
+    'zh-hant': {
+        shuttleServiceGuide: require('~/static/img/venue/shuttleServiceGuide.svg'),
+        shuttleServiceGuideMd: require('~/static/img/venue/shuttleServiceGuide-md.svg'),
+        busAlert: require('~/static/img/venue/bus-alert.svg'),
+        moreTimeWhite: require('~/static/img/venue/more-time-white.svg'),
+    },
+}

i18n/venue/index.i18n.js

@@ -1,15 +1,11 @@
 import { genI18nMessages } from '~/utils/i18n.utils'
-
 export default genI18nMessages({
     'en-us': {
         title: 'Venue Information',
         og: {
             title: 'Venue Information',
             description:
-                'PyCon Taiwan 2023 will be held at the Humanities and Social Science Building, Academia Sinica' +
-                ', with a focus on the latest technology and best practices in Python. The open-source community' +
-                ' will bring high-quality speeches and workshops, providing valuable learning and networking' +
-                ' opportunities for both novice and experienced Python developers.',
+                'PyCon Taiwan 2023 will be held at the Humanities and Social Science Building, Academia Sinica, with a focus on the latest technology and best practices in Python. The open-source community will bring high-quality speeches and workshops, providing valuable learning and networking opportunities for both novice and experienced Python developers.',
         },
         venueInfo: {
             name: 'Humanities and Social Science Building, Academia Sinica',
@@ -19,6 +15,7 @@ export default genI18nMessages({
         transMode: {
             car: 'By Car',
             publicTransport: 'By Public Transport',
+            shuttleService: 'Shuttle Service',
         },
         carInstructions: {
             title: 'Driving',
@@ -38,15 +35,12 @@ export default genI18nMessages({
                 title: 'Car',
                 parkingPlace: 'Humanities and Social Science Building (HSSB)',
                 description:
-                    'The underground parking lot (B2) in the {0} is available for cars. ' +
-                    'Upon entering the campus, drivers should present their identification to the main gate security guard' +
-                    ' and obtain a parking permit. The parking fee is NT$20 per hour.',
+                    'The underground parking lot (B2) in the {0} is available for cars. Upon entering the campus, drivers should present their identification to the main gate security guard and obtain a parking permit. The parking fee is NT$20 per hour.',
             },
             motor: {
                 title: 'Motorcycle',
                 description:
-                    'Motorcycles are not allowed to enter Academia Sinica. There are free motorcycle parking lots (not' +
-                    ' responsible for safekeeping) for staff and visitors provided next to {0}, {1}, and {2}.',
+                    'Motorcycles are not allowed to enter Academia Sinica. There are free motorcycle parking lots (not responsible for safekeeping) for staff and visitors provided next to {0}, {1}, and {2}.',
                 descriptionLinkTitle1: 'the right side of the main gate',
                 descriptionLinkTitle2: 'the vacant lot opposite the gate',
                 descriptionLinkTitle3: 'Hu Shih Graveyard Park',
@@ -60,9 +54,7 @@ export default genI18nMessages({
             taxi: {
                 title: 'Taxi',
                 description:
-                    'Taxis can also be taken instead of buses, costing around NT$100.' +
-                    ' Based on past experience, many people choose this option,' +
-                    ' so sharing a taxi from the MRT station is a good idea.',
+                    'Taxis can also be taken instead of buses, costing around NT$100. Based on past experience, many people choose this option, so sharing a taxi from the MRT station is a good idea.',
             },
             bus: {
                 title: 'Passenger bus',
@@ -75,10 +67,7 @@ export default genI18nMessages({
                     description2: 'OpenCycleMap',
                 },
                 description1:
-                    'There are several YouBike (Taipei’s bike-sharing program) rental stations near Academia Sinica.' +
-                    'For more information about the YouBike routes in the vicinity, you can visit the  {0} and {1}，' +
-                    'It is recommended to check the available docking stations on the app to return the bike. {2}' +
-                    'Cycling time from Nangang Station or Nangang Exhibition Center Station to Academia Sinica is approximately 10-15 minutes',
+                    'There are several YouBike (Taipei’s bike-sharing program) rental stations near Academia Sinica.For more information about the YouBike routes in the vicinity, you can visit the  {0} and {1}，It is recommended to check the available docking stations on the app to return the bike. {2}Cycling time from Nangang Station or Nangang Exhibition Center Station to Academia Sinica is approximately 10-15 minutes',
             },
             uBikePark: {
                 parkPlace: {
@@ -100,17 +89,11 @@ export default genI18nMessages({
         },
         publicTransportInfo: {
             title: 'Public transportation',
-            info:
-                'You can take the {0} to travel between Nangang Exhibition' +
-                ' Center and Terminal 1 and Terminal 2 of Taoyuan International Airport.',
+            info: 'You can take the {0} to travel between Nangang Exhibition Center and Terminal 1 and Terminal 2 of Taoyuan International Airport.',
             '1843infoTitle': '{0} Route Information:',
             publicTransport: 'Kuo-Kuang Bus 1843',
-
             description1:
-                'Route: Taiwan Taoyuan Airport Terminal 1 ->' +
-                ' Taiwan Taoyuan Airport Terminal 2 -> MRT Gangqian Station' +
-                ' -> Ruiguang Road -> Neihu Administrative Center ->' +
-                ' MRT Nangang Exhibition Center Station (Nangang Rd.) -> Nangang Bus Station (West)',
+                'Route: Taiwan Taoyuan Airport Terminal 1 -> Taiwan Taoyuan Airport Terminal 2 -> MRT Gangqian Station -> Ruiguang Road -> Neihu Administrative Center -> MRT Nangang Exhibition Center Station (Nangang Rd.) -> Nangang Bus Station (West)',
             description2: {
                 title: 'Bus platform location:',
                 info1: 'Terminal I: B1 bus area of Arrivals Hall',
@@ -129,15 +112,32 @@ export default genI18nMessages({
                 info2: 'the public transportation information of Taoyuan international Airport',
             },
         },
+        shuttleService: {
+            shuttleTime: {
+                day2: {
+                    to: 'Return | HSSB → Nangang18:00–19:00 (the last bus at 18:40)',
+                    from: 'Departure | Nangang → HSSB08:30–09:30 (the last bus at 09:10)',
+                    title: '2023-09-03 (Day 2)',
+                },
+                title: 'Schedule',
+                day1: {
+                    title: '2023-09-02 (Day 1)',
+                    from: 'Departure | Nangang → HSSB09:15–10:15 (the last bus at 10:00)',
+                    to: 'Return | HSSB → Nangang18:00–21:00 (the last bus at 20:40)',
+                },
+            },
+            title: 'Shuttle Service',
+            description:
+                'Shuttle buses will be provided between {0} and HSSB during the two-day event. Attendees are welcome to use this service.',
+            descriptionLink: 'Nangang Station (BL22, Exit 1)',
+        },
     },
     'zh-hant': {
         title: '會場資訊',
         og: {
             title: '會場資訊',
             description:
-                'PyCon Taiwan 2023 將在中央研究院人文社會科學館舉辦，聚焦於 Python 的最新技術和最佳實踐' +
-                '，讓開源社群帶來高品質的演講和工作坊，無論您是 Python 的新手還是資深開發人員，' +
-                '都能在這裡找到有價值的學習和交流機會。',
+                'PyCon Taiwan 2023 將在中央研究院人文社會科學館舉辦，聚焦於 Python 的最新技術和最佳實踐，讓開源社群帶來高品質的演講和工作坊，無論您是 Python 的新手還是資深開發人員，都能在這裡找到有價值的學習和交流機會。',
         },
         venueInfo: {
             name: '中央研究院\n人文社會科學館',
@@ -146,6 +146,7 @@ export default genI18nMessages({
         transMode: {
             car: '自行開車',
             publicTransport: '大眾運輸工具',
+            shuttleService: '大會接駁車',
         },
         carInstructions: {
             title: '開車',
@@ -222,11 +223,7 @@ export default genI18nMessages({
             '1843infoTitle': '{0} 路線資訊：',
             publicTransport: '國光客運 1843',
             description1:
-                '路線：桃園機場第一航廈 → ' +
-                '桃園機場第二航廈 → ' +
-                '捷運港墘站→瑞光路 → ' +
-                '內湖行政中心→捷運南港展覽館站 → ' +
-                '南港轉運站西站（高鐵台鐵）',
+                '路線：桃園機場第一航廈 → 桃園機場第二航廈 → 捷運港墘站→瑞光路 → 內湖行政中心→捷運南港展覽館站 → 南港轉運站西站（高鐵台鐵）',
             description2: {
                 title: '站台位置：',
                 info1: '第一航廈：B1 層巴士乘車區。',
@@ -245,5 +242,24 @@ export default genI18nMessages({
                 info2: '桃園國際機場公共運輸交通資訊',
             },
         },
+        shuttleService: {
+            title: '會場接駁',
+            description:
+                '會期兩天早上有提供從 {0} 到人文社會科學館的接駁車，晚上議程結束後也有回程接駁，歡迎會眾們使用。',
+            descriptionLink: '捷運南港站一號出口',
+            shuttleTime: {
+                title: '接駁時間',
+                day1: {
+                    title: '2023-09-02 (Day 1)',
+                    from: '去程｜南港火車站 → 人文社會科學館09:15–10:15（末班 10:00）',
+                    to: '回程｜人文社會科學館 → 南港火車站18:00–21:00（末班 20:40）',
+                },
+                day2: {
+                    title: '2023-09-03 (Day 2)',
+                    from: '去程｜南港火車站 → 人文社會科學館08:30–09:30（末班 09:10',
+                    to: '回程｜人文社會科學館 → 南港火車站18:00–19:00（末班 18:40）',
+                },
+            },
+        },
     },
 })

pages/venue/index.vue

@@ -25,6 +25,10 @@
             <VenuePublicTransporterTab
                 v-if="selectedTransModeIndex === 1"
             ></VenuePublicTransporterTab>
+
+            <VenueShuttleServiceTab
+                v-if="selectedTransModeIndex === 2"
+            ></VenueShuttleServiceTab>
         </div>
     </i18n-page-wrapper>
 </template>
@@ -37,6 +41,7 @@ import VenueTabs from '@/components/venue/VenueTabs.vue'
 import VenueTab from '@/components/venue/VenueTab.vue'
 import VenuePublicTransporterTab from '@/components/venue/VenuePublicTransporterTab.vue'
 import VenueDriveTab from '@/components/venue/VenueDriveTab.vue'
+import VenueShuttleServiceTab from '@/components/venue/VenueShuttleServiceTab.vue'
 
 export default {
     i18n,
@@ -48,6 +53,7 @@ export default {
         VenueTab,
         VenuePublicTransporterTab,
         VenueDriveTab,
+        VenueShuttleServiceTab,
     },
     data() {
         return {
@@ -61,6 +67,10 @@ export default {
                     label: this.$t('transMode.publicTransport'),
                     value: 'publicTransport',
                 },
+                {
+                    label: this.$t('transMode.shuttleService'),
+                    value: 'shuttleService',
+                },
             ],
         }
     },