fixup!

Author: avivkeller

apps/site/app/[locale]/error.tsx

@@ -1,29 +1,34 @@
 'use client';
 
+import GlowingBackdrop from '@node-core/ui-components/Common/GlowingBackdrop';
 import { useTranslations } from 'next-intl';
 
 import Button from '#site/components/Common/Button';
-import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
+import styles from '#site/layouts/layouts.module.css';
 
 import type { FC } from 'react';
 
 const ErrorPage: FC<{ error: Error }> = () => {
   const t = useTranslations();
 
   return (
-    <GlowingBackdropLayout kind="default">
-      <span>500</span>
+    <div className={styles.centeredLayout}>
+      <GlowingBackdrop />
 
-      <h1 className="special -mt-4 text-center">
-        {t('layouts.error.internalServerError.title')}
-      </h1>
+      <main id="main" tabIndex={-1}>
+        <span>500</span>
 
-      <p className="-mt-4 max-w-sm text-center text-lg">
-        {t('layouts.error.internalServerError.description')}
-      </p>
+        <h1 className="special -mt-4 text-center">
+          {t('layouts.error.internalServerError.title')}
+        </h1>
 
-      <Button href="/">{t('layouts.error.backToHome')}</Button>
-    </GlowingBackdropLayout>
+        <p className="-mt-4 max-w-sm text-center text-lg">
+          {t('layouts.error.internalServerError.description')}
+        </p>
+
+        <Button href="/">{t('layouts.error.backToHome')}</Button>
+      </main>
+    </div>
   );
 };
 

apps/site/components/AvatarGroup.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import AvatarGroupContainer from '@node-core/ui-components/Common/AvatarGroup';
+
+import Link from '#site/components/Link';
+
+import type { ComponentProps, FC } from 'react';
+
+type AvatarsProps = Omit<ComponentProps<typeof AvatarGroupContainer>, 'as'>;
+
+const Avatars: FC<AvatarsProps> = props => (
+  <AvatarGroupContainer as={Link} {...props} />
+);
+
+export default Avatars;

apps/site/components/AvatarGroup/Avatars.tsx

@@ -0,0 +1,21 @@
+import { getAuthors } from '#site/util/author';
+
+import type { AuthorProps } from '#site/types';
+import type { ComponentProps, FC } from 'react';
+
+import Avatars from './Avatars';
+
+type AvatarGroupProps = Omit<ComponentProps<typeof Avatars>, 'avatars'> &
+  AuthorProps;
+
+// Resolves the authors on the server, so `authors.json` stays there
+const AvatarGroup: FC<AvatarGroupProps> = ({
+  usernames,
+  names,
+  clickable = true,
+  ...props
+}) => (
+  <Avatars avatars={getAuthors({ usernames, names, clickable })} {...props} />
+);
+
+export default AvatarGroup;

apps/site/components/AvatarGroup/index.tsx

@@ -6,27 +6,24 @@ import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
 import Link from '#site/components/Link';
-import { siteConfig } from '#site/next.json.mjs';
 import { dateIsBetween } from '#site/util/date';
 
+import type { WebsiteBanner } from '#site/types';
 import type { FC } from 'react';
 
 const STORAGE_KEY = 'banner-dismissal';
 
-const WebsiteBanner: FC<{ section: string }> = ({ section }) => {
-  const banner = siteConfig.websiteBanners[section];
+const Banner: FC<{ banner: WebsiteBanner }> = ({ banner }) => {
   const t = useTranslations();
 
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    if (banner) {
-      // eslint-disable-next-line @eslint-react/set-state-in-effect
-      setOpen(localStorage.getItem(STORAGE_KEY) !== banner.text);
-    }
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setOpen(localStorage.getItem(STORAGE_KEY) !== banner.text);
   }, [banner]);
 
-  if (banner && open && dateIsBetween(banner.startDate, banner.endDate)) {
+  if (open && dateIsBetween(banner.startDate, banner.endDate)) {
     const bannerType = banner.type || 'default';
 
     const onClose = () => {
@@ -54,4 +51,4 @@ const WebsiteBanner: FC<{ section: string }> = ({ section }) => {
   return null;
 };
 
-export default WebsiteBanner;
+export default Banner;

apps/site/components/WebsiteBanner.tsx …site/components/WebsiteBanner/Banner.tsxapps/site/components/WebsiteBanner.tsx renamed to apps/site/components/WebsiteBanner/Banner.tsx apps/site/components/WebsiteBanner.tsx renamed to apps/site/components/WebsiteBanner/Banner.tsx

@@ -0,0 +1,13 @@
+import { siteConfig } from '#site/next.json.mjs';
+
+import type { FC } from 'react';
+
+import Banner from './Banner';
+
+const WebsiteBanner: FC<{ section: string }> = ({ section }) => {
+  const banner = siteConfig.websiteBanners[section];
+
+  return banner ? <Banner banner={banner} /> : null;
+};
+
+export default WebsiteBanner;

apps/site/components/WebsiteBanner/index.tsx

@@ -56,7 +56,7 @@
     }
 
     /* Swap the toggler's icon while the menu is open */
-    .sidebarItemToggler:checked ~ .nodeIconAndMobileItemsToggler {
+    &:has(.sidebarItemToggler:checked) {
       .showIcon {
         @apply hidden;
       }

packages/ui-components/src/Containers/NavBar/index.module.css

@@ -53,15 +53,6 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
   return (
     <nav className={styles.container}>
       <div className={styles.innerContainer}>
-        {/* Precedes the menu and its toggler, which follow it through CSS */}
-        <input
-          className={classNames('peer', styles.sidebarItemToggler)}
-          id="sidebarItemToggler"
-          type="checkbox"
-          aria-label={sidebarItemTogglerAriaLabel}
-          tabIndex={-1}
-        />
-
         <div className={styles.nodeIconAndMobileItemsToggler}>
           {Logo && (
             <Component
@@ -91,6 +82,13 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
           </Label.Root>
         </div>
 
+        <input
+          className={classNames('peer', styles.sidebarItemToggler)}
+          id="sidebarItemToggler"
+          type="checkbox"
+          aria-label={sidebarItemTogglerAriaLabel}
+          tabIndex={-1}
+        />
         <div className={classNames(styles.main, `hidden peer-checked:flex`)}>
           {navItems && navItems.length > 0 && (
             <div className={styles.navItems}>