From aaf2a698295f5d832dfd45751a53edfd15ee3ba9 Mon Sep 17 00:00:00 2001
From: jiyuujin <jiyuujinunite@gmail.com>
Date: Fri, 19 Jul 2024 11:37:20 +0900
Subject: [PATCH] prepare for "close cfp"

---
 apps/web/.env.example                         |  1 +
 .../web/app/components/SpeakerPageSection.vue | 14 ++---
 .../components/{ => speaker}/SpeakerCfp.vue   | 63 ++++++++++---------
 apps/web/nuxt.config.ts                       |  1 +
 4 files changed, 41 insertions(+), 38 deletions(-)
 rename apps/web/app/components/{ => speaker}/SpeakerCfp.vue (79%)

diff --git a/apps/web/.env.example b/apps/web/.env.example
index 697fa5df..409004c8 100644
--- a/apps/web/.env.example
+++ b/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=
diff --git a/apps/web/app/components/SpeakerPageSection.vue b/apps/web/app/components/SpeakerPageSection.vue
index 051af936..5147c4a2 100644
--- a/apps/web/app/components/SpeakerPageSection.vue
+++ b/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);
   }
 
diff --git a/apps/web/app/components/SpeakerCfp.vue b/apps/web/app/components/speaker/SpeakerCfp.vue
similarity index 79%
rename from apps/web/app/components/SpeakerCfp.vue
rename to apps/web/app/components/speaker/SpeakerCfp.vue
index a5acf996..6f814c9a 100644
--- a/apps/web/app/components/SpeakerCfp.vue
+++ b/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>
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index e25c7737..f4de791b 100644
--- a/apps/web/nuxt.config.ts
+++ b/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,