fix: fixed styles and minor content-wise bug fixes

nodejs · Nov 29, 2023 · 6764777 · 6764777
1 parent d63f02a
commit 6764777
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 72 deletions.
diff --git a/app/[locale]/[[...path]]/page.tsx b/app/[locale]/[[...path]]/page.tsx
@@ -102,7 +102,7 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
     const sharedContext = {
       frontmatter,
       headings,
-      pathname,
+      pathname: `/${pathname}`,
       readingTime,
       filename,
     };

diff --git a/components/Common/MetaBar/index.module.css b/components/Common/MetaBar/index.module.css
@@ -5,9 +5,11 @@
     gap-8
     border-l
     border-l-neutral-200
-    p-6
+    px-4
+    py-6
     dark:border-l-neutral-900
     md:max-w-xs
+    lg:px-6
     xs:mt-8
     xs:w-full
     xs:border-l-0

diff --git a/components/Common/MetaBar/index.tsx b/components/Common/MetaBar/index.tsx
@@ -35,8 +35,9 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
             <dd>{value}</dd>
           </Fragment>
         ))}
+
         {heading.length > 0 && (
-          <Fragment key="tableOfContents">
+          <>
             <dt>{t('components.metabar.tableOfContents')}</dt>
             <dd>
               <ol>
@@ -47,7 +48,7 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
                 ))}
               </ol>
             </dd>
-          </Fragment>
+          </>
         )}
       </dl>
     </div>

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
@@ -15,6 +15,7 @@
 
   .trigger {
     @apply inline-flex
+      h-12
       w-full
       min-w-[17rem]
       items-center

diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
@@ -67,7 +67,7 @@ const Select: FC<SelectProps> = ({
           {label}
         </label>
       )}
-      <Primitive.Root defaultValue={defaultValue} onValueChange={onChange}>
+      <Primitive.Root value={defaultValue} onValueChange={onChange}>
         <Primitive.Trigger
           className={styles.trigger}
           aria-label={label}

diff --git a/components/Common/Sidebar/index.module.css b/components/Common/Sidebar/index.module.css
@@ -12,6 +12,7 @@
     dark:border-r-neutral-900
     dark:bg-neutral-950
     md:max-w-xs
+    lg:px-6
     xs:w-full
     xs:border-r-0;
 

diff --git a/components/Downloads/DownloadReleasesTable.tsx b/components/Downloads/DownloadReleasesTable.tsx
@@ -17,29 +17,21 @@ const DownloadReleasesTable: FC = async () => {
     <table id="tbVersions" className="download-table full-width">
       <thead>
         <tr>
-          <td>Version</td>
-          <td>LTS</td>
-          <td>Date</td>
-          <td>V8</td>
-          <td>npm</td>
-          <td>
-            NODE_MODULE_VERSION<a href="#ref-1">[1]</a>
-            <span id="backref-1"></span>
-          </td>
-          <td></td>
+          <th>Node.js Version</th>
+          <th>Codename</th>
+          <th>Release Date</th>
+          <th>npm</th>
         </tr>
       </thead>
       <tbody>
         {releaseData.map(release => (
           <tr key={release.major}>
-            <td data-label="Version">Node.js {release.version}</td>
-            <td data-label="LTS">{release.codename}</td>
+            <td data-label="Version">v{release.version}</td>
+            <td data-label="LTS">{release.codename || '-'}</td>
             <td data-label="Date">
               <time>{release.releaseDate}</time>
             </td>
-            <td data-label="V8">{release.v8}</td>
-            <td data-label="npm">{release.npm}</td>
-            <td data-label="NODE_MODULE_VERSION">{release.modules}</td>
+            <td data-label="npm">v{release.npm}</td>
             <td className="download-table-last">
               <a
                 href={`https://nodejs.org/download/release/${release.versionWithPrefix}/`}

diff --git a/hooks/react-client/useClientContext.ts b/hooks/react-client/useClientContext.ts
@@ -2,23 +2,14 @@
 
 import { useContext } from 'react';
 
-import { usePathname } from '@/navigation.mjs';
 import { MatterContext } from '@/providers/matterProvider';
 import type { ClientSharedServerContext } from '@/types';
 
 const useClientContext = (): ClientSharedServerContext => {
-  const { frontmatter, headings, readingTime, filename } =
+  const { frontmatter, pathname, headings, readingTime, filename } =
     useContext(MatterContext);
 
-  const pathname = usePathname();
-
-  return {
-    pathname: pathname || '',
-    frontmatter,
-    headings,
-    readingTime,
-    filename,
-  };
+  return { pathname, frontmatter, headings, readingTime, filename };
 };
 
 export default useClientContext;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
@@ -11,7 +11,7 @@
     grid-rows-[1fr]
     overflow-hidden
     grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
-    sm:grid-cols-[auto_1fr_auto]
+    sm:grid-cols-[200px_1fr_200px]
     xl:grid-cols-[320px_1fr_320px]
     xs:block
     xs:overflow-auto;
@@ -25,7 +25,7 @@
       w-full
       flex-col
       items-start
-      gap-8
+      gap-6
       self-stretch
       overflow-y-auto
       overflow-x-hidden
@@ -34,9 +34,10 @@
       py-12
       grid-in-[main]
       dark:bg-gradient-subtle-dark
-      xs:!bg-none
+      xs:bg-none
       xs:px-4
-      xs:py-4;
+      xs:py-4
+      xs:dark:bg-none;
   }
 
   > *:nth-child(3) {

diff --git a/next-data/generators/releaseData.mjs b/next-data/generators/releaseData.mjs
@@ -55,7 +55,7 @@ const generateReleaseData = async () => {
         major: latestVersion.semver.major,
         version: latestVersion.semver.raw,
         versionWithPrefix: `v${latestVersion.semver.raw}`,
-        codename: major.codename || '',
+        codename: major.support.codename || '',
         isLts: status === 'Active LTS' || status === 'Maintenance LTS',
         npm: latestVersion.dependencies.npm || '',
         v8: latestVersion.dependencies.v8 || '',

diff --git a/pages/en/about/previous-releases.mdx b/pages/en/about/previous-releases.mdx
@@ -18,14 +18,4 @@ Full details regarding Node.js release schedule are available [on GitHub](https:
 
 ### Looking for latest release of a version branch?
 
-<section>
-  <DownloadReleasesTable />
-
-  <small>
-    [<a href="#backref-1">1</a>]: <code>NODE_MODULE_VERSION</code> refers to the ABI (application binary
-    interface) version number of Node.js, used to determine which versions of
-    Node.js compiled C++ add-on binaries can be loaded in to without needing to be
-    re-compiled. It used to be stored as hex value in earlier versions, but is now
-    represented as an integer.
-  </small>
-</section>
+<DownloadReleasesTable />
diff --git a/providers/matterProvider.tsx b/providers/matterProvider.tsx
@@ -9,13 +9,15 @@ import type { LegacyFrontMatter } from '@/types';
 
 type MatterContext = {
   frontmatter: LegacyFrontMatter;
+  pathname: string;
   headings: Heading[];
   readingTime: ReadTimeResults;
   filename: string;
 };
 
 export const MatterContext = createContext<MatterContext>({
   frontmatter: {},
+  pathname: '',
   headings: [],
   readingTime: { text: '', minutes: 0, time: 0, words: 0 },
   filename: '',
@@ -24,15 +26,6 @@ export const MatterContext = createContext<MatterContext>({
 type MatterProviderProps = PropsWithChildren<MatterContext>;
 
 export const MatterProvider: FC<MatterProviderProps> = ({
-  frontmatter,
-  headings,
-  readingTime,
-  filename,
   children,
-}) => (
-  <MatterContext.Provider
-    value={{ frontmatter, headings, readingTime, filename }}
-  >
-    {children}
-  </MatterContext.Provider>
-);
+  ...data
+}) => <MatterContext.Provider value={data}>{children}</MatterContext.Provider>;
diff --git a/styles/new/markdown.css b/styles/new/markdown.css
@@ -57,7 +57,8 @@
   a,
   a:link,
   a:visited {
-    @apply text-green-600
+    @apply inline-block
+      text-green-600
       dark:text-green-400;
 
     &:hover {
@@ -68,7 +69,8 @@
 
   ul {
     @apply list-disc
-      px-5
+      pl-9
+      pr-5
       leading-6
       text-neutral-900
       dark:text-white;
@@ -104,7 +106,9 @@
         py-2
         text-neutral-900
         dark:border-neutral-800
-        dark:text-white;
+        dark:text-white
+        xs:block
+        xs:border-l-0;
 
       > a {
         @apply pr-2;
@@ -116,12 +120,16 @@
     }
 
     tr:last-child td {
-      @apply border-b-0;
+      @apply sm:border-b-0;
+
+      &:last-child {
+        @apply xs:border-b-0;
+      }
     }
 
     td:first-child,
     th:first-child {
-      @apply border-l-0;
+      @apply sm:border-l-0;
     }
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -117,9 +117,7 @@ export default {
       'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
     },
     extend: {
-      screens: {
-        xs: { max: '639px' },
-      },
+      screens: { xs: { max: '639px' } },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-subtle':
@@ -135,12 +133,8 @@ export default {
         // @todo: replace colors for proper tailwind vars (?)
         lg: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
       },
-      spacing: {
-        '4.5': '1.125rem',
-      },
-      aria: {
-        current: 'current="page"',
-      },
+      spacing: { '4.5': '1.125rem' },
+      aria: { current: 'current="page"' },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],