Skip to content

Commit

Permalink
feat: add more shit
Browse files Browse the repository at this point in the history
  • Loading branch information
Tanyawat-Arsaga committed Apr 11, 2024
1 parent b4683ae commit ab193b8
Show file tree
Hide file tree
Showing 15 changed files with 308 additions and 202 deletions.
3 changes: 2 additions & 1 deletion apps/astro/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ export default defineConfig({
adapter: netlify({
imageCDN: false
}),
prefetch: true
prefetch: true,
trailingSlash: 'ignore'
});
3 changes: 2 additions & 1 deletion apps/astro/eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ const config = tseslint.config(
...compat.config({ extends: ['plugin:@pandacss/recommended'] }),
{
rules: {
'@pandacss/no-unsafe-token-fn-usage': 'off'
'@pandacss/no-unsafe-token-fn-usage': 'off',
'@pandacss/no-hardcoded-color': 'off'
}
},
...eslintPluginAstro.configs['flat/recommended'],
Expand Down
48 changes: 35 additions & 13 deletions apps/astro/src/components/namecard/InteractiveNamecard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,67 @@ export const InteractiveNamecard = ({ data }: { data: NamecardData }) => {
return (
<Stack
className="group"
position="relative"
style={{
['--height' as 'height']: '55mm',
['--width' as 'width']: '91mm',
['--thickness' as 'minHeight']: '2mm',
['--color' as 'color']: data.color
}}
gap="0"
w="full"
width="91mm"
width="var(--width)"
h="full"
height="55mm"
perspective="91mm"
height="var(--height)"
perspective="var(--width)"
perspectiveOrigin="center"
>
<Box
className="card"
style={{
viewTransitionName: `namecard-${data.variant}-front`
}}
position="relative"
shadow="md"
transition="transform"
animation={{ base: '5s linear infinite spin', _groupHover: 'none' }}
transitionTimingFunction="linear"
transitionDelay="0.1s"
transitionDuration="1s"
transform={{ base: 'rotateY(0deg)', _groupHover: 'rotateY(180deg)' }}
transformStyle="preserve-3d"
>
<Box backfaceVisibility="hidden" position="absolute" top="0" left="0">
<StyledNamecard data={data} side="front" />
</Box>
<Box
backfaceVisibility="hidden"
position="absolute"
top="0"
left="0"
shadow="md"
transform={{ base: 'rotateY(0deg)' }}
>
<StyledNamecard data={data} side="front" />
</Box>
transformOrigin="left"
width="var(--thickness)"
height="var(--height)"
backgroundColor="var(--color)"
transform="rotateY(90deg)"
/>
<Box
backfaceVisibility="hidden"
position="absolute"
top="0"
left="0"
shadow="md"
transition="transform"
transform={{ base: 'rotateY(180deg)' }}
transform="rotateY(180deg) translateZ(var(--thickness))"
>
<StyledNamecard data={data} side="back" />
</Box>
<Box
position="absolute"
top="0"
right="0"
transformOrigin="right"
width="var(--thickness)"
height="var(--height)"
backgroundColor="white"
transform="rotateY(-90deg)"
/>
</Box>
</Stack>
);
Expand Down
15 changes: 15 additions & 0 deletions apps/astro/src/middleware/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { defineMiddleware } from 'astro:middleware';
import { languages } from '~/i18n/ui';
import { validateLocale } from '~/i18n/utils';

export const onRequest = defineMiddleware(({ url, preferredLocale, redirect }, next) => {
const paths = url.pathname;
const locale = validateLocale(preferredLocale) ? preferredLocale : 'en';

if (!Object.keys(languages).includes(paths.split('/')[1])) {
return redirect(`/${locale}${paths}`);
}

// return a Response or the result of calling `next()`
return next();
});
43 changes: 24 additions & 19 deletions apps/astro/src/pages/[locale]/contact/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -73,27 +73,32 @@ const items = [

<MainLayout>
<Container w="full" maxW="breakpoint-xl" pt="8">
<Stack w="full" gap="4" p="4" alignItems="center">
<Heading as="h1" size="2xl" fontWeight="bold">{t('common.contact')}</Heading>
<Stack w="full" gap="8" p="4" alignItems="center">
<Stack>
{
items.map(({ icon, label, value, url }) => {
return (
<LinkItem
data={{
title: label,
url: url
}}
Icon={icon}
linkText={value}
/>
);
})
}
<Heading as="h1" size="2xl" fontWeight="bold">{t('common.contact')}</Heading>
<Stack>
{
items.map(({ icon, label, value, url }) => {
return (
<LinkItem
data={{
title: label,
url: url
}}
Icon={icon}
linkText={value}
/>
);
})
}
</Stack>
</Stack>
<Stack>
<Heading as="h2" size="xl" fontWeight="bold" mb="8">{t('contact.name-card')}</Heading>
<a href={`/${locale}/namecard/default`}>
<InteractiveNamecard data={NAMECARDS[0]} />
</a>
</Stack>
<a href={`/${locale}/namecard`}>
<InteractiveNamecard data={NAMECARDS[0]} />
</a>
</Stack>
</Container>
</MainLayout>
2 changes: 0 additions & 2 deletions apps/astro/src/pages/[locale]/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import MainLayout from '~/layouts/MainLayout.astro';
export function getStaticPaths() {
return localePaths;
}
// const param = Astro.params;
---

<MainLayout>
Expand Down
205 changes: 205 additions & 0 deletions apps/astro/src/pages/[locale]/namecard/[variant]/index.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
---
import { ViewTransitions } from 'astro:transitions';
import {
FaDiscord,
FaGithub,
FaHouseUser,
FaLastfm,
FaLink,
FaList,
FaSpotify,
FaTwitter
} from 'react-icons/fa';
import { Box, Container, Grid, GridItem, HStack, Stack, styled } from 'styled-system/jsx';
import kaho1 from '~/assets/namecard/kaho-1.png';
import kanataPeek from '~/assets/namecard/kanata-peek.png';
import { Namecard } from '~/components/namecard/Namecard';
import { Heading } from '~/components/ui/heading';
import { Link } from '~/components/ui/link';
import { Text } from '~/components/ui/text';
import { NAMECARDS } from '~/constants/namecard';
import { localePaths } from '~/i18n/paths';
import { languages } from '~/i18n/ui';
import { useTranslations } from '~/i18n/utils';
import BaseLayout from '~/layouts/BaseLayout.astro';
export function getStaticPaths() {
return localePaths.flatMap((l) =>
NAMECARDS.map((n) => {
return {
...l,
params: {
...l.params,
variant: n.variant
}
};
})
);
}
const { locale, variant } = Astro.params;
const t = useTranslations(locale);
const links = [
{
label: t('contact.twitter'),
value: '@HamP_punipuni',
url: 'https://twitter.com/HamP_punipuni',
icon: FaTwitter
},
{
label: 'Discord',
value: 'hamp',
url: 'https://discordapp.com/users/260776161032798208',
icon: FaDiscord
},
{
label: 'Eventernote',
value: 'HamP_punipuni',
url: 'https://www.eventernote.com/users/HamP_punipuni',
icon: FaLink
},
{
label: t('contact.github'),
value: 'hamzaabamboo',
url: 'https://github.com/hamzaabamboo',
icon: FaGithub
},
{
label: t('name-card.tierlist'),
url: 'https://tiermaker.com/list/actors-actresses/love-live-seiyuu-2023-15476088/3747761',
icon: FaList,
value: t('name-card.tierlist-description')
},
{
label: t('name-card.home'),
url: '/',
icon: FaHouseUser
},
{
label: 'Spotify',
url: 'https://open.spotify.com/user/dick8a92koqqd6ti4sqtz40co?si=3c9b1b72a71a47be',
icon: FaSpotify
},
{
label: 'last.fm',
url: 'https://www.last.fm/user/Betcrg',
icon: FaLastfm
}
// Link Like Lovelive, SIF2, Starlight, Deres
];
const namecard = NAMECARDS.find((n) => n.variant === variant) ?? NAMECARDS[0];
const { color } = namecard;
const Image = styled.img;
---

<BaseLayout>
<Fragment name="head">
<ViewTransitions />
</Fragment>
<Stack
pt="8"
minW="screen"
minH="screen"
alignItems="center"
style={{ ['--main-color' as 'color']: color }}
>
<Box
position="fixed"
top="0"
left="0"
w="full"
h="full"
backgroundImage="url('https://assets.st-note.com/production/uploads/images/121975199/rectangle_large_type_2_64744113d43ef15f0d5c9ad5464e6a8e.jpeg?width=2000&height=2000&fit=bounds&format=jpg&quality=85')"
backgroundRepeat="no-repeat"
backgroundSize="cover"
backgroundPosition="center"
blur="8px"
/>
<Container>
<Stack p="4" rounded="l1" bgColor="white.a6" alignItems="stretch" textAlign="center">
<HStack justifyContent="flex-end" gap="2" w="full">
{
Object.entries(languages).map((t) => {
return <Link href={`/${t[0]}/namecard/${variant}`}>{t[1]}</Link>;
})
}
</HStack>
<Heading as="h1" size="3xl" fontWeight="bold">{t('name-card.name')}</Heading>
<Text as="span" size="md" whiteSpace="pre-wrap">{t('name-card.subtitle')}</Text>
<Text as="span" size="sm">{t('name-card.message')}</Text>
<Grid
gridGap="2"
alignItems="stretch"
gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))"
>
{
links.map((item) => {
const Icon = item.icon;
return (
<GridItem h="full" w="full">
<Link
h="full"
w="full"
target="_blank"
rel="noreferrer"
color="var(--main-color)"
href={item.url}
>
<Stack
gap="1"
p="4"
bgColor="white.a8"
h="full"
flex="1"
rounded="l2"
alignItems="center"
justifyContent="center"
>
{Icon && (
<Text fontSize="2xl">
<Icon />
</Text>
)}
<Stack gap="1" alignItems="center">
<Text fontWeight="bold">{item.label}</Text>
{item.value && <Text>{item.value}</Text>}
</Stack>
</Stack>
</Link>
</GridItem>
);
})
}
</Grid>
<Box
mx="auto"
textAlign="start"
style={{ viewTransitionName: `namecard-${namecard.variant}-front` }}
>
<a href={`/${locale}/namecard/all`}>
<Namecard side="front" data={namecard} />
</a>
</Box>
<!-- //TODO: localize -->
<Link href={`/${locale}/namecard/all`}>View other namecards</Link>
</Stack>
</Container>
<Box w="full" overflow="hidden" flex="1" minH="240px" position="relative">
<Box position="absolute" top="0" right="0" animation={'pyon'}>
<Image w="400px" translateX="15%" src={kaho1.src} alt="日野下花帆" />
</Box>
<Box position="fixed" bottom="0" left="0" overflow="hidden">
<Image
animation="kanatapeek"
transform="scaleX(-100%)"
src={kanataPeek.src}
alt="彼方このえ"
/>
</Box>
</Box>
</Stack>
</BaseLayout>
7 changes: 5 additions & 2 deletions apps/astro/src/pages/[locale]/namecard/all.astro
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,13 @@ const { locale } = Astro.params;
NAMECARDS.map((namecard) => {
return (
<>
<a href={`/${locale}/namecard?variant=${namecard.variant}`}>
<a
href={`/${locale}/namecard/${namecard.variant}`}
style={{ viewTransitionName: `namecard-${namecard.variant}-front` }}
>
<Namecard side="front" data={namecard} />
</a>
<a href={`/${locale}/namecard?variant=${namecard.variant}`}>
<a href={`/${locale}/namecard/${namecard.variant}`}>
<Namecard side="back" data={namecard} />
</a>
</>
Expand Down
Loading

0 comments on commit ab193b8

Please sign in to comment.