chore: improved types

Author: ovflowd

apps/site/app/[locale]/next-data/blog-data/[category]/[page]/route.ts

@@ -3,8 +3,13 @@ import {
   providePaginatedBlogPosts,
 } from '@/next-data/providers/blogData';
 import { defaultLocale } from '@/next.locales.mjs';
+import type { BlogCategory } from '@/types';
 
-type DynamicStaticPaths = { locale: string; category: string; page: string };
+type DynamicStaticPaths = {
+  locale: string;
+  category: BlogCategory;
+  page: string;
+};
 type StaticParams = { params: Promise<DynamicStaticPaths> };
 
 // This is the Route Handler for the `GET` method which handles the request

apps/site/components/Common/BlogPostCard/index.tsx

@@ -5,13 +5,14 @@ import FormattedTime from '@/components/Common/FormattedTime';
 import Preview from '@/components/Common/Preview';
 import Link from '@/components/Link';
 import WithAvatarGroup from '@/components/withAvatarGroup';
+import type { BlogCategory } from '@/types';
 import { mapBlogCategoryToPreviewType } from '@/util/blogUtils';
 
 import styles from './index.module.css';
 
 type BlogPostCardProps = {
   title: string;
-  category: string;
+  category: BlogCategory;
   description?: string;
   authors?: Array<string>;
   date?: Date;

apps/site/components/Containers/MetaBar/index.tsx

@@ -8,7 +8,7 @@ import Link from '@/components/Link';
 import styles from './index.module.css';
 
 type MetaBarProps = {
-  items: Record<string, React.ReactNode>;
+  items: Partial<Record<IntlMessageKeys, React.ReactNode>>;
   headings?: {
     items: Array<Heading>;
     minDepth?: number;
@@ -33,7 +33,7 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
           .filter(([, value]) => !!value)
           .map(([key, value]) => (
             <Fragment key={key}>
-              <dt>{t(key)}</dt>
+              <dt>{t(key as IntlMessageKeys)}</dt>
               <dd>{value}</dd>
             </Fragment>
           ))}

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -70,6 +70,13 @@ const ReleaseCodeBox: FC = () => {
   // Determines if the code box should render the skeleton loader
   const renderSkeleton = os === 'LOADING' || platform === '';
 
+  // Defines fallbacks for the currentPlatform object
+  const {
+    label = '',
+    url = '',
+    info = 'layouts.download.codeBox.platformInfo.default',
+  } = currentPlatform ?? {};
+
   return (
     <div className="mb-6 mt-4 flex flex-col gap-2">
       {release.status === 'End-of-life' && (
@@ -78,11 +85,11 @@ const ReleaseCodeBox: FC = () => {
         </AlertBox>
       )}
 
-      <Skeleton loading={renderSkeleton} hide={currentPlatform?.recommended}>
+      {!currentPlatform || currentPlatform.recommended || (
         <AlertBox title="Info" level="info" size="small">
           {t('layouts.download.codeBox.communityPlatformInfo')}
         </AlertBox>
-      </Skeleton>
+      )}
 
       <Skeleton loading={renderSkeleton}>
         <JSXCodeBox language={codeLanguage} className="min-h-[15.5rem]">
@@ -92,22 +99,12 @@ const ReleaseCodeBox: FC = () => {
 
       <span className="text-center text-xs text-neutral-800 dark:text-neutral-200">
         <Skeleton loading={renderSkeleton} hide={!currentPlatform}>
-          {t(
-            currentPlatform?.bottomInfo ??
-              'layouts.download.codeBox.platformInfo.default',
-            { platform: currentPlatform?.label as string }
-          )}
-        </Skeleton>
-
-        <br />
-
-        <Skeleton loading={renderSkeleton} hide={!currentPlatform}>
+          {t(info, { platform: label })}{' '}
           {t.rich('layouts.download.codeBox.externalSupportInfo', {
-            platform: currentPlatform?.label as string,
-            b: chunks => <b>{chunks}</b>,
-            link: chunks => (
-              <LinkWithArrow href={currentPlatform?.url}>
-                {chunks}
+            platform: label,
+            link: text => (
+              <LinkWithArrow href={url}>
+                <b>{text}</b>
               </LinkWithArrow>
             ),
           })}

apps/site/components/withBlogCrossLinks.tsx

@@ -3,14 +3,15 @@ import type { FC } from 'react';
 import { getClientContext } from '@/client-context';
 import CrossLink from '@/components/Common/CrossLink';
 import getBlogData from '@/next-data/blogData';
+import type { BlogCategory } from '@/types';
 
 const WithBlogCrossLinks: FC = async () => {
   const { pathname } = getClientContext();
 
   // Extracts from the static URL the components used for the Blog Post slug
   const [, , category, postname] = pathname.split('/');
 
-  const { posts } = await getBlogData(category);
+  const { posts } = await getBlogData(category as BlogCategory);
 
   const currentItem = posts.findIndex(
     ({ slug }) => slug === `/blog/${category}/${postname}`

apps/site/global.d.ts

@@ -0,0 +1,29 @@
+import type baseMessages from '@node-core/website-i18n/locales/en.json';
+import type { MessageKeys, NestedValueOf, NestedKeyOf } from 'next-intl';
+
+declare global {
+  // Defines a type for all the IntlMessage shape (which is used internall by next-intl)
+  // @see https://next-intl.dev/docs/workflows/typescript
+  type IntlMessages = typeof baseMessages;
+
+  // Defines a generic type for all available i18n translation keys, by default not using any namespace
+  type IntlMessageKeys<
+    NestedKey extends NamespaceKeys<
+      IntlMessages,
+      NestedKeyOf<IntlMessages>
+    > = never,
+  > = MessageKeys<
+    NestedValueOf<
+      { '!': IntlMessages },
+      [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
+    >,
+    NestedKeyOf<
+      NestedValueOf<
+        { '!': IntlMessages },
+        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
+      >
+    >
+  >;
+}
+
+export {};

apps/site/hooks/react-generic/useSiteNavigation.ts

@@ -38,7 +38,7 @@ const useSiteNavigation = () => {
   const t = useTranslations();
 
   const mapNavigationEntries = (entries: Navigation, context: Context = {}) => {
-    const getFormattedMessage = (label: string, key: string) =>
+    const getFormattedMessage = (label: IntlMessageKeys, key: string) =>
       t.rich(label, context[key] || {}) as FormattedMessage;
 
     return Object.entries(entries).map(

apps/site/layouts/Blog.tsx

@@ -7,6 +7,7 @@ import WithBlogCategories from '@/components/withBlogCategories';
 import WithFooter from '@/components/withFooter';
 import WithNavBar from '@/components/withNavBar';
 import getBlogData from '@/next-data/blogData';
+import type { BlogCategory } from '@/types';
 
 import styles from './layouts.module.css';
 
@@ -18,7 +19,10 @@ const getBlogCategory = async (pathname: string) => {
   // note that malformed routes can't happen as they are all statically generated
   const [, , category = 'all', , page = 1] = pathname.split('/');
 
-  const { posts, pagination } = await getBlogData(category, Number(page));
+  const { posts, pagination } = await getBlogData(
+    category as BlogCategory,
+    Number(page)
+  );
 
   return { category, posts, pagination, page: Number(page) };
 };
@@ -27,7 +31,7 @@ const BlogLayout: FC = async () => {
   const { pathname } = getClientContext();
   const t = await getTranslations();
 
-  const mapCategoriesToTabs = (categories: Array<string>) =>
+  const mapCategoriesToTabs = (categories: Array<BlogCategory>) =>
     categories.map(category => ({
       key: category,
       label: t(`layouts.blog.categories.${category}`),

apps/site/next-data/blogData.ts

@@ -5,9 +5,12 @@ import {
   VERCEL_ENV,
   VERCEL_REGION,
 } from '@/next.constants.mjs';
-import type { BlogPostsRSC } from '@/types';
+import type { BlogCategory, BlogPostsRSC } from '@/types';
 
-const getBlogData = (cat: string, page?: number): Promise<BlogPostsRSC> => {
+const getBlogData = (
+  cat: BlogCategory,
+  page?: number
+): Promise<BlogPostsRSC> => {
   const IS_NOT_VERCEL_RUNTIME_ENV =
     (!IS_DEV_ENV && VERCEL_ENV && !VERCEL_REGION) ||
     (!IS_DEV_ENV && !VERCEL_ENV);

apps/site/next-data/providers/blogData.ts

@@ -2,35 +2,37 @@ import { cache } from 'react';
 
 import generateBlogData from '@/next-data/generators/blogData.mjs';
 import { BLOG_POSTS_PER_PAGE } from '@/next.constants.mjs';
-import type { BlogPostsRSC } from '@/types';
+import type { BlogCategory, BlogPostsRSC } from '@/types';
 
 const { categories, posts } = await generateBlogData();
 
 export const provideBlogCategories = cache(() => categories);
 
-export const provideBlogPosts = cache((category: string): BlogPostsRSC => {
-  const categoryPosts = posts
-    .filter(post => post.categories.includes(category))
-    .sort((a, b) => b.date.getTime() - a.date.getTime());
+export const provideBlogPosts = cache(
+  (category: BlogCategory): BlogPostsRSC => {
+    const categoryPosts = posts
+      .filter(post => post.categories.includes(category))
+      .sort((a, b) => b.date.getTime() - a.date.getTime());
 
-  // Total amount of possible pages given the amount of blog posts
-  const total = categoryPosts.length / BLOG_POSTS_PER_PAGE;
+    // Total amount of possible pages given the amount of blog posts
+    const total = categoryPosts.length / BLOG_POSTS_PER_PAGE;
 
-  return {
-    posts: categoryPosts,
-    pagination: {
-      prev: null,
-      next: null,
-      // In case the division results on a remainder we need
-      // to have an extra page containing the remainder entries
-      pages: Math.floor(total % 1 === 0 ? total : total + 1),
-      total: categoryPosts.length,
-    },
-  };
-});
+    return {
+      posts: categoryPosts,
+      pagination: {
+        prev: null,
+        next: null,
+        // In case the division results on a remainder we need
+        // to have an extra page containing the remainder entries
+        pages: Math.floor(total % 1 === 0 ? total : total + 1),
+        total: categoryPosts.length,
+      },
+    };
+  }
+);
 
 export const providePaginatedBlogPosts = cache(
-  (category: string, page: number): BlogPostsRSC => {
+  (category: BlogCategory, page: number): BlogPostsRSC => {
     const { posts, pagination } = provideBlogPosts(category);
 
     // This autocorrects if invalid numbers are given to only allow