refactor

dimaMachina · dimaMachina · commit b390d10e6507 · 2022-11-25T20:00:53.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -74,3 +74,5 @@ yarn-error.log
 
 # Codegen stuff
 src/__generated__/
+
+.idea/
diff --git a/notes/ContributingToCodePage.md b/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
diff --git a/notes/NewSiteArchitecture.md b/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.
diff --git a/scripts/sort-libraries.js b/scripts/sort-libraries.js
@@ -106,7 +106,7 @@ const getGitHubStats = async githubRepo => {
   const formattedStars = numbro(stars).format({
     average: true,
   });
-  
+
   const releases = [];
   if (repo.tags && repo.tags.nodes && repo.tags.nodes.length && repo.tags.nodes[0].target.target && repo.tags.nodes[0].target.target.pushedDate) {
     releases.push(repo.tags.nodes[0].target.target.pushedDate);
@@ -117,7 +117,7 @@ const getGitHubStats = async githubRepo => {
   if(owner.includes("graphql")) {
     console.log({ releases, repoName })
   }
-  
+
   const lastRelease = releases.filter(Boolean).sort().reverse()[0]
 
   return {
diff --git a/src/pages/brand.tsx b/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>
diff --git a/src/pages/code.tsx b/src/pages/code.tsx
@@ -1,6 +1,6 @@
 import type { PageProps } from "gatsby"
 import { AnchorLink } from "gatsby-plugin-anchor-links"
-import React, { useState } from "react"
+import React, { useState, Fragment } from "react"
 import Layout from "../components/Layout"
 import Marked from "../components/Marked"
 import Seo from "../components/Seo"
@@ -20,16 +20,16 @@ interface Language {
   name: string
   totalStars: number
   categoryMap: {
-    Client: Array<Library>
-    Server: Array<Library>
+    Client: Library[]
+    Server: Library[]
   }
 }
 
 interface PageContext {
-  languageList: Array<Language>
+  languageList: Language[]
   otherLibraries: {
-    Services: Array<Library>
-    Tools: Array<Library>
+    Services: Library[]
+    Tools: Library[]
   }
   sourcePath: string
 }
@@ -38,7 +38,7 @@ export function buildLanguagesMenu(pageContext: PageContext) {
   return (
     <div className="language-boxes">
       {pageContext.languageList
-        ?.map(langeuage => langeuage?.name!)
+        ?.map(language => language?.name!)
         .filter(Boolean)
         .map(languageName => {
           const slug = toSlug(languageName)
@@ -65,13 +65,22 @@ export function buildLibraryContent(
   return (
     <div className="library-info">
       <div className="library-details">
-        <a className="library-name" href={library.url} target="_blank">
+        <a
+          className="library-name"
+          href={library.url}
+          target="_blank"
+          rel="noreferrer"
+        >
           <p>{library.name}</p>
         </a>
         {library.github && (
           <div className="library-detail">
             <b>GitHub</b>
-            <a href={`https://github.com/${library.github}`} target="_blank">
+            <a
+              href={`https://github.com/${library.github}`}
+              target="_blank"
+              rel="noreferrer"
+            >
               {library.github}
             </a>
           </div>
@@ -93,6 +102,7 @@ export function buildLibraryContent(
             <a
               href={`https://rubygems.org/gems/${library.gem}`}
               target="_blank"
+              rel="noreferrer"
             >
               {library.gem}
             </a>
@@ -180,7 +190,6 @@ export function buildLibraryCategoryContent(
       </div>
     )
   }
-  return
 }
 
 const categorySlugMap = [
@@ -190,52 +199,54 @@ const categorySlugMap = [
 ]
 
 export function buildLanguagesContent(pageContext: any) {
-  const elements = []
-  for (const languageObj of pageContext.languageList) {
-    const languageName = languageObj.name
-    const libraryCategories = languageObj.categoryMap
-    const filteredCategorySlugMap = categorySlugMap.filter(
-      ([libraryCategoryName]) =>
-        libraryCategories[libraryCategoryName as any]?.length
-    )
-    const languageSlug = toSlug(languageName)
-    elements.push(
-      <div className="language-content" id={languageSlug}>
-        <div className="language-header">
-          <h2 className="language-title">{languageName}</h2>
-          {filteredCategorySlugMap.length > 1 && (
-            <p className="language-categories-permalinks">
-              {filteredCategorySlugMap.map(
-                ([libraryCategoryName, categorySlug], i) => (
-                  <>
-                    <AnchorLink
-                      title={`${languageSlug} ${categorySlug}`}
-                      className="language-category-permalink"
-                      to={`#${languageSlug}-${categorySlug}`}
-                    >
-                      {libraryCategoryName}
-                    </AnchorLink>
-                    {i < filteredCategorySlugMap.length - 1 && " / "}
-                  </>
+  return (
+    <div className="languages-content">
+      {pageContext.languageList.map(languageObj => {
+        const languageName = languageObj.name
+        const libraryCategories = languageObj.categoryMap
+        const filteredCategorySlugMap = categorySlugMap.filter(
+          ([libraryCategoryName]) =>
+            libraryCategories[libraryCategoryName as any]?.length
+        )
+        const languageSlug = toSlug(languageName)
+        return (
+          <div className="language-content" id={languageSlug}>
+            <div className="language-header">
+              <h2 className="language-title">{languageName}</h2>
+              {filteredCategorySlugMap.length > 1 && (
+                <p className="language-categories-permalinks">
+                  {filteredCategorySlugMap.map(
+                    ([libraryCategoryName, categorySlug], i) => (
+                      <Fragment key={libraryCategoryName}>
+                        <AnchorLink
+                          title={`${languageSlug} ${categorySlug}`}
+                          className="language-category-permalink"
+                          to={`#${languageSlug}-${categorySlug}`}
+                        >
+                          {libraryCategoryName}
+                        </AnchorLink>
+                        {i < filteredCategorySlugMap.length - 1 && " / "}
+                      </Fragment>
+                    )
+                  )}
+                </p>
+              )}
+            </div>
+            <div className="library-categories">
+              {filteredCategorySlugMap.map(([categoryName, categorySlug]) =>
+                buildLibraryCategoryContent(
+                  libraryCategories,
+                  categoryName,
+                  `${languageSlug}-${categorySlug}`,
+                  pageContext
                 )
               )}
-            </p>
-          )}
-        </div>
-        <div className="library-categories">
-          {filteredCategorySlugMap.map(([categoryName, categorySlug]) =>
-            buildLibraryCategoryContent(
-              libraryCategories,
-              categoryName,
-              `${languageSlug}-${categorySlug}`,
-              pageContext
-            )
-          )}
-        </div>
-      </div>
-    )
-  }
-  return <div className="languages-content">{elements}</div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
 }
 
 export default ({ pageContext }: PageProps<{}, PageContext>) => {
diff --git a/src/utils/useFAQAccordion.ts b/src/utils/useFAQAccordion.ts
@@ -24,7 +24,7 @@ export const useFAQAccordion = () => {
   }
 
   useEffect(() => {
-    const hash = window.location.hash ? window.location.hash.split("#")[1] : ""
+    const hash = location.hash ? location.hash.split("#")[1] : ""
 
     if (hash && buttonCreated) {
       const anchor = document && document.getElementById(hash)
@@ -57,19 +57,17 @@ export const useFAQAccordion = () => {
       const element =
         e.target.localName === "button" ? e.target : e.target.parentNode
 
-    
       window.history.replaceState(
         {},
         "",
         "#" + e.target.getElementsByTagName("a")[0].id
       )
       window.history.scrollRestoration = "manual"
+      e.target.classList.toggle("open")
 
       if (e.target.localName === "button") {
-        e.target.classList.toggle("open")
         e.target.getElementsByTagName("h3")[0].classList.toggle("open")
       } else {
-        e.target.classList.toggle("open")
         e.target.parentNode.classList.toggle("open")
       }
 
@@ -79,5 +77,5 @@ export const useFAQAccordion = () => {
     document.addEventListener("click", toggleClasses)
 
     return () => document.removeEventListener("click", toggleClasses)
-  }, [typeof window !== 'undefined' ? window.location.hash : null])
-}
+  }, [typeof window !== 'undefined' ? location.hash : null])
+}
