feat: add basic layout for astro

hamzaabamboo · Apr 1, 2024 · 1dd7815 · 1dd7815
1 parent 5b2f680
commit 1dd7815
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 12 deletions.
diff --git a/apps/astro/src/components/layout/Navigation.astro 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' }
+];
+---
+
+<HStack _print={{ display: 'none' }} p={2} justifyContent="space-between">
+  <HStack>
+    <Link href={getURLWithLanguage('/')}>{t('common.ham')}</Link>
+  </HStack>
+  <HStack gap="2">
+    {
+      NAVIGATION_LINKS.map(({ label, value }) => {
+        return <Link href={getURLWithLanguage(value)}>{label}</Link>;
+      })
+    }
+    <Text> | </Text>
+    {
+      Object.entries(languages).map((t) => {
+        return <Link href={getCurrentURLWithLanguage(t[0])}>{t[1]}</Link>;
+      })
+    }
+  </HStack>
+</HStack>
diff --git 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
@@ -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
@@ -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 extends keyof typeof ui = typeof defaultLang>(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
@@ -1,9 +1,12 @@
 ---
 import '../index.css';
 
+import { getLangFromUrl } from '../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
 ---
 
-<html lang="en">
+<html lang={lang}>
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

diff --git a/apps/astro/src/layouts/MainLayout.astro 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';
+---
+
+<BaseLayout>
+  <Stack gap="0" minH="100dvh">
+    <Navigation />
+    <Stack flex={1}><slot /></Stack>
+  </Stack>
+</BaseLayout>
diff --git 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() {
 // <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'/>
 ---
 
-<BaseLayout>
+<MainLayout>
   <Center
+    flex={1}
     h={{
-      base: '100dvh',
       _print: 'full'
     }}
     w="full"
@@ -130,7 +130,7 @@ export async function getStaticPaths() {
       }
     </Grid>
   </Center>
-</BaseLayout>
+</MainLayout>
 
 <style>
   @page {

diff --git a/apps/astro/src/pages/[locale]/index.astro b/apps/astro/src/pages/[locale]/index.astro
@@ -1,7 +1,7 @@
 ---
 import { css } from 'styled-system/css';
 
-import BaseLayout from '../../layouts/BaseLayout.astro';
+import MainLayout from '~/layouts/MainLayout.astro';
 
 export async function getStaticPaths() {
   return [{ params: { locale: 'en' } }, { params: { locale: 'ja' } }];
@@ -10,6 +10,6 @@ export async function getStaticPaths() {
 const param = Astro.params;
 ---
 
-<BaseLayout>
+<MainLayout>
   <h1 class={css({ fontSize: '3xl', fontWeight: 'bold' })}>Hello {param.locale}</h1>
-</BaseLayout>
+</MainLayout>
diff --git a/apps/astro/tsconfig.json b/apps/astro/tsconfig.json
@@ -6,7 +6,8 @@
     "jsxImportSource": "react",
     "paths": {
       "~/*": ["./*"],
-      "i18n/*": ["../../libs/i18n/*"]
+      "i18n/*": ["../../../libs/i18n/*"],
+      "styled-system/*": ["./styled-system/*"]
     }
   },
   "include": ["src", "styled-system"]

diff --git a/libs/i18n/en/index.ts b/libs/i18n/en/index.ts
@@ -16,4 +16,4 @@ export default {
   'name-card': nameCard,
   note: note,
   project: project
-};
+} as const;
diff --git a/libs/i18n/index.ts b/libs/i18n/index.ts
@@ -4,4 +4,4 @@ import ja from './ja';
 export default {
   en,
   ja
-};
+} as const;
diff --git a/libs/i18n/ja/index.ts b/libs/i18n/ja/index.ts
@@ -16,4 +16,4 @@ export default {
   'name-card': nameCard,
   note: note,
   project: project
-};
+} as const;
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ import ja from './ja'; @@
     export default {
       en,
       ja
-    };
+    } as const;