From 5f03c12d6a3b17e60b6d9d4f08c7e70601852d60 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Fri, 25 Nov 2022 20:00:53 +0100
Subject: [PATCH 1/3] refactor

---
 .gitignore                      |   2 +
 notes/ContributingToCodePage.md |   4 +-
 notes/NewSiteArchitecture.md    |   4 +-
 src/pages/brand.tsx             |   2 +
 src/pages/code.tsx              | 119 +++++++++++++++++---------------
 src/utils/useFAQAccordion.ts    |  10 ++-
 6 files changed, 77 insertions(+), 64 deletions(-)

diff --git a/.gitignore b/.gitignore
index 450b61eb79..84c2d8acd5 100644
--- 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
index 2ac02d4479..4858474c34 100644
--- 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
index fb5bed0d79..f933f1a3e5 100644
--- 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/src/pages/brand.tsx b/src/pages/brand.tsx
index d573af49d1..07faa30ea6 100644
--- 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
index 6e2491003d..04034ba343 100644
--- 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
index 73452c0abb..8d2c3aeee9 100644
--- 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])
-}
\ No newline at end of file
+  }, [typeof window !== 'undefined' ? location.hash : null])
+}

From 098893ee687b352ad8b8476634cd61a0d0a6f686 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Fri, 25 Nov 2022 20:12:59 +0100
Subject: [PATCH 2/3] fix

---
 src/components/Marked/index.tsx |   3 +-
 src/pages/code.tsx              | 153 +++++++++++++++-----------------
 2 files changed, 75 insertions(+), 81 deletions(-)

diff --git a/src/components/Marked/index.tsx b/src/components/Marked/index.tsx
index eb9c4f62ec..3c95bd5bbb 100644
--- a/src/components/Marked/index.tsx
+++ b/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"
 
diff --git a/src/pages/code.tsx b/src/pages/code.tsx
index 04034ba343..4e7c527363 100644
--- a/src/pages/code.tsx
+++ b/src/pages/code.tsx
@@ -34,28 +34,6 @@ interface PageContext {
   sourcePath: string
 }
 
-export function buildLanguagesMenu(pageContext: PageContext) {
-  return (
-    <div className="language-boxes">
-      {pageContext.languageList
-        ?.map(language => language?.name!)
-        .filter(Boolean)
-        .map(languageName => {
-          const slug = toSlug(languageName)
-          return (
-            <AnchorLink
-              to={`#${slug}`}
-              className="article language-box"
-              title={languageName}
-            >
-              <span className="article_title">{languageName}</span>
-            </AnchorLink>
-          )
-        })}
-    </div>
-  )
-}
-
 export function buildLibraryContent(
   library: any,
   pageContext: Queries.TagPageQueryVariables
@@ -167,7 +145,10 @@ export function buildLibraryContent(
   )
 }
 
-export function buildLibraryList(libraries: readonly any[], pageContext: any) {
+export function buildLibraryList(
+  libraries: Library[],
+  pageContext: any
+) {
   return (
     <div className="library-list">
       {libraries.map(library => buildLibraryContent(library, pageContext))}
@@ -176,13 +157,13 @@ export function buildLibraryList(libraries: readonly any[], pageContext: any) {
 }
 
 export function buildLibraryCategoryContent(
-  libraryCategories: any[],
-  libraryCategoryName: string,
+  libraryCategories: { Client: Library[]; Server: Library[] },
+  libraryCategoryName: 'Client' | 'Server',
   slug: string,
   pageContext: any
 ) {
   if (libraryCategoryName in libraryCategories) {
-    const libraries = libraryCategories[libraryCategoryName as any]
+    const libraries = libraryCategories[libraryCategoryName]
     return (
       <div id={slug} className="library-category">
         <h3 className="library-category-title">{libraryCategoryName}</h3>
@@ -198,57 +179,6 @@ const categorySlugMap = [
   ["Tools", toSlug("Tools")],
 ]
 
-export function buildLanguagesContent(pageContext: any) {
-  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
-                )
-              )}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
 export default ({ pageContext }: PageProps<{}, PageContext>) => {
   return (
     <Layout className="code" pageContext={pageContext}>
@@ -286,8 +216,73 @@ export default ({ pageContext }: PageProps<{}, PageContext>) => {
             <p id="language-support" className="languages-title">
               Language Support
             </p>
-            {buildLanguagesMenu(pageContext)}
-            {buildLanguagesContent(pageContext)}
+            <div className="language-boxes">
+              {pageContext.languageList
+                ?.map(language => language?.name!)
+                .filter(Boolean)
+                .map(languageName => {
+                  const slug = toSlug(languageName)
+                  return (
+                    <AnchorLink
+                      to={`#${slug}`}
+                      className="article language-box"
+                      title={languageName}
+                    >
+                      <span className="article_title">{languageName}</span>
+                    </AnchorLink>
+                  )
+                })}
+            </div>
+            <div className="languages-content">
+              {pageContext.languageList.map(lang => {
+                const languageName = lang.name
+                const libraryCategories = lang.categoryMap
+                const filteredCategorySlugMap = categorySlugMap.filter(
+                  ([libraryCategoryName]) =>
+                    libraryCategories[
+                      libraryCategoryName as "Client" | "Server"
+                    ]?.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
+                          )
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
             <h2>
               <a className="anchor" id="generic-tools"></a>
               Tools

From 53c80f93e07efe879829cdd6d2dee655f3eafdff Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Fri, 25 Nov 2022 20:31:34 +0100
Subject: [PATCH 3/3] fix

---
 src/pages/code.tsx | 121 +++++++++++++++++++++------------------------
 1 file changed, 55 insertions(+), 66 deletions(-)

diff --git a/src/pages/code.tsx b/src/pages/code.tsx
index 4e7c527363..f64b9487b0 100644
--- a/src/pages/code.tsx
+++ b/src/pages/code.tsx
@@ -6,7 +6,7 @@ import Marked from "../components/Marked"
 import Seo from "../components/Seo"
 import { toSlug } from "../utils/slug"
 
-interface Library {
+interface ILibrary {
   description: string
   github?: string
   npm?: string
@@ -14,30 +14,33 @@ interface Library {
   name: string
   sourcePath: string
   url: string
+  gem?: string
+  lastRelease?: string
+  formattedLastRelease?: string
+  stars?: number
+  formattedStars?: string
+  license?: string
 }
 
 interface Language {
   name: string
   totalStars: number
   categoryMap: {
-    Client: Library[]
-    Server: Library[]
+    Client: ILibrary[]
+    Server: ILibrary[]
   }
 }
 
 interface PageContext {
   languageList: Language[]
   otherLibraries: {
-    Services: Library[]
-    Tools: Library[]
+    Services: ILibrary[]
+    Tools: ILibrary[]
   }
   sourcePath: string
 }
 
-export function buildLibraryContent(
-  library: any,
-  pageContext: Queries.TagPageQueryVariables
-) {
+export function Library({ data }: { data: ILibrary }) {
   const [overflown, setOverflown] = useState(false)
   const [expanded, setExpanded] = useState(false)
   return (
@@ -45,68 +48,69 @@ export function buildLibraryContent(
       <div className="library-details">
         <a
           className="library-name"
-          href={library.url}
+          href={data.url}
           target="_blank"
           rel="noreferrer"
         >
-          <p>{library.name}</p>
+          <p>{data.name}</p>
         </a>
-        {library.github && (
+        {data.github && (
           <div className="library-detail">
             <b>GitHub</b>
             <a
-              href={`https://github.com/${library.github}`}
+              href={`https://github.com/${data.github}`}
               target="_blank"
               rel="noreferrer"
             >
-              {library.github}
+              {data.github}
             </a>
           </div>
         )}
-        {library.npm && (
+        {data.npm && (
           <div className="library-detail">
             <b>npm</b>
             <a
-              href={`https://www.npmjs.com/package/${library.npm}`}
+              href={`https://www.npmjs.com/package/${data.npm}`}
               target="_blank"
+              rel="noreferrer"
             >
-              {library.npm}
+              {data.npm}
             </a>
           </div>
         )}
-        {library.gem && (
+        {data.gem && (
           <div className="library-detail">
             <b>gem</b>
             <a
-              href={`https://rubygems.org/gems/${library.gem}`}
+              href={`https://rubygems.org/gems/${data.gem}`}
               target="_blank"
               rel="noreferrer"
             >
-              {library.gem}
+              {data.gem}
             </a>
           </div>
         )}
-        {library.lastRelease && (
+        {data.lastRelease && (
           <div className="library-detail">
             <b>Last Release</b>
-            <span>{library.formattedLastRelease}</span>
+            <span>{data.formattedLastRelease}</span>
           </div>
         )}
-        {library.stars && (
+        {data.stars && (
           <div className="library-detail">
             <b>Stars</b>
-            <span>{library.formattedStars}</span>
+            <span>{data.formattedStars}</span>
           </div>
         )}
-        {library.license && (
+        {data.license && (
           <div className="library-detail">
             <b>License</b>
-            <span>{library.license}</span>
+            <span>{data.license}</span>
           </div>
         )}
-        {library.howto ? (
+        {data.howto ? (
           <div className="library-description">
-            <Marked pageContext={pageContext}>{library.description}</Marked>
+            <Marked>{data.description}</Marked>
           </div>
         ) : (
           <br />
@@ -123,9 +127,7 @@ export function buildLibraryContent(
             }
           }}
         >
-          <Marked pageContext={pageContext}>
-            {library.howto || library.description}
-          </Marked>
+          <Marked>{data.howto || data.description}</Marked>
         </div>
         {overflown && (
           <div
@@ -145,34 +147,16 @@ export function buildLibraryContent(
   )
 }
 
-export function buildLibraryList(
-  libraries: Library[],
-  pageContext: any
-) {
+export function LibraryList({ data }: { data: ILibrary[] }) {
   return (
     <div className="library-list">
-      {libraries.map(library => buildLibraryContent(library, pageContext))}
+      {data.map(library => (
+        <Library data={library} />
+      ))}
     </div>
   )
 }
 
-export function buildLibraryCategoryContent(
-  libraryCategories: { Client: Library[]; Server: Library[] },
-  libraryCategoryName: 'Client' | 'Server',
-  slug: string,
-  pageContext: any
-) {
-  if (libraryCategoryName in libraryCategories) {
-    const libraries = libraryCategories[libraryCategoryName]
-    return (
-      <div id={slug} className="library-category">
-        <h3 className="library-category-title">{libraryCategoryName}</h3>
-        {buildLibraryList(libraries, pageContext)}
-      </div>
-    )
-  }
-}
-
 const categorySlugMap = [
   ["Server", toSlug("Server")],
   ["Client", toSlug("Client")],
@@ -271,11 +255,22 @@ export default ({ pageContext }: PageProps<{}, PageContext>) => {
                     <div className="library-categories">
                       {filteredCategorySlugMap.map(
                         ([categoryName, categorySlug]) =>
-                          buildLibraryCategoryContent(
-                            libraryCategories,
-                            categoryName,
-                            `${languageSlug}-${categorySlug}`,
-                            pageContext
+                          categoryName in libraryCategories && (
+                            <div
+                              id={`${languageSlug}-${categorySlug}`}
+                              className="library-category"
+                            >
+                              <h3 className="library-category-title">
+                                {categoryName}
+                              </h3>
+                              <LibraryList
+                                data={
+                                  libraryCategories[
+                                    categoryName as "Client" | "Server"
+                                  ]
+                                }
+                              />
+                            </div>
                           )
                       )}
                     </div>
@@ -290,10 +285,7 @@ export default ({ pageContext }: PageProps<{}, PageContext>) => {
                 #
               </AnchorLink>
             </h2>
-            {buildLibraryList(
-              pageContext.otherLibraries?.Tools ?? [],
-              pageContext
-            )}
+            <LibraryList data={pageContext.otherLibraries?.Tools ?? []} />
             <h2>
               <a className="anchor" id="services"></a>
               Services
@@ -301,10 +293,7 @@ export default ({ pageContext }: PageProps<{}, PageContext>) => {
                 #
               </AnchorLink>
             </h2>
-            {buildLibraryList(
-              pageContext.otherLibraries?.Services ?? [],
-              pageContext
-            )}
+            <LibraryList data={pageContext.otherLibraries?.Services ?? []} />
           </div>
         </div>
         <p>