Skip to content

Commit

Permalink
feat: add hasu namecard
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tanyawat-Arsaga
Tanyawat-Arsaga committed Apr 1, 2024
1 parent 6b683d9 commit 52b5003
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 103 deletions.
3 changes: 2 additions & 1 deletion apps/astro/astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ export default defineConfig({
defaultLocale: 'en',
locales: ['en', 'ja'],
routing: {
prefixDefaultLocale: false
prefixDefaultLocale: true,
redirectToDefaultLocale: true
}
},
integrations: [pandacss(), react()]
Expand Down
0 apps/astro/src/assets/qr-code.png → apps/astro/src/assets/akarin-qr-code.png
View file
File renamed without changes
Binary file added apps/astro/src/assets/hasu-logo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/astro/src/assets/hasu-qr-code.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 54 additions & 0 deletions apps/astro/src/constants/namecard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { styled } from 'styled-system/jsx';
import akarinLogo from '../assets/akarin-logo.png';
import akarinQrCode from '../assets/akarin-qr-code.png';
import hasuLogo from '../assets/hasu-logo.jpg';
import hasuQrCode from '../assets/hasu-qr-code.png';

export const NAMECARDS = [
{
color: '#1F1F5A',
content: {
firstRow: 'Smiley Light Village',
secondRow: '鬼頭明里の里民、タイ支部 🇹🇭',
name: 'ハムP',
nameSubtitle: 'はむぴー／HamP',
message: 'สวัสดีครับ!（サワディーカー）'
},
logoTop: akarinLogo.src,
logoBottom:
'https://500ddaf7f3cefcd23a892c355a3d13d0.cdnext.stream.ne.jp/images/common/logo.svg',
qrCode: akarinQrCode.src,
Quote: () => {
return (
<styled.blockquote fontSize="xs" textAlign="center" fontStyle="italic">
「…推しって<b>“応援する存在”</b>というよりも、
<br />
<b>“自分のモチベーションを高める存在”</b>…」
<br />ー 鬼頭明里
</styled.blockquote>
);
}
},
{
color: '#f8b500',
content: {
firstRow: 'HASUNOSORA JOGAKUIN SCHOOL IDOL CLUB',
secondRow: '蓮ノ空のこと好き好きクラブのみなさん',
name: 'ハムP',
nameSubtitle: 'はむぴー／HamP',
message: 'สวัสดีครับ!（サワディーカー）'
},
logoTop: hasuLogo.src,
logoMiddle: 'https://www.lovelive-anime.jp/hasunosora/shared/img/member/01_icon.png',
logoBottom: 'https://www.lovelive-anime.jp/hasunosora/shared/img/common/hd_logo.svg',
qrCode: hasuQrCode.src,
Quote: () => {
return (
<styled.blockquote fontSize="xs" textAlign="center" fontStyle="italic">
「フラワー」
<br />ー 楡井希実
</styled.blockquote>
);
}
}
];
199 changes: 97 additions & 102 deletions apps/astro/src/pages/[locale]/contact/index.astro
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
import { Box, Center, Grid, HStack, Stack, styled } from 'styled-system/jsx';
import akarinLogo from "../../../assets/akarin-logo.png";
import qrCode from "../../../assets/qr-code.png";
import { NAMECARDS } from '../../../constants/namecard';
import BaseLayout from '../../../layouts/BaseLayout.astro';
export async function getStaticPaths() {
return [{ params: { lang: 'en' } }, { params: { lang: 'ja' } }];
return [{ params: { locale: 'en' } }, { params: { locale: 'ja' } }];
}
// <styled.p fontSize="xs" textAlign="center" fontStyle="italic">
// Pと書いてあるけどプロデューサーじゃないからね。
// <br /> ただただ「ぴー」の響きがいいだけ。
// </styled.p>
//`https://api.qrserver.com/v1/create-qr-code/?size=500x500&color=${encodeURIComponent('#1F1F5A')}&data=${encodeURIComponent('https://ham-san.net/namecard')}`
https://qrcode-monkey.p.rapidapi.com/qr/custom?size=500&config=${encodeURIComponent(JSON.stringify({ bodyColor: '#1F1F5A', body: "dot", eye: "frame3", eyeball: "ball3"}))}&data=${encodeURIComponent('https://ham-san.net/namecard')}
// https://qrcode-monkey.p.rapidapi.com/qr/custom?size=500&config=${encodeURIComponent(JSON.stringify({ bodyColor: '#1F1F5A', body: "dot", eye: "frame3", eyeball: "ball3"}))}&data=${encodeURIComponent('https://ham-san.net/namecard')}
// <Box width="64px" height="64px" objectPosition="0 -1350px" backgroundImage="url('https://kitoakari.com/wp/wp-content/themes/kitoakari/assets/images/common/sprite_loading.png')" backgroundPosition="0 -576px" backgroundSize="64px 640px" backgroundRepeat='no-repeat'/>
---

Expand All @@ -25,7 +25,6 @@ https://qrcode-monkey.p.rapidapi.com/qr/custom?size=500&config=${encodeURICompon
w="full"
fontFamily={`"M PLUS 1p", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif`}
bgColor={{ base: 'gray.5', _print: 'none' }}
style={{ ['--main-color' as 'color']: '#1F1F5A' }}
>
<Grid
printColorAdjust="exact"
Expand All @@ -37,107 +36,97 @@ https://qrcode-monkey.p.rapidapi.com/qr/custom?size=500&config=${encodeURICompon
w="full"
>
{
Array(1)
.fill(undefined)
.map(() => {
return (
<>
<HStack
_print={{
pageBreakBefore: 'always',
// border: '1px solid',
printColorAdjust: 'exact'
}}
width="91mm"
height="55mm"
gap="0"
bgColor="white"
style={{
WebkitPrintColorAdjust: 'exact'
}}
>
<Box width="5mm" h="full" bgColor="var(--main-color, #1F1F5A)" />
<Stack
flex="1"
gap="2"
pl="4"
pr="2"
justifyContent="space-around"
h="full"
py="4"
>
NAMECARDS.map((namecard) => {
const { color, content, logoTop, logoBottom, logoMiddle, qrCode, Quote } = namecard;
return (
<>
<HStack
_print={{
pageBreakBefore: 'always',
// border: '1px solid',
printColorAdjust: 'exact'
}}
width="91mm"
height="55mm"
gap="0"
bgColor="white"
style={{
WebkitPrintColorAdjust: 'exact',
['--main-color' as 'color']: color
}}
>
<Box width="5mm" h="full" bgColor="var(--main-color, #1F1F5A)" />
<Stack flex="1" gap="2" pl="4" pr="2" justifyContent="space-around" h="full" py="4">
<Stack gap="1" fontSize="xs">
<styled.p lineHeight="1">{content.firstRow}</styled.p>
<styled.p>{content.secondRow}</styled.p>
</Stack>
<styled.hr borderColor="var(--main-color)" />
<Stack gap="0">
<styled.h1 fontWeight="semibold" lineHeight="1.12" fontSize="4xl">
{content.name}
</styled.h1>
<styled.p fontSize="sm">{content.nameSubtitle}</styled.p>
</Stack>
<Stack gap="1">
<Stack gap="0" fontSize="xs">
<styled.p >Smiley Light Village</styled.p>
<styled.p >鬼頭明里の里民、タイ支部 🇹🇭</styled.p>

</Stack>
<styled.hr borderColor="var(--main-color)" />
<Stack gap="0">
<styled.h1 fontWeight="semibold" lineHeight="1.12" fontSize="4xl">
ハムP
</styled.pd.h1>
<styled.p fontSize="sm">はむぴー／HamP</styled.p>
</Stack>
<Stack gap="1">
<Stack gap="0" fontSize="xs">
<styled.p>สวัสดีครับ!（サワディーカー）</styled.p>
</Stack>
<Stack gap="0" fontSize="0.5rem" >
<styled.p>X (旧: Twitter): <b>@HamP_punipuni</b></styled.p>
<styled.p>Discord: <b>HamP</b></styled.p>
</Stack>
</Stack>
<Stack gap="0" fontSize="0.5rem">
<styled.p>
X (旧: Twitter): <b>@HamP_punipuni</b>
</styled.p>
<styled.p>
Discord: <b>HamP</b>
</styled.p>
</Stack>
</Stack>
<Stack
justifyContent="space-between"
py="4"
pr="4"
h="full"
w="84px"
alignItems="flex-end"
>
<styled.img src={akarinLogo.src} />
<styled.img src="https://500ddaf7f3cefcd23a892c355a3d13d0.cdnext.stream.ne.jp/images/common/logo.svg" />
</Stack>
</HStack>
<HStack
width="91mm"
height="55mm"
bgColor="white"
gap="0"
border={{ _print: '1px solid' }}
printColorAdjust={{ _print: 'exact' }}
style={{
WebkitPrintColorAdjust: 'exact'
}}
</Stack>
<Stack
justifyContent="space-between"
py="4"
pr="4"
h="full"
w="84px"
alignItems="flex-end"
>
<Stack
flex="1"
gap="2"
justifyContent="space-evenly"
alignItems="center"
h="full"
p="4"
>
<Center>
<styled.img
maxW="100px"
src={qrCode.src}
/>
</Center>
<HStack alignItems="center">
<styled.blockquote fontSize="xs" textAlign="center" fontStyle="italic">
「…推しって<b>“応援する存在”</b>というよりも、
<br />
<b>“自分のモチベーションを高める存在”</b>…」</br>ー 鬼頭明里
</styled.blockquote>
</HStack>
</Stack>
<Box width="5mm" h="full" bgColor="var(--main-color, #1F1F5A)" />
</HStack>
</>
);
})
<styled.img src={logoTop} />
{logoMiddle && <styled.img src={logoMiddle} />}
<styled.img src={logoBottom} />
</Stack>
</HStack>
<HStack
width="91mm"
height="55mm"
bgColor="white"
gap="0"
border={{ _print: '1px solid' }}
printColorAdjust={{ _print: 'exact' }}
style={{
WebkitPrintColorAdjust: 'exact',
['--main-color' as 'color']: color
}}
>
<Stack
flex="1"
gap="2"
justifyContent="space-evenly"
alignItems="center"
h="full"
p="4"
>
<Center>
<styled.img maxW="100px" src={qrCode} />
</Center>
<HStack alignItems="center">
<Quote />
</HStack>
</Stack>
<Box width="5mm" h="full" bgColor="var(--main-color, #1F1F5A)" />
</HStack>
</>
);
})
}
</Grid>
</Center>
Expand All @@ -148,4 +137,10 @@ https://qrcode-monkey.p.rapidapi.com/qr/custom?size=500&config=${encodeURICompon
margin: 0;
size: 91mm 55mm;
}
</style>
</style>

<style is:global>
astro-dev-toolbar {
display: none !important;
}
</style>

0 comments on commit 52b5003

Please sign in to comment.