feat: conditional exports, numerous bug fixes and ux improvements (#8618)

* feat: conditional exports, numerous bug fixes and ux improvements

* fix: remove last dangling \n when present

* chore: removed motion from flashable elements, css-only tooltip

* chore: drop ui-components publishing changes

* chore: code review

* chore: code review

* chore: tiny ux changes

* chore: larger content

* Apply suggestions from code review

Co-authored-by: Caner Akdas <canerakdas@gmail.com>
Signed-off-by: Claudio Wunder <cwunder@gnome.org>

* chore: code review

* chore: css to tailwind apply

---------

Signed-off-by: Claudio Wunder <cwunder@gnome.org>
Co-authored-by: Caner Akdas <canerakdas@gmail.com>

Author: ovflowd

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

@@ -14,9 +14,3 @@
     grid-cols-[repeat(auto-fill,minmax(240px,1fr))]
     gap-4;
 }
-
-.tooltip {
-  @apply p-2
-    text-neutral-900
-    dark:text-neutral-200;
-}

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

@@ -1,4 +1,3 @@
-import Tooltip from '@node-core/ui-components/Common/Tooltip';
 import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';
 
 import providePartners from '#site/next-data/providers/partners';
@@ -36,15 +35,15 @@ const renderSmallPartner = (partner: Partner) => {
   const Logo = PartnerLogos[partner.id];
 
   return (
-    <Tooltip
+    <PartnerButton
+      aria-label={partner.name}
       key={partner.id}
-      asChild
-      content={<div className={style.tooltip}>{partner.name}</div>}
+      size="small"
+      href={partner.href}
+      data-tooltip={partner.name}
     >
-      <PartnerButton aria-label={partner.name} size="small" href={partner.href}>
-        <Logo.Favicon />
-      </PartnerButton>
-    </Tooltip>
+      <Logo.Favicon />
+    </PartnerButton>
   );
 };
 

apps/site/components/withMetaBar.tsx

@@ -35,11 +35,7 @@ const WithMetaBar: FC = () => {
   // Since we cannot show the same number of avatars in Mobile / Tablet
   // resolution as we do on desktop and there is overflow, we are adjusting
   // the number of avatars manually for the resolutions below
-  const isMobileResolution = useMediaQuery('(max-width: 890px)');
-
-  const isTabletResolution = useMediaQuery(
-    '(min-width: 890px) and (max-width: 1280px)'
-  );
+  const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');
 
   return (
     <MetaBar
@@ -55,7 +51,7 @@ const WithMetaBar: FC = () => {
           )]: (
             <WithAvatarGroup
               usernames={usernames}
-              limit={isMobileResolution ? 7 : isTabletResolution ? 5 : 9}
+              limit={isSmallerThanDesktop ? 5 : 8}
             />
           ),
         }),

apps/site/layouts/Post.tsx

@@ -26,6 +26,8 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
       <WithNavBar />
 
       <div className={styles.contentLayout}>
+        <div></div>
+
         <div className={styles.postLayout}>
           <main id="main" tabIndex={-1}>
             {type === 'vulnerability' && <EOLAlert />}

apps/site/layouts/layouts.module.css

@@ -1,12 +1,12 @@
 @reference "../styles/index.css";
 
 .baseLayout {
-  @apply grid
+  @apply ml:grid
+    ml:grid-cols-[1fr]
+    ml:grid-rows-[auto_1fr_auto]
     h-max
     min-h-full
-    w-full
-    grid-cols-[1fr]
-    grid-rows-[auto_1fr_auto];
+    w-full;
 }
 
 .centeredLayout {
@@ -104,7 +104,7 @@
     justify-center;
 
   main {
-    @apply max-w-5xl
+    @apply max-w-7xl
       gap-4
       px-4
       py-12
@@ -135,17 +135,19 @@
 }
 
 .contentLayout {
-  @apply max-w-8xl
+  @apply max-w-10xl
     max-ml:m-0
-    max-ml:block
+    3xl:grid-cols-[--spacing(80)_1fr_--spacing(80)]
+    ml:grid-cols-[0_1fr_--spacing(56)]
+    ml:grid
     mx-auto
-    grid
+    block
     w-full
     grid-rows-[1fr]
-    sm:grid-cols-[1fr_--spacing(52)]
-    xl:grid-cols-[1fr_--spacing(80)];
+    xl:grid-cols-[--spacing(56)_1fr_--spacing(64)]
+    2xl:grid-cols-[--spacing(72)_1fr_--spacing(72)];
 
-  > *:nth-child(1) {
+  > *:nth-child(2) {
     @apply bg-gradient-subtle
       dark:bg-gradient-subtle-dark
       max-ml:border-l-0
@@ -164,13 +166,12 @@
       dark:border-l-neutral-900;
 
     main {
-      @apply max-w-[660px]
-        gap-4
+      @apply gap-4
         wrap-anywhere;
     }
   }
 
-  > *:nth-child(2) {
+  > *:nth-child(3) {
     @apply ml:mt-0
       ml:max-w-xs
       ml:border-l

apps/site/next.fetch.mjs

@@ -26,7 +26,7 @@ export const fetchWithRetry = async (
   const backoff = Math.max(0, Number(delay) || 0);
 
   const attemptFetch = attempt =>
-    fetch(url, options).catch(e => {
+    fetch(url, { ...options, signal: AbortSignal.timeout(30000) }).catch(e => {
       if (attempt === retries || !isTimeoutError(e)) {
         throw e;
       }

packages/rehype-shiki/src/plugin.mjs

@@ -163,7 +163,11 @@ export default async function rehypeShikiji(options) {
       const meta = parseMeta(preElement.data?.meta);
 
       // Retrieve the whole <pre> contents as a parsed DOM string
-      const preElementContents = toString(preElement);
+      const preElementContents = toString(preElement).replace(/\n$/, '');
+
+      // Since we removed the trailing newline, we can easily count the
+      // amount of lines without worrying about an extra empty line at the end of the code block
+      const lineCount = preElementContents.split('\n').length;
 
       // Grabs the relevant alias/name of the language
       const languageId = codeLanguage.slice(languagePrefix.length);
@@ -178,7 +182,8 @@ export default async function rehypeShikiji(options) {
       // Adds the original language back to the <pre> element
       children[0].properties.class = classNames(
         children[0].properties.class,
-        codeLanguage
+        codeLanguage,
+        { 'no-line-numbers': lineCount < 5, 'no-footer': lineCount === 1 }
       );
 
       // Replaces the <pre> element with the updated one

packages/ui-components/src/Common/BaseButton/index.module.css

@@ -9,8 +9,7 @@
     px-4.5
     py-2.5
     text-center
-    font-semibold
-    motion-safe:transition-colors;
+    font-semibold;
 
   svg {
     @apply size-5;
@@ -124,7 +123,7 @@
       after:mx-auto
       after:h-px
       after:w-2/5
-      after:bg-gradient-to-r
+      after:bg-linear-to-r
       after:from-green-600/0
       after:via-green-600
       after:to-green-600/0

packages/ui-components/src/Common/BaseCodeBox/index.module.css

@@ -53,6 +53,19 @@
             [counter-increment:line];
         }
       }
+
+      &[class*='plain-text'] {
+        @apply font-ibm-plex-mono;
+      }
+    }
+
+    &[class*='no-line-numbers'] > code > [class='line'] {
+      @apply pl-0;
+
+      &:not(:empty:last-child)::after {
+        @apply content-none
+          [counter-reset:none];
+      }
     }
   }
 
@@ -62,8 +75,8 @@
       justify-between
       border-t
       border-t-neutral-900
-      px-4
-      py-3
+      px-3
+      py-2
       text-sm
       font-medium;
 
@@ -72,9 +85,14 @@
     }
 
     & > .action {
-      @apply px-3
-        py-1.5
+      @apply px-2.5
+        py-1
+        text-xs
         font-medium;
+
+      > svg {
+        @apply size-4;
+      }
     }
   }
 }

packages/ui-components/src/Common/BaseCodeBox/index.tsx

@@ -39,31 +39,27 @@ const transformCode = <T extends ReactElement<PropsWithChildren>>(
   // being an empty string, so we need to remove it
   const lines = content.split('\n');
 
-  const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
+  const extraClasses = classNames({ 'plain-text': language.length === 0 });
 
   return (
-    <code style={extraStyle}>
-      {lines
-        .flatMap((line, lineIndex) => {
-          const columns = line.split(' ');
-
-          return [
-            <span key={lineIndex} className="line">
-              {columns.map((column, columnIndex) => (
-                <Fragment key={columnIndex}>
-                  <span>{column}</span>
-                  {columnIndex < columns.length - 1 && <span> </span>}
-                </Fragment>
-              ))}
-            </span>,
-            // Add a break line so the text content is formatted correctly
-            // when copying to clipboard
-            '\n',
-          ];
-        })
-        // Here we remove that empty line from before and
-        // the last flatMap entry which is an `\n`
-        .slice(0, -2)}
+    <code className={extraClasses}>
+      {lines.flatMap((line, lineIndex) => {
+        const columns = line.split(' ');
+
+        return [
+          <span key={lineIndex} className="line">
+            {columns.map((column, columnIndex) => (
+              <Fragment key={columnIndex}>
+                <span>{column}</span>
+                {columnIndex < columns.length - 1 && <span> </span>}
+              </Fragment>
+            ))}
+          </span>,
+          // Add a break line so the text content is formatted correctly
+          // when copying to clipboard
+          '\n',
+        ];
+      })}
     </code>
   );
 };
@@ -89,8 +85,11 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   const containerRef = useRef<HTMLPreElement>(null);
 
   const handleCopy = () => copy(containerRef.current?.textContent);
+
   const ButtonIcon = copied ? DocumentDuplicateIcon : CodeBracketIcon;
 
+  const hideFooter = className?.includes('no-footer');
+
   return (
     <div className={styles.root}>
       <pre
@@ -100,9 +99,11 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
       >
         {transformCode(children as ReactElement<PropsWithChildren>, language)}
       </pre>
-      {language && (
+
+      {!language || hideFooter || (
         <div className={styles.footer}>
           <span className={styles.language}>{language}</span>
+
           <BaseButton
             as={as}
             className={styles.action}