Merge pull request #205 from vuejs-jp/enhance/prepare-for-close-cfp

prepare for "close cfp"

Author: jiyuujin

apps/web/.env.example

@@ -6,6 +6,7 @@ SUPABASE_URL=
 SUPABASE_KEY=
 SPEAKER_DATASOURCE= # local or supabase
 SPONSOR_DATASOURCE= # local or supabase
+AVAILABLE_APPLY_SPEAKER=
 AVAILABLE_APPLY_SPONSOR=
 ENABLE_INVITE_STAFF=
 ENABLE_OPERATE_ADMIN=

apps/web/app/components/SpeakerPageSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useFetch } from '#imports'
+import SpeakerCfp from '~/components/speaker/SpeakerCfp.vue'
 import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
 import type { SpeakerCategory, SpeakerInfo } from '@vuejs-jp/model'
 
@@ -17,9 +18,9 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = data.
 
 <template>
   <div class="speaker">
-    <SpeakerCfp />
+    <article class="speaker-body-wrapper">
+      <SpeakerCfp />
 
-    <article class="speaker-body">
       <div class="speaker-text">
         <MarkDownText path="speaker" />
       </div>
@@ -108,12 +109,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = data.
   }
 }
 
-.title {
-  text-align: center;
-  line-height: 1.2;
-}
-
-.speaker-body {
+.speaker-body-wrapper {
   margin: 0 1.5%;
   max-width: calc(960px + 6%);
   isolation: isolate;
@@ -168,7 +164,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = data.
     --speaker-row-gap: 0px;
   }
 
-  .speaker-body {
+  .speaker-body-wrapper {
     --speaker-body-padding: calc(var(--unit) * 4) 4.5% calc(var(--unit) * 6);
   }
 

apps/web/app/components/SpeakerCfp.vue renamed to apps/web/app/components/speaker/SpeakerCfp.vue

@@ -4,9 +4,12 @@ import { useColor } from '@vuejs-jp/composable'
 import { useTranslation } from '@/composables/useTranslation'
 import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
 import { cfpEnUrl, cfpJaUrl } from '~/utils/constants'
+import { useRuntimeConfig } from '#imports'
 
 const { color } = useColor()
 
+const config = useRuntimeConfig()
+
 const { t } = useI18n()
 const { translate } = useTranslation()
 
@@ -26,40 +29,42 @@ const endPeriodTime = {
 </script>
 
 <template>
-  <article class="cfp-body">
+  <div class="cfp-body">
     <VFTitle id="speakers" class="title">
       {{ $t('speaker.title') }}
     </VFTitle>
 
-    <div class="cfp-text">
-      <MarkDownText path="speaker_cfp" />
-    </div>
-
-    <h3 class="cfp-subtitle">
-      {{ $t('speaker.application_period') }}
-    </h3>
-    <VFDateTime :date="endPeriodDate" :time="endPeriodTime" />
-
-    <div class="cfp-buttons">
-      <VFLinkButton
-        class="cfp-button"
-        :href="currentLocale !== 'en' ? cfpJaUrl : cfpEnUrl"
-        background-color="vue-green/200"
-        color="white"
+    <template v-if="config.public.availableApplySpeaker">
+      <div class="cfp-text">
+        <MarkDownText path="speaker_cfp" />
+      </div>
+
+      <h3 class="cfp-subtitle">
+        {{ $t('speaker.application_period') }}
+      </h3>
+      <VFDateTime :date="endPeriodDate" :time="endPeriodTime" />
+
+      <div class="cfp-buttons">
+        <VFLinkButton
+          class="cfp-button"
+          :href="currentLocale !== 'en' ? cfpJaUrl : cfpEnUrl"
+          background-color="vue-green/200"
+          color="white"
+        >
+          {{ $t('speaker.apply') }}
+        </VFLinkButton>
+      </div>
+
+      <div
+        class="cfp-more-information"
+        :style="{
+          color: color('vue-blue'),
+        }"
       >
-        {{ $t('speaker.apply') }}
-      </VFLinkButton>
-    </div>
-
-    <div
-      class="cfp-more-information"
-      :style="{
-        color: color('vue-blue'),
-      }"
-    >
-      <MarkDownText path="speaker_information" />
-    </div>
-  </article>
+        <MarkDownText path="speaker_information" />
+      </div>
+    </template>
+  </div>
 </template>
 
 <style scoped>

apps/web/nuxt.config.ts

@@ -159,6 +159,7 @@ export default defineNuxtConfig({
       speakerDatasource : process.env.SPEAKER_DATASOURCE, // local or supabase
       sponsorDatasource : process.env.SPONSOR_DATASOURCE, // local or supabase
       // feature
+      availableApplySpeaker: process.env.AVAILABLE_APPLY_SPEAKER,
       availableApplySponsor: process.env.AVAILABLE_APPLY_SPONSOR,
       enableInviteStaff: process.env.ENABLE_INVITE_STAFF,
       enableOperateAdmin: process.env.ENABLE_OPERATE_ADMIN,