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/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/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 }>) => { Rubik Light @@ -147,6 +148,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => { Open Font License diff --git a/src/pages/code.tsx b/src/pages/code.tsx index 6e2491003d..f64b9487b0 100644 --- a/src/pages/code.tsx +++ b/src/pages/code.tsx @@ -1,12 +1,12 @@ 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" import { toSlug } from "../utils/slug" -interface Library { +interface ILibrary { description: string github?: string npm?: string @@ -14,111 +14,103 @@ 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: Array - Server: Array + Client: ILibrary[] + Server: ILibrary[] } } interface PageContext { - languageList: Array + languageList: Language[] otherLibraries: { - Services: Array - Tools: Array + Services: ILibrary[] + Tools: ILibrary[] } sourcePath: string } -export function buildLanguagesMenu(pageContext: PageContext) { - return ( -
- {pageContext.languageList - ?.map(langeuage => langeuage?.name!) - .filter(Boolean) - .map(languageName => { - const slug = toSlug(languageName) - return ( - - {languageName} - - ) - })} -
- ) -} - -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 (
- -

{library.name}

+ +

{data.name}

 - {library.github && ( + {data.github && ( )} - {library.npm && ( + {data.npm && ( )} - {library.gem && ( + {data.gem && ( )} - {library.lastRelease && ( + {data.lastRelease && (
Last Release - {library.formattedLastRelease} + {data.formattedLastRelease}
)} - {library.stars && ( + {data.stars && (
Stars - {library.formattedStars} + {data.formattedStars}
)} - {library.license && ( + {data.license && (
License - {library.license} + {data.license}
)} - {library.howto ? ( + {data.howto ? (
- {library.description} + {data.description}
) : (
@@ -135,9 +127,7 @@ export function buildLibraryContent( } }} > - - {library.howto || library.description} - + {data.howto || data.description}
{overflown && (
- {libraries.map(library => buildLibraryContent(library, pageContext))} + {data.map(library => ( + + ))}
) } -export function buildLibraryCategoryContent( - libraryCategories: any[], - libraryCategoryName: string, - slug: string, - pageContext: any -) { - if (libraryCategoryName in libraryCategories) { - const libraries = libraryCategories[libraryCategoryName as any] - return ( -
-

{libraryCategoryName}

- {buildLibraryList(libraries, pageContext)} -
- ) - } - return -} - const categorySlugMap = [ ["Server", toSlug("Server")], ["Client", toSlug("Client")], ["Tools", toSlug("Tools")], ] -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( -
-
-

{languageName}

- {filteredCategorySlugMap.length > 1 && ( -

- {filteredCategorySlugMap.map( - ([libraryCategoryName, categorySlug], i) => ( - <> - - {libraryCategoryName} - - {i < filteredCategorySlugMap.length - 1 && " / "} - - ) - )} -

- )} -
-
- {filteredCategorySlugMap.map(([categoryName, categorySlug]) => - buildLibraryCategoryContent( - libraryCategories, - categoryName, - `${languageSlug}-${categorySlug}`, - pageContext - ) - )} -
-
- ) - } - return
{elements}
-} - export default ({ pageContext }: PageProps<{}, PageContext>) => { return ( @@ -275,8 +200,84 @@ export default ({ pageContext }: PageProps<{}, PageContext>) => {

Language Support

- {buildLanguagesMenu(pageContext)} - {buildLanguagesContent(pageContext)} +
+ {pageContext.languageList + ?.map(language => language?.name!) + .filter(Boolean) + .map(languageName => { + const slug = toSlug(languageName) + return ( + + {languageName} + + ) + })} +
+
+ {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 ( +
+
+

{languageName}

+ {filteredCategorySlugMap.length > 1 && ( +

+ {filteredCategorySlugMap.map( + ([libraryCategoryName, categorySlug], i) => ( + + + {libraryCategoryName} + + {i < filteredCategorySlugMap.length - 1 && + " / "} + + ) + )} +

+ )} +
+
+ {filteredCategorySlugMap.map( + ([categoryName, categorySlug]) => + categoryName in libraryCategories && ( +
+

+ {categoryName} +

+ +
+ ) + )} +
+
+ ) + })} +

Tools @@ -284,10 +285,7 @@ export default ({ pageContext }: PageProps<{}, PageContext>) => { #

- {buildLibraryList( - pageContext.otherLibraries?.Tools ?? [], - pageContext - )} +

Services @@ -295,10 +293,7 @@ export default ({ pageContext }: PageProps<{}, PageContext>) => { #

- {buildLibraryList( - pageContext.otherLibraries?.Services ?? [], - 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]) +}