Merge branch 'main' into feature/invite-user-admin-setup-etc

vuejs-jp · May 31, 2024 · 735350d · 735350d
2 parents 4691683 + d870cfb
commit 735350d
Show file tree

Hide file tree

Showing 27 changed files with 480 additions and 130 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -33,6 +33,7 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: ./packages/ui
+          storybookBaseDir: ./packages/ui
           exitZeroOnChanges: true
           exitOnceUploaded: true
           onlyChanged: true

diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -4,7 +4,7 @@ NUXT_NEWT_FORM_UID=
 NUXT_RECAPTCHA_WEBSITE_KEY=
 SUPABASE_URL=
 SUPABASE_KEY=
-SERVICE_KEY=
 AVAILABLE_APPLY_SPONSOR=
 ENABLE_INVITE_STAFF=
 ENABLE_OPERATE_ADMIN=
+ENABLE_SWITCH_LOCALE=
diff --git a/apps/web/app/components/FooterPageSection.vue b/apps/web/app/components/FooterPageSection.vue
@@ -39,11 +39,11 @@ const snsLinkList: LinkList[] = [
 const internalLinkList: LinkList[] = [
   {
     href: '/privacy',
-    text: t('privacy.title'),
+    text: 'privacy.title',
   },
   {
     href: '/code-of-conduct',
-    text: t('code_of_conduct.title'),
+    text: 'code_of_conduct.title',
   },
 ]
 const vueFesLinkList: LinkList[] = [
@@ -86,14 +86,14 @@ const vueFesLinkList: LinkList[] = [
         <ul class="footer-list">
           <li v-for="(link, index) in internalLinkList" :key="index">
             <VFTextLink :href="`${localePath}${link.href}`" color="white">
-              {{ link.text }}
+              {{ t(link.text) }}
             </VFTextLink>
           </li>
         </ul>
         <ul class="footer-list">
           <li v-for="(link, index) in vueFesLinkList" :key="index">
             <VFTextLink :href="link.href" target="_blank" color="white">
-              {{ link.text }}
+              {{ t(link.text) }}
             </VFTextLink>
           </li>
         </ul>

diff --git a/apps/web/app/components/FormPageSection.vue b/apps/web/app/components/FormPageSection.vue
@@ -102,19 +102,20 @@ const updateDetail = (e: any) => {
 section {
   position: relative;
   padding: 120px 20px 120px;
-  background-color: #fff;
+  background-image: linear-gradient(#fff, #ebf0f5);
   &::before {
     content: "";
     position: absolute;
     display: block;
     inset: 0;
     width: 100%;
     height: 100%;
-    background-image: url('/form-bg.png'), linear-gradient(#fff, #ebf0f5);
+    background-image: url('/form-bg.png');
     background-size: auto;
     background-repeat: repeat;
     background-position: top left;
-    background-blend-mode: soft-light;
+    opacity: 0.8;
+    mix-blend-mode: overlay;
   }
 }
 
@@ -130,6 +131,7 @@ section {
 
 .title {
   text-align: center;
+  line-height: 1.2;
 }
 
 .subtitle {
@@ -162,6 +164,9 @@ form {
 @media (--mobile) {
   section {
     padding: 60px 20px 60px;
+    &::before {
+      background-size: 364px;
+    }
   }
   .form-root {
     gap: 30px;

diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue
@@ -1,10 +1,20 @@
 <script setup lang="ts">
-import { useDevice } from '#imports'
+import { useDevice, useRouter, useRuntimeConfig } from '#imports'
 
 const { isMobile } = useDevice()
+const router = useRouter()
+const config = useRuntimeConfig()
+
+const handle = (path: string) => {
+  router.push(path)
+}
 </script>
 
 <template>
-  <VFSpHeader v-if="isMobile" />
-  <VFHeader v-if="!isMobile" />
+  <VFSpHeader v-if="isMobile">
+    <VFLocaleSwitch v-if="config.public.enableSwitchLocale" :router @toggle="handle" />
+  </VFSpHeader>
+  <VFHeader v-if="!isMobile">
+    <VFLocaleSwitch v-if="config.public.enableSwitchLocale" :router @toggle="handle" />
+  </VFHeader>
 </template>
diff --git a/apps/web/app/components/MessagePageSection.vue b/apps/web/app/components/MessagePageSection.vue
@@ -35,6 +35,7 @@
 
 .title {
   text-align: center;
+  line-height: 1.2;
 }
 
 .body {

diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
@@ -1,12 +1,27 @@
 <script setup lang="ts">
-import { useRuntimeConfig } from '#imports'
 import { useI18n } from '#i18n'
+import { useRuntimeConfig } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
+import { useTranslation } from '@/composables/useTranslation'
 
 const config = useRuntimeConfig()
-const { locale } = useI18n()
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
+
+const { t } = useI18n()
+const { translate } = useTranslation()
+
+const periodStart = {
+  prefixYear: t('prefix_year'),
+  date: t('sponsor.start_date'),
+  dayOfWeek: translate('day_of_week.monday'),
+}
+
+// const periodEnd = {
+//   suffixYear: t('suffix_year'),
+//   date: t('sponsor.end_date'),
+//   dayOfWeek: translate('day_of_week.thursday'),
+// }
 </script>
 
 <template>
@@ -37,10 +52,7 @@ const { color } = useColor()
         >
           {{ $t('sponsor.apply_period') }}
         </h3>
-        <VFDatePeriod
-          :start="{ year: 2024, date: '4.8', dayOfWeek: locale === 'ja' ? $t('day_of_week.monday') : '' }"
-          :end="{ date: '4.25', dayOfWeek: locale === 'ja' ? $t('day_of_week.thursday') : '' }"
-        />
+        <VFDatePeriod :start="periodStart" />
       </template>
 
       <div class="sponsor-buttons">
@@ -65,13 +77,11 @@ const { color } = useColor()
         </VFLinkButton>
       </div>
     </article>
-
   </div>
 </template>
 
 <style scoped>
-@import url("~/assets/media.css");
-@import url("~/assets/sample.css");
+@import url('~/assets/media.css');
 
 .sponsor {
   --sponsor-padding: calc(var(--unit) * 5.25) 0;
@@ -85,18 +95,20 @@ const { color } = useColor()
   color: var(--color-vue-blue);
 }
 
+.title {
+  text-align: center;
+  line-height: 1.2;
+}
+
 .sponsor-body {
   margin: 0 auto;
   padding: var(--sponsor-body-padding);
   margin: 0 1.5%;
   background-color: white;
   max-width: 960px;
-  text-align: center;
-
 }
 
 .sponsor-text {
-  text-align: left;
   margin-top: calc(var(--unit) * 4);
   line-height: 1.8;
 
@@ -107,7 +119,7 @@ const { color } = useColor()
 
   &::v-deep a:hover {
     opacity: 0.4;
-    transition: .2s;
+    transition: 0.2s;
   }
 
   &:deep(p) {
@@ -118,8 +130,10 @@ const { color } = useColor()
 }
 
 .sponsor-subtitle {
+  text-align: center;
+  line-height: 1.2;
   margin-top: calc(var(--unit) * 5);
-  margin-bottom: calc(var(--unit) * 2);
+  margin-bottom: calc(var(--unit) * 2.5);
   background: var(--color-vue-green-gradation);
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;

diff --git a/apps/web/app/composables/useTranslation.ts b/apps/web/app/composables/useTranslation.ts
@@ -0,0 +1,18 @@
+import { useI18n } from '#i18n'
+import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
+
+export function useTranslation() {
+  const { t, te } = useI18n()
+  const { locale } = useLocaleCurrent()
+  function translate(key: string) {
+    return te(key, locale.value) ? t(key) : ''
+  }
+
+  return {
+    /**
+     * return translation or empty string
+     * https://github.com/vuejs-jp/vuefes-2024/pull/136#discussion_r1597312717
+     */
+    translate
+  }
+}
diff --git a/apps/web/app/content/en/sponsor.md b/apps/web/app/content/en/sponsor.md
@@ -1,4 +1,3 @@
 In order to make Vue Fes Japan 2024 a better conference where people involved in Vue.js gather, we are looking for sponsors. Please refer to the materials for detailed information such as sponsorship plans.
 
-The first round of applications has now closed, and a second round of applications will begin soon, as there are still openings in some plans. Companies that have already been selected for the first round of applications can still apply for additional plans.
-Specific details will be announced on the official website and the official X account ([@vuefes](https://x.com/vuefes){:target=“\_blank”}).
+A second round of applications is currently being accepted. Companies whose plans were confirmed in the first round of applications can still apply for additional plans.
diff --git a/apps/web/app/content/ja/sponsor.md b/apps/web/app/content/ja/sponsor.md
@@ -1,4 +1,3 @@
 Vue.js に関わる人々が集まる Vue Fes Japan 2024 をより良いカンファレンスにするため、スポンサー募集をします。スポンサープランなどの詳しい内容は資料をご参照ください。
 
-現在、一次募集が終了し、一部のプランに空き枠があるため近日中に二次募集を開始予定です。一次募集でプランが確定された企業様におかれましても、追加お申し込みも可能となっています。
-具体的な募集内容については、公式サイトや X 公式アカウント（[@vuefes](https://x.com/vuefes){:target="\_blank"}）にてご案内します。
+現在、二次募集を実施しております。一次募集でプランが確定された企業様におかれましても、追加お申し込みも可能となっています。
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
@@ -4,11 +4,8 @@
   "about": "about",
   "back_to_top": "Back o Top",
   "not_found": "The page you are looking for cannot be found.",
-  "day_of_week": {
-    "monday": "Mon",
-    "tuesday": "Tue",
-    "thursday": "Thu"
-  },
+  "prefix_year": "",
+  "suffix_year": "2024",
   "top_page": {
     "latest_information": "Get the latest information on our official social media",
     "date": "Octover 19th, 2024",
@@ -18,8 +15,10 @@
     "title": "Sponsors",
     "apply": "Apply",
     "apply_period": "Sponsor Application Period",
-    "check_doc": "View Sponsorship materials"
-  },
+    "check_doc": "View Sponsorship materials",
+    "start_date": "May 13",
+    "end_date": "25,"
+    },
   "form": {
     "title": "Inquiry",
     "form_name_label": "Name",

diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
@@ -4,6 +4,8 @@
   "about": "このサイトについて",
   "back_to_top": "トップに戻る",
   "not_found": "お探しのページが見つかりません。",
+  "prefix_year": "2024",
+  "suffix_year": "",
   "day_of_week": {
     "monday": "月",
     "tuesday": "火",
@@ -18,8 +20,10 @@
     "title": "スポンサー",
     "apply": "申し込む",
     "apply_period": "スポンサー申込期間",
-    "check_doc": "資料を見る"
-  },
+    "check_doc": "資料を見る",
+    "start_date": "5.13",
+    "end_date": "4.25"
+    },
   "form": {
     "title": "お問い合わせ",
     "form_name_label": "お名前",

diff --git a/apps/web/app/layouts/default.vue b/apps/web/app/layouts/default.vue
@@ -13,7 +13,8 @@ useHead({
 
 <template>
   <GlobalHeader />
-  <div>
+  <main>
     <slot />
-  </div>
+  </main>
+  <FooterPageSection />
 </template>
diff --git a/apps/web/app/pages/code-of-conduct.vue b/apps/web/app/pages/code-of-conduct.vue
@@ -28,8 +28,8 @@ const { color } = useColor()
 </script>
 
 <template>
-  <main>
-    <div class="coc-root">
+  <div class="coc-root">
+    <div class="conducts">
       <h1
         :style="{
           fontWeight: fontWeight('heading/700'),
@@ -61,21 +61,20 @@ const { color } = useColor()
         {{ $t('back_to_top') }}
       </VFLinkButton>
     </div>
-  </main>
-  <FooterPageSection />
+  </div>
 </template>
 
 <style scoped>
 @import url('../assets/base.css');
-@import url("~/assets/media.css");
+@import url('~/assets/media.css');
 
-main {
+.coc-root {
   --header-height: calc(var(--unit) * 10);
 
   padding: calc(var(--header-height) + 120px) 20px 0;
   background: color(--color-white);
 }
-.coc-root {
+.conducts {
   display: grid;
   gap: 40px;
   max-width: 768px;
@@ -127,11 +126,11 @@ main {
 }
 
 @media (--mobile) {
-  main {
+  .coc-root {
     --header-height: calc(var(--unit) * 8);
     padding: calc(var(--header-height) + 60px) 20px 60px;
   }
-  .coc-root {
+  .conducts {
     gap: 30px;
   }
   .title {

diff --git a/apps/web/app/pages/index.vue b/apps/web/app/pages/index.vue
@@ -15,5 +15,4 @@ useHead({
   <MessagePageSection />
   <SponsorPageSection />
   <FormPageSection />
-  <FooterPageSection />
 </template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ @@
     .title {
       text-align: center;
+      line-height: 1.2;
     }
     .body {
@@ Expand Down @@