feat: create css-only responsive table (#8098)

* feat: create responsive css-only table

* feat: create remark table plugin

* fix: better row label

* fix: remove flex container

* refactor: organize rules

* feat: some stylish

* fix: oops

* fix: array boundaries

* fix: break words

* fix: align end

* fix: disable table cards when column count is <= 1

* fix: no wrap whitespace

* fix: remove description truncate

* fix: add missing labels

* feat: split minor releases columns

* fix: smaller modal padding on mobile

* refactor: nit

* fix: break words

* fix: sibling anchors

* fix: review

Author: araujogui

apps/site/components/EOL/VulnerabilitiesTable.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
@@ -9,7 +8,7 @@ import type { Vulnerability } from '#site/types/vulnerabilities';
 const VulnerabilitiesTable: FC<{
   vulnerabilities: Array<Vulnerability>;
   maxWidth?: string;
-}> = ({ vulnerabilities, maxWidth = 'max-w-2xs' }) => {
+}> = ({ vulnerabilities, maxWidth = 'md:max-w-2xs' }) => {
   const t = useTranslations();
 
   if (!vulnerabilities.length) {
@@ -29,7 +28,7 @@ const VulnerabilitiesTable: FC<{
       <tbody>
         {vulnerabilities.map((vulnerability, i) => (
           <tr key={i}>
-            <td>
+            <td data-label={t('components.eolModal.table.cves')}>
               {vulnerability.cve.map(cveId => (
                 <div key={cveId}>
                   <LinkWithArrow
@@ -44,13 +43,16 @@ const VulnerabilitiesTable: FC<{
 
               {vulnerability.cve.length > 0 || '-'}
             </td>
-            <td>
+            <td data-label={t('components.eolModal.table.severity')}>
               <VulnerabilityChip severity={vulnerability.severity} />
             </td>
-            <td className={classNames(maxWidth, 'truncate')}>
+            <td
+              data-label={t('components.eolModal.table.overview')}
+              className={maxWidth}
+            >
               {vulnerability.description || vulnerability.overview || '-'}
             </td>
-            <td>
+            <td data-label={t('components.eolModal.table.details')}>
               {vulnerability.url && (
                 <LinkWithArrow
                   href={vulnerability.url}

apps/site/components/EOL/VulnerabilityChips/VulnerabilityChip/index.tsx

@@ -20,11 +20,7 @@ const VulnerabilityChip: FC<VulnerabilityChipProps> = ({
   const t = useTranslations();
 
   return (
-    <Badge
-      size="small"
-      kind={SEVERITY_KIND_MAP[severity] as BadgeKind}
-      className="mr-1"
-    >
+    <Badge size="small" kind={SEVERITY_KIND_MAP[severity] as BadgeKind}>
       {count > 0 ? <span className={styles.chipCount}>{count}</span> : null}
       {t(`components.eolChip.severity.${severity}`)}
     </Badge>

apps/site/components/EOL/VulnerabilityChips/index.tsx

@@ -23,7 +23,7 @@ const VulnerabilityChips: FC<VulnerabilityChipsProps> = ({
   );
 
   return (
-    <div className="vulnerability-chips">
+    <div className="flex flex-row flex-wrap gap-1 max-sm:justify-end">
       {SEVERITY_ORDER.filter(severity => groupedBySeverity[severity] > 0).map(
         severity => (
           <VulnerabilityChip

apps/site/components/Releases/MinorReleasesTable/index.tsx

@@ -21,70 +21,64 @@ const MinorReleasesTable: FC<MinorReleasesTableProps> = ({ releases }) => {
   const t = useTranslations();
 
   return (
-    <div className={styles.scrollable}>
-      <table>
-        <thead className={styles.header}>
-          <tr>
-            <th>{t('components.minorReleasesTable.version')}</th>
-            <th>{t('components.minorReleasesTable.information')}</th>
-            <th>{t('components.minorReleasesTable.links')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {releases.map(release => (
-            <tr key={release.version}>
-              <td>
-                <Link href={`/download/archive/v${release.version}`}>
-                  v{release.version}
+    <table>
+      <thead>
+        <tr>
+          <th>{t('components.minorReleasesTable.version')}</th>
+          <th>{t('components.minorReleasesTable.nApiVersion')}</th>
+          <th>{t('components.minorReleasesTable.npmVersion')}</th>
+          <th>{t('components.minorReleasesTable.v8Version')}</th>
+          <th>{t('components.minorReleasesTable.links')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {releases.map(release => (
+          <tr key={release.version}>
+            <td data-label={t('components.minorReleasesTable.version')}>
+              <Link href={`/download/archive/v${release.version}`}>
+                v{release.version}
+              </Link>
+            </td>
+            <td data-label={t('components.minorReleasesTable.nApiVersion')}>
+              {release.modules && (
+                <ReleaseOverviewItem
+                  Icon={CodeBracketSquareIcon}
+                  title={`v${release.modules}`}
+                  className={styles.releaseOverviewItem}
+                />
+              )}
+            </td>
+            <td data-label={t('components.minorReleasesTable.npmVersion')}>
+              {release.npm && (
+                <ReleaseOverviewItem
+                  Icon={NpmIcon}
+                  title={`v${release.npm}`}
+                  className={styles.releaseOverviewItem}
+                />
+              )}
+            </td>
+            <td data-label={t('components.minorReleasesTable.v8Version')}>
+              <ReleaseOverviewItem
+                Icon={CodeBracketSquareIcon}
+                title={`v${release.v8}`}
+                className={styles.releaseOverviewItem}
+              />
+            </td>
+            <td>
+              <div className={styles.additionalLinks}>
+                <Link href={getNodeApiUrl(`v${release.version}`)}>
+                  {t('components.minorReleasesTable.actions.docs')}
                 </Link>
-              </td>
-              <td>
-                <div className={styles.items}>
-                  {release.modules && (
-                    <>
-                      <ReleaseOverviewItem
-                        Icon={CodeBracketSquareIcon}
-                        title={`v${release.modules}`}
-                        subtitle={t('components.releaseOverview.nApiVersion')}
-                      />
-                      <Separator orientation="vertical" />
-                    </>
-                  )}
-                  {release.npm && (
-                    <>
-                      <ReleaseOverviewItem
-                        Icon={NpmIcon}
-                        title={`v${release.npm}`}
-                        subtitle={t('components.releaseOverview.npmVersion')}
-                      />
-                      <Separator orientation="vertical" />
-                    </>
-                  )}
-                  <ReleaseOverviewItem
-                    Icon={CodeBracketSquareIcon}
-                    title={`v${release.v8}`}
-                    subtitle={t('components.releaseOverview.v8Version')}
-                  />
-                </div>
-              </td>
-              <td>
-                <div className={styles.additionalLinks}>
-                  <Link href={getNodeApiUrl(`v${release.version}`)}>
-                    {t('components.minorReleasesTable.actions.docs')}
-                  </Link>
-                  <Separator orientation="vertical" />
-                  <LinkWithArrow
-                    href={`${BASE_CHANGELOG_URL}${release.version}`}
-                  >
-                    {t('components.minorReleasesTable.actions.changelog')}
-                  </LinkWithArrow>
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+                <Separator orientation="vertical" />
+                <LinkWithArrow href={`${BASE_CHANGELOG_URL}${release.version}`}>
+                  {t('components.minorReleasesTable.actions.changelog')}
+                </LinkWithArrow>
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
   );
 };
 

apps/site/components/Releases/PreviousReleasesTable.tsx

@@ -43,24 +43,30 @@ const PreviousReleasesTable: FC = () => {
       <tbody>
         {releaseData.map(release => (
           <Fragment key={release.major}>
-            <tr key={release.major}>
-              <td data-label="Version">
+            <tr data-label={release.versionWithPrefix}>
+              <td data-label={t('components.downloadReleasesTable.version')}>
                 <Link href={`/download/archive/${release.versionWithPrefix}`}>
                   v{release.major}
                 </Link>
               </td>
 
-              <td data-label="LTS">{release.codename || '-'}</td>
+              <td data-label={t('components.downloadReleasesTable.codename')}>
+                {release.codename || '-'}
+              </td>
 
-              <td data-label="Date">
+              <td
+                data-label={t('components.downloadReleasesTable.firstReleased')}
+              >
                 <FormattedTime date={release.currentStart} />
               </td>
 
-              <td data-label="Date">
+              <td
+                data-label={t('components.downloadReleasesTable.lastUpdated')}
+              >
                 <FormattedTime date={release.releaseDate} />
               </td>
 
-              <td data-label="Status">
+              <td data-label={t('components.downloadReleasesTable.status')}>
                 <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
                   {release.status}
                   {release.status === 'End-of-life' ? ' (EoL)' : ''}

apps/site/components/Releases/ReleaseOverview/ReleaseOverviewItem/index.tsx

@@ -1,23 +1,26 @@
+import classNames from 'classnames';
 import type { FC, ReactNode, SVGProps } from 'react';
 
 import styles from './index.module.css';
 
 type ReleaseOverviewItemProps = {
   Icon: FC<SVGProps<SVGSVGElement>>;
   title: ReactNode;
-  subtitle: ReactNode;
+  subtitle?: ReactNode;
+  className?: string;
 };
 
 const ReleaseOverviewItem: FC<ReleaseOverviewItemProps> = ({
   Icon,
   title,
   subtitle,
+  className,
 }) => {
   return (
-    <div className={styles.item}>
+    <div className={classNames(styles.item, className)}>
       <Icon />
       <div>
-        <h2>{subtitle}</h2>
+        {subtitle && <h2>{subtitle}</h2>}
         <h1>{title}</h1>
       </div>
     </div>

apps/site/next.mdx.plugins.mjs

@@ -7,6 +7,8 @@ import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import readingTime from 'remark-reading-time';
 
+import remarkTableTitles from './util/table';
+
 /**
  * Provides all our Rehype Plugins that are used within MDX
  */
@@ -30,4 +32,5 @@ export const REMARK_PLUGINS = [
   remarkHeadings,
   // Calculates the reading time of the content
   readingTime,
+  remarkTableTitles,
 ];

apps/site/package.json

@@ -59,6 +59,7 @@
     "feed": "~5.1.0",
     "github-slugger": "~2.0.0",
     "gray-matter": "~4.0.3",
+    "mdast-util-to-string": "^4.0.0",
     "next": "15.5.2",
     "next-intl": "~4.3.5",
     "next-themes": "~0.4.6",
@@ -73,6 +74,7 @@
     "semver": "~7.7.2",
     "sval": "^0.6.3",
     "tailwindcss": "catalog:",
+    "unist-util-visit": "^5.0.0",
     "vfile": "~6.0.3",
     "vfile-matter": "~5.0.1"
   },
@@ -83,6 +85,7 @@
     "@opennextjs/cloudflare": "^1.6.4",
     "@playwright/test": "^1.54.1",
     "@testing-library/user-event": "~14.6.1",
+    "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
     "@types/semver": "~7.7.0",
     "dedent": "^1.6.0",

apps/site/util/table.ts

@@ -0,0 +1,48 @@
+import type { Root } from 'mdast';
+import { toString } from 'mdast-util-to-string';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Remark plugin that adds data-label attributes to table cells (td)
+ * based on their corresponding table headers (th).
+ */
+export default function remarkTableTitles() {
+  return (tree: Root) => {
+    visit(tree, 'table', table => {
+      // Ensure table has at least a header row and one data row
+      if (table.children.length < 2) {
+        return;
+      }
+
+      const [headerRow, ...dataRows] = table.children;
+
+      if (headerRow.children.length <= 1) {
+        table.data ??= {};
+
+        table.data.hProperties = {
+          'data-cards': 'false',
+        };
+      }
+
+      // Extract header labels from the first row
+      const headerLabels = headerRow.children.map(headerCell =>
+        toString(headerCell.children)
+      );
+
+      // Assign data-label to each cell in data rows
+      dataRows.forEach(row => {
+        row.children.forEach((cell, idx) => {
+          cell.data ??= {};
+
+          if (idx > headerLabels.length) {
+            return;
+          }
+
+          cell.data.hProperties = {
+            'data-label': headerLabels[idx],
+          };
+        });
+      });
+    });
+  };
+}

packages/i18n/src/locales/en.json

@@ -217,7 +217,9 @@
     "minorReleasesTable": {
       "version": "Version",
       "links": "Links",
-      "information": "Version Informations",
+      "nApiVersion": "N-API version",
+      "npmVersion": "npm version",
+      "v8Version": "V8 version",
       "actions": {
         "release": "Release",
         "changelog": "Changelog",