Added Trademark Policy Page (#1298)

* Added Trademark Policy Page

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).

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: {

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 }
             ) {

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>

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

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>

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>

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
+      }
+    }
+  }
+`;

src/styles/layout.scss

@@ -525,3 +525,8 @@ details {
   display: flex;
   justify-content: center;
 }
+
+.centered-container {
+  display: flex;
+  justify-content: center;
+}

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',
+    },
+  },
+});

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>

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>

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>

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>