Refactor /code page (#1319)

Author: Dimitri POSTOLOV

.gitignore

@@ -74,3 +74,5 @@ yarn-error.log
 
 # Codegen stuff
 src/__generated__/
+
+.idea/

notes/ContributingToCodePage.md

@@ -29,9 +29,9 @@ src/content/code
 
 We'd love any new project to include a few paragraphs describing its goals and usage, the goal here is to make it easy for people to decide between options.
 
-Here's an optimal example example of what we're looking for:
+Here's an optimal example of what we're looking for:
 
-- It uses yml frontmatter to provide additional information like repo, npm
+- It uses yaml frontmatter to provide additional information like repo, npm
 - It explains itself in the 'description' then fills fleshes out that description with some code samples
 
 ````md

notes/NewSiteArchitecture.md

@@ -8,10 +8,10 @@
 
 This page is effectively a marketing page for GraphQL and should be the visual, scrollable version of the "Introducing GraphQL" conference talks and should be rich with visual metaphor and illustration and take advantage of whitespace to make individual salient points.
 
-Above the fold, this page should succinctly explain what GraphQL is and illustrate with a simple (editable) query/response example. Before scrolling you should understand the following:
+Above the fold, this page should succinctly explain what GraphQL is and illustrate with a simple (editable) query/response example. Before scrolling, you should understand the following:
 
 * GraphQL solves the same problem as REST.
-* GraphQL is an query language for APIs (and not Databases).
+* GraphQL is a query language for APIs (and not Databases).
 * GraphQL is sent by client applications, such as an iOS app.
 * GraphQL is evaluated by a web service and often returned as JSON.
 * GraphQL services provide a complete description of your data with a type system.

src/components/Marked/index.tsx

@@ -1,12 +1,11 @@
 // @ts-nocheck
 /**
- * marked - a markdown parser
+ * marked - a Markdown parser
  * Copyright (c) 2011-2013, Christopher Jeffrey. (MIT Licensed)
  * https://github.com/chjj/marked
  */
 
 import React from "react"
-import users from "../../pages/users"
 import Prism from "../Prism/index"
 import Header from "./Header"
 

src/pages/brand.tsx

@@ -136,6 +136,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
             <a
               href="https://fonts.google.com/specimen/Rubik?sidebar.open=true&selection.family=Rubik:wght@300&preview.text=GraphQL&preview.text_type=custom"
               target="_blank"
+              rel="noreferrer"
             >
               Rubik Light
             </a>
@@ -147,6 +148,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
                 <a
                   href="https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL"
                   target="_blank"
+                  rel="noreferrer"
                 >
                   Open Font License
                 </a>