refactor: i18n

src/components/core/I18nHead.astro

@@ -1,25 +1,20 @@
 ---
-import { normalizeUrl, type LocaleSlug } from 'i18n';
+import { getAbsoluteLocaleUrl } from 'astro:i18n';
+import { type LocaleSlug } from 'i18n';
 
 interface Props {
   locales?: LocaleSlug[];
 }
 
-let { locales } = Astro.props as Props;
-
-locales =
-  locales?.map((item) => ({
-    locale: item.locale,
-    slug: item.locale === 'en' ? `${item.slug}` : `${item.locale}${item.slug}`,
-  })) ?? [];
+const { locales = [] } = Astro.props as Props;
 ---
 
 {
   locales.map(({ locale, slug }) => (
     <link
       rel="alternate"
       hreflang={locale}
-      href={Astro.url.origin + normalizeUrl(slug)}
+      href={getAbsoluteLocaleUrl(locale, slug)}
     />
   ))
 }

src/components/core/LanguageIcon.astro

@@ -8,16 +8,16 @@ const nextLocale = locale === 'en' ? 'pt' : 'en';
 ---
 
 <Tooltip
-  message={t.common.header.change_language_tooltip}
+  message={t('common.header.change_language_tooltip')}
   position="bottom"
   id="language-tooltip"
 >
   <a
     href={switchLocale(nextLocale)}
     class="header-language-btn"
     accesskey="l"
-    data-disabled-message={t.common.header.change_language_tooltip_disabled}
-    data-enabled-message={t.common.header.change_language_tooltip}
+    data-disabled-message={t('common.header.change_language_tooltip_disabled')}
+    data-enabled-message={t('common.header.change_language_tooltip')}
   >
     <span
       class:list={[

src/components/core/Link/LinkBox.astro

@@ -51,6 +51,7 @@ const attr = { 'data-umami-event': event };
 <style define:vars={{ padding, iconSize, gridColumn }}>
   .link-box {
     height: min-content;
+    width: 100%;
     border: var(--border-size) solid var(--border-color);
     border-radius: var(--border-radius);
     display: flex;

src/components/core/Post/PostCard.astro

@@ -18,7 +18,7 @@ interface Props {
   maxTags?: number;
 }
 
-const { t, interpolate, localizePath } = useLocale(Astro.url.pathname);
+const { t, localizePath } = useLocale(Astro.url.pathname);
 
 const {
   image,
@@ -37,7 +37,7 @@ const {
   <div class="post-card-img-container">
     {
       image && (
-        <a href={href} title={t.post.card.read_post}>
+        <a href={href} title={t('post.card.read_post')}>
           <img src={image} alt={`Post - ${title}`} class="post-card-img" />
         </a>
       )
@@ -49,16 +49,14 @@ const {
         <PostDateTime date={publishedAt} /> •
         <Link
           title={category}
-          alt={interpolate(t.post.card.see_more_posts_from_this_category, {
-            name: 'category',
-          })}
+          alt={t('post.card.see_more_posts_from_this_category', { category })}
           href={localizePath(`/blog/categories/${category}`)}
         /> •
         <span>{getReadTime(body)}</span>
       </span>
     </div>
     <div class="post-card-header">
-      <Link href={href} alt={t.post.card.read_post} display="inline">
+      <Link href={href} alt={t('post.card.read_post')} display="inline">
         <h3>{title}</h3>
       </Link>
     </div>
@@ -73,8 +71,8 @@ const {
     <div class="post-card-read-more">
       <Link
         href={href}
-        alt={t.post.card.read_post}
-        title={t.post.card.read_post}
+        alt={t('post.card.read_post')}
+        title={t('post.card.read_post')}
         icon="mdi:arrow-right-thin"
         iconSide="right"
         hasBorderBottom={false}

src/components/core/Post/PostShareBanner.astro

@@ -20,38 +20,38 @@ const { link, linkedin, twitter, reddit, bluesky } = Astro.props;
 <div class="post-extra-share">
   <span class="post-extra-share-left">
     <Icon name="mdi:cards-heart" width={18} />
-    {t.post.share.title}
+    {t('post.share.title')}
   </span>
   <PostShare
     items={[
       {
         href: linkedin,
         icon: 'simple-icons:linkedin',
-        alt: t.post.share.linkedin_alt,
+        alt: t('post.share.linkedin_alt'),
         event: `Post Share (Footer) - Linkedin (${link})`,
       },
       {
         href: twitter,
         icon: 'simple-icons:x',
-        alt: t.post.share.twitter_alt,
+        alt: t('post.share.twitter_alt'),
         event: `Post Share (Footer) - X (Twitter) (${link})`,
       },
       {
         href: reddit,
         icon: 'simple-icons:reddit',
-        alt: t.post.share.reddit_alt,
+        alt: t('post.share.reddit_alt'),
         event: `Post Share (Footer) - Reddit (${link})`,
       },
       {
         href: bluesky,
         icon: 'simple-icons:bluesky',
-        alt: t.post.share.bluesky_alt,
+        alt: t('post.share.bluesky_alt'),
         event: `Post Share (Footer) - Blueksy (${link})`,
       },
       {
         href: headConfig.shortLink + link,
         icon: 'mdi:link',
-        alt: t.post.share.copy_link_alt,
+        alt: t('post.share.copy_link_alt'),
         id: 'share',
         messageId: 'share-title',
         event: `Post Share (Footer) - Copy link (${link})`,

src/components/core/Post/PostUpdatedAt.astro

@@ -19,7 +19,7 @@ const GIT_REF = `https://github.com/LucJosin/lucasjosino.com/commits/main/src/co
     Last modified:
     <Link
       href={GIT_REF}
-      alt={t.post.see_post_history}
+      alt={t('post.see_post_history')}
       title={getFormatedDate(updatedAt, true)}
       isLocal={false}
     />

src/components/core/Project/ProjectCard.astro

@@ -48,11 +48,11 @@ const { project, titleSize, descSize } = Astro.props as Props;
               <a
                 href={project.org}
                 class="project-card-org"
-                title={t.projects.org_alt}
+                title={t('projects.org_alt')}
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                {t.projects.org}
+                {t('projects.org')}
                 <Icon name="mdi:external-link" />
               </a>
             )
@@ -119,7 +119,7 @@ const { project, titleSize, descSize } = Astro.props as Props;
   {
     project.subProjects && (
       <div class="project-card-sub-projects-wrapper">
-        <h3>{t.projects.repositories}</h3>
+        <h3>{t('projects.repositories')}</h3>
         <div class="project-card-sub-projects">
           {project.subProjects.map((sub) => {
             return (

src/components/core/ThemeIcon.astro

@@ -12,8 +12,8 @@ const { t } = useLocale(Astro.url.pathname);
 const { position = 'initial' } = Astro.props;
 ---
 
-<Tooltip message={t.common.header.change_theme_tooltip} position="bottom">
-  <button id="theme" accesskey="t" title={t.common.header.change_theme}>
+<Tooltip message={t('common.header.change_theme_tooltip')} position="bottom">
+  <button id="theme" accesskey="t" title={t('common.header.change_theme')}>
     <Icon name="mdi:white-balance-sunny" class="dark-icon" />
     <Icon name="mdi:moon-and-stars" class="light-icon" />
   </button>

src/components/data/Footer.astro

@@ -10,29 +10,29 @@ const { t, localizePath } = useLocale(Astro.url.pathname);
 <div class="footer">
   <div class="footer-left">
     <div class="footer-links">
-      <Tooltip message={t.common.footer.links.rss}>
+      <Tooltip message={t('common.footer.links.rss')}>
         <LinkBox
           href="/rss.xml"
           isLocal={false}
-          alt={t.common.footer.links.rss}
+          alt={t('common.footer.links.rss')}
           icon="mdi:rss"
           padding="0.5rem"
           event=`RSS (Footer) - (${Astro.url.pathname})`
         />
       </Tooltip>
-      <Tooltip message={t.common.footer.links.tags}>
+      <Tooltip message={t('common.footer.links.tags')}>
         <LinkBox
           href={localizePath('/blog/tags/')}
-          alt={t.common.footer.links.tags}
+          alt={t('common.footer.links.tags')}
           icon="mdi:tags"
           padding="0.5rem"
         />
       </Tooltip>
-      <Tooltip message={t.common.footer.links.source_code}>
+      <Tooltip message={t('common.footer.links.source_code')}>
         <LinkBox
           href="https://github.com/LucJosin/lucasjosino.com"
           isLocal={false}
-          alt={t.common.footer.links.source_code}
+          alt={t('common.footer.links.source_code')}
           icon="simple-icons:github"
           padding="0.5rem"
         />
@@ -43,7 +43,7 @@ const { t, localizePath } = useLocale(Astro.url.pathname);
       <Link href={localizePath('/')} alt="Lucas Josino" title="Lucas Josino" />
     </span>
     <div class="footer-powered">
-      {t.common.footer.powered}
+      {t('common.footer.powered')}
       <Link
         href="https://astro.build/"
         isLocal={false}

src/components/data/Header.astro

@@ -12,10 +12,10 @@ const { t, localizePath } = useLocale(Astro.url.pathname);
 <header>
   <div class="header-container">
     <div class="header-left">
-      <Tooltip message={t.common.header.homepage_tooltip} position="bottom">
+      <Tooltip message={t('common.header.homepage_tooltip')} position="bottom">
         <Link
           href={localizePath('/')}
-          alt={t.common.header.homepage}
+          alt={t('common.header.homepage')}
           hasBorderBottom={false}
           accesskey="h"
         >
@@ -25,19 +25,19 @@ const { t, localizePath } = useLocale(Astro.url.pathname);
     </div>
     <nav class="header-nav">
       <Link
-        title={t.common.header.blog}
+        title={t('common.header.blog')}
         href={localizePath('/blog/')}
-        alt={t.common.header.blog_link_alt}
+        alt={t('common.header.blog_link_alt')}
       />
       <Link
-        title={t.common.header.projects}
+        title={t('common.header.projects')}
         href={localizePath('/projects/')}
-        alt={t.common.header.projects_link_alt}
+        alt={t('common.header.projects_link_alt')}
       />
       <Link
-        title={t.common.header.about}
+        title={t('common.header.about')}
         href={localizePath('/about/')}
-        alt={t.common.header.about_link_alt}
+        alt={t('common.header.about_link_alt')}
       />
       <LanguageIcon />
       <ThemeIcon />

src/components/data/Post/PostComments.astro

@@ -5,7 +5,7 @@ const { t } = useLocale(Astro.url.pathname);
 ---
 
 <div class="post-comments">
-  <h2 id="comments">{t.post.comments}</h2>
+  <h2 id="comments">{t('post.comments')}</h2>
   <div class="giscus"></div>
 </div>
 

src/components/data/Post/PostRelated.astro

@@ -13,7 +13,7 @@ const { posts } = Astro.props;
 ---
 
 <div class="post-releated">
-  <h2>{t.post.related_posts}</h2>
+  <h2>{t('post.related_posts')}</h2>
   <span class="post-related-items">
     {
       posts.map((item) => {

src/components/data/Posts.astro

@@ -16,8 +16,8 @@ const posts = await getAllPosts(true, true, locale);
         <SubTitle title="Posts" />
         <Link
           href={localizePath('/blog/')}
-          alt={t.home.posts.see_more_alt}
-          title={t.home.see_more}
+          alt={t('home.posts.see_more_alt')}
+          title={t('home.see_more')}
           icon="mdi:arrow-right"
           iconSide="right"
           hasBorderBottom={false}

src/components/data/Projects.astro

@@ -10,11 +10,11 @@ const { t, localizePath } = useLocale(Astro.url.pathname);
 
 <section class="projects-section">
   <div class="projects-header">
-    <SubTitle title={t.home.projects.title} />
+    <SubTitle title={t('home.projects.title')} />
     <Link
       href={localizePath('/projects/')}
-      alt={t.home.projects.see_more_alt}
-      title={t.home.see_more}
+      alt={t('home.projects.see_more_alt')}
+      title={t('home.see_more')}
       icon="mdi:arrow-right"
       iconSide="right"
       hasBorderBottom={false}

src/components/data/Tags.astro

@@ -13,7 +13,7 @@ interface Props {
   active?: boolean;
 }
 
-const { localizePath, t, interpolate, locale } = useLocale(Astro.url.pathname);
+const { localizePath, t, locale } = useLocale(Astro.url.pathname);
 
 const {
   title,
@@ -40,7 +40,7 @@ const justifyContent = center ? 'center' : 'initial';
             value={tag + (filteredPosts ? ` (${filteredPosts})` : '')}
             href={localizePath(`/blog/${target}/${tag}`)}
             active={active}
-            title={interpolate(t.post.tags_see_more_alt, { tag })}
+            title={t('post.tags_see_more_alt', { tag })}
           />
         );
       })

src/i18n/en/home.ts

@@ -1,6 +1,6 @@
 export const home = {
   welcome:
-    "Hi 👋, I'm <strong>Lucas Josino</strong>, a 21 y/o from <strong>Brazil</strong> 🇧🇷... ↗",
+    "Hi 👋, I'm <strong>Lucas Josino</strong>, a 21 y/o from <strong>Brazil</strong> 🇧🇷... - About ➞",
   see_more: 'See more',
   posts: {
     title: 'Posts',

src/i18n/en/index.ts

@@ -1,4 +1,3 @@
-import type { i18nSchema } from 'i18n/schema';
 import { s404 } from './404';
 import { about } from './about';
 import { blog } from './blog';
@@ -9,7 +8,7 @@ import { post } from './post';
 import { projects } from './projects';
 import { tags } from './tags';
 
-export const enLocale: i18nSchema = {
+export const enLocale = {
   '404': s404,
   about,
   blog,