Skip to content

Commit 4682f63

Browse files
genj11genj11
authored
Merge pull request #201 from vuejs-jp/feature/namecard-implementation
PC: Feature/namecard implementation
2 parents 40921e9 + f5d76b6 commit 4682f63

24 files changed

+221
-11
lines changed

‎apps/web/app/components/namecard/CreationProcess.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script setup lang="ts">
2+
import { useI18n } from '#i18n'
3+
import { useColor, useTypography } from '@vuejs-jp/composable'
4+
import MarkDownText from '~/components/MarkDownText.vue'
5+
import SvgProcessDown from '~/public/namecard/process-down.svg?component'
6+
7+
const { t } = useI18n()
8+
const { fontWeight, fontSize } = useTypography()
9+
const { color } = useColor()
10+
</script>
11+
<template>
12+
<div class="creation-process-root">
13+
<h2
14+
:style="{
15+
fontWeight: fontWeight('heading/700'),
16+
fontSize: fontSize('heading/300'),
17+
color: color('vue-blue'),
18+
}"
19+
class="title"
20+
>
21+
{{ t('namecard.creation-process.title') }}
22+
</h2>
23+
<ol
24+
:style="{
25+
fontWeight: fontWeight('body/400'),
26+
fontSize: fontSize('body/400'),
27+
color: color('vue-blue'),
28+
}"
29+
class="process-list"
30+
>
31+
<li>
32+
<MarkDownText path="namecard_process_1" />
33+
<SvgProcessDown class="down-icon" />
34+
</li>
35+
<li>
36+
<MarkDownText path="namecard_process_2" />
37+
<SvgProcessDown class="down-icon" />
38+
</li>
39+
<li>
40+
<MarkDownText path="namecard_process_3" />
41+
<SvgProcessDown class="down-icon" />
42+
</li>
43+
<li>
44+
<MarkDownText path="namecard_process_4" />
45+
</li>
46+
</ol>
47+
<div
48+
:style="{
49+
color: color('vue-blue'),
50+
}"
51+
class="process-alert"
52+
>
53+
<MarkDownText path="namecard_process_alert" />
54+
</div>
55+
</div>
56+
</template>
57+
<style scoped>
58+
@import url('~/assets/media.css');
59+
60+
.creation-process-root {
61+
padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
62+
background-color: #e7eff7;
63+
line-height: 1.8;
64+
}
65+
.title {
66+
margin-bottom: calc(var(--unit) * 3);
67+
text-align: center;
68+
}
69+
.process-list {
70+
padding: 0;
71+
& :deep(p) {
72+
margin-bottom: calc(var(--unit) * 2);
73+
}
74+
& :deep(a) {
75+
color: inherit;
76+
}
77+
}
78+
.process-alert {
79+
& :deep(h3) {
80+
font-size: 1.125rem;
81+
font-weight: 500;
82+
}
83+
& :deep(a) {
84+
color: inherit;
85+
}
86+
}
87+
.down-icon {
88+
display: flex;
89+
justify-content: center;
90+
margin: 0 auto calc(var(--unit) * 2.5);
91+
}
92+
</style>
93+
`

‎apps/web/app/composables/useLocale.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ export function useLocale(path: Path) {
2929
.with('sponsor', () => `/${locale.value}/sponsor`)
3030
.with('code-of-conduct', () => `/${locale.value}/code-of-conduct`)
3131
.with('team', () => `/${locale.value}/team`)
32+
.with('namecard_lead', () => `/${locale.value}/namecard_lead`)
33+
.with('namecard_process_1', () => `/${locale.value}/namecard_process_1`)
34+
.with('namecard_process_2', () => `/${locale.value}/namecard_process_2`)
35+
.with('namecard_process_3', () => `/${locale.value}/namecard_process_3`)
36+
.with('namecard_process_4', () => `/${locale.value}/namecard_process_4`)
37+
.with('namecard_process_alert', () => `/${locale.value}/namecard_process_alert`)
3238
.exhaustive(),
3339
)
3440

‎apps/web/app/content/en/namecard_lead.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
After purchasing a ticket for Vue Fes Japan 2024, you can register the necessary information to receive a name card with your avatar and name at the venue on the event day! (Social login required)
2+
3+
\*Note: Creating a name card is optional.

‎apps/web/app/content/en/namecard_process_1.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
①　Please purchase [a ticket for Vue Fes Japan 2024](./#ticket) in advance.

‎apps/web/app/content/en/namecard_process_2.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
②　Login via social login using the “Login” button on this page.

‎apps/web/app/content/en/namecard_process_3.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
③　After logging in, register your avatar, name, and order number from the ticket purchase on the name card creation/edit page.

‎apps/web/app/content/en/namecard_process_4.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
④　Before the event, share your name card on social media or blogs, and on the event day, enjoy your printed name card!

‎apps/web/app/content/en/namecard_process_alert.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
### Notice
2+
3+
・To receive your printed name card on the event day, the status must be “Complete.”
4+
5+
・Order number verification is automated and may take up to 12 hours to complete after entry.
6+
7+
・To display the latest status, please refresh the page.
8+
9+
・Once the order number verification is complete, the status will change to “Complete.” If the status remains “Order Number Verification Failed” for several days, please contact us through [the inquiry form](<(./#form)>).
10+
11+
・Re-editing is possible until the editing deadline.

‎apps/web/app/content/ja/namecard_lead.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Vue Fes Japan 2024のチケットをご購入後、必要な情報をご登録いただくと、当日会場にてご自身のアバター＋名前入りのネームカードがもらえます！（要ソーシャルログイン）
2+
3+
※ネームカード作成は必須ではありません。

‎apps/web/app/content/ja/namecard_process_1.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
①　事前に[Vue Fes Japan 2024のチケット](./#ticket)をご購入ください。

0 commit comments

Comments
 (0)