fix(design): some small design fixes (#2713)

ovflowd · web-flow · commit b2a433069e15 · 2022-09-04T12:23:24.000+02:00
diff --git a/src/components/Article/index.module.scss b/src/components/Article/index.module.scss
@@ -1,13 +1,13 @@
 .article {
-  max-width: 768px;
+  max-width: 980px;
   overflow-wrap: break-word;
   padding: var(--space-80) 0 var(--space-24) var(--space-128);
-  text-transform: capitalize;
-  width: calc(100% - 36rem);
+  width: calc(100vw - 36rem);
 
   .headline {
     margin: 0 0 var(--space-40) 0;
     padding: 0;
+    text-transform: capitalize;
 
     @media (max-width: 800px) {
       font-size: var(--font-size-display3);
diff --git a/src/components/Header/__tests__/__snapshots__/index.test.tsx.snap b/src/components/Header/__tests__/__snapshots__/index.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
         </li>
         <li>
           <a
-            href="/api/documentation/"
+            href="/api/"
           >
             API Docs
           </a>
@@ -222,7 +222,7 @@ exports[`Tests for Header component renders correctly 1`] = `
         </li>
         <li>
           <a
-            href="/api/documentation/"
+            href="/api/"
           >
             API Docs
           </a>
@@ -404,7 +404,7 @@ exports[`Tests for Header component renders shorter menu items for mobile 1`] =
         </li>
         <li>
           <a
-            href="/api/documentation/"
+            href="/api/"
           >
             API Docs
           </a>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -33,11 +33,7 @@ const Header = (): JSX.Element => {
             </Link>
           </li>
           <li>
-            <Link
-              to="/api/documentation/"
-              activeClassName={styles.active}
-              partiallyActive
-            >
+            <Link to="/api/" activeClassName={styles.active} partiallyActive>
               <FormattedMessage id="components.header.links.docs" />
             </Link>
           </li>
diff --git a/src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Layout component renders correctly with data 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
diff --git a/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
diff --git a/src/components/TableOfContents/index.module.scss b/src/components/TableOfContents/index.module.scss
@@ -3,7 +3,7 @@
 
   strong {
     display: inline-block;
-    font-size: 0.67em;
+    font-size: var(--font-size-body3);
     margin: 0;
     text-transform: uppercase;
   }
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
@@ -8,14 +8,14 @@ interface Props {
   tableOfContents?: PageTableOfContents;
 }
 
-const tag = (t: string) => {
+// This adds the Class and Event prefixes
+// To the Headings of Table of Contents
+const prefix = (t: string) => {
   switch (t) {
     case 'C':
       return 'Class: ';
     case 'E':
       return 'Event: ';
-    case 'M':
-      return 'Method: ';
     default:
       return '';
   }
@@ -27,7 +27,7 @@ const removeApiSpanTagFromItem = (item: TableOfContentsItem) => ({
     ? item.url.replace(/datatag-(tagc|tagm|tage)--/, '')
     : undefined,
   title: item.title
-    ? item.title.replace(/<DataTag tag="(M|C|E)" \/> /, (_, t) => tag(t))
+    ? item.title.replace(/<DataTag tag="(M|C|E)" \/> /, (_, t) => prefix(t))
     : undefined,
 });
 
diff --git a/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Download page renders correctly 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
@@ -936,7 +936,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
diff --git a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Package Manager Page renders correctly 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
diff --git a/src/pages/resources/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/resources/__tests__/__snapshots__/index.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Resources page renders correctly 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
diff --git a/src/templates/__tests__/__snapshots__/blog.test.tsx.snap b/src/templates/__tests__/__snapshots__/blog.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Learn Template renders correctly 1`] = `
           </li>
           <li>
             <a
-              href="/api/documentation/"
+              href="/api/"
             >
               API Docs
             </a>
diff --git a/src/templates/api.tsx b/src/templates/api.tsx
@@ -52,7 +52,7 @@ const Api = ({
         authors={[]}
         extraComponents={components}
       >
-        <SectionTitle path={['home', 'documentation', title]} />
+        <SectionTitle path={['home', 'documentation', version, title]} />
       </Article>
     </main>
   </Layout>
diff --git a/util-node/apiDocsTransformUtils.js b/util-node/apiDocsTransformUtils.js
@@ -44,6 +44,11 @@ function yamlValueToArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
+// Utility to remove common tokens from the beginning of a Heading
+function parseHeading(value) {
+  return value.replace(/^(Modules|Class|Event): /, '');
+}
+
 // This utility allows us to create a Navigation Entry
 // For every file and their respective version
 // As the structure of the Navigation object is "flat"
@@ -75,9 +80,8 @@ function createNavigationCreator({ version, name }) {
 
           if (lineWithActualHeading && lineWithActualHeading.length) {
             // We want to replace any prefix the Heading might have
-            const title = lineWithActualHeading.replace(
-              /^(#{1,5}) (Class: |Event: )/i,
-              ''
+            const title = parseHeading(
+              lineWithActualHeading.replace(/^#{1,5} /i, '')
             );
 
             navigationEntriesForFile.push(
@@ -101,7 +105,9 @@ function createNavigationCreator({ version, name }) {
 function createApiDocsFrontmatter(firstLine, { version, name, fullVersion }) {
   if (firstLine.startsWith('#')) {
     const editPageLink = `https://github.com/nodejs/node/blob/${fullVersion}/doc/api/${name}.md`;
-    const pageTitle = firstLine.replace('# ', '');
+
+    // Does some special treatment to the pageTitle
+    const pageTitle = parseHeading(firstLine.replace(/^# /, ''));
 
     const frontmatter = {
       title: name,

Original file line number	Diff line number	Diff line change
@@ -43,7 +43,7 @@ exports[`Layout component renders correctly with data 1`] = `
`43`	`43`	`</li>`
`44`	`44`	`<li>`
`45`	`45`	`<a`
`46`		`- href="/api/documentation/"`
	`46`	`+ href="/api/"`
`47`	`47`	`>`
`48`	`48`	`API Docs`
`49`	`49`	`</a>`
Original file line number	Diff line number	Diff line change
@@ -43,7 +43,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
`43`	`43`	`</li>`
`44`	`44`	`<li>`
`45`	`45`	`<a`
`46`		`- href="/api/documentation/"`
	`46`	`+ href="/api/"`
`47`	`47`	`>`
`48`	`48`	`API Docs`
`49`	`49`	`</a>`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`
`4`	`4`	`strong {`
`5`	`5`	`display: inline-block;`
`6`		`- font-size: 0.67em;`
	`6`	`+ font-size: var(--font-size-body3);`
`7`	`7`	`margin: 0;`
`8`	`8`	`text-transform: uppercase;`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
@@ -43,7 +43,7 @@ exports[`Package Manager Page renders correctly 1`] = `
`43`	`43`	`</li>`
`44`	`44`	`<li>`
`45`	`45`	`<a`
`46`		`- href="/api/documentation/"`
	`46`	`+ href="/api/"`
`47`	`47`	`>`
`48`	`48`	`API Docs`
`49`	`49`	`</a>`
Original file line number	Diff line number	Diff line change
@@ -43,7 +43,7 @@ exports[`Resources page renders correctly 1`] = `
`43`	`43`	`</li>`
`44`	`44`	`<li>`
`45`	`45`	`<a`
`46`		`- href="/api/documentation/"`
	`46`	`+ href="/api/"`
`47`	`47`	`>`
`48`	`48`	`API Docs`
`49`	`49`	`</a>`