feat: add a few pages

apps/astro/src/components/lib/Markdown.tsx

@@ -28,16 +28,18 @@ export const Markdown = ({
       <ReactMarkdown
         remarkPlugins={[remarkTextr, remarkGfm]}
         components={{
-          h1: ({ node: _, ...props }) => (
+          h1: ({ ref: __, node: _, ...props }) => (
             <Heading as="h1" size="3xl" fontWeight="bold" {...props} />
           ),
-          h2: ({ node: _, ...props }) => <Heading as="h2" size="3xl" {...props} />,
-          h3: ({ node: _, ...props }) => (
+          h2: ({ ref: __, node: _, ...props }) => <Heading as="h2" size="3xl" {...props} />,
+          h3: ({ ref: __, node: _, ...props }) => (
             <Heading as="h3" size="2xl" fontWeight="bold" {...props} />
           ),
-          h4: ({ node: _, ...props }) => <Heading as="h4" size="2xl" {...props} />,
-          h5: ({ node: _, ...props }) => <Heading as="h5" size="xl" fontWeight="bold" {...props} />,
-          h6: ({ node: _, ...props }) => <Heading as="h6" size="xl" {...props} />,
+          h4: ({ ref: __, node: _, ...props }) => <Heading as="h4" size="2xl" {...props} />,
+          h5: ({ ref: __, node: _, ...props }) => (
+            <Heading as="h5" size="xl" fontWeight="bold" {...props} />
+          ),
+          h6: ({ ref: __, node: _, ...props }) => <Heading as="h6" size="xl" {...props} />,
           p: ({ ref: _ref, node: _, ...props }) => <Text as="p" {...props} />,
           strong: ({ ref: _, node: __, ...props }) => (
             <Text as="span" fontWeight="bold" {...props} />

apps/astro/src/i18n/utils.ts

@@ -14,10 +14,12 @@ export function useTranslations<Lang extends keyof typeof ui = typeof defaultLan
   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] {
+  >(key: `${string & Collection}.${string & Key}`): (typeof ui)[Lang][Collection][Key] | Key {
     const [collection, translationKey] = key.split('.') as [Collection, Key];
-    return (
-      ui[lang][collection][translationKey] || ui[defaultLang as Lang][collection][translationKey]
-    );
+    const res =
+      ui[lang][collection]?.[translationKey] ??
+      ui[defaultLang as Lang][collection]?.[translationKey] ??
+      translationKey;
+    return res;
   };
 }

apps/astro/src/pages/[locale]/about/index.astro

@@ -9,6 +9,7 @@ import { toKebabCase } from 'utils/kebab-case';
 import { Markdown } from '~/components/lib/Markdown';
 import { TagBadge } from '~/components/tags/TagBadge';
 import { Heading } from '~/components/ui/heading';
+import { Link } from '~/components/ui/link';
 import { Text } from '~/components/ui/text';
 import { graphQLSdk } from '~/graphql';
 import { useTranslations, validateLocale } from '~/i18n/utils';
@@ -66,9 +67,9 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-reva
                           .map(
                             (s) =>
                               s.attributes && (
-                                <a href={`/tags/${s.attributes.slug}`}>
+                                <Link href={`/tags/${s.attributes.slug}`}>
                                   <TagBadge tag={s.attributes} showCount />
-                                </a>
+                                </Link>
                               )
                           )}
                       </Wrap>
@@ -111,9 +112,9 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-reva
                       {sortTags(tags?.data).map(
                         (s) =>
                           s.attributes && (
-                            <a href={`/tags/${s.attributes.slug}`}>
+                            <Link href={`/tags/${s.attributes.slug}`}>
                               <TagBadge tag={s.attributes} showCount size="sm" />
-                            </a>
+                            </Link>
                           )
                       )}
                     </Wrap>

apps/astro/src/pages/[locale]/hobbies/[id]/index.astro

@@ -0,0 +1,66 @@
+---
+//TODO:
+import { FaArrowLeft } from 'react-icons/fa';
+import { Container, Divider, Stack, Wrap } from 'styled-system/jsx';
+import { Markdown } from '~/components/lib/Markdown';
+import { Heading } from '~/components/ui/heading';
+import { Link } from '~/components/ui/link';
+import { Text } from '~/components/ui/text';
+import { useTranslations } from '~/i18n/utils';
+import MainLayout from '~/layouts/MainLayout.astro';
+import { outlineClient } from '~/utils/outline-api';
+import { getOutlineSettings } from '~/utils/outline-settings';
+
+export const prerender = false;
+
+const { locale, id } = Astro.params;
+
+const t = useTranslations(locale as 'en');
+
+const settings = await getOutlineSettings();
+
+if (!settings?.['hobbies-collection']) {
+  return Astro.redirect('/404');
+}
+
+const data = (
+  await outlineClient.POST('/documents.info', {
+    body: { collectionId: settings['hobbies-collection'], id: id }
+  })
+).data?.data;
+
+if (!data) {
+  return Astro.redirect('/404');
+}
+
+const { title, text } = data;
+Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=86400, must-revalidate');
+---
+
+<MainLayout>
+  <Container maxW="breakpoint-xl" py="8" w="full">
+    <Stack gap="4">
+      <Link href={`/${locale}/hobbies`}>
+        <Wrap fontSize="sm" alignItems="center">
+          <FaArrowLeft />
+          <Text>{t('hobbies.back-to-hobbies')}</Text>
+        </Wrap>
+      </Link>
+      <Stack gap="2">
+        <Stack gap="1">
+          <Heading
+            as="h1"
+            size="2xl"
+            fontWeight="bold"
+            style={{
+              viewTransitionName: `project-title-${id}`
+            }}>{title}</Heading
+          >
+        </Stack>
+      </Stack>
+
+      <Divider />
+      {text && <Markdown content={text} assetsPrefix={import.meta.env.PUBLIC_API_URL} />}
+    </Stack>
+  </Container>
+</MainLayout>

apps/astro/src/pages/[locale]/hobbies/index.astro

@@ -5,6 +5,7 @@ import MainLayout from '~/layouts/MainLayout.astro';
 
 import { Center, Container, Grid, GridItem, Stack } from 'styled-system/jsx';
 import { Heading } from '~/components/ui/heading';
+import { Link } from '~/components/ui/link';
 import { Text } from '~/components/ui/text';
 import { useTranslations } from '~/i18n/utils';
 import { outlineClient } from '~/utils/outline-api';
@@ -27,7 +28,7 @@ const hobbiesList = (
   await outlineClient.POST('/documents.list', {
     body: { collectionId: settings['hobbies-collection'] }
   })
-).data;
+).data?.data?.filter((d) => !d.parentDocumentId);
 
 if (!hobbiesList) {
   return Astro.redirect(404);
@@ -40,17 +41,20 @@ if (!hobbiesList) {
       <Heading as="h1" fontSize="2xl">{t('common.hobbies')}</Heading>
       <Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))">
         {
-          hobbiesList.data?.map((hobby) => {
-            const { title } = hobby;
+          hobbiesList.map((hobby) => {
+            console.log(hobby);
+            const { title, id } = hobby;
             return (
               <GridItem>
-                <Center bgColor="bg.muted" p={4} rounded="l1">
-                  <Stack>
-                    <Text fontWeight="bold" fontSize="xl">
-                      {title}
-                    </Text>
-                  </Stack>
-                </Center>
+                <Link w="full" href={`/${locale}/hobbies/${id}`}>
+                  <Center w="full" bgColor="bg.muted" p={4} rounded="l1">
+                    <Stack>
+                      <Text fontWeight="bold" fontSize="xl">
+                        {title}
+                      </Text>
+                    </Stack>
+                  </Center>
+                </Link>
               </GridItem>
             );
           })

apps/astro/src/pages/[locale]/projects/[slug]/index.astro

@@ -99,7 +99,9 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=86400, must-rev
                 {tags.data
                   .filter((t) => !!t)
                   .map((t) => (
-                    <TagBadge tag={t.attributes as Tag} />
+                    <Link href={`/tags/${t.attributes?.slug}`}>
+                      <TagBadge tag={t.attributes as Tag} showCount size="sm" />
+                    </Link>
                   ))}
               </Wrap>
             </HStack>

apps/astro/src/pages/[locale]/tags/[slug]/index.astro

@@ -0,0 +1,176 @@
+---
+import { formatDistance } from 'date-fns';
+import { enUS, ja } from 'date-fns/locale';
+import { FaArrowLeft, FaGithub, FaGlobe } from 'react-icons/fa';
+import { Box, Container, Divider, Grid, GridItem, Stack, styled, Wrap } from 'styled-system/jsx';
+import { formatMonthYear, parseDate } from 'utils/date';
+import { getMediaUrl } from 'utils/media';
+import { Markdown } from '~/components/lib/Markdown';
+import { TagBadge } from '~/components/tags/TagBadge';
+import { Heading } from '~/components/ui/heading';
+import { IconButton } from '~/components/ui/icon-button';
+import { Link } from '~/components/ui/link';
+import { Text } from '~/components/ui/text';
+import { graphQLSdk } from '~/graphql';
+import { Enum_Componentutilslink_Type } from '~/graphql/generated/client';
+import { useTranslations, validateLocale } from '~/i18n/utils';
+import MainLayout from '~/layouts/MainLayout.astro';
+import { sortTags } from '~/utils/tags';
+
+export const prerender = false;
+
+const { locale, slug } = Astro.params;
+
+const data = await graphQLSdk.getTagBySlug({
+  slug
+});
+
+if (!validateLocale(locale)) {
+  return Astro.redirect(404);
+}
+
+const { projects, experiences, title, type } = data?.tags?.data[0].attributes ?? {};
+const t = useTranslations(locale);
+
+Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=86400, must-revalidate');
+---
+
+<MainLayout>
+  <Container maxW="breakpoint-xl" py="8" w="full">
+    <Stack gap="4">
+      <Link href={`/${locale}/projects`}>
+        <Wrap fontSize="sm" alignItems="center">
+          <FaArrowLeft />
+          <Text>{t('project.back-to-projects')}</Text>
+        </Wrap>
+      </Link>
+      <Stack gap="2">
+        <Stack gap="1">
+          <Heading
+            as="h1"
+            size="2xl"
+            fontWeight="bold"
+            style={{
+              viewTransitionName: `project-title-${slug}`
+            }}>{title}</Heading
+          >
+          <Wrap fontSize="md" color="fg.subtle">
+            <Text>{type}</Text>
+            <Text>|</Text>
+            <Text>{type}</Text>
+          </Wrap>
+        </Stack>
+      </Stack>
+
+      {
+        experiences &&
+          experiences.data?.map((d) => {
+            if (!d.attributes) return null;
+            const { title, content, position, tags } = d.attributes;
+            const start = d.attributes.start as string;
+            const end = d.attributes.end as string;
+            return (
+              <Stack>
+                <Heading as="h2" size="xl" fontWeight="bold">
+                  {title}
+                </Heading>
+                <Wrap fontSize="sm">
+                  <Text>{position}</Text> <Text>|</Text>
+                  <Text>
+                    {formatMonthYear(parseDate(start), locale)} -{' '}
+                    {end ? formatMonthYear(parseDate(end), locale) : t('common.present')} (
+                    {formatDistance(parseDate(start), end ? parseDate(end) : new Date(), {
+                      locale: locale === 'ja' ? ja : enUS
+                    })}
+                    )
+                  </Text>
+                </Wrap>
+                {tags && (
+                  <Wrap fontSize="sm" gap="1">
+                    <Text>{t('common.tags')}</Text>
+                    {sortTags(tags?.data).map(
+                      (s) =>
+                        s.attributes && (
+                          <Link href={`/tags/${s.attributes.slug}`}>
+                            <TagBadge tag={s.attributes} showCount size="sm" />
+                          </Link>
+                        )
+                    )}
+                  </Wrap>
+                )}
+                {content && <Markdown content={content} />}
+              </Stack>
+            );
+          })
+      }
+      <Divider />
+      <Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))">
+        {
+          projects?.data?.map((p) => {
+            const { title, description, slug, banner, media, date, category, links } =
+              p.attributes ?? {};
+            const image = banner?.data?.attributes ?? media?.data?.[0]?.attributes;
+            const link = links?.find((l) => l?.type === Enum_Componentutilslink_Type.Web);
+            const ghLink = links?.find((l) => l?.type === Enum_Componentutilslink_Type.Github);
+
+            return (
+              <GridItem>
+                <Stack h="full">
+                  <Link flex={1} href={`/${locale}/projects/${slug}`} data-astro-prefetch="hover">
+                    <Stack h="full" gap="0.5">
+                      {image && (
+                        <Box borderRadius="l2" overflow="hidden">
+                          <styled.img
+                            src={getMediaUrl(image.url, {}, import.meta.env.PUBLIC_API_URL) ?? ''}
+                            alt={image.name}
+                            objectFit="contain"
+                            objectPosition="center"
+                            backgroundColor="bg.muted"
+                            width="full"
+                            aspectRatio="4 / 3"
+                            style={{
+                              viewTransitionName: `project-image-${slug}`
+                            }}
+                          />
+                        </Box>
+                      )}
+                      <Text
+                        fontWeight="bold"
+                        style={{
+                          viewTransitionName: `project-title-${slug}`
+                        }}
+                      >
+                        {title}
+                      </Text>
+                      <Wrap fontSize="sm" gap="1" rowGap="0.5" color="fg.subtle">
+                        <Text>{category?.data?.attributes?.name}</Text> <Text>|</Text>
+                        <Text>{formatMonthYear(parseDate(date), locale)}</Text>
+                      </Wrap>
+                      <Text fontSize="sm">{description}</Text>
+                    </Stack>
+                  </Link>
+                  <Wrap w="full">
+                    {link?.url && (
+                      <Link href={link?.url} target="_blank">
+                        <IconButton size="xs" variant="subtle">
+                          <FaGlobe />
+                        </IconButton>
+                      </Link>
+                    )}
+                    {ghLink?.url && (
+                      <Link href={ghLink.url} target="_blank">
+                        <IconButton size="xs" variant="subtle">
+                          <FaGithub />
+                        </IconButton>
+                      </Link>
+                    )}
+                  </Wrap>
+                </Stack>
+              </GridItem>
+            );
+          })
+        }
+      </Grid>
+    </Stack>
+  </Container>
+</MainLayout>

libs/i18n/en/hobbies.json

@@ -0,0 +1,3 @@
+{
+  "back-to-hobbies": "Back to hobbies"
+}