Merge pull request #65 from vuejs-jp/feat/top-sponsor-section

faet: sponsor section

apps/web/app/assets/base.css

@@ -12,6 +12,7 @@
   /* color */
   --color-vue-blue: #35495e;
   --color-vue-green: #42b983;
+  --color-vue-green-gradation: linear-gradient(to right, #42b883, #41b8aa);
 
   /* zindex */
 }
@@ -22,6 +23,6 @@ ol[role='list'] {
 }
 
 html {
-  font-family: 'din-2014', 'Yu Gothic Medium', '游ゴシック体', YuGothic,
-    '游ゴシック', 'Yu Gothic', sans-serif;
+  font-family: 'din-2014', 'Yu Gothic Medium', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic',
+    sans-serif;
 }

apps/web/app/components/SponsorPageSection.vue

@@ -1 +1,122 @@
-<template>Sponsor</template>
+<script setup lang="ts">
+import { useColor, useTypography } from '@vuejs-jp/composable'
+const { fontWeight, fontSize } = useTypography()
+const { color } = useColor()
+
+</script>
+
+<template>
+  <div class="sponsor">
+    <article class="sponsor-body">
+      <VFTitle id="sponsor">
+        {{ $t('sponsor.title') }}
+      </VFTitle>
+
+      <div class="sponsor-text" :style="{
+          fontWeight: fontWeight('body/300'),
+          fontSize: fontSize('body/300'),
+          color: color('vue-blue'),
+        }">
+        <MarkDownText path="sponsor" />
+      </div>
+
+      <img class="sponsor-term" src="/sponsor/sponsor-term.svg" alt="スポンサー申込期間 2024.4.1(月)-2024.4.30(火)" width="344"
+        height="82" />
+      <div class="sponsor-buttons">
+        <!-- 申し込む -->
+        <VFButton class="sponsor-button" fixed-width href="/">
+          {{ $t('sponsor.apply') }}
+        </VFButton>
+        <!-- 資料を見る -->
+        <VFButton class="sponsor-button" fixed-width href="/" secondary>
+          {{ $t('sponsor.check-doc') }}
+        </VFButton>
+
+      </div>
+    </article>
+
+  </div>
+</template>
+
+<style scoped>
+@import url("~/assets/media.css");
+@import url("~/assets/sample.css");
+
+.sponsor {
+  --sponsor-padding: calc(var(--unit) * 7) 0;
+  --sponsor-body-padding: calc(var(--unit) * 6) calc(var(--unit) * 8);
+  --sponsor-term-margin: calc(var(--unit) * 5) auto 0;
+
+  display: flex;
+  justify-content: center;
+  background-image: url('/sponsor/sponsor-bg.png');
+  padding: var(--sponsor-padding);
+  color: var(--color-vue-blue);
+}
+
+.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;
+}
+
+.sponsor-term {
+  display: block;
+  margin: var(--sponsor-term-margin);
+}
+
+.sponsor-buttons {
+  display: flex;
+  justify-content: center;
+  margin-top: calc(var(--unit) * 4);
+}
+
+.sponsor-button {
+  margin: 0 calc(var(--unit) * 1.5);
+}
+
+/* この幅ルールはコンポーネント側に持たせるべき */
+/* .sponsor-button {
+  min-width: 198px;
+  max-width: 260px;
+  width: 100%;
+  padding: calc(var(--unit) * 2) 66px;
+  background: var(--color-vue-green-gradation);
+  font-size: 18px;
+  white-space: nowrap;
+} */
+
+/* .sponsor-button.-border {
+  padding: calc(var(--unit) * 2) 0;
+  background: white;
+  border: solid 2px var(--color-vue-blue);
+  color: var(--color-vue-blue);
+} */
+
+
+@media (--tablet) {
+  .sponsor {
+    --sponsor-padding: calc(var(--unit) * 2) 0;
+    --sponsor-body-padding: calc(var(--unit) * 4) calc(var(--unit) * 2) calc(var(--unit) * 6);
+    --sponsor-term-margin: calc(var(--unit) * 5) auto 0;
+  }
+
+  .sponsor-buttons {
+    display: block;
+  }
+
+  .sponsor-button {
+    margin: calc(var(--unit) * 2) 0 0;
+  }
+}
+</style>

apps/web/app/composables/useLocale.ts

@@ -9,6 +9,7 @@ export function useLocale(path: Path) {
   const docPath = computed(() =>
     match<Path>(path)
       .with('form', () => `/${locale.value}/contact`)
+      .with('sponsor', () => `/${locale.value}/sponsor`)
       .exhaustive(),
   )
 

apps/web/app/content/en/sponsor.md

@@ -0,0 +1 @@
+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.

apps/web/app/content/ja/sponsor.md

@@ -0,0 +1 @@
+Vue.js に関わる人々が集まる Vue Fes Japan2024をより良いカンファレンスにするため、スポンサー募集をします。スポンサープランなどの詳しい内容は資料をご参照ください。

apps/web/app/lang/en.json

@@ -2,6 +2,11 @@
   "welcome": "welcome",
   "home": "home",
   "about": "about",
+  "sponsor": {
+    "title": "Sponsor",
+    "apply": "Apply",
+    "check-doc": "Check the doc"
+  },
   "form": {
     "title": "Contact",
     "form_name_label": "Name",

apps/web/app/lang/ja.json

@@ -2,6 +2,11 @@
   "welcome": "ようこそ",
   "home": "ホーム",
   "about": "このサイトについて",
+  "sponsor": {
+    "title": "スポンサー",
+    "apply": "申し込む",
+    "check-doc": "資料を見る"
+  },
   "form": {
     "title": "お問い合わせ",
     "form_name_label": "お名前",

packages/model/lib/path.ts

@@ -1 +1 @@
-export type Path = 'form'
+export type Path = 'form' | 'sponsor'

packages/ui/.storybook/preview.js

@@ -1,8 +1,14 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
 export const parameters = {
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+    defaultViewport: 'responsive',
+  },
 }

packages/ui/components/Button.stories.ts

@@ -0,0 +1,91 @@
+import { StoryFn } from '@storybook/vue3'
+import Button from './Button.vue'
+
+export default {
+  title: 'Button',
+  component: Button,
+  args: {},
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  viewport: { defaultViewport: 'iphonex' },
+  components: { Button },
+  setup() {
+    return { args }
+  },
+  template: `
+  <h2>Buttons</h2>
+
+  <div>
+    <p style="padding: 10px">
+      <Button :="args">あ</Button>
+      &emsp;通常
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" fixed-width>申し込む</Button>
+      &emsp;長さ固定
+    </p>
+    <p style="padding: 10px">
+      <Button :="args">あいうえおかきくけこたちつてと</Button>
+      &emsp;ラベルに沿って伸長
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" disabled>あ</Button>
+      &emsp;disabled
+    </p>
+  </div>
+  <h2>RouterLinks</h2>
+  <div>
+    <p style="padding: 10px">
+      <Button :="args" to="/">あ</Button>
+      &emsp;通常
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" fixed-width to="/">申し込む</Button>
+      &emsp;長さ固定
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" to="/">あいうえおかきくけこたちつてと</Button>
+      &emsp;ラベルに沿って伸長
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" to="/" disabled>あ</Button>
+      &emsp;disabled
+    </p>
+  </div>
+  <h2>AnchorLinks</h2>
+  <div>
+    <p style="padding: 10px">
+      <Button :="args" href="/">あ</Button>
+      &emsp;通常
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" fixed-width href="/">申し込む</Button>
+      &emsp;長さ固定
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" href="/">あいうえおかきくけこたちつてと</Button>
+      &emsp;ラベルに沿って伸長
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" href="/" disabled>あ</Button>
+      &emsp;disabled
+    </p>
+  </div>`,
+})
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  secondary: true,
+}
+
+// export const SubLinkButton = Template.bind({})
+// SubLinkButton.args = {
+//   backgroundColor: 'white',
+//   color: 'vue-blue',
+//   iconName: 'note',
+// }