Repository: nodejs/nodejs.dev (ts)

Issue:
Security page
## Summary

Create a new page called /security it should have the same content as https://nodejs.org/en/security/ 


### Motivation
Feature parity with nodejs.org

Pull request:
Added security page
closes #1292 
 Added security page

Patch:
diff --git a/content/about/security.md b/content/about/security.md
new file mode 100644
index 00000000..40e4549b
--- /dev/null
+++ b/content/about/security.md
@@ -0,0 +1,79 @@
+---
+title: Security
+description: 'This is security page'
+authors: reedloden,XhmikosR,Trott,fhemberger,MaledongGit,yous,sam-github,vdeturckheim,tniessen,richardlau,nschonni,mikeal,e-jigsaw,parthlaw
+category: security
+---
+
+## Reporting a Bug in Node.js
+
+Report security bugs in Node.js via [HackerOne](https://hackerone.com/nodejs).
+
+Your report will be acknowledged within 24 hours, and you’ll receive a more
+detailed response to your report within 48 hours indicating the next steps in
+handling your submission.
+
+After the initial reply to your report, the security team will endeavor to keep
+you informed of the progress being made towards a fix and full announcement,
+and may ask for additional information or guidance surrounding the reported
+issue.
+
+### Node.js Bug Bounty Program
+
+The Node.js project engages in an official bug bounty program for security
+researchers and responsible public disclosures. The program is managed through
+the HackerOne platform. See <https://hackerone.com/nodejs> for further details.
+
+## Reporting a Bug in a third party module
+
+Security bugs in third party modules should be reported to their respective
+maintainers and should also be coordinated through the Node.js Ecosystem
+Security Team via [HackerOne](https://hackerone.com/nodejs-ecosystem).
+
+Details regarding this process can be found in the
+[Security Working Group repository](https://github.com/nodejs/security-wg/blob/master/processes/third_party_vuln_process.md).
+
+Thank you for improving the security of Node.js and its ecosystem. Your efforts
+and responsible disclosure are greatly appreciated and will be acknowledged.
+
+## Disclosure Policy
+
+Here is the security disclosure policy for Node.js
+
+* The security report is received and is assigned a primary handler. This
+  person will coordinate the fix and release process. The problem is confirmed
+  and a list of all affected versions is determined. Code is audited to find
+  any potential similar problems. Fixes are prepared for all releases which are
+  still under maintenance. These fixes are not committed to the public
+  repository but rather held locally pending the announcement.
+
+* A suggested embargo date for this vulnerability is chosen and a CVE (Common
+  Vulnerabilities and Exposures (CVE®)) is requested for the vulnerability.
+
+* On the embargo date, the Node.js security mailing list is sent a copy of the
+  announcement. The changes are pushed to the public repository and new builds
+  are deployed to nodejs.org. Within 6 hours of the mailing list being
+  notified, a copy of the advisory will be published on the Node.js blog.
+
+* Typically the embargo date will be set 72 hours from the time the CVE is
+  issued. However, this may vary depending on the severity of the bug or
+  difficulty in applying a fix.
+
+* This process can take some time, especially when coordination is required
+  with maintainers of other projects. Every effort will be made to handle the
+  bug in as timely a manner as possible; however, it’s important that we follow
+  the release process above to ensure that the disclosure is handled in a
+  consistent manner.
+
+## Receiving Security Updates
+
+Security notifications will be distributed via the following methods.
+
+* <https://groups.google.com/group/nodejs-sec>
+* <https://nodejs.org/en/blog/>
+
+## Comments on this Policy
+
+If you have suggestions on how this process could be improved please submit a
+[pull request](https://github.com/nodejs/nodejs.dev) or
+[file an issue](https://github.com/nodejs/security-wg/issues/new) to discuss.
diff --git a/gatsby-node.js b/gatsby-node.js
index b83a8399..6f589a91 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -29,6 +29,7 @@ exports.createPages = ({ graphql, actions }) => {
                       "privacy-policy"
                       "about"
                       "governance"
+                      "security"
                     ]
                   }
                 }
diff --git a/src/components/AboutPageSideNavBar/index.tsx b/src/components/AboutPageSideNavBar/index.tsx
index 229518dd..5b0686fd 100644
--- a/src/components/AboutPageSideNavBar/index.tsx
+++ b/src/components/AboutPageSideNavBar/index.tsx
@@ -13,6 +13,7 @@ export enum AboutPageKeys {
   resources = 'resources',
   trademark = 'trademark',
   privacy = 'privacy',
+  security = 'security',
 }
 
 const aboutPageSideNavBarItem: AboutPageSideNavBarItem[] = [
@@ -48,6 +49,10 @@ const aboutPageSideNavBarItem: AboutPageSideNavBarItem[] = [
     title: 'Privacy Policy',
     slug: AboutPageKeys.privacy,
   },
+  {
+    title: 'Security Reporting',
+    slug: AboutPageKeys.security,
+  },
 ];
 
 export default function AboutPageSideNavBar({
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 1594c6d6..8a334359 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -36,9 +36,9 @@ function Footer(): JSX.Element {
             </a>
           </li>
           <li>
-            <a className="footer__link" href="https://nodejs.org/en/security/">
+            <Link className="footer__link" to="/security">
               Security Reporting
-            </a>
+            </Link>
           </li>
           <li>
             <Link className="footer__link" to="/about">
diff --git a/src/pages/security.tsx b/src/pages/security.tsx
new file mode 100644
index 00000000..2031902c
--- /dev/null
+++ b/src/pages/security.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import { Page } from '../types';
+import Layout from '../components/Layout';
+import Article from '../components/Article';
+import Footer from '../components/Footer';
+import '../styles/article-reader.scss';
+import AboutPageSideNavBar, {
+  AboutPageKeys,
+} from '../components/AboutPageSideNavBar';
+
+export default function SecurityPage({ data }: Page): JSX.Element {
+  const { title, description } = data.page.frontmatter;
+  const { html, tableOfContents } = data.page;
+  const { authors } = data.page.fields;
+  return (
+    <>
+      <Layout title={title} description={description} showFooter={false}>
+        <main className="streched-container">
+          <AboutPageSideNavBar pageKey={AboutPageKeys.security} />
+          <Article
+            title={title}
+            html={html}
+            tableOfContents={tableOfContents}
+            authors={authors}
+            editPath="content/about/security.md"
+          />
+        </main>
+      </Layout>
+      <Footer />
+    </>
+  );
+}
+
+export const query = graphql`
+  query {
+    page: markdownRemark(fields: { slug: { eq: "security" } }) {
+      html
+      tableOfContents(absolute: false, pathToSlugField: "frontmatter.path")
+      frontmatter {
+        title
+        description
+      }
+      fields {
+        authors
+      }
+    }
+  }
+`;


Test patch:
diff --git a/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap b/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
index 5cb0ac0b..0dab3a06 100644
--- a/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
+++ b/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`Tests for Footer component renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
index 163c2cc2..03f92f65 100644
--- a/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
@@ -183,7 +183,7 @@ exports[`CenteredLayout component renders correctly with footer 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
index d63cc10d..b099fd23 100644
--- a/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
@@ -256,7 +256,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/security/"
+            href="/security"
           >
             Security Reporting
           </a>
diff --git a/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap b/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
index 0e643a17..86e229e6 100644
--- a/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
+++ b/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
@@ -70,6 +70,13 @@ exports[`AboutPageSideNavBar renders correctly 1`] = `
       >
         Privacy Policy
       </a>
+      <a
+        class="t-body2 side-nav__item-community"
+        href="/security"
+        id="link-security"
+      >
+        Security Reporting
+      </a>
     </ul>
   </nav>
 </div>
@@ -145,6 +152,13 @@ exports[`AboutPageSideNavBar should about Releases page exist and contain a href
       >
         Privacy Policy
       </a>
+      <a
+        class="t-body2 side-nav__item-community"
+        href="/security"
+        id="link-security"
+      >
+        Security Reporting
+      </a>
     </ul>
   </nav>
 </div>
diff --git a/test/pages/__snapshots__/404.test.tsx.snap b/test/pages/__snapshots__/404.test.tsx.snap
index dbafcd1d..bbc600bb 100644
--- a/test/pages/__snapshots__/404.test.tsx.snap
+++ b/test/pages/__snapshots__/404.test.tsx.snap
@@ -200,7 +200,7 @@ exports[`404 page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/security/"
+            href="/security"
           >
             Security Reporting
           </a>
diff --git a/test/pages/__snapshots__/about.test.tsx.snap b/test/pages/__snapshots__/about.test.tsx.snap
index 81652dfa..4821cb8a 100644
--- a/test/pages/__snapshots__/about.test.tsx.snap
+++ b/test/pages/__snapshots__/about.test.tsx.snap
@@ -212,6 +212,13 @@ exports[`About page renders correctly 1`] = `
           >
             Privacy Policy
           </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
         </ul>
       </nav>
       <article
@@ -317,7 +324,7 @@ exports[`About page renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/pages/__snapshots__/blog.test.tsx.snap b/test/pages/__snapshots__/blog.test.tsx.snap
index 8c23d449..cdd35de8 100644
--- a/test/pages/__snapshots__/blog.test.tsx.snap
+++ b/test/pages/__snapshots__/blog.test.tsx.snap
@@ -206,7 +206,7 @@ exports[`Blog page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/security/"
+            href="/security"
           >
             Security Reporting
           </a>
@@ -501,7 +501,7 @@ exports[`Blog page renders correctly for empty blogs list 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/security/"
+            href="/security"
           >
             Security Reporting
           </a>
diff --git a/test/pages/__snapshots__/download.test.tsx.snap b/test/pages/__snapshots__/download.test.tsx.snap
index 1a3c5142..c4626301 100644
--- a/test/pages/__snapshots__/download.test.tsx.snap
+++ b/test/pages/__snapshots__/download.test.tsx.snap
@@ -544,7 +544,7 @@ exports[`Download page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/security/"
+            href="/security"
           >
             Security Reporting
           </a>
@@ -1102,7 +1102,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/security/"
+            href="/security"
           >
             Security Reporting
           </a>
diff --git a/test/pages/__snapshots__/governance.test.tsx.snap b/test/pages/__snapshots__/governance.test.tsx.snap
index 15b6fd3f..22e55fd0 100644
--- a/test/pages/__snapshots__/governance.test.tsx.snap
+++ b/test/pages/__snapshots__/governance.test.tsx.snap
@@ -212,6 +212,13 @@ exports[`Governance Page renders correctly 1`] = `
           >
             Privacy Policy
           </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
         </ul>
       </nav>
       <article
@@ -329,7 +336,7 @@ exports[`Governance Page renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/pages/__snapshots__/home.test.tsx.snap b/test/pages/__snapshots__/home.test.tsx.snap
index 67e8fa14..699d5e81 100644
--- a/test/pages/__snapshots__/home.test.tsx.snap
+++ b/test/pages/__snapshots__/home.test.tsx.snap
@@ -525,7 +525,7 @@ exports[`Home page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/security/"
+            href="/security"
           >
             Security Reporting
           </a>
diff --git a/test/pages/__snapshots__/privacy.test.tsx.snap b/test/pages/__snapshots__/privacy.test.tsx.snap
index 62d55b7f..0b15ec57 100644
--- a/test/pages/__snapshots__/privacy.test.tsx.snap
+++ b/test/pages/__snapshots__/privacy.test.tsx.snap
@@ -212,6 +212,13 @@ exports[`Privacy Page renders correctly 1`] = `
           >
             Privacy Policy
           </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
         </ul>
       </nav>
       <article
@@ -329,7 +336,7 @@ exports[`Privacy Page renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/pages/__snapshots__/releases.test.tsx.snap b/test/pages/__snapshots__/releases.test.tsx.snap
index 298a22d6..f09c3458 100644
--- a/test/pages/__snapshots__/releases.test.tsx.snap
+++ b/test/pages/__snapshots__/releases.test.tsx.snap
@@ -360,7 +360,7 @@ exports[`Releases page renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/pages/__snapshots__/resources.test.tsx.snap b/test/pages/__snapshots__/resources.test.tsx.snap
index 5a0143c1..d522f9a7 100644
--- a/test/pages/__snapshots__/resources.test.tsx.snap
+++ b/test/pages/__snapshots__/resources.test.tsx.snap
@@ -212,6 +212,13 @@ exports[`About page renders correctly 1`] = `
           >
             Privacy Policy
           </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
         </ul>
       </nav>
       <article
@@ -317,7 +324,7 @@ exports[`About page renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/pages/__snapshots__/security.test.tsx.snap b/test/pages/__snapshots__/security.test.tsx.snap
new file mode 100644
index 00000000..cae0c044
--- /dev/null
+++ b/test/pages/__snapshots__/security.test.tsx.snap
@@ -0,0 +1,443 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Security page renders correctly 1`] = `
+<div>
+  <div
+    class="layout-container"
+  >
+    <nav
+      aria-label="Primary"
+      class="nav"
+    >
+      <div
+        class="nav__container"
+      >
+        <div
+          class="nav__startwrapper"
+        >
+          <a
+            href="/"
+          >
+            <div
+              class="logo"
+            >
+              <img
+                alt="Node.js"
+                class="nav__logo light-mode-only"
+                src="test-file-stub"
+              />
+              <img
+                alt="Node.js"
+                class="nav__logo dark-mode-only"
+                src="test-file-stub"
+              />
+            </div>
+          </a>
+        </div>
+        <ul
+          class="nav__tabs__container"
+        >
+          <li
+            class="nav__tabs"
+          >
+            <a
+              class="activeStyleTab"
+              href="/learn"
+            >
+              Learn
+            </a>
+          </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              class="activeStyleTab"
+              href="https://nodejs.org/en/docs/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Documentation
+            </a>
+          </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              class="activeStyleTab"
+              href="/download"
+            >
+              Download
+            </a>
+          </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              class="activeStyleTab"
+              href="https://nodejs.org/en/get-involved/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Community
+            </a>
+          </li>
+        </ul>
+        <div
+          class="nav__endwrapper"
+        >
+          <ul
+            class="right-container"
+          >
+            <li
+              class="nav__tabs nav__tabs--right"
+            >
+              <button
+                class="dark-mode-toggle"
+                type="button"
+              >
+                <span
+                  class="sr-only"
+                >
+                  Toggle Dark Mode
+                </span>
+                <i
+                  class="material-icons light-mode-only"
+                >
+                  nights_stay
+                </i>
+                <i
+                  class="material-icons dark-mode-only"
+                >
+                  wb_sunny
+                </i>
+              </button>
+            </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  height="2.2rem"
+                  style="fill: var(--color-text-accent);"
+                  viewBox="0 0 438.549 438.549"
+                  width="2.2rem"
+                >
+                  <path
+                    d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <main
+      class="streched-container"
+    >
+      <nav
+        class="side-nav-about"
+      >
+        <button
+          class="side-nav__open"
+          type="button"
+        >
+          Menu
+        </button>
+        <ul
+          class="community-nav__list"
+        >
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/"
+            id="link-"
+          >
+            About
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/governance"
+            id="link-governance"
+          >
+            Project Governance
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/community"
+            id="link-community"
+          >
+            Community
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/working-groups"
+            id="link-working-groups"
+          >
+            Working Groups
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/releases"
+            id="link-releases"
+          >
+            Releases
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/resources"
+            id="link-resources"
+          >
+            Resources
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/trademark"
+            id="link-trademark"
+          >
+            Trademark Policy
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/privacy"
+            id="link-privacy"
+          >
+            Privacy Policy
+          </a>
+          <a
+            class="t-body2 side-nav__item-community side-nav__item-community--active"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
+        </ul>
+      </nav>
+      <article
+        class="article-reader"
+      >
+        <h1
+          class="article-reader__headline"
+        >
+          Mock Title
+        </h1>
+        <details
+          class="toc"
+        >
+          <summary>
+            <h6>
+              TABLE OF CONTENTS
+            </h6>
+          </summary>
+          <div>
+            Table of Content
+          </div>
+        </details>
+        <div>
+          <div>
+            Sample
+          </div>
+        </div>
+        <ul
+          class="list"
+        >
+          <h5>
+            Contributors
+          </h5>
+          <li>
+            <a
+              class="link"
+              href="https://github.com/author-mock"
+              rel="noopener noreferrer"
+              style="margin-left: 0px;"
+              target="_blank"
+              title="author-mock"
+            >
+              <img
+                alt="author-mock"
+                class="img"
+                src="https://github.com/author-mock.png?size=60"
+              />
+            </a>
+          </li>
+        </ul>
+        <div
+          class="edit"
+        >
+          <a
+            class="link"
+            href="https://github.com/nodejs/nodejs.dev/edit/main/content/about/security.md"
+          >
+            <span>
+              Edit this page on GitHub
+            </span>
+             
+            <svg
+              class="icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 40 40"
+              width="1em"
+            >
+              <path
+                d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"
+              />
+            </svg>
+          </a>
+        </div>
+      </article>
+    </main>
+  </div>
+  <section
+    class="bottom-info"
+  >
+    <div
+      class="random-contributor"
+    />
+  </section>
+  <footer
+    class="footer"
+  >
+    <ul
+      class="footer__left"
+    >
+      <li>
+        <a
+          class="footer__link"
+          href="/trademark"
+        >
+          Trademark Policy
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="/privacy"
+        >
+          Privacy Policy
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="https://github.com/openjs-foundation/cross-project-council/blob/main/CODE_OF_CONDUCT.md#contributor-covenant-code-of-conduct"
+        >
+          Code of Conduct
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="/security"
+        >
+          Security Reporting
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="/about"
+        >
+          About
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="https://nodejs.org/en/blog/"
+        >
+          Blog
+        </a>
+      </li>
+    </ul>
+    <ul
+      class="footer__right"
+    >
+      <li>
+        © OpenJS Foundation
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Github Page Link"
+          href="https://github.com/nodejs/node"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span
+            class="sr-only"
+          >
+            GitHub
+          </span>
+          <svg
+            height="1.8rem"
+            style="fill: var(--color-text-secondary);"
+            viewBox="0 0 438.549 438.549"
+            width="1.8rem"
+          >
+            <path
+              d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Twitter Link"
+          href="https://twitter.com/nodejs"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <svg
+            height="1.8rem"
+            style="fill: var(--color-text-secondary);"
+            viewBox="328 355 335 276"
+            width="1.8rem"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d=" M 630, 425 A 195, 195 0 0 1 331, 600 A 142, 142 0 0 0 428, 570 A  70,  70 0 0 1 370, 523 A  70,  70 0 0 0 401, 521 A  70,  70 0 0 1 344, 455 A  70,  70 0 0 0 372, 460 A  70,  70 0 0 1 354, 370 A 195, 195 0 0 0 495, 442 A  67,  67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363 A  65,  65 0 0 1 623, 401 A 117, 117 0 0 0 662, 390 A  65,  65 0 0 1 630, 425 Z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Slack Link"
+          href="https://slack.openjsf.org"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <svg
+            height="1.8rem"
+            style="fill: var(--color-text-secondary);"
+            viewBox="0 0 54 54"
+            width="1.8rem"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386"
+            />
+            <path
+              d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387"
+            />
+            <path
+              d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386"
+            />
+            <path
+              d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387"
+            />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </footer>
+</div>
+`;
diff --git a/test/pages/__snapshots__/trademark.test.tsx.snap b/test/pages/__snapshots__/trademark.test.tsx.snap
index 93847d07..6509a202 100644
--- a/test/pages/__snapshots__/trademark.test.tsx.snap
+++ b/test/pages/__snapshots__/trademark.test.tsx.snap
@@ -212,6 +212,13 @@ exports[`Trademark page renders correctly 1`] = `
           >
             Privacy Policy
           </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
         </ul>
       </nav>
       <article
@@ -329,7 +336,7 @@ exports[`Trademark page renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/pages/__snapshots__/working-groups.test.tsx.snap b/test/pages/__snapshots__/working-groups.test.tsx.snap
index b22ee62e..c0f9cf82 100644
--- a/test/pages/__snapshots__/working-groups.test.tsx.snap
+++ b/test/pages/__snapshots__/working-groups.test.tsx.snap
@@ -212,6 +212,13 @@ exports[`Working Groups page renders correctly 1`] = `
           >
             Privacy Policy
           </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
         </ul>
       </nav>
       <article
@@ -317,7 +324,7 @@ exports[`Working Groups page renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/pages/security.test.tsx b/test/pages/security.test.tsx
new file mode 100644
index 00000000..894dd6ff
--- /dev/null
+++ b/test/pages/security.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SecurityPage from '../../src/pages/security';
+import '../__mocks__/intersectionObserverMock';
+import { createGeneralPageData } from '../__fixtures__/page';
+
+const mockData = createGeneralPageData();
+describe('Security page', () => {
+  it('renders correctly', () => {
+    const { container } = render(<SecurityPage data={mockData.data} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/test/templates/__snapshots__/blog.test.tsx.snap b/test/templates/__snapshots__/blog.test.tsx.snap
index 0c3c3211..6b2afef7 100644
--- a/test/templates/__snapshots__/blog.test.tsx.snap
+++ b/test/templates/__snapshots__/blog.test.tsx.snap
@@ -215,7 +215,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>
diff --git a/test/templates/__snapshots__/learn.test.tsx.snap b/test/templates/__snapshots__/learn.test.tsx.snap
index c45a4f32..8c9cf34c 100644
--- a/test/templates/__snapshots__/learn.test.tsx.snap
+++ b/test/templates/__snapshots__/learn.test.tsx.snap
@@ -295,7 +295,7 @@ exports[`Learn Template renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/security/"
+          href="/security"
         >
           Security Reporting
         </a>