From ddc21699f716d42a70bd3fa7558bfb32d7ffcc2d Mon Sep 17 00:00:00 2001
From: Carlos Cuesta <carloscuesta@me.com>
Date: Fri, 11 Dec 2020 14:55:55 +0100
Subject: [PATCH] :sparkles: Add related-tools page (#643)

---
 README.md                                     |  10 --
 .../__snapshots__/pages.spec.js.snap          | 111 ++++++++++++++++++
 src/__tests__/pages.spec.js                   |   8 ++
 src/components/Layout/Hamburger/index.js      |   3 +
 src/pages/related-tools.js                    |  76 ++++++++++++
 5 files changed, 198 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/related-tools.js

diff --git a/README.md b/README.md
index c35bde6..4eed2c6 100644
--- a/README.md
+++ b/README.md
@@ -30,16 +30,6 @@ To use gitmojis from your command line install [gitmoji-cli](https://github.com/
 npm i -g gitmoji-cli
 ```
 
-## Related tools
-
-- [`gitmoji-changelog`](https://github.com/frinyvonnick/gitmoji-changelog/): A changelog generator for gitmoji.
-- [`gitmemoji`](https://github.com/lalalilo/gitmemoji/): A game to learn gitmojis.
-- [`gitmoji-browser-extension`](https://github.com/johannchopin/gitmoji-browser-extension): The Gitmoji extension to easily search and copy gitmojis 😜
-- [`gitmoji-vscode`](https://github.com/vtrois/gitmoji-vscode): A VSCode extension for your git commit messages 😄
-- [`gitmoji-intellij-plugin`](https://plugins.jetbrains.com/plugin/12383-gitmoji): A Jetbrains suite plugin to easily add gitmoji when committing in the IDE
-- [`gitmoji-sublimetext`](https://packagecontrol.io/packages/Gitmoji): A Sublime Text plugin to add emojis in git commit messages 😄
-- [`gitimoji`](https://github.com/TimoZacherl/gitimoji): A Gitmoji App for macOS
-
 ## Contributing to gitmoji
 
 Contributing to gitmoji is a piece of :cake:, read the [contributing guidelines](https://github.com/carloscuesta/gitmoji/blob/master/.github/CONTRIBUTING.md). You can discuss emojis using the [issues section](https://github.com/carloscuesta/gitmoji/issues/new). To add a new emoji to the list create an issue and send a pull request, see [how to send a pull request and add a gitmoji](https://github.com/carloscuesta/gitmoji/blob/master/.github/CONTRIBUTING.md#how-to-add-a-gitmoji).
diff --git a/src/__tests__/__snapshots__/pages.spec.js.snap b/src/__tests__/__snapshots__/pages.spec.js.snap
index 571f5d6..59c16b2 100644
--- a/src/__tests__/__snapshots__/pages.spec.js.snap
+++ b/src/__tests__/__snapshots__/pages.spec.js.snap
@@ -2561,3 +2561,114 @@ exports[`Pages Index should render the page 1`] = `
   </div>
 </main>
 `;
+
+exports[`Pages Related tools should render the page 1`] = `
+<main>
+  <div
+    className="jsx-3878451597 col-xs-12"
+  >
+    <div
+      className="jsx-3878451597 carbon-container row center-xs"
+    />
+  </div>
+  <section>
+    <h1>
+      Related tools
+    </h1>
+    <p>
+      This is a list of tools which are related with the 
+      <b>
+        gitmoji
+      </b>
+       
+      convention.
+    </p>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/frinyvonnick/gitmoji-changelog/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <b>
+            gitmoji-changelog
+          </b>
+        </a>
+        : A changelog generator for gitmoji.
+      </li>
+      <li>
+        <a
+          href="https://github.com/lalalilo/gitmemoji/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <b>
+            gitmemoji
+          </b>
+        </a>
+        : A game to learn gitmojis.
+      </li>
+      <li>
+        <a
+          href="https://github.com/johannchopin/gitmoji-browser-extension"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <b>
+            gitmoji-browser-extension
+          </b>
+        </a>
+        : The Gitmoji extension to easily search and copy gitmojis.
+      </li>
+      <li>
+        <a
+          href="https://github.com/vtrois/gitmoji-vscode"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <b>
+            gitmoji-vscode
+          </b>
+        </a>
+        : A VSCode extension for your git commit messages
+      </li>
+      <li>
+        <a
+          href="https://plugins.jetbrains.com/plugin/12383-gitmoji-plus-commit-button"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <b>
+            gitmoji-intellij-plugin
+          </b>
+        </a>
+        : A Jetbrains suite plugin to easily add gitmoji when committing
+      </li>
+      <li>
+        <a
+          href="https://packagecontrol.io/packages/Gitmoji"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <b>
+            gitmoji-sublimetext
+          </b>
+        </a>
+        : A Sublime Text plugin to add emojis in git commit messages.
+      </li>
+      <li>
+        <a
+          href="https://github.com/TimoZacherl/gitimoji"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <b>
+            gitimoji
+          </b>
+        </a>
+        : A Gitmoji App for macOS.
+      </li>
+    </ul>
+  </section>
+</main>
+`;
diff --git a/src/__tests__/pages.spec.js b/src/__tests__/pages.spec.js
index 4783763..ce6c91e 100644
--- a/src/__tests__/pages.spec.js
+++ b/src/__tests__/pages.spec.js
@@ -4,6 +4,7 @@ import App from '../pages/_app'
 import Index from '../pages/index'
 import About from '../pages/about'
 import Contributors from '../pages/contributors'
+import RelatedTools from '../pages/related-tools'
 import * as stubs from './stubs'
 
 describe('Pages', () => {
@@ -38,4 +39,11 @@ describe('Pages', () => {
       expect(wrapper).toMatchSnapshot()
     })
   })
+
+  describe('Related tools', () => {
+    it('should render the page', () => {
+      const wrapper = renderer.create(<RelatedTools />)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
 })
diff --git a/src/components/Layout/Hamburger/index.js b/src/components/Layout/Hamburger/index.js
index 194a275..1f6941b 100644
--- a/src/components/Layout/Hamburger/index.js
+++ b/src/components/Layout/Hamburger/index.js
@@ -52,6 +52,9 @@ const Hamburger = (): Element<'div'> => {
             <li>
               <MenuLink href="/contributors" text="Contributors" />
             </li>
+            <li>
+              <MenuLink href="/related-tools" text="Related tools" />
+            </li>
             <li>
               <MenuLink
                 href="https://github.com/carloscuesta/gitmoji"
diff --git a/src/pages/related-tools.js b/src/pages/related-tools.js
new file mode 100644
index 0000000..0d614b2
--- /dev/null
+++ b/src/pages/related-tools.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import Link from 'next/link'
+
+import CarbonAd from 'src/components/CarbonAd'
+import Button from 'src/components/Button'
+import SEO from 'src/components/SEO'
+
+const tools: Array<{ name: string, description: string, link: string }> = [
+  {
+    name: 'gitmoji-changelog',
+    description: 'A changelog generator for gitmoji.',
+    link: 'https://github.com/frinyvonnick/gitmoji-changelog/',
+  },
+  {
+    name: 'gitmemoji',
+    description: 'A game to learn gitmojis.',
+    link: 'https://github.com/lalalilo/gitmemoji/',
+  },
+  {
+    name: 'gitmoji-browser-extension',
+    description: 'The Gitmoji extension to easily search and copy gitmojis.',
+    link: 'https://github.com/johannchopin/gitmoji-browser-extension',
+  },
+  {
+    name: 'gitmoji-vscode',
+    description: 'A VSCode extension for your git commit messages',
+    link: 'https://github.com/vtrois/gitmoji-vscode',
+  },
+  {
+    name: 'gitmoji-intellij-plugin',
+    description:
+      'A Jetbrains suite plugin to easily add gitmoji when committing',
+    link:
+      'https://plugins.jetbrains.com/plugin/12383-gitmoji-plus-commit-button',
+  },
+  {
+    name: 'gitmoji-sublimetext',
+    description: 'A Sublime Text plugin to add emojis in git commit messages.',
+    link: 'https://packagecontrol.io/packages/Gitmoji',
+  },
+  {
+    name: 'gitimoji',
+    description: 'A Gitmoji App for macOS.',
+    link: 'https://github.com/TimoZacherl/gitimoji',
+  },
+]
+
+const RelatedTools = () => (
+  <>
+    <SEO pageTitle="Related tools" pageUrl="/related-tools" />
+    <main>
+      <CarbonAd />
+      <section>
+        <h1>Related tools</h1>
+
+        <p>
+          This is a list of tools which are related with the <b>gitmoji</b>{' '}
+          convention.
+        </p>
+
+        <ul>
+          {tools.map((tool) => (
+            <li key={tool.name}>
+              <a href={tool.link} target="_blank" rel="noopener noreferrer">
+                <b>{tool.name}</b>
+              </a>
+              {`: ${tool.description}`}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </main>
+  </>
+)
+
+export default RelatedTools