diff --git a/apps/astro/src/components/layout/Navigation.astro b/apps/astro/src/components/layout/Navigation.astro
new file mode 100644
index 0000000..73a0628
--- /dev/null
+++ b/apps/astro/src/components/layout/Navigation.astro
@@ -0,0 +1,46 @@
+---
+import { languages } from '~/i18n/ui';
+import { getLangFromUrl, useTranslations } from '~/i18n/utils';
+import { HStack } from '../../../styled-system/jsx';
+import { Link } from '../ui/link';
+import { Text } from '../ui/text';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const getURLWithLanguage = (value: string) => {
+ return `/${lang}${value}`;
+};
+
+const getCurrentURLWithLanguage = (language: string) => {
+ const [, , currentPath] = Astro.url.pathname.split('/');
+ return `/${language}/${currentPath}`;
+};
+
+const NAVIGATION_LINKS = [
+ { label: t('common.home'), value: '/' },
+ { label: t('common.about-me'), value: '/about' },
+ { label: t('common.projects'), value: '/projects' },
+ { label: t('common.note'), value: '/notes' },
+ { label: t('common.contact'), value: '/contact' }
+];
+---
+
+
+
+ {t('common.ham')}
+
+
+ {
+ NAVIGATION_LINKS.map(({ label, value }) => {
+ return {label};
+ })
+ }
+ |
+ {
+ Object.entries(languages).map((t) => {
+ return {t[1]};
+ })
+ }
+
+
diff --git a/apps/astro/src/constants/namecard.tsx b/apps/astro/src/constants/namecard.tsx
index 75f6a81..787a56f 100644
--- a/apps/astro/src/constants/namecard.tsx
+++ b/apps/astro/src/constants/namecard.tsx
@@ -6,6 +6,7 @@ import hasuQrCode from '../assets/hasu-qr-code.png';
export const NAMECARDS = [
{
+ variant: 'default',
color: '#1F1F5A',
content: {
firstRow: 'Smiley Light Village',
@@ -30,6 +31,7 @@ export const NAMECARDS = [
}
},
{
+ variant: 'kaho',
color: '#f8b500',
content: {
firstRow: 'HASUNOSORA JOGAKUIN SCHOOL IDOL CLUB',
diff --git a/apps/astro/src/i18n/ui.ts b/apps/astro/src/i18n/ui.ts
new file mode 100644
index 0000000..b7f7dfc
--- /dev/null
+++ b/apps/astro/src/i18n/ui.ts
@@ -0,0 +1,19 @@
+import ui from 'i18n/index';
+
+export const languages = {
+ en: 'English',
+ ja: '日本語'
+};
+
+export const defaultLang = 'en';
+
+export const routes = {
+ en: {
+ services: 'leistungen'
+ },
+ ja: {
+ services: 'prestations-de-service'
+ }
+};
+
+export { ui };
diff --git a/apps/astro/src/i18n/utils.ts b/apps/astro/src/i18n/utils.ts
new file mode 100644
index 0000000..8d28a7e
--- /dev/null
+++ b/apps/astro/src/i18n/utils.ts
@@ -0,0 +1,19 @@
+import { defaultLang, ui } from './ui';
+
+export function getLangFromUrl(url: URL) {
+ const [, lang] = url.pathname.split('/');
+ if (lang in ui) return lang as keyof typeof ui;
+ return defaultLang;
+}
+
+export function useTranslations(lang: Lang) {
+ return function t<
+ Collection extends keyof (typeof ui)[Lang],
+ Key extends keyof (typeof ui)[Lang][Collection]
+ >(key: `${string & Collection}.${string & Key}`): (typeof ui)[Lang][Collection][Key] {
+ const [collection, translationKey] = key.split('.') as [Collection, Key];
+ return (
+ ui[lang][collection][translationKey] || ui[defaultLang as Lang][collection][translationKey]
+ );
+ };
+}
diff --git a/apps/astro/src/layouts/BaseLayout.astro b/apps/astro/src/layouts/BaseLayout.astro
index ff34498..98c346e 100644
--- a/apps/astro/src/layouts/BaseLayout.astro
+++ b/apps/astro/src/layouts/BaseLayout.astro
@@ -1,9 +1,12 @@
---
import '../index.css';
+import { getLangFromUrl } from '../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
---
-
+
diff --git a/apps/astro/src/layouts/MainLayout.astro b/apps/astro/src/layouts/MainLayout.astro
new file mode 100644
index 0000000..db913af
--- /dev/null
+++ b/apps/astro/src/layouts/MainLayout.astro
@@ -0,0 +1,13 @@
+---
+import { Stack } from 'styled-system/jsx';
+import Navigation from '~/components/layout/Navigation.astro';
+import '../index.css';
+import BaseLayout from './BaseLayout.astro';
+---
+
+
+
+
+
+
+
diff --git a/apps/astro/src/pages/[locale]/contact/index.astro b/apps/astro/src/pages/[locale]/contact/index.astro
index 5e18d43..b95e916 100644
--- a/apps/astro/src/pages/[locale]/contact/index.astro
+++ b/apps/astro/src/pages/[locale]/contact/index.astro
@@ -2,7 +2,7 @@
import { Box, Center, Grid, HStack, Stack, styled } from 'styled-system/jsx';
import { NAMECARDS } from '../../../constants/namecard';
-import BaseLayout from '../../../layouts/BaseLayout.astro';
+import MainLayout from '~/layouts/MainLayout.astro';
export async function getStaticPaths() {
return [{ params: { locale: 'en' } }, { params: { locale: 'ja' } }];
}
@@ -16,10 +16,10 @@ export async function getStaticPaths() {
//
---
-
+
-
+