feat: introduced new downloads page

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/AlertBox/index.module.css

@@ -10,9 +10,10 @@
     text-white;
 
   a {
-    @apply font-ibm-plex-mono
+    @apply font-bold
       text-white
-      underline;
+      underline
+      hover:text-white;
 
     &:hover {
       @apply no-underline;

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/Common/Button/index.module.css

@@ -3,6 +3,7 @@
     relative
     inline-flex
     items-center
+    justify-center
     gap-2
     py-2.5
     text-center

apps/site/components/Common/Select/index.module.css

@@ -108,8 +108,14 @@
   }
 }
 
-.dropdown:has(.label) .text > span > span {
-  @apply pl-3;
+.dropdown:has(.label) .text > span {
+  &:has(svg) > svg {
+    @apply ml-3;
+  }
+
+  &:not(&:has(svg)) > span {
+    @apply ml-3;
+  }
 }
 
 .inline {

apps/site/components/Common/Select/index.stories.tsx

@@ -1,10 +1,7 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Select from '@/components/Common/Select';
-import AIX from '@/components/Icons/Platform/AIX';
-import Apple from '@/components/Icons/Platform/Apple';
-import Linux from '@/components/Icons/Platform/Linux';
-import Microsoft from '@/components/Icons/Platform/Microsoft';
+import OSIcons from '@/components/Icons/OperatingSystem';
 
 type Story = StoryObj<typeof Select>;
 type Meta = MetaObj<typeof Select>;
@@ -79,22 +76,22 @@ export const InlineSelect: Story = {
           {
             value: 'linux',
             label: 'Linux',
-            iconImage: <Linux width={16} height={16} />,
+            iconImage: <OSIcons.Linux width={16} height={16} />,
           },
           {
             value: 'macos',
             label: 'macOS',
-            iconImage: <Apple width={16} height={16} />,
+            iconImage: <OSIcons.Apple width={16} height={16} />,
           },
           {
             value: 'windows',
             label: 'Windows',
-            iconImage: <Microsoft width={16} height={16} />,
+            iconImage: <OSIcons.Microsoft width={16} height={16} />,
           },
           {
             value: 'aix',
             label: 'AIX',
-            iconImage: <AIX width={16} height={16} />,
+            iconImage: <OSIcons.AIX width={16} height={16} />,
           },
         ],
       },

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

@@ -5,44 +5,47 @@ import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
 import { useEffect, useId, useMemo, useState } from 'react';
-import type { FC } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import Skeleton from '@/components/Common/Skeleton';
 import type { FormattedMessage } from '@/types';
 
 import styles from './index.module.css';
 
-type SelectValue = {
-  label: FormattedMessage;
-  value: string;
-  iconImage?: React.ReactNode;
+export type SelectValue<T extends string> = {
+  label: FormattedMessage | string;
+  value: T;
+  iconImage?: ReactElement<SVGSVGElement>;
   disabled?: boolean;
 };
 
-type SelectGroup = {
-  label?: FormattedMessage;
-  items: Array<SelectValue>;
+export type SelectGroup<T extends string> = {
+  label?: FormattedMessage | string;
+  items: Array<SelectValue<T>>;
 };
 
 const isStringArray = (values: Array<unknown>): values is Array<string> =>
   Boolean(values[0] && typeof values[0] === 'string');
 
-const isValuesArray = (values: Array<unknown>): values is Array<SelectValue> =>
+const isValuesArray = <T extends string>(
+  values: Array<unknown>
+): values is Array<SelectValue<T>> =>
   Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
 
-type SelectProps = {
-  values: Array<SelectGroup | string | SelectValue>;
-  defaultValue?: string;
+type SelectProps<T extends string> = {
+  values: Array<SelectGroup<T>> | Array<T> | Array<SelectValue<T>>;
+  defaultValue?: T;
   placeholder?: string;
   label?: string;
   inline?: boolean;
-  onChange?: (value: string) => void;
+  onChange?: (value: T) => void;
   className?: string;
   ariaLabel?: string;
   loading?: boolean;
+  disabled?: boolean;
 };
 
-const Select: FC<SelectProps> = ({
+const Select = <T extends string>({
   values = [],
   defaultValue,
   placeholder,
@@ -52,7 +55,8 @@ const Select: FC<SelectProps> = ({
   className,
   ariaLabel,
   loading = false,
-}) => {
+  disabled = false,
+}: SelectProps<T>): ReactNode => {
   const id = useId();
   const [value, setValue] = useState(defaultValue);
 
@@ -69,7 +73,7 @@ const Select: FC<SelectProps> = ({
       return [{ items: mappedValues }];
     }
 
-    return mappedValues as Array<SelectGroup>;
+    return mappedValues as Array<SelectGroup<T>>;
   }, [values]);
 
   // We render the actual item slotted to fix/prevent the issue
@@ -83,7 +87,7 @@ const Select: FC<SelectProps> = ({
   );
 
   // Both change the internal state and emit the change event
-  const handleChange = (value: string) => {
+  const handleChange = (value: T) => {
     setValue(value);
 
     if (typeof onChange === 'function') {
@@ -106,15 +110,23 @@ const Select: FC<SelectProps> = ({
           </label>
         )}
 
-        <SelectPrimitive.Root value={value} onValueChange={handleChange}>
+        <SelectPrimitive.Root
+          value={currentItem !== undefined ? value : undefined}
+          onValueChange={handleChange}
+          disabled={disabled}
+        >
           <SelectPrimitive.Trigger
             className={styles.trigger}
             aria-label={ariaLabel}
             id={id}
           >
             <SelectPrimitive.Value placeholder={placeholder}>
-              {currentItem?.iconImage}
-              <span>{currentItem?.label}</span>
+              {currentItem !== undefined && (
+                <>
+                  {currentItem.iconImage}
+                  <span>{currentItem.label}</span>
+                </>
+              )}
             </SelectPrimitive.Value>
             <ChevronDownIcon className={styles.icon} />
           </SelectPrimitive.Trigger>

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

@@ -3,12 +3,21 @@ import { isValidElement } from 'react';
 
 import styles from './index.module.css';
 
-type SkeletonProps = { loading?: boolean };
+type SkeletonProps = { hide?: boolean; loading?: boolean };
 
 const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
   children,
+  hide = false,
   loading = true,
 }) => {
+  // This can be used to completely hide the children after the Skeleton has loaded
+  // If certain criterias do not match. This is useful for conditional rendering without
+  // changing the actual tree that the Skeleton is wrapping
+  if (!loading && hide) {
+    return null;
+  }
+
+  // If we finished loading, we can hide the Skeleton and render the children tree
   if (!loading) {
     return children;
   }

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>
           ))}