Repository: nodejs/nodejs.dev (ts)

Issue:
Trademark policy page
## Summary

Create a /trademark policy page with the same content as https://nodejs.org/en/about/trademark/


Pull request:
Added Trademark Policy Page
Closes #1293

Patch:
diff --git a/content/about/trademark.md b/content/about/trademark.md
new file mode 100644
index 00000000..9bcbfb4a
--- /dev/null
+++ b/content/about/trademark.md
@@ -0,0 +1,32 @@
+---
+title: Trademark Policy
+description: "Trademark Policy | Node.js"
+authors: fhemberger, XhmikosR, mikeal,  brianwarner, bf4
+category: trademark
+---
+
+The Node.js trademarks, service marks, and graphics marks are symbols of the
+quality, performance, and ease of use that people have come to associate with
+the Node.js software and project. To ensure that the Node.js marks continue to
+symbolize these qualities, we must ensure that the marks are only used in ways
+that do not mislead people or cause them to confuse Node.js with other software
+of lower quality. If we don’t ensure the marks are used in this way, it cannot
+only confuse users, it can make it impossible to use the mark to protect
+against people who maliciously exploit the mark in the future. The primary goal
+of this policy is to make sure that this doesn’t happen to the Node.js mark, so
+that the community and users of Node.js are always protected in the future.
+
+At the same time, we’d like community members to feel comfortable spreading the
+word about Node.js and participating in the Node.js community. Keeping that
+goal in mind, we’ve tried to make the policy as flexible and easy to understand
+as legally possible.
+
+The OpenJS Foundation has a perpetual license to use the
+[Node.js marks](https://ip-policy.openjsf.org).
+For more details on using the Node.js mark, please read the
+[full policy](https://trademark-policy.openjsf.org).
+If you have any questions don't hesitate to
+[email us](mailto:trademark@openjsf.org).
+
+Guidelines for the visual display of the Node.js mark are described in
+the [Visual Guidelines](/static/documents/foundation-visual-guidelines.pdf).
diff --git a/gatsby-config.js b/gatsby-config.js
index bb61523e..12b6677b 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -69,6 +69,13 @@ module.exports = {
         path: `${__dirname}/src/data`,
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'data',
+        path: `${__dirname}/content/about`,
+      },
+    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
diff --git a/gatsby-node.js b/gatsby-node.js
index d2cf6971..843fb24f 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -17,7 +17,16 @@ exports.createPages = ({ graphql, actions }) => {
           {
             allMarkdownRemark(
               filter: {
-                fields: { slug: { nin: ["", "nodejs-community", "homepage"] } }
+                fields: {
+                  slug: {
+                    nin: [
+                      ""
+                      "nodejs-community"
+                      "homepage"
+                      "trademark-policy"
+                    ]
+                  }
+                }
               }
               sort: { fields: [fileAbsolutePath], order: ASC }
             ) {
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 62fde6f0..15359d71 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'gatsby';
 import RandomContributor from '../RandomContributor';
 import './footer.scss';
 
@@ -17,12 +18,9 @@ function Footer(): JSX.Element {
       <footer className="footer">
         <ul className="footer__left">
           <li>
-            <a
-              className="footer__link"
-              href="https://nodejs.org/en/about/trademark/"
-            >
+            <Link className="footer__link" to="/trademark">
               Trademark Policy
-            </a>
+            </Link>
           </li>
           <li>
             <a
diff --git a/src/pages/trademark.tsx b/src/pages/trademark.tsx
new file mode 100644
index 00000000..e8d7bcc7
--- /dev/null
+++ b/src/pages/trademark.tsx
@@ -0,0 +1,45 @@
+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';
+
+export default function TrademarkPage({ 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="centered-container">
+          <Article
+            title={title}
+            html={html}
+            tableOfContents={tableOfContents}
+            authors={authors}
+            editPath="content/about/trademark.md"
+          />
+        </main>
+      </Layout>
+      <Footer />
+    </>
+  );
+}
+
+export const query = graphql`
+  query {
+    page: markdownRemark(fields: { slug: { eq: "trademark-policy" } }) {
+      html
+      tableOfContents(absolute: false, pathToSlugField: "frontmatter.path")
+      frontmatter {
+        title
+        description
+      }
+      fields {
+        authors
+      }
+    }
+  }
+`;
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index a47f6e2b..8a1c1b6b 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -525,3 +525,8 @@ details {
   display: flex;
   justify-content: center;
 }
+
+.centered-container {
+  display: flex;
+  justify-content: center;
+}


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 83d51a45..fbd5bea1 100644
--- a/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
+++ b/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Tests for Footer component renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/about/trademark/"
+          href="/trademark"
         >
           Trademark Policy
         </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 02a15baa..716ade87 100644
--- a/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
@@ -159,7 +159,7 @@ exports[`CenteredLayout component renders correctly with footer 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/about/trademark/"
+          href="/trademark"
         >
           Trademark Policy
         </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 06d34129..18af4742 100644
--- a/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
@@ -232,7 +232,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/about/trademark/"
+            href="/trademark"
           >
             Trademark Policy
           </a>
diff --git a/test/__fixtures__/page.tsx b/test/__fixtures__/page.tsx
index 9e9e7771..1830b8cf 100644
--- a/test/__fixtures__/page.tsx
+++ b/test/__fixtures__/page.tsx
@@ -6,6 +6,7 @@ import {
   BlogPostsList,
   BlogPageData,
   BlogPageContext,
+  Page,
 } from '../../src/types';
 
 import { ReleaseData } from '../../src/hooks/useReleaseHistory';
@@ -174,3 +175,19 @@ export const createBlogPageData = (): BlogPageData => ({
     ],
   },
 });
+
+export const createTrademarkData = (): Page => ({
+  data: {
+    page: {
+      fields: {
+        authors: ['palak'],
+      },
+      frontmatter: {
+        description: 'Mock Description',
+        title: 'Mock Title',
+      },
+      html: '<div>Sample</div>',
+      tableOfContents: 'Table of Content',
+    },
+  },
+});
diff --git a/test/pages/__snapshots__/404.test.tsx.snap b/test/pages/__snapshots__/404.test.tsx.snap
index dbdfd654..da183903 100644
--- a/test/pages/__snapshots__/404.test.tsx.snap
+++ b/test/pages/__snapshots__/404.test.tsx.snap
@@ -213,7 +213,7 @@ exports[`404 page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/about/trademark/"
+            href="/trademark"
           >
             Trademark Policy
           </a>
diff --git a/test/pages/__snapshots__/blog.test.tsx.snap b/test/pages/__snapshots__/blog.test.tsx.snap
index 42a5b8d1..78bc598c 100644
--- a/test/pages/__snapshots__/blog.test.tsx.snap
+++ b/test/pages/__snapshots__/blog.test.tsx.snap
@@ -182,7 +182,7 @@ exports[`Blog page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/about/trademark/"
+            href="/trademark"
           >
             Trademark Policy
           </a>
@@ -477,7 +477,7 @@ exports[`Blog page renders correctly for empty blogs list 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/about/trademark/"
+            href="/trademark"
           >
             Trademark Policy
           </a>
diff --git a/test/pages/__snapshots__/download.test.tsx.snap b/test/pages/__snapshots__/download.test.tsx.snap
index 31f56397..ddd733bd 100644
--- a/test/pages/__snapshots__/download.test.tsx.snap
+++ b/test/pages/__snapshots__/download.test.tsx.snap
@@ -825,7 +825,7 @@ exports[`Download page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/about/trademark/"
+            href="/trademark"
           >
             Trademark Policy
           </a>
@@ -1688,7 +1688,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/about/trademark/"
+            href="/trademark"
           >
             Trademark Policy
           </a>
diff --git a/test/pages/__snapshots__/home.test.tsx.snap b/test/pages/__snapshots__/home.test.tsx.snap
index 00bdcd2f..988e9899 100644
--- a/test/pages/__snapshots__/home.test.tsx.snap
+++ b/test/pages/__snapshots__/home.test.tsx.snap
@@ -501,7 +501,7 @@ exports[`Home page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/about/trademark/"
+            href="/trademark"
           >
             Trademark Policy
           </a>
diff --git a/test/pages/__snapshots__/trademark.test.tsx.snap b/test/pages/__snapshots__/trademark.test.tsx.snap
new file mode 100644
index 00000000..a8c1c1b6
--- /dev/null
+++ b/test/pages/__snapshots__/trademark.test.tsx.snap
@@ -0,0 +1,366 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Trademark 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>
+          <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>
+        <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="centered-container"
+    >
+      <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/palak"
+              rel="noopener noreferrer"
+              style="margin-left: 0px;"
+              target="_blank"
+              title="palak"
+            >
+              <img
+                alt="palak"
+                class="img"
+                src="https://github.com/palak.png?size=60"
+              />
+            </a>
+          </li>
+        </ul>
+        <div
+          class="edit"
+        >
+          <a
+            class="link"
+            href="https://github.com/nodejs/nodejs.dev/edit/master/content/about/trademark.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="https://nodejs.org/en/about/privacy/"
+        >
+          Privacy Policy
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="https://github.com/openjs-foundation/cross-project-council/blob/master/CODE_OF_CONDUCT.md#contributor-covenant-code-of-conduct"
+        >
+          Code of Conduct
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="https://nodejs.org/en/security/"
+        >
+          Security Reporting
+        </a>
+      </li>
+      <li>
+        <a
+          class="footer__link"
+          href="https://nodejs.org/en/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/trademark.test.tsx b/test/pages/trademark.test.tsx
new file mode 100644
index 00000000..a08f1702
--- /dev/null
+++ b/test/pages/trademark.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TrademarkPage from '../../src/pages/trademark';
+import '../__mocks__/intersectionObserverMock';
+
+import { createTrademarkData } from '../__fixtures__/page';
+
+const mockData = createTrademarkData();
+
+describe('Trademark page', () => {
+  it('renders correctly', () => {
+    const { container } = render(<TrademarkPage 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 95f0f9b6..d36fc4a7 100644
--- a/test/templates/__snapshots__/blog.test.tsx.snap
+++ b/test/templates/__snapshots__/blog.test.tsx.snap
@@ -191,7 +191,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/about/trademark/"
+          href="/trademark"
         >
           Trademark Policy
         </a>
diff --git a/test/templates/__snapshots__/learn.test.tsx.snap b/test/templates/__snapshots__/learn.test.tsx.snap
index a1fb5eeb..b5e3c7a6 100644
--- a/test/templates/__snapshots__/learn.test.tsx.snap
+++ b/test/templates/__snapshots__/learn.test.tsx.snap
@@ -271,7 +271,7 @@ exports[`Learn Template renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/about/trademark/"
+          href="/trademark"
         >
           Trademark Policy
         </a>