Repository: nodejs/nodejs.dev
Pull request #3011 (2022-11-09 14:38:46)

feat(styled header)
## Description

add small svg in header

**Before**
<img width="587" alt="1 1" src="https://user-images.githubusercontent.com/97875033/213504191-fdad7978-1183-4af2-a899-9bf99596826b.png">
<img width="1045" alt="2 1" src="https://user-images.githubusercontent.com/97875033/213504199-f0a56fa0-24de-4ff3-bd0c-ab41d928d9ce.png">
**After:**

<img width="613" alt="1 2" src="https://user-images.githubusercontent.com/97875033/213504281-e11cbcaf-1863-4f7c-a995-f2f98df70842.png">
<img width="776" alt="2 2" src="https://user-images.githubusercontent.com/97875033/213504299-ab5cae69-4076-44c0-afcf-80e0c56e39e0.png">

## Related Issues

#2932 

### Check List

- [X] I have read the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) and made commit messages that follow the guideline.
- [x] I have run `npm run lint:js -- --fix` and/or `npm run lint:md -- --fix` for my JavaScript and/or Markdown changes.
  - This is important as most of the cases your code changes might not be correctly linted
- [x] I have run `npm run test` to check if all tests are passing, and/or `npm run test -- -u` to update snapshots if I created and/or updated React Components.
- [x] I have checked that the build works locally and that `npm run build` work fine.
- [x] I've covered new added functionality with unit tests if necessary.


AugustinMauroy: Need help for:
- CSS
- ClassName 
ovflowd: I'll give an eye on this once I got a few minutes 🙏 
AugustinMauroy: @ovflowd What do you think? (if you had the time of course 😁)
shanpriyan: Run `npm run lint:fix` to fix style CI issues
shanpriyan: @AugustinMauroy Can we try this `npm run lint:fix` to fix ci lint error :) 
shanpriyan: Update the `snapshots` to fix CI fail 
AugustinMauroy: i will do that
codecov-commenter: # [Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) Report
Base: **66.02**% // Head: **66.49**% // Increases project coverage by **`+0.46%`** :tada:
> Coverage data is based on head [(`fe8a47d`)](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) compared to base [(`fd57b87`)](https://codecov.io/gh/nodejs/nodejs.dev/commit/fd57b871c2b1ad2f6fb812ed066dec074d76db22?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).
> Patch has no changes to coverable lines.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #3011      +/-   ##
==========================================
+ Coverage   66.02%   66.49%   +0.46%     
==========================================
  Files         118      145      +27     
  Lines        1351     1707     +356     
  Branches      342      398      +56     
==========================================
+ Hits          892     1135     +243     
- Misses        422      528     +106     
- Partials       37       44       +7     
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | |
|---|---|---|
| [src/templates/blog.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9ibG9nLnRzeA==) | `0.00% <0.00%> (-100.00%)` | :arrow_down: |
| [util-node/getNodeReleasesData.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2dldE5vZGVSZWxlYXNlc0RhdGEuanM=) | `91.30% <0.00%> (-6.32%)` | :arrow_down: |
| [src/\_\_fixtures\_\_/page.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL19fZml4dHVyZXNfXy9wYWdlLnRzeA==) | `94.11% <0.00%> (-5.89%)` | :arrow_down: |
| [src/pages/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3BhZ2VzL2luZGV4LnRzeA==) | `100.00% <0.00%> (ø)` | |
| [src/templates/api.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9hcGkudHN4) | `0.00% <0.00%> (ø)` | |
| [src/templates/learn.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9sZWFybi50c3g=) | `100.00% <0.00%> (ø)` | |
| [util-node/createSlug.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2NyZWF0ZVNsdWcuanM=) | `100.00% <0.00%> (ø)` | |
| [util-node/getNvmData.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2dldE52bURhdGEuanM=) | `100.00% <0.00%> (ø)` | |
| [src/hooks/useOnScreen.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2hvb2tzL3VzZU9uU2NyZWVuLnRzeA==) | `100.00% <0.00%> (ø)` | |
| [src/pages/about/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3BhZ2VzL2Fib3V0L2luZGV4LnRzeA==) | `100.00% <0.00%> (ø)` | |
| ... and [185 more](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/3011?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).

github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/3011/
shanpriyan: @AugustinMauroy  got 404 for `header`

![image](https://user-images.githubusercontent.com/42532987/210173550-a9c45cfe-533a-4edc-915f-46ed3ba036db.png)

AugustinMauroy: Interesting ... When I test in local it's woking fine so idk why it's not working
AugustinMauroy: I will do that 
AugustinMauroy: @shanpriyan I had update the description of PR with sreenshots 
shanpriyan: > @shanpriyan I had update the description of PR with sreenshots

Can you attach the same for light mode because I remember it was not much visible in light mode
AugustinMauroy: <img width="1438" alt="Capture d’écran 2023-01-19 à 20 55 08" src="https://user-images.githubusercontent.com/97875033/213546379-a58b87ef-7e35-4a98-96b8-3196e49ba2a2.png">

It's true that we don't see him much 🤣
shanpriyan: Don't forget to run formatter and update the snapshots to fix CI :)
github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/3011/

Patch:
diff --git a/src/sections/Article/index.module.scss b/src/sections/Article/index.module.scss
index 5fb8a142..c33b830c 100644
--- a/src/sections/Article/index.module.scss
+++ b/src/sections/Article/index.module.scss
@@ -4,6 +4,14 @@
   padding: var(--space-48) var(--space-32) var(--space-48) var(--space-32);
   width: calc(100vw - 36rem);
 
+  header {
+    background: url('/static/images/header.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: -50px -25px;
+    padding: 50px 25px;
+  }
+
   .headline {
     margin: 0 0 var(--space-40) 0;
     padding: 0;
diff --git a/src/sections/Article/index.tsx b/src/sections/Article/index.tsx
index 30a17677..c7b9fe5f 100644
--- a/src/sections/Article/index.tsx
+++ b/src/sections/Article/index.tsx
@@ -12,6 +12,7 @@ import styles from './index.module.scss';
 
 interface Props {
   title: string;
+  description?: string;
   body: string;
   authors: string[] | BlogPostAuthor[];
   tableOfContents: TableOfContentsItem[];
@@ -44,6 +45,7 @@ const renderTOC = (tableOfContents: TableOfContentsItem[] | undefined) => (
 
 const Article = ({
   title,
+  description,
   body,
   tableOfContents,
   previous,
@@ -61,7 +63,10 @@ const Article = ({
 }: Props): JSX.Element => (
   <article className={styles.article}>
     {childrenPosition === 'before' && children && <div>{children}</div>}
-    <h1 className={styles.headline}>{title}</h1>
+    <header>
+      <h1 className={styles.headline}>{title}</h1>
+      {description && <p>{description}</p>}
+    </header>
     {blog
       ? renderBlogAuthors(date, authors as BlogPostAuthor[])
       : renderArticleAuthors(authors as string[])}
diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx
index 6d5dbe86..5a80fa55 100644
--- a/src/templates/learn.tsx
+++ b/src/templates/learn.tsx
@@ -28,6 +28,7 @@ const LearnLayout = ({
       <LearnNavigation sections={navigationData} currentSlug={slug} />
       <Article
         title={displayTitle}
+        description={description}
         body={body}
         tableOfContents={tableOfContents ? tableOfContents.items : []}
         next={next}
diff --git a/static/static/images/header.svg b/static/static/images/header.svg
new file mode 100644
index 00000000..bb573e9a
--- /dev/null
+++ b/static/static/images/header.svg
@@ -0,0 +1,5 @@
+<svg width="78" height="25" viewBox="0 0 780 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.1" d="M79.2793 460.181L295.619 183.104C301.28 175.853 310.588 172.476 319.582 174.41L632.158 241.638C640.004 243.325 646.486 248.822 649.434 256.285L767.494 555.202C770.442 562.666 769.465 571.109 764.89 577.701L582.612 840.377C577.367 847.935 568.264 851.83 559.176 850.404L211.889 795.937C203.487 794.619 196.41 788.953 193.286 781.043L75.8741 483.767C72.7499 475.857 74.0453 466.884 79.2793 460.181Z" stroke="#C5E5B4" stroke-width="20"/>
+<path opacity="0.1" d="M695.786 -175.48L847.656 -164.394C856.831 -163.724 864.816 -157.869 868.212 -149.319L919.019 -21.4492C921.982 -13.9918 921.022 -5.54694 916.46 1.05506L837.143 115.857C832.582 122.459 825.023 126.344 817 126.211L679.425 123.928C670.227 123.776 661.925 118.379 658.053 110.034L593.955 -28.0916C590.375 -35.8062 591.145 -44.8392 595.98 -51.8364L674.294 -165.186C679.128 -172.183 687.304 -176.099 695.786 -175.48Z" stroke="#C5E5B4" stroke-width="20"/>
+<path opacity="0.1" d="M48.5036 -14.4841L73.646 -12.6487C82.8209 -11.9789 90.8057 -6.12357 94.2026 2.42569L102.124 22.3615C105.087 29.8189 104.127 38.2637 99.5652 44.8657L86.1653 64.2605C81.604 70.8625 74.0449 74.748 66.0215 74.6149L44.5727 74.259C35.3746 74.1064 27.0731 68.7094 23.2008 60.3648L12.5893 37.4977C9.00931 29.7832 9.7795 20.7501 14.6138 13.753L27.0107 -4.19003C31.845 -11.1872 40.0215 -15.1032 48.5036 -14.4841Z" stroke="#C5E5B4" stroke-width="20"/>
+</svg>


Test patch:
diff --git a/src/layouts/__tests__/__snapshots__/page.test.tsx.snap b/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
index b0eea289..37fb1a44 100644
--- a/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
+++ b/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
@@ -257,11 +257,13 @@ exports[`PageLayout component renders correctly with data 1`] = `
       <article
         class="article"
       >
-        <h1
-          class="headline"
-        >
-          mock-title
-        </h1>
+        <header>
+          <h1
+            class="headline"
+          >
+            mock-title
+          </h1>
+        </header>
         <div
           class="authorList"
         >
diff --git a/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap
index 1b68d2b8..876b32e6 100644
--- a/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap
@@ -169,11 +169,13 @@ exports[`Governance Page renders correctly 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      Mock Title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        Mock Title
+      </h1>
+    </header>
     <div />
     <div />
     <div>
diff --git a/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap
index 71b6837c..d3594f2b 100644
--- a/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/index.test.tsx.snap
@@ -169,11 +169,13 @@ exports[`About page renders correctly 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      Mock Title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        Mock Title
+      </h1>
+    </header>
     <div />
     <div />
     <div>
diff --git a/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap
index e27475ca..f9ea36f3 100644
--- a/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap
@@ -169,11 +169,13 @@ exports[`Releases page renders correctly 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      Mock Title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        Mock Title
+      </h1>
+    </header>
     <div />
     <div />
     <div>
diff --git a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
index a46f8771..f0a4d7a3 100644
--- a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
@@ -419,11 +419,13 @@ exports[`Resources page renders correctly 1`] = `
       <article
         class="article"
       >
-        <h1
-          class="headline"
-        >
-          Mock Title
-        </h1>
+        <header>
+          <h1
+            class="headline"
+          >
+            Mock Title
+          </h1>
+        </header>
         <div />
         <div />
         <div>
diff --git a/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap
index 36a279a4..eb7b29a4 100644
--- a/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/security.test.tsx.snap
@@ -169,11 +169,13 @@ exports[`Security page renders correctly 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      Mock Title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        Mock Title
+      </h1>
+    </header>
     <div />
     <div />
     <div>
diff --git a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
index b96a9a13..f2b2eea9 100644
--- a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
+++ b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
@@ -419,11 +419,13 @@ exports[`Package Manager Page renders correctly 1`] = `
       <article
         class="article"
       >
-        <h1
-          class="headline"
-        >
-          Mock Title
-        </h1>
+        <header>
+          <h1
+            class="headline"
+          >
+            Mock Title
+          </h1>
+        </header>
         <div />
         <div />
         <div>
diff --git a/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap b/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap
index 0481657d..58be604a 100644
--- a/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,11 +5,13 @@ exports[`Article component renders correctly 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      test-title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        test-title
+      </h1>
+    </header>
     <div
       class="authorList"
     >
@@ -199,11 +201,13 @@ exports[`Article component renders correctly in blog mode 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      test-title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        test-title
+      </h1>
+    </header>
     <h5
       class="list"
     >
@@ -296,11 +300,13 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      test-title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        test-title
+      </h1>
+    </header>
     <div
       class="authorList"
     >
@@ -490,11 +496,13 @@ exports[`Article component should accept and render child components 1`] = `
   <article
     class="article"
   >
-    <h1
-      class="headline"
-    >
-      test-title
-    </h1>
+    <header>
+      <h1
+        class="headline"
+      >
+        test-title
+      </h1>
+    </header>
     <div
       class="authorList"
     >
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
index 78e152c2..5dfe6aeb 100644
--- a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -366,9 +366,14 @@ exports[`Learn Template renders correctly 1`] = `
       <article
         class="article"
       >
-        <h1
-          class="headline"
-        />
+        <header>
+          <h1
+            class="headline"
+          />
+          <p>
+            test-description
+          </p>
+        </header>
         <div
           class="authorList"
         >
diff --git a/src/templates/__tests__/__snapshots__/post.test.tsx.snap b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
index e04ebddb..c622b6e2 100644
--- a/src/templates/__tests__/__snapshots__/post.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
@@ -276,11 +276,13 @@ exports[`LearnLayout Template renders correctly 1`] = `
       <article
         class="article"
       >
-        <h1
-          class="headline"
-        >
-          t,itle-mock
-        </h1>
+        <header>
+          <h1
+            class="headline"
+          >
+            t,itle-mock
+          </h1>
+        </header>
         <h5
           class="list"
         >