From b0e5cdbc48ccedd3e67447863eb417d8e9c3cb3f Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Thu, 28 Mar 2024 12:21:46 +0100 Subject: [PATCH] remove old `source` files --- src/Containers/Sections/Hero/index.tsx | 74 -- .../Sections/PredictableResults/index.tsx | 123 --- .../Sections/SingleRequest/index.tsx | 71 -- src/Containers/Sections/TypeSystem/index.tsx | 98 -- src/assets/css/_css/algolia.less | 120 --- src/assets/css/_css/brand.less | 316 ------- src/assets/css/_css/code.less | 296 ------ src/assets/css/_css/codemirror.less | 766 ---------------- src/assets/css/_css/docs.less | 318 ------- src/assets/css/_css/faq.less | 97 -- src/assets/css/_css/foundation.less | 31 - src/assets/css/_css/graphql.less | 432 --------- src/assets/css/_css/index.less | 861 ------------------ src/assets/css/_css/prism.less | 183 ---- src/assets/css/_css/users.less | 41 - src/assets/css/_css/variables.less | 38 - src/assets/css/global.css | 33 - src/assets/css/style.less | 12 - src/components/BackToTop/index.tsx | 64 -- src/components/BlogLayout/index.tsx | 27 - src/components/BlogPost/index.tsx | 49 - src/components/BlogPostPreview/index.tsx | 43 - src/components/BlogSidebar/index.tsx | 72 -- src/components/CodeLayout/index.tsx | 13 - src/components/Conf/Layout/index.tsx | 13 - src/components/Conf/Pricing/index.tsx | 156 ---- src/components/Conf/SF/index.tsx | 58 -- src/components/Conf/Section/index.tsx | 22 - src/components/Conf/Seo/index.tsx | 47 - src/components/Conf/Venue/index.tsx | 251 ----- src/components/ConfLayout/index.tsx | 55 -- src/components/DocsLayout/index.tsx | 45 - src/components/DocsSidebar/index.tsx | 55 -- src/components/FAQLayout/index.tsx | 24 - src/components/FAQSection/index.tsx | 17 - src/components/Footer/index.tsx | 135 --- src/components/FoundationLayout/index.tsx | 58 -- src/components/Header/index.tsx | 22 - src/components/HeaderLinks/index.tsx | 59 -- src/components/Layout/index.tsx | 48 - src/components/Link/index.tsx | 31 - src/components/Logo/index.tsx | 16 - src/components/Search/index.tsx | 87 -- src/components/Seo/index.tsx | 34 - src/components/aspect-ratio.tsx | 46 - src/pages/404.tsx | 22 - src/pages/blog.tsx | 43 - src/pages/blog/{BlogPost.postId}.tsx | 34 - src/pages/brand.tsx | 405 -------- src/pages/code.tsx | 426 --------- src/pages/conf/faq.tsx | 248 ----- src/pages/conf/gallery.tsx | 47 - src/pages/conf/sched.tsx | 63 -- src/pages/conf/speak.tsx | 348 ------- src/pages/faq.tsx | 72 -- src/pages/foundation/members.tsx | 49 - src/pages/index.tsx | 61 -- src/pages/users.tsx | 51 -- src/templates/EventOgImageTemplate.tsx | 213 ----- src/templates/SpeakerOgImageTemplate.tsx | 182 ---- src/templates/conf.tsx | 117 --- src/templates/doc.tsx | 94 -- src/templates/event.tsx | 203 ----- src/templates/schedule.tsx | 89 -- src/templates/session.tsx | 39 - src/templates/speaker.tsx | 118 --- src/templates/speakers.tsx | 66 -- src/templates/{BlogPost.tags}.tsx | 43 - src/utils/eventsColors.ts | 8 - src/utils/slug.ts | 30 - src/utils/useFAQAccordion.ts | 81 -- 71 files changed, 8609 deletions(-) delete mode 100644 src/Containers/Sections/Hero/index.tsx delete mode 100644 src/Containers/Sections/PredictableResults/index.tsx delete mode 100644 src/Containers/Sections/SingleRequest/index.tsx delete mode 100644 src/Containers/Sections/TypeSystem/index.tsx delete mode 100644 src/assets/css/_css/algolia.less delete mode 100644 src/assets/css/_css/brand.less delete mode 100644 src/assets/css/_css/code.less delete mode 100644 src/assets/css/_css/codemirror.less delete mode 100644 src/assets/css/_css/docs.less delete mode 100644 src/assets/css/_css/faq.less delete mode 100644 src/assets/css/_css/foundation.less delete mode 100644 src/assets/css/_css/graphql.less delete mode 100644 src/assets/css/_css/index.less delete mode 100644 src/assets/css/_css/prism.less delete mode 100644 src/assets/css/_css/users.less delete mode 100644 src/assets/css/_css/variables.less delete mode 100644 src/assets/css/global.css delete mode 100644 src/assets/css/style.less delete mode 100644 src/components/BackToTop/index.tsx delete mode 100644 src/components/BlogLayout/index.tsx delete mode 100644 src/components/BlogPost/index.tsx delete mode 100644 src/components/BlogPostPreview/index.tsx delete mode 100644 src/components/BlogSidebar/index.tsx delete mode 100644 src/components/CodeLayout/index.tsx delete mode 100644 src/components/Conf/Layout/index.tsx delete mode 100644 src/components/Conf/Pricing/index.tsx delete mode 100644 src/components/Conf/SF/index.tsx delete mode 100644 src/components/Conf/Section/index.tsx delete mode 100644 src/components/Conf/Seo/index.tsx delete mode 100644 src/components/Conf/Venue/index.tsx delete mode 100644 src/components/ConfLayout/index.tsx delete mode 100644 src/components/DocsLayout/index.tsx delete mode 100644 src/components/DocsSidebar/index.tsx delete mode 100644 src/components/FAQLayout/index.tsx delete mode 100644 src/components/FAQSection/index.tsx delete mode 100644 src/components/Footer/index.tsx delete mode 100644 src/components/FoundationLayout/index.tsx delete mode 100644 src/components/Header/index.tsx delete mode 100644 src/components/HeaderLinks/index.tsx delete mode 100644 src/components/Layout/index.tsx delete mode 100644 src/components/Link/index.tsx delete mode 100644 src/components/Logo/index.tsx delete mode 100644 src/components/Search/index.tsx delete mode 100644 src/components/Seo/index.tsx delete mode 100644 src/components/aspect-ratio.tsx delete mode 100644 src/pages/404.tsx delete mode 100644 src/pages/blog.tsx delete mode 100644 src/pages/blog/{BlogPost.postId}.tsx delete mode 100644 src/pages/brand.tsx delete mode 100644 src/pages/code.tsx delete mode 100644 src/pages/conf/faq.tsx delete mode 100644 src/pages/conf/gallery.tsx delete mode 100644 src/pages/conf/sched.tsx delete mode 100644 src/pages/conf/speak.tsx delete mode 100644 src/pages/faq.tsx delete mode 100644 src/pages/foundation/members.tsx delete mode 100644 src/pages/index.tsx delete mode 100644 src/pages/users.tsx delete mode 100644 src/templates/EventOgImageTemplate.tsx delete mode 100644 src/templates/SpeakerOgImageTemplate.tsx delete mode 100644 src/templates/conf.tsx delete mode 100644 src/templates/doc.tsx delete mode 100644 src/templates/event.tsx delete mode 100644 src/templates/schedule.tsx delete mode 100644 src/templates/session.tsx delete mode 100644 src/templates/speaker.tsx delete mode 100644 src/templates/speakers.tsx delete mode 100644 src/templates/{BlogPost.tags}.tsx delete mode 100644 src/utils/eventsColors.ts delete mode 100644 src/utils/slug.ts delete mode 100644 src/utils/useFAQAccordion.ts diff --git a/src/Containers/Sections/Hero/index.tsx b/src/Containers/Sections/Hero/index.tsx deleted file mode 100644 index 3aec2ca9f6..0000000000 --- a/src/Containers/Sections/Hero/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Link } from "gatsby" -import React from "react" -import HeaderLinks from "../../../components/HeaderLinks" -import Logo from "../../../components/Logo" -import Search from "../../../components/Search" -import Prism from "../../../components/Prism" - -const Hero = () => { - return ( -
-
-
-
- - -
-
-
-
- -

GraphQL

-
- -
-

Describe your data

- -
- -
-

Ask for what you want

- -
- -
-

Get predictable results

- -
-
- -
- - Get Started - - - Learn More - -
-
-
- ) -} - -export default Hero diff --git a/src/Containers/Sections/PredictableResults/index.tsx b/src/Containers/Sections/PredictableResults/index.tsx deleted file mode 100644 index e2da1bea7e..0000000000 --- a/src/Containers/Sections/PredictableResults/index.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React, { useEffect } from "react" -import Prism from "../../../components/Prism" - -const PredictableResults = () => { - useEffect(() => { - const showResponse = (num: Number) => { - document.getElementById("r1")!.style.display = - num === 1 ? "block" : "none" - document.getElementById("r2")!.style.display = - num === 2 ? "block" : "none" - document.getElementById("r3")!.style.display = - num === 3 ? "block" : "none" - } - let i = 0 - let forward = true - let timer: any - timer = setTimeout(type, 2000) - showResponse(1) - function type() { - if (forward) { - if (document.getElementById("ch" + i)) { - document.getElementById("ch" + i)!.style.display = "inline" - i++ - if (i === 20) { - forward = false - showResponse(3) - timer = setTimeout(type, 1500) - } else if (i === 11) { - showResponse(2) - timer = setTimeout(type, 1500) - } else { - timer = setTimeout(type, Math.random() * 180 + 70) - } - } - } else { - i-- - if (document.getElementById("ch" + i)) { - document.getElementById("ch" + i)!.style.display = "none" - if (i === 0) { - forward = true - showResponse(1) - timer = setTimeout(type, 2000) - } else { - timer = setTimeout(type, 80) - } - } - } - } - return () => clearTimeout(timer) - }, []) - return ( -
-
-

- Ask for what you need, -
- get exactly that -

- {/*[Illustration: just a simple query and response?]*/} -

- Send a GraphQL query to your API and get exactly what you need, - nothing more and nothing less. GraphQL queries always return - predictable results. Apps using GraphQL are fast and stable because - they control the data they get, not the server. -

-
-
-
- 
-            {"{"}
-            {"\n  hero {"}
-            {"\n    name"}
-            {"\n    height\n    mass".split("").map((c, i) => (
-              
-                {c === "\n" ? 
 : c}
-              
-            ))}
-            
-            {"\n  }"}
-            {"\n}"}
-
-
-
-
- -
-
- -
-
- -
-
-
-
- ) -} - -export default PredictableResults diff --git a/src/Containers/Sections/SingleRequest/index.tsx b/src/Containers/Sections/SingleRequest/index.tsx deleted file mode 100644 index 1942ae9bc7..0000000000 --- a/src/Containers/Sections/SingleRequest/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from "react" -import Prism from "../../../components/Prism" - -const SingleRequest = () => { - return ( -
-
-
-

- Get many resources -
- in a single request -

- {/*Illustration: a query 2 or 3 levels deep]*/} -

- GraphQL queries access not just the properties of one resource but - also smoothly follow references between them. While typical REST - APIs require loading from multiple URLs, GraphQL APIs get all the - data your app needs in a single request. Apps using GraphQL can be - quick even on slow mobile network connections. -

-
-
- -
- -
-
- -
- -
-
-
- ) -} - -export default SingleRequest diff --git a/src/Containers/Sections/TypeSystem/index.tsx b/src/Containers/Sections/TypeSystem/index.tsx deleted file mode 100644 index 7a08e8daa0..0000000000 --- a/src/Containers/Sections/TypeSystem/index.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useEffect } from "react" -import Prism from "../../../components/Prism" - -const TypeSysyem = () => { - useEffect(() => { - const typeHighlight = document.getElementById("type-highlight") - const queryHighlight = document.getElementById("query-highlight") - let line = 0 - const typeLines = [2, 6, 7, 6, 8, 13, 14, 9, 18, 19, 20, 13] - const queryLines = [2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14] - let timer: any - - const highlightLine = () => { - typeHighlight!.style.top = 17 * typeLines[line] - 9 + "px" - queryHighlight!.style.top = 17 * queryLines[line] - 9 + "px" - line = (line + 1) % typeLines.length - timer = setTimeout(highlightLine, 800 + Math.random() * 200) - } - highlightLine() - return () => clearTimeout(timer) - }, []) - return ( -
-
-

- Describe what’s possible -
- with a type system -

- {/*Illustration of a type IDL following a query by line]*/} - {/*Under: a server <-> client (Capabilities, Requirements)]?*/} -

- GraphQL APIs are organized in terms of types and fields, not - endpoints. Access the full capabilities of your data from a single - endpoint. GraphQL uses types to ensure Apps only ask for what’s - possible and provide clear and helpful errors. Apps can use types to - avoid writing manual parsing code. -

-
-
-
-
- -
-
-
- -
-
-
- ) -} - -export default TypeSysyem diff --git a/src/assets/css/_css/algolia.less b/src/assets/css/_css/algolia.less deleted file mode 100644 index 130c971d89..0000000000 --- a/src/assets/css/_css/algolia.less +++ /dev/null @@ -1,120 +0,0 @@ -@import "variables.less"; - -/** Algolia Doc Search **/ - -.algolia-search-wrapper { - float: right; - display: inline-block; - vertical-align: top; - pointer-events: auto; - - @media screen and (max-width: 1020px) { - display: none; - } - - input { - .headline-font(@size: 15px, @color: desaturate(lighten(@dark-color, 50%), 50%)); - background: transparent url('/img/search.svg') no-repeat 10px center; - background-color: rgba(255, 255, 255, 0.1); - background-size: 16px 16px; - border-radius: 15px; - border: solid 1px fadeout(@dark-color, 80%); - height: 30px; - margin-top: 10px; - outline: none; - padding: 0 10px 0 35px; - width: 160px; - transition: width 0.2s ease-out; - - @media screen and (min-width: 1076px) { - &:focus { - width: 190px; - } - } - @media screen and (min-width: 1065px) and (max-width: 1075px) { - &:focus { - width: 180px; - } - } - @media screen and (min-width: 1021px) and (max-width: 1064px) { - width: 135px; - } - } - - .algolia-autocomplete { - vertical-align: top; - height: 53px; - } - - .aa-dropdown-menu { - .body-font(@size: 15px); - margin-top: -10px; - width: 600px; - margin-left: -300px; - padding: 0; - border: none; - border-radius: 4px; - box-shadow: - 0 0 1px rgba(0, 0, 0, 0.2), - 0 2px 8px rgba(0, 0, 0, 0.2); - - .aa-suggestion { - border-top: solid 1px #F3F3F3; - - &:first-child { - border: none; - border-radius: 4px 4px 0 0; - - .algolia-docsearch-suggestion--subcategory-column { - border-top-left-radius: 4px; - } - } - - &:last-child { - border-radius: 0 0 4px 4px; - - .algolia-docsearch-suggestion--subcategory-column { - border-bottom-left-radius: 4px; - } - } - } - - .algolia-docsearch-suggestion--category-header { - display: none; - } - - .algolia-docsearch-footer { - padding: 2px 12px; - border-top-color: #EDEDED; - opacity: 0.75; - } - - // highlighted matching search query - .algolia-docsearch-suggestion--highlight { - background-color: @rhodamine-color; - color: white; - } - - // hover - .aa-cursor { - .algolia-docsearch-suggestion { - background: #FCF9FB; - } - - .algolia-docsearch-suggestion--content { - color: @rhodamine-color; - } - } - - .algolia-docsearch-suggestion, - .algolia-docsearch-suggestion--content { - border: none; - } - - .algolia-docsearch-suggestion--subcategory-column { - .headline-font(@size: 13px, @color: lighten(@dark-color, 50%)); - border: none; - padding-top: 9px; - } - } -} diff --git a/src/assets/css/_css/brand.less b/src/assets/css/_css/brand.less deleted file mode 100644 index 67a4ca4e56..0000000000 --- a/src/assets/css/_css/brand.less +++ /dev/null @@ -1,316 +0,0 @@ -.brand-link { - position: fixed; - z-index: 100; - background: white; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - padding: 1em; -} - -.brand { - p, - li { - max-width: 60ch; - } - - .dos-donts { - display: flex; - flex-wrap: wrap; - margin: 1em 0; - - ul { - flex: 1; - flex-basis: 400px; - min-width: 350px; - margin: 0 0 0 2em; - - ul { - margin-top: 1em; - } - } - - .do li:before { - background-image: url("/img/brand/do.svg"); - } - .dont li:before { - background-image: url("/img/brand/dont.svg"); - } - .do li li:before { - background-image: url("/img/brand/do-example.svg"); - } - .dont li li:before { - background-image: url("/img/brand/dont-example.svg"); - } - li { - list-style: none; - position: relative; - &:before { - content: ""; - position: absolute; - left: -1.25em; - top: 0.325em; - background-repeat: no-repeat; - width: 0.825em; - height: $width; - background-size: $width; - user-select: none; - } - } - } - - .samples { - display: flex; - flex-wrap: wrap; - gap: 1em; - - .rhodamine-sample, - .rubik-sample { - font-family: "Rubik"; - font-weight: 300; - padding: 1em; - width: max-content; - background: #f3f4f7; - - .sample { - font-size: 2em; - word-wrap: break-word; - line-height: 1.2; - } - - a { - color: inherit; - } - - dl { - margin: 0.5em 0; - font-size: 0.8em; - line-height: 1.5; - display: grid; - grid-template-columns: 1fr 3fr; - dt { - grid-column-start: 1; - padding-right: 2em; - } - dd { - grid-column-start: 2; - } - } - } - - .rhodamine-sample { - background: @rhodamine-color; - color: white; - } - } - - .logoGrid { - font-family: "Rubik"; - font-weight: 300; - color: rgba(0, 0, 0, 0.25); - display: flex; - max-width: 850px; - div { - background: #f3f4f7; - } - &, - & * { - user-select: none; - pointer-events: none; - } - img { - display: block; - } - - .square { - position: relative; - &:before { - display: block; - content: ""; - width: 100%; - padding-top: 100%; - } - > div { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - } - } - - .img-examples { - display: flex; - flex-wrap: wrap; - gap: 0 3em; - li { - display: flex; - flex: 1; - max-width: initial; - flex-basis: 450px; - span { - flex: 1; - max-width: 34ch; - margin-right: 1em; - } - img { - display: block; - } - & > img, - & > .dont-effect { - user-select: none; - pointer-events: none; - margin: -0.25em 0 0 0.5em; - background: #f3f4f7; - padding: 1.25em; - height: 5em; - box-sizing: border-box; - } - .dont-effect { - width: 5em; - img { - height: 220%; - margin: -2.5%; - transform-origin: top left; - transform: scale(0.5); - } - } - } - } - - .color-combos { - background: #f3f4f7; - padding: 25px; - display: flex; - flex-wrap: wrap; - gap: 25px; - max-width: max-content; - user-select: none; - pointer-events: none; - img { - height: 100px; - padding: 25px; - border-radius: 100px; - display: block; - } - .filter { - height: 200px; - padding: 50px; - transform: scale(0.5); - margin: -50px; - } - } - - .agree-actions { - user-select: none; - label { - display: block; - cursor: pointer; - margin: 0 auto; - max-width: max-content; - } - input { - margin-right: 1em; - } - a { - background-color: white; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - color: @rhodamine-color; - cursor: pointer; - display: inline-block; - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - margin: 1em; - padding: 0.8em 1.2em; - text-decoration: none; - transition: 0.2s ease-in-out box-shadow, 0.2s ease-in-out color; - white-space: nowrap; - &.disabled { - color: rgba(0, 0, 0, 0.25); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - } - &:not(.disabled):hover { - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - } - } - - .agree-actions-container { - background: #f3f4f7; - text-align: center; - - &.top { - @media (max-width: 800px) { - display: none; - } - float: right; - max-width: 33%; - padding: 3% 1em; - margin-left: 2em; - } - - &.bottom { - max-width: none; - padding: 6% 1em; - } - } -} - -.conf-style { - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - .zoom-diamond { - transition: transform .2s; /* Animation */ - width: 432px; - height: 221px; - cursor: pointer; - } - .zoom-diamond:hover { - transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ - } - .zoom-platinum { - transition: transform .2s; /* Animation */ - width: 300px; - max-height: 153px; - cursor: pointer; - } - .zoom-platinum:hover { - transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ - } - .zoom-gold { - transition: transform .2s; /* Animation */ - width: 250px; - height: 128px; - cursor: pointer; - } - .zoom-gold:hover { - transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ - } - .zoom-silver { - transition: transform .2s; /* Animation */ - width: 208px; - height: 106px; - cursor: pointer; - } - .zoom-silver:hover { - transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ - } - .zoom-bronze { - transition: transform .2s; /* Animation */ - width: 144px; - height: 103px; - cursor: pointer; - } - - .zoom-bronze:hover { - transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ - } - .zoom-partner { - transition: transform .2s; /* Animation */ - width: 158px; - height: 62px; - cursor: pointer; - } - - .zoom-partner:hover { - transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ - } -} diff --git a/src/assets/css/_css/code.less b/src/assets/css/_css/code.less deleted file mode 100644 index 49aa6f48cd..0000000000 --- a/src/assets/css/_css/code.less +++ /dev/null @@ -1,296 +0,0 @@ -.code { - .code-hero { - background-color: #171e26; - position: relative; - min-height: 250px; - padding: 0; - margin-top: -5vh; - padding-top: 5px; - @media screen and (max-width: 600px) { - height: 20vh; - } - @media screen and (min-width: 992px) { - height: 35vh; - } - @media screen and (min-width: 1020px) { - max-height: 750px; - height: 40vh; - min-height: 400px; - padding-top: 50px; - } - width: 100%; - h1 { - color: #e10098; - font-weight: 800; - font-size: 100px; - @media screen and (min-width: 1020px) { - font-size: 140px; - } - line-height: 0.5; - margin-top: 100px; - } - p { - font-size: 32px; - @media screen and (min-width: 1020px) { - font-size: 48px; - } - color: white; - } - .code-hero-inner { - position: absolute; - text-align: center; - width: 100%; - } - } - .code-hero::before { - background: url(/img/graph-wash.png) repeat center center; - content: ""; - display: block; - height: 100%; - position: absolute; - width: 100%; - top: 0; - left: 0; - } - .intro-note { - margin-top: 43px; - display: flex; - p { - width: 50%; - margin-top: 0; - margin-right: 5%; - font-size: 18px; - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 32px; - } - .goto-section { - display: flex; - flex-direction: row; - width: 40%; - p { - min-width: 72px; - width: 20%; - margin: 0; - color: #8c8c8c; - font-weight: bold; - font-size: 24px; - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - } - .sections { - display: flex; - width: 80%; - flex-direction: column; - a { - h3 { - margin: 0 0 22px 0; - border-left: 1px solid #b7b7b7; - font-weight: bold; - padding-left: 15px; - line-height: 28px; - font-size: 24px; - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - } - } - } - } - } - .sortByContainer{ - display: flex; - flex-flow: row wrap; - gap: 1rem; - align-items: center; - .sortBy{ - font-weight: 500; - } - .inputContainer{ - display: flex; - align-items: center; - gap:0.25rem; - cursor: pointer; - input{ - accent-color: #e10098; - } - label{ - cursor: pointer; - } - } - } - .tools-title { - margin: 0; - } - .inner-content { - max-width: 100%; - } - .language-content { - padding-top: 72px; - } - .languages-title { - font-size: 24px; - font-weight: bold; - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - } - .language-boxes { - display: grid; - grid-row-gap: 20px; - grid-column-gap: 30px; - grid-template-columns: auto auto auto; - @media screen and (min-width: 1020px) { - grid-template-columns: auto auto auto auto auto auto; - } - .language-box { - border: 1px solid #979797; - min-width: 142px; - height: 120px; - display: flex; - flex-direction: row; - align-items: flex-end; - color: #000; - .article_title { - text-align: left; - font-size: 22px; - color: #000; - font-weight: bold; - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - margin: 0; - } - } - } - .language-header { - display: flex; - flex-direction: row; - @media screen and (max-width: 600px) { - flex-direction: column; - } - justify-content: space-between; - .language-title { - margin: 0 0 10px 0; - font-size: 48px; - font-weight: bold; - } - .language-categories-permalinks { - margin: 0; - font-size: 24px; - font-weight: bold; - color: #a6a6a6; - .language-category-permalink { - color: #a6a6a6; - } - } - } - .library-category-title { - margin: 0; - padding-top: 45px; - font-size: 24px; - color: #a6a6a6; - font-weight: bold; - } - .library-info { - display: flex; - flex-direction: row; - @media screen and (max-width: 600px) { - flex-direction: column; - } - justify-content: space-between; - margin-top: 36px; - margin-bottom: 40px; - .library-details { - width: 30%; - @media screen and (max-width: 600px) { - width: 100%; - } - .library-name { - font-size: 24px; - font-weight: bold; - p { - margin: 0 0 20px 0; - } - } - .library-detail { - margin-top: 7px; - display: flex; - flex-direction: row; - b { - font-size: 14px; - min-width: 90px; - } - a, - span { - font-size: 16px; - color: #e10098; - font-weight: bold; - margin-left: 10px; - } - } - .library-description { - margin-top: 30px; - } - } - .library-howto { - @media screen and (max-width: 600px) { - width: 100%; - } - width: 60%; - position: relative; - .library-howto-content { - overflow: hidden; - pre.prism { - margin: 1em 0; - } - - &.not-expanded { - max-height: 450px; - } - &.expanded img { - display: none; - } - p { - margin: 0; - } - } - } - .library-howto-expand { - cursor: pointer; - - &.not-expanded { - background: -webkit-linear-gradient( - top, - rgba(237, 239, 240, 0), - rgba(237, 239, 240, 0) 380px, - #ffffff 400px - ); - background: linear-gradient( - to bottom, - rgba(237, 239, 240, 0), - rgba(237, 239, 240, 0) 380px, - #ffffff 400px - ); - box-sizing: border-box; - display: block; - height: 450px; - padding-top: 400px; - position: absolute; - top: 0; - right: 0; - left: 0; - text-align: center; - .library-howto-expand-anchor { - background: #ffffff; - -moz-box-sizing: border-box; - box-sizing: border-box; - border-radius: 9pt 9pt 0 0; - color: #8c8c8c; - display: inline-block; - max-width: 100%; - overflow: hidden; - padding: 10px; - text-decoration: underline; - text-overflow: ellipsis; - white-space: nowrap; - } - } - &.expanded { - display: none; - } - } - } -} diff --git a/src/assets/css/_css/codemirror.less b/src/assets/css/_css/codemirror.less deleted file mode 100644 index 312ba070b1..0000000000 --- a/src/assets/css/_css/codemirror.less +++ /dev/null @@ -1,766 +0,0 @@ -@import "variables.less"; - -/* Code Mirror */ - - - - -/* BASICS */ - -.CodeMirror { - /* Set height, width, borders, and global font properties here */ - height: 300px; - .code-font(); -} - -/* PADDING */ - -.CodeMirror-lines { - padding: 4px 0; /* Vertical padding around content */ -} -.CodeMirror pre { - padding: 0 4px; /* Horizontal padding of content */ -} - -.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - background-color: white; /* The little square between H and V scrollbars */ -} - -/* GUTTER */ - -.CodeMirror-gutters { - border-right: 1px solid #ddd; - background-color: #f7f7f7; - white-space: nowrap; -} -.CodeMirror-linenumbers {} -.CodeMirror-linenumber { - padding: 0 3px 0 5px; - min-width: 20px; - text-align: right; - color: #999; - white-space: nowrap; -} - -.CodeMirror-guttermarker { color: black; } -.CodeMirror-guttermarker-subtle { color: #999; } - -/* CURSOR */ - -.CodeMirror-cursor { - border-left: 1px solid black; - border-right: none; - width: 0; -} -/* Shown when moving in bi-directional text */ -.CodeMirror div.CodeMirror-secondarycursor { - border-left: 1px solid silver; -} -.cm-fat-cursor .CodeMirror-cursor { - width: auto; - border: 0; - background: #7e7; -} -.cm-fat-cursor div.CodeMirror-cursors { - z-index: 1; -} - -.cm-animate-fat-cursor { - width: auto; - border: 0; - -webkit-animation: blink 1.06s steps(1) infinite; - -moz-animation: blink 1.06s steps(1) infinite; - animation: blink 1.06s steps(1) infinite; - background-color: #7e7; -} -@-moz-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} -@-webkit-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} -@keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} -} - -/* Can style cursor different in overwrite (non-insert) mode */ -.CodeMirror-overwrite .CodeMirror-cursor {} - -.cm-tab { display: inline-block; text-decoration: inherit; } - -.CodeMirror-ruler { - border-left: 1px solid #ccc; - position: absolute; -} - -/* DEFAULT THEME */ - -.cm-s-default .cm-header {color: blue;} -.cm-s-default .cm-quote {color: #090;} -.cm-negative {color: #d44;} -.cm-positive {color: #292;} -.cm-header, .cm-strong {font-weight: bold;} -.cm-em {font-style: italic;} -.cm-link {text-decoration: underline;} -.cm-strikethrough {text-decoration: line-through;} - -.cm-s-default .cm-keyword {color: #708;} -.cm-s-default .cm-atom {color: #219;} -.cm-s-default .cm-number {color: #164;} -.cm-s-default .cm-def {color: #00f;} -.cm-s-default .cm-variable, -.cm-s-default .cm-punctuation, -.cm-s-default .cm-property, -.cm-s-default .cm-operator {} -.cm-s-default .cm-variable-2 {color: #05a;} -.cm-s-default .cm-variable-3 {color: #085;} -.cm-s-default .cm-comment {color: #a50;} -.cm-s-default .cm-string {color: #a11;} -.cm-s-default .cm-string-2 {color: #f50;} -.cm-s-default .cm-meta {color: #555;} -.cm-s-default .cm-qualifier {color: #555;} -.cm-s-default .cm-builtin {color: #30a;} -.cm-s-default .cm-bracket {color: #997;} -.cm-s-default .cm-tag {color: #170;} -.cm-s-default .cm-attribute {color: #00c;} -.cm-s-default .cm-hr {color: #999;} -.cm-s-default .cm-link {color: #00c;} - -.cm-s-default .cm-error {color: #f00;} -.cm-invalidchar {color: #f00;} - -.CodeMirror-composing { border-bottom: 2px solid; } - -/* Default styles for common addons */ - -div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} -div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} -.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } -.CodeMirror-activeline-background {background: #e8f2ff;} - -/* STOP */ - -/* The rest of this file contains styles related to the mechanics of - the editor. You probably shouldn't touch them. */ - -.CodeMirror { - position: relative; - overflow: hidden; - background: white; -} - -.CodeMirror-scroll { - overflow: scroll !important; /* Things will break if this is overridden */ - /* 30px is the magic margin used to hide the element's real scrollbars */ - /* See overflow: hidden in .CodeMirror */ - margin-bottom: -30px; margin-right: -30px; - padding-bottom: 30px; - height: 100%; - outline: none; /* Prevent dragging from highlighting the element */ - position: relative; -} -.CodeMirror-sizer { - position: relative; - border-right: 30px solid transparent; -} - -/* The fake, visible scrollbars. Used to force redraw during scrolling - before actuall scrolling happens, thus preventing shaking and - flickering artifacts. */ -.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { - position: absolute; - z-index: 6; - display: none; -} -.CodeMirror-scroll { - overflow: hidden; -} -.CodeMirror-scrollbar-filler { - right: 0; bottom: 0; -} -.CodeMirror-gutter-filler { - left: 0; bottom: 0; -} - -.CodeMirror-gutters { - position: absolute; left: 0; top: 0; - z-index: 3; -} -.CodeMirror-gutter { - white-space: normal; - height: 100%; - display: inline-block; - margin-bottom: -30px; - /* Hack to make IE7 behave */ - *zoom:1; - *display:inline; -} -.CodeMirror-gutter-wrapper { - position: absolute; - z-index: 4; - background: none !important; - border: none !important; -} -.CodeMirror-gutter-background { - position: absolute; - top: 0; bottom: 0; - z-index: 4; -} -.CodeMirror-gutter-elt { - position: absolute; - cursor: default; - z-index: 4; -} -.CodeMirror-gutter-wrapper { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.CodeMirror-lines { - cursor: text; - min-height: 1px; /* prevents collapsing before first draw */ -} -.CodeMirror pre { - /* Reset some styles that the rest of the page might have set */ - -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; - border-width: 0; - background: transparent; - font-family: inherit; - font-size: inherit; - margin: 0; - white-space: pre; - word-wrap: normal; - line-height: inherit; - color: inherit; - z-index: 2; - position: relative; - overflow: visible; - -webkit-tap-highlight-color: transparent; -} -.CodeMirror-wrap pre { - word-wrap: break-word; - white-space: pre-wrap; - word-break: normal; -} - -.CodeMirror-linebackground { - position: absolute; - left: 0; right: 0; top: 0; bottom: 0; - z-index: 0; -} - -.CodeMirror-linewidget { - position: relative; - z-index: 2; - overflow: auto; -} - -.CodeMirror-widget {} - -.CodeMirror-code { - outline: none; -} - -/* Force content-box sizing for the elements where we expect it */ -.CodeMirror-scroll, -.CodeMirror-sizer, -.CodeMirror-gutter, -.CodeMirror-gutters, -.CodeMirror-linenumber { - -moz-box-sizing: content-box; - box-sizing: content-box; -} - -.CodeMirror-measure { - position: absolute; - width: 100%; - height: 0; - overflow: hidden; - visibility: hidden; -} - -.CodeMirror-cursor { position: absolute; } -.CodeMirror-measure pre { position: static; } - -div.CodeMirror-cursors { - visibility: hidden; - position: relative; - z-index: 3; -} -div.CodeMirror-dragcursors { - visibility: visible; -} - -.CodeMirror-focused div.CodeMirror-cursors { - visibility: visible; -} - -.CodeMirror-selected { background: #d9d9d9; } -.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } -.CodeMirror-crosshair { cursor: crosshair; } -.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } -.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } - -.cm-searching { - background: #ffa; - background: rgba(255, 255, 0, .4); -} - -/* IE7 hack to prevent it from returning funny offsetTops on the spans */ -.CodeMirror span { *vertical-align: text-bottom; } - -/* Used to force a border model for a node */ -.cm-force-border { padding-right: .1px; } - -@media print { - /* Hide the cursor when printing */ - .CodeMirror div.CodeMirror-cursors { - visibility: hidden; - } -} - -/* See issue #2901 */ -.cm-tab-wrap-hack:after { content: ''; } - -/* Help users use markselection to safely style text background */ -span.CodeMirror-selectedtext { background: none; } - - - - - - -/* Fold */ - -.CodeMirror-foldmarker { - color: blue; - text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; - font-family: arial; - line-height: .3; - cursor: pointer; -} -.CodeMirror-foldgutter { - width: .7em; -} -.CodeMirror-foldgutter-open, -.CodeMirror-foldgutter-folded { - cursor: pointer; -} -.CodeMirror-foldgutter-open:after { - content: "\25BE"; -} -.CodeMirror-foldgutter-folded:after { - content: "\25B8"; -} - - -/* Fold override */ - -.CodeMirror-foldmarker { - border-radius: 4px; - background: #08f; - background: -webkit-linear-gradient(#43A8FF, #0F83E8); - background: linear-gradient(#43A8FF, #0F83E8); - - color: white; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); - font-family: arial; - line-height: 0; - padding: 0px 4px 1px; - font-size: 12px; - margin: 0 3px; - text-shadow: 0 -1px rgba(0, 0, 0, 0.1); -} - - - - -/* Lint */ - -/* The lint marker gutter */ -.CodeMirror-lint-markers { - width: 16px; -} - -.CodeMirror-lint-tooltip { - background-color: infobackground; - border: 1px solid black; - border-radius: 4px 4px 4px 4px; - .code-font(); - overflow: hidden; - padding: 2px 5px; - position: fixed; - white-space: pre; - white-space: pre-wrap; - z-index: 100; - max-width: 600px; - opacity: 0; - transition: opacity .4s; - -moz-transition: opacity .4s; - -webkit-transition: opacity .4s; - -o-transition: opacity .4s; - -ms-transition: opacity .4s; -} - -.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning { - background-position: left bottom; - background-repeat: repeat-x; -} - -.CodeMirror-lint-mark-error { - background-image: - url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==") - ; -} - -.CodeMirror-lint-mark-warning { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); -} - -.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning { - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - display: inline-block; - height: 16px; - width: 16px; - vertical-align: middle; - position: relative; -} - -.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { - padding-left: 18px; - background-position: top left; - background-repeat: no-repeat; -} - -.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII="); -} - -.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII="); -} - -.CodeMirror-lint-marker-multiple { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC"); - background-repeat: no-repeat; - background-position: right bottom; - width: 100%; height: 100%; -} - - - - -/* Hint */ - -.CodeMirror-hints { - background: white; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - .code-font(); - list-style: none; - margin: 0; - margin-left: -6px; - max-height: 14.5em; - overflow-y: auto; - overflow: hidden; - padding: 0; - position: absolute; - z-index: 10; -} - -.CodeMirror-hints-wrapper { - background: white; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - margin-left: -6px; - position: absolute; - z-index: 10; -} - -.CodeMirror-hints-wrapper .CodeMirror-hints { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - position: relative; - margin-left: 0; - z-index: 0; -} - -.CodeMirror-hint { - border-top: solid 1px #f7f7f7; - color: #333; - cursor: pointer; - margin: 0; - max-width: 300px; - overflow: hidden; - padding: 2px 6px; - white-space: pre; -} - -li.CodeMirror-hint-active { - background-color: #08f; - border-top-color: white; - color: white; -} - -.CodeMirror-hint-information { - border-top: solid 1px #c0c0c0; - max-width: 300px; - padding: 4px 6px; - position: relative; - z-index: 1; -} - -.CodeMirror-hint-information:first-child { - border-bottom: solid 1px #c0c0c0; - border-top: none; - margin-bottom: -1px; -} - - -/* Custom typeahead */ - -.CodeMirror-hint-information .content { - -webkit-box-orient: vertical; - display: -webkit-box; - .body-font(@size: 15px); - -webkit-line-clamp: 3; - max-height: 48px; - overflow: hidden; - text-overflow: -o-ellipsis-lastline; -} - -.CodeMirror-hint-information .content p:first-child { - margin-top: 0; -} - -.CodeMirror-hint-information .content p:last-child { - margin-bottom: 0; -} - -.CodeMirror-hint-information .infoType { - color: #30a; - margin-right: 0.5em; - display: inline; -} - - - -/* Lint override */ - -div.CodeMirror-lint-tooltip { - background-color: white; - color: #333; - border: 0; - border-radius: 2px; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - .body-font(@size: 15px); - padding: 6px 10px; - opacity: 0; - transition: opacity 0.15s; - -moz-transition: opacity 0.15s; - -webkit-transition: opacity 0.15s; - -o-transition: opacity 0.15s; - -ms-transition: opacity 0.15s; -} - -div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning { - padding-left: 23px; -} - - - - - -/* Brackets override */ - -div.CodeMirror span.CodeMirror-matchingbracket { - color: #555; - text-decoration: underline; -} - -div.CodeMirror span.CodeMirror-nonmatchingbracket { - color: #f00; -} - - - - -/* Theme */ - -/* COLORS */ - - -/* Comment */ -.cm-comment { - color: #999; -} - -/* Punctuation */ -.cm-punctuation { - color: #555; -} - -/* Keyword */ -.cm-keyword { - color: #B11A04; -} - -/* OperationName, FragmentName */ -.cm-def { - color: #D2054E; -} - -/* FieldName */ -.cm-property { - color: #1F61A0; -} - -/* FieldAlias */ -.cm-qualifier { - color: #1C92A9; -} - -/* ArgumentName and ObjectFieldName */ -.cm-attribute { - color: #8B2BB9; -} - -/* Number */ -.cm-number { - color: #2882F9; -} - -/* String */ -.cm-string { - color: #D64292; -} - -/* Boolean */ -.cm-builtin { - color: #D47509; -} - -/* EnumValue */ -.cm-string-2 { - color: #0B7FC7; -} - -/* Variable */ -.cm-variable { - color: #397D13; -} - -/* Directive */ -.cm-meta { - color: #B33086; -} - -/* Type */ -.cm-atom { - color: #CA9800; -} - - - -/* CM override */ - -.CodeMirror { - .code-font(); -} - -.miniGraphiQL { - margin: 28px 0; - color: #333; - width: 100%; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - position: relative; - - background: white; - box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE; - border-radius: 3px; - margin-left: -4px; -} - -.query-editor .CodeMirror { - height: auto; - min-height: 100px; - margin: 0px 7px 35px; - background: none; -} - -.query-editor { - width: 50%; -} - -.hasVariables { - width: 50%; - - .query-editor { - width: auto; - } - - .query-editor .CodeMirror { - margin-bottom: 21px; - } - - .variable-editor .CodeMirror { - height: auto; - min-height: 30px; - margin: 0 7px; - background: none; - } - - .variable-editor::before { - background: #eee; - color: white; - content: 'VARIABLES'; - display: block; - font-size: 10px; - font-weight: bold; - letter-spacing: 1px; - line-height: 1; - padding: 3px 12px 2px; - text-shadow: 0 -1px #ddd; - } -} - -.result-window { - /*background: #fbfafa;*/ - box-shadow: inset 5px 0px 4px -3px rgba(0,0,0,0.2); - - position: absolute; - left: 50%; - top: 0; - bottom: 0; - height: 100%; - right: 0; - - box-shadow: inset 0 0 0 1px #EEE; - border-radius: 3px; -} - -.result-window .CodeMirror { - background: none; - height: 100%; - margin: 0 7px; - box-sizing: border-box; -} diff --git a/src/assets/css/_css/docs.less b/src/assets/css/_css/docs.less deleted file mode 100644 index 1834297e84..0000000000 --- a/src/assets/css/_css/docs.less +++ /dev/null @@ -1,318 +0,0 @@ -@import "variables.less"; - -.documentationContent { - margin-top: 3px; - margin-bottom: 8em; - display: flex; - width: 100%; - justify-content: space-between; - - @media screen and (max-width: 740px) { - margin-bottom: 4em; - display: block; - } -} - -.headerline { - display: flex; - // padding-right: 5px; - // justify-content: center; -} - -.main-block-blog { - /* background-color: #f0ece2; */ - background-color: #fff; - padding: 10px; - margin: 10px; - margin-bottom: 100px; - justify-content: center; - position: relative; - flex-flow: row; - text-align: center; -} - -.column { - // padding: 0 10px; - box-sizing: border-box; - border: 3px rgb(44, 38, 38); - justify-content: space-around; - margin-right: 15px; - // width: 800px; - // height: 250px; -} - -.container-bl { - display: flex; - justify-content: center; - /* align-items: center; */ - // padding: 10px; - flex-direction: row; - // max-width: 1000px; - margin-right: 10px; - justify-content: space-around; -} - -.container-bl1 { - display: flex; - justify-content: center; - /* align-items: center; */ - // padding: 10px; - flex-direction: row; - // max-width: 1000px; - margin-right: 10px; - justify-content: space-around; -} - -.codetitle { - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - color: #202020; - font-size: 22px; - line-height: 30.8px; -} - -.article { - background: white; - /* background-image: url(../imgs/corona-virus.jpg) ; */ - /* filter: blur(8px); */ - // margin: 0 0 20px; - padding: 5px; - // border-radius: 1.5px; - // border: 0.7px solid black; - // box-shadow: 0 2px 4px #010101; - cursor: pointer; - transition: 0.3s ease; - width: 140px; - height: 160px; -} - -.article:active { - box-shadow: none; - transform-origin: center; - transform: scale(0.98); -} - -.article_category { - display: inline-block; - // background: rgb(235, 150, 206); - /* 47bbc5 */ - padding: 5px 8px; - border: black; - // border-radius: 10px; - margin: 0 0 10px; - color: white; - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 0.075rem; - text-transform: uppercase; - width: 100px; - height: 100px; -} - -.article_excerpt { - color: black; - line-height: 1.5rem; - font-size: 0.875rem; -} - -.article_title { - margin: 0 0 10px; - color: #e10098; - font-family: "Josefin Sans"; - font-size: 1.25rem; - // font-weight: 600; - line-height: 1.75rem; -} - -@media only screen and (min-width: 320px) and (max-width: 650px) { - .container-bl1 { - flex-direction: column; - width: 100%; - } -} - -.inner-content { - flex: 1; - max-width: 720px; - @media screen and (max-width: 740px) { - margin-right: 0; - } - - & > h1:first-child { - margin-top: 1em; - } - - blockquote { - padding: 0.5em 1em 0.5em 0.5em; - margin: 1em 0; - background-color: rgba(204, 122, 111, 0.05); - border-left: 5px solid rgba(191, 87, 73, 0.1); - - h4 { - margin-top: 0; - } - - p { - margin-bottom: 0; - - &:first-child { - margin-top: 0; - } - } - } - - img { - max-width: 100%; - } - - .prism { - position: relative; - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08), - inset 0 -1px 0 rgba(0, 0, 0, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.08), - inset 4px 0 0 rgba(0, 0, 0, 0.08); - border-radius: 3px; - - .line-highlight { - background-color: #f8e9f3; - left: 0; - line-height: inherit; - margin-top: 5px; - pointer-events: none; - position: absolute; - right: 0; - z-index: -1; - } - - @media print { - text-shadow: none; - } - } - - .prism + .prism { - margin-top: -15px; - } - - .not(code) > pre.prism { - text-shadow: 0 1px white; - - &::-moz-selection, - &::selection { - text-shadow: none; - } - } - - // Code blocks - pre.prism { - padding: 7px 14px; - margin: 1em -4px; - overflow: auto; - } -} - -.read-next { - display: inline-block; - margin: 4em -1em 0; - - @media screen and (max-width: 1119px) { - margin-left: 0; - } - - border-radius: 3px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); - padding: 0.7em 1.5em 0.5em 1em; - - &:hover, - &:focus, - &:active { - background: @rhodamine-color; - text-decoration: none; - - .read-next-continue, - .read-next-title { - color: white; - } - } - - .read-next-continue { - .body-font(@size: 13px, @color: @rhodamine-color); - display: block; - } - - .read-next-title { - .body-font(@size: 26px, @color: @text-color); - display: block; - } -} - -.nav-docs { - .body-font(@size: 13px); - margin: 1em 0 4em; - width: 195px; - padding-left: 20px; - - @media screen and (max-width: 740px) { - width: auto; - padding-left: 0; - } - - h3 { - .body-font(@size: 13px); - text-transform: uppercase; - margin: 3em 0 1.5em; - } - - ul { - list-style: none; - margin: 0; - - li { - margin: 0; - line-height: 32px; - - ul { - margin-bottom: 18px; - - li { - line-height: 21px; - } - } - } - } - - a { - color: #666; - display: block; - - &:hover, - &:focus, - &.active { - text-decoration: none; - color: @rhodamine-color; - } - } -} - -.blog-sidebar { - .recent-posts { - li { - border-bottom: 1px solid #ddd; - line-height: 18px; - padding: 10px 0; - font-weight: bold; - color: @rhodamine-color; - } - a { - font-weight: normal; - color: #666; - } - } -} - -.blog-sidebar { - .categories { - li { - font-weight: bold; - color: @rhodamine-color; - } - } -} diff --git a/src/assets/css/_css/faq.less b/src/assets/css/_css/faq.less deleted file mode 100644 index d43cba1ff8..0000000000 --- a/src/assets/css/_css/faq.less +++ /dev/null @@ -1,97 +0,0 @@ -.inner-faq-content { - flex: 1; - @media screen and (max-width: 740px) { - margin-right: 0; - } - - & > h1:first-child { - margin-top: 1em; - } - - h2 { - margin-bottom: 10px; - } - - .faq-button-question { - background: transparent; - display: block; - width: 100%; - text-align: left; - padding: 0; - cursor: pointer; - box-shadow: 0px -1px 0px #aaa; - - &:first-child { - box-shadow: none; - } - } - - h3 { - color: #e10098; - padding: 20px 0 20px 5px; - margin: 0; - user-select: none; - position: relative; - - &.open:after { - transform: rotate(-45deg); - } - - &:after { - content: ""; - height: 33px; - width: 33px; - background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"%3E%3Cpath height="20px" width="20px" style="text-indent:0;text-transform:none;block-progression:tb" d="M50 13a4 4 0 00-4 4v29H17a4 4 0 000 8h29v29a4 4 0 108 0V54h29a4 4 0 100-8H54V17a4 4 0 00-4-4z" overflow="visible" fill="%23aaa"/%3E%3C/svg%3E%0A'); - background-repeat: no-repeat; - position: absolute; - transition: transform 200ms ease; - right: 0; - - @media screen and (max-width: 768px) { - display: none; - } - } - - a { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; - } - } - - ul { - max-height: 0; - opacity: 0; - margin-bottom: 0; - margin-top: 0; - overflow: hidden; - transition: height 0ms 400ms, opacity 400ms 0ms; - - &.show { - opacity: 1; - max-height: 800px; - margin-bottom: 1.0875rem; - overflow: visible; - transition: height 0ms 0ms, opacity 600ms 0ms; - } - } - - p { - max-height: 0; - opacity: 0; - margin: 0; - overflow: hidden; - transition: height 0ms 400ms, opacity 400ms 0ms; - - &.show { - opacity: 1; - max-height: 400px; - margin-bottom: 1.0875rem; - transition: height 0ms 0ms, opacity 600ms 0ms; - } - } -} diff --git a/src/assets/css/_css/foundation.less b/src/assets/css/_css/foundation.less deleted file mode 100644 index c226c161a9..0000000000 --- a/src/assets/css/_css/foundation.less +++ /dev/null @@ -1,31 +0,0 @@ -.foundation { - .foundation-hero { - background: url(/img/graphql_foundation-hero.jpg) top left; - - .foundation-hero-inner-content { - padding: 6% 1em; - background-color: rgba(225, 0, 152, 0.75); - - img { - user-select: none; - pointer-events: none; - width: 50%; - min-width: 300px; - display: block; - margin: 6% auto; - } - - div { - max-width: 50ch; - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - font-size: ~"clamp(1em, 2.5vw, 1.5em)"; - color: #fff; - display: block; - margin: auto; - text-align: center; - line-height: 1.4; - } - } - } -} diff --git a/src/assets/css/_css/graphql.less b/src/assets/css/_css/graphql.less deleted file mode 100644 index 79e7e3f5bb..0000000000 --- a/src/assets/css/_css/graphql.less +++ /dev/null @@ -1,432 +0,0 @@ -@import "variables.less"; - -* { - box-sizing: border-box; - border: none; - margin: 0; - padding: 0; -} - -body { - .body-font(); - background-color: white; - -webkit-text-size-adjust: 100%; -} - -a { - color: @rhodamine-color; - text-decoration: none; - &:hover, - &:focus { - text-decoration: underline; - } -} - -p { - margin: 1em 0; -} - -em { - font-style: italic; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 2em 0 0; - text-rendering: optimizelegibility; -} - -h1 { - .headline-font(40px); -} - -h2 { - .headline-font(30px); -} - -h3 { - .headline-font(22px); -} - -h4 { - .headline-font(18px); -} - -h5 { - .headline-font(15px); -} - -h6 { - .headline-font(13px); -} - -// Anchors and hash links appear next to headers. -h1 > .anchor, -h2 > .anchor, -h3 > .anchor, -h4 > .anchor, -h5 > .anchor, -h6 > .anchor { - margin-top: -50px; - position: absolute; -} - -.hash-link { - color: #aaa; - visibility: hidden; -} - -h1:hover > .hash-link, -h2:hover > .hash-link, -h3:hover > .hash-link, -h4:hover > .hash-link, -h5:hover > .hash-link, -h6:hover > .hash-link { - visibility: visible; -} - -ul, -ol { - margin: 1em 0 1em 2em; - padding: 0; -} - -p + ul, -p + ol { - margin-top: 1em; -} - -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; -} - -li { - margin-bottom: 1em; -} - -hr { - height: 0; - border-top: 1px solid #ccc; - border-bottom: 1px solid #eee; -} - -li code, -p code { - .code-font(15px); - background-color: #f8f8f8; - border-radius: 2px; - padding: 4px 4px 2px; - margin: 0 -1px; -} - -/* Header and Navigation */ - -header { - .headline-font(@size: 15px); - min-height: 50px; - background: white; - box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.1); - z-index: 10; - top: 0px; - width: 100%; - position: sticky; - - // Home link within nav. - .nav-home { - float: left; - font-size: 18px; - color: @rhodamine-color; - line-height: 50px; - display: inline-block; - padding-right: 1em; - text-decoration: none; - - img { - display: inline; - vertical-align: -9px; - margin-right: 6px; - width: 30px; - height: 30px; - } - } -} - -nav { - input { - display: none; - } - - @media screen and (min-width: 1020px) { - float: left; - } - - @media screen and (min-width: 720px) and (max-width: 1019px) { - text-align: center; - margin: 0 -1em; - } - - @media screen and (max-width: 719px) { - height: 50px; - position: relative; - - input { - display: block; - float: right; - appearance: none; - background: url("/img/menu.svg"); - width: 42px; - height: 42px; - margin: 4px 0; - cursor: pointer; - - .hero & { - background: url("/img/menu-white.svg"); - } - } - - div { - display: none; - } - - input:checked + div { - display: block; - position: absolute; - top: 100%; - right: 0; - left: 0; - a { - display: block; - background: white; - width: 100%; - left: 0; - .hero & { - background: @dark-color; - &:hover, - &:focus { - color: white; - } - } - } - a:not(:first-child) { - border-top: solid 1px #eee; - .hero & { - border-top-color: #666; - } - } - } - } - - a { - color: #aaa; - display: inline-block; - line-height: 50px; - padding: 0 1em; - transition: color 0.1s ease-out; - - &:hover, - &:focus, - &.active { - color: @text-color; - text-decoration: none; - } - } -} - -section { - max-width: 1080px; - margin: 0 auto; - padding: 0 20px; -} - -footer { - .body-font(@size: 15px); - background: lighten(@dark-color, 10%); - box-shadow: inset 0 10px 10px -5px darken(@dark-color, 5%); - padding-top: 2em; - padding-bottom: 2em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - .sitemap { - display: flex; - justify-content: space-between; - margin-bottom: 3em; - - div { - flex: 1; - } - - .nav-home { - display: table; - margin: -12px 20px 0 -10px; - padding: 10px; - width: 50px; - height: 50px; - background: url("/img/logo-gray.svg") no-repeat content-box; - - &:hover, - &:focus { - background-image: url("/img/logo.svg"); - } - - @media screen and (max-width: 740px) { - display: none; - } - } - - a, - span { - color: white; - display: table; - margin: 2px 15px 2px -10px; - padding: 3px 10px; - position: relative; - - svg { - opacity: 0.6; - position: absolute; - height: 0.85em; - width: 0.85em; - right: ~"calc(100% - 4px)"; - top: 50%; - transform: translateY(-50%); - user-select: none; - } - } - - h5, - h6 { - margin: 0 0 10px; - - &, - & > a, - & > span { - color: lighten(@dark-color, 50%); - } - - & > a, - & > span { - margin: 0 -10px; - } - } - } - - .copyright { - color: rgba(255, 255, 255, 0.4); - text-align: center; - } -} - -.guestBio { - background: #f9f0f3; - border-top: solid 2px #e0c3c8; - font-style: italic; - margin: 1em -10px; - padding: 10px; -} - -.blogContent { - *zoom: 1; - padding-top: 20px; -} - -.blogContent:before, -.blogContent:after { - content: " "; - display: table; -} - -.blogContent:after { - clear: both; -} - -.blogContent blockquote { - padding: 5px 15px; - margin: 20px 0; - background-color: #f8f5ec; - border-left: 5px solid #f7ebc6; -} - -.blogContent img { - max-width: 100%; -} - -.tag-wrapper { - margin-bottom: 5px; -} - -.tag { - font-weight: 700; - letter-spacing: 1.5px; - text-transform: uppercase; - background-color: #e9e8f3; - font-size: 14px; - padding: 5px; - border-radius: 4px; - margin-right: 5px; -} - -div[data-twttr-id] iframe { - margin: 10px auto !important; -} - -p + .apiIndex { - margin-top: 0; -} -.apiIndex { - list-style: none; - margin: 0 0 30px 0; -} -.apiIndex li { - margin: 0 0 5px 0; - color: rgba(0, 0, 0, 0.35); -} -.apiIndex li a { - color: inherit; - display: block; - position: relative; - text-decoration: none; -} -.apiIndex li a:hover::before { - color: @rhodamine-color; - content: "#"; - font-size: 16px; - left: -2em; - line-height: 20px; - position: absolute; -} -.apiIndex .prism { - margin-bottom: 0; -} - -.apiIndex pre { - .code-font(); - direction: ltr; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - tab-size: 2; - text-align: left; - text-shadow: 0 1px white; - white-space: pre; - word-break: normal; - word-spacing: normal; -} - -.apiIndex li { - font-size: 13px; - line-height: 17px; - padding: 7px 14px; - background: white; - box-shadow: inset 0 0 0 1px #eee, inset 4px 0 0 #eee; - border-radius: 3px; - margin-left: -4px; -} diff --git a/src/assets/css/_css/index.less b/src/assets/css/_css/index.less deleted file mode 100644 index e01876c09b..0000000000 --- a/src/assets/css/_css/index.less +++ /dev/null @@ -1,861 +0,0 @@ -@import "variables.less"; - -// Index page uses a fixed header with an overlay -div.index { - background: #f5f6f8; - @media screen and (min-width: 1020px) { - margin-top: 50px; - } - - // GraphQLConf 2023 - Remove on Oct 1, 2023 - section.conf-banner { - background-color: #562556; - background: url("/img/conf/graphql-conf-bg.png") repeat center center; - background-size: cover; - color: #fff; - text-align: center; - max-width: none; - - & > a { - color: white; - display: flex; - align-items: center; - justify-content: center; - padding: 30px; - gap: 30px; - margin: 0 auto; - - @media (max-width: 900px) { - flex-direction: column; - gap: 10px; - } - - &:hover { - text-decoration: none; - } - - & > div { - display: flex; - flex-direction: column; - - & > * { - margin: 6px 0; - } - } - } - - img { - height: 80px; - } - - .button { - .headline-font(@size: 17px, @color: white); - border: solid 1px fadeout(white, 60%); - border-radius: 6px; - color: white; - line-height: 1.0; - transition: background 0.1s ease-out, color 0.1s ease-out; - padding: 0.6em 1.6em; - margin: 0 0.8em; - display: inline-block; - text-decoration: none; - - &:hover, &:focus, &:active { - color: @text-color; - background: white; - text-decoration: none; - } - } - } - // End GraphQLConf 2023 - - header { - display: none; - @media screen and (min-width: 1020px) { - display: block; - position: fixed; - top: 0; - left: 0; - right: 0; - } - } - - .hero { - background: @dark-color; - @media screen and (min-width: 1020px) { - min-height: 450px; - max-height: 900px; - height: 65vh; - margin-top: -50px; - padding-top: 50px; - z-index: 11; - } - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - &::before { - background: url("/img/graph-wash.png") repeat center center; - content: ''; - height: 100%; - position: absolute; - top: 0; - width: 100%; - } - - header { - background: linear-gradient( - fadeout(@dark-color, 20%), - fadeout(@dark-color, 100%) - ); - box-shadow: none; - display: block; - @media screen and (min-width: 1020px) { - min-height: 80px; - max-height: 160px; - height: 13vh; - } - - nav a { - text-shadow: 0 1px 1px @dark-color, 0 0 3px @dark-color; - - &:hover, &:focus { - color: white; - } - - &:first-child { - @media screen and (min-width: 1020px) { - margin-left: -1em; - } - } - } - } - - .abs { - position: relative; - @media screen and (min-width: 1020px) { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - clip: rect(0, auto, auto, 0); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - } - } - - .intro { - clear: both; - display: flex; - max-width: 1070px; - - flex-direction: column; - @media screen and (min-width: 1020px) { - margin-top: -3%; - flex-direction: row; - } - } - - .named-logo { - text-align: center; - animation: fade 1.2s ease-in-out; - animation-fill-mode: both; - margin-right: 18px; - - h1 { - color: @rhodamine-color; - margin: 0; - margin-top: 0.25em; - font-size: 30px; - line-height: 1; - } - - img { - margin: 0 auto; - display: block; - width: 90px; - height: 90px; - @media screen and (max-width: 55rem) { - margin-top: 3rem; - } - } - } - - .marketing-col { - flex: 1; - padding: 0 18px; - margin: 20px 18px; - @media screen and (min-width: 1020px) { - margin: 3px 18px; - } - @media screen and (max-width: 1019px) { - text-align: center; - } - - h3 { - color: white; - margin: 0 0 1em; - line-height: 1; - white-space: pre; - } - - .prism { - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; - color: white; - @media screen and (max-width: 1019px) { - display: inline-block; - } - } - - @media screen and (min-width: 1020px) { - &:last-child > .prism { - margin-right: -20px; - } - } - } - - .fadein-cols(4); - .fadein-cols(@n) when (@n > 1) { .fadein-cols(@n - 1); - .marketing-col:nth-child(@{n}) { - animation: fade 1.0s 0.5s * @n ease-in-out both; - } - } - - @keyframes fade { - from { - opacity: 0; - transform: translate(0, 30px); - } - - to { - opacity: 1; - transform: translate(0, 0); - } - } - - .buttons-unit { - animation: fade 1.1s 3.2s ease-in-out both; - width: 100%; - - @media screen and (min-width: 1020px) { - position: absolute; - top: ~"calc(75%)"; - text-align: center; - } - @media screen and (max-width: 1019px) { - padding: 1em 0 2em; - text-align: center; - } - - .button { - .headline-font(@size: 17px, @color: white); - border: solid 1px fadeout(white, 60%); - border-radius: 6px; - line-height: 1.0; - transition: background 0.1s ease-out, color 0.1s ease-out; - padding: 0.6em 1.6em; - margin: 0 0.8em; - display: inline-block; - text-decoration: none; - - &:hover, &:focus, &:active { - color: @text-color; - background: white; - text-decoration: none; - } - } - } - } - - section h1, - section h2 { - margin-top: 0; - } - - section.lead { - .body-font(22px); - text-align: center; - max-width: 760px; - padding-top: 6em; - } - - .grayWash { - background: #e6e8ec; - position: relative; - } - - .darkWash { - background: #2a3746; - box-shadow: - inset 0 30px 30px -30px rgba(0,0,0,0.35), - inset 0 -20px 30px -30px rgba(0,0,0,0.35); - overflow: hidden; - position: relative; - } - - .window { - background: white; - border-radius: 6px 6px 0 0; - box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.12); - margin: 0 -15px; - overflow: hidden; - padding-top: 26px; - position: relative; - - &::before { - background: linear-gradient(#f0f0f0, #dedede); - border-radius: 6px 6px 0 0; - box-shadow: inset 0 2px 2px -2px white, 0 1px rgba(0,0,0,0.4); - content: ' '; - display: block; - height: 25px; - position: absolute; - top: 0; - width: 100%; - } - - .prism { - padding: 1ch; - } - } - - section.point1, - section.point2, - section.point3, - section.point4, - section.point5, - section.point6 { - align-items: center; - display: flex; - flex-direction: column; - padding-bottom: 4em; - padding-top: 4em; - min-height: 75vh; - @media screen and (max-width: 1019px) { - min-height: none; - .prose2 { - text-align: center; - } - } - } - - section.point1 { - @media screen and (min-width: 1020px) { - flex-direction: row-reverse; - justify-content: space-between; - } - - .prose2 { - max-width: 415px; - } - - .faux-graphiql { - width: 440px; - height: 330px; - display: flex; - flex-direction: column; - pointer-events: none; - - .query, .response { - flex: 1; - } - - .query { - border-bottom: solid 5px #e0e0e0; - } - - .cursor { - width: 7px; - height: 15px; - background-color: #d0d0d0; - display: inline-block; - margin: -1px 1px -3px; - animation: cursor-blink 0.5s infinite linear both alternate; - - @keyframes cursor-blink { - 0%, 30% { - opacity: 0; - } - 70%, 100% { - opacity: 1; - } - } - } - - .ch { - display: none; - } - } - } - - section.point2 { - @media screen and (min-width: 1020px) { - flex-direction: row; - justify-content: space-between; - } - - .prose2 { - max-width: 415px; - } - - .app-to-server { - width: 476px; - height: 500px; - position: relative; - pointer-events: none; - - margin: -35px -10px; - @media screen and (max-width: 1019px) { - margin-top: 0; - } - - .phone, .server { - position: absolute; - left: 0; - right: 0; - } - - .phone { - bottom: 0; - } - - .server { - top: 0; - } - - .query, .response { - position: absolute; - } - - .query { - animation: query-up 6s 0s infinite ease-in both; - left: 175px; - - @keyframes query-up { - from { - opacity: 0; - top: 230px; - } - - 5%, 25% { - opacity: 1; - } - - 40% { - opacity: 0; - } - - 50%, 100% { - top: 150px; - opacity: 0; - } - } - } - - .response { - animation: response-down 6s 2.3s infinite ease-in both; - left: 135px; - - @keyframes response-down { - 0% { - opacity: 0; - top: 130px; - } - - 10% { - opacity: 0; - } - - 25%, 45% { - opacity: 1; - } - - 50%, 100% { - opacity: 0; - top: 200px; - } - } - } - } - } - - section.point3 { - @media screen and (min-width: 1020px) { - flex-direction: row-reverse; - justify-content: space-between; - } - - .prose2 { - max-width: 415px; - } - - .strong-typed-query { - width: 480px; - display: flex; - pointer-events: none; - - .type-system, .query { - background: white; - flex: 1; - position: relative; - } - - .query { - border-right: solid 5px #e0e0e0; - } - - .highlight { - position: absolute; - left: 0; - right: 0; - height: 18px; - top: 8px; - background: lighten(@dark-color, 80%); - } - } - } - - section.point4 { - color: white; - flex-direction: column; - padding-bottom: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - h2 { - color: white; - } - - em { - font-family: Palatino, Georgia, serif; - } - - .prose2 { - display: flex; - flex-direction: column; - flex: 1; - justify-content: center; - margin: 0 auto; - max-width: 575px; - text-align: center; - } - - .graphiqlVid { - background: white; - border-radius: 6px 6px 0 0; - box-shadow: - 0 0 0 1px rgba(0, 0, 0, 0.2), - 0 16px 64px rgba(0, 0, 0, 0.6); - margin: 3em -10px 0; - overflow: hidden; - padding-top: 40%; - pointer-events: none; - position: relative; - transform: translateZ(0); - width: 100%; - - video { - position: absolute; - top: 0; - left: 0; - width: 100%; - } - } - } - - section.point5 { - @media screen and (min-width: 1020px) { - flex-direction: row-reverse; - justify-content: space-between; - } - - .prose2 { - max-width: 415px; - } - - .type-evolution { - @pane-width: 260px; - width: 2 * @pane-width - 1; - pointer-events: none; - overflow-x: hidden; - - .add { - .code-font(@color: darken(#eaffea, 75%)); - &::before { - content: '+'; - } - background: #eaffea; - border-left: solid 1px darken(#eaffea, 10%); - } - - .remove { - .code-font(@color: darken(#ffecec, 75%)); - &::before { - content: '-'; - } - background: #ffecec; - border-left: solid 1px darken(#ffecec, 10%); - } - - .add, .remove { - opacity: 0; - transition: opacity 0.5s ease-in-out; - position: absolute; - left: -1px; - right: 0; - height: 18px; - padding-left: 2px; - } - - #typeEvolveView { - display: flex; - left: 0; - margin-left: -1px; - position: relative; - width: 5 * @pane-width; - - .v1, .v2, .v3, .v4, .v5 { - border-left: solid 1px #eee; - flex: 1; - padding: 4px 6px 18px; - position: relative; - width: @pane-width; - } - - - &.step0 { - .v2 { - opacity: 0; - } - } - - &.step1 { - .v2 { - opacity: 1; - transition: opacity 0.5s ease-in-out; - } - - .v2 .add { - opacity: 1; - } - } - - &.step2 { - left: -1 * @pane-width; - transition: left 0.5s ease-in-out; - - .v3 .add { - opacity: 1; - } - } - - &.step3 { - left: -2 * @pane-width; - transition: left 0.5s ease-in-out; - - .v4 .add { - opacity: 1; - } - } - - &.step4 { - left: -3 * @pane-width; - transition: left 0.5s ease-in-out; - - .v4 .remove { - opacity: 1; - } - - .v5 .add { - opacity: 1; - } - } - - &.step5 { - left: -4 * @pane-width; - transition: left 0.5s ease-in-out; - - .v4 .remove { - opacity: 1; - } - } - - &.step6 { - .v2 { - opacity: 0; - } - - .v5 { - left: -4 * @pane-width; - opacity: 0; - transition: opacity 0.5s ease-in-out; - } - } - } - - .v2 .add { - top: 12px + 4 * 17px; - } - - .v3 .add { - top: 12px + 5 * 17px; - } - - .v4 .add:nth-child(1) { - top: 12px + 6 * 17px; - } - .v4 .add:nth-child(2) { - top: 12px + 9 * 17px; - } - .v4 .add:nth-child(3) { - top: 12px + 10 * 17px; - } - .v4 .add:nth-child(4) { - top: 12px + 11 * 17px; - } - .v4 .add:nth-child(5) { - top: 12px + 12 * 17px; - } - .v4 .add:nth-child(6) { - top: 12px + 13 * 17px; - } - - .v4 .remove { - top: 12px + 5 * 17px; - } - - .v5 .add { - top: 12px + 5 * 17px; - } - } - } - - section.point6 { - @media screen and (min-width: 1020px) { - flex-direction: row; - justify-content: space-between; - } - - .prose2 { - max-width: 415px; - } - - .leverage-code { - @pane-width: 520px; - width: @pane-width; - overflow-y: hidden; - - #leverageCodeView { - display: flex; - flex-direction: row; - left: 0; - position: relative; - transition: left 0.5s ease-in-out; - width: @pane-width * 4; - - & > pre { - width: @pane-width; - position: relative; - top: 0; - } - - &.step0 { - transition: none; - } - - &.step1, &.step2 { - & > pre:first-child { - line-height: 4 * 17px; - transition: - top 0.5s ease-in-out, - line-height 0.5s ease-in-out; - - &:first-line { - line-height: 17px; - } - } - } - - &.step2 { - left: -1 * @pane-width; - } - - &.step3 { - left: -2 * @pane-width; - } - - &.step4 { - left: -3 * @pane-width; - } - - &.step5 { - left: -4 * @pane-width; - & > pre:first-child { - left: 4 * @pane-width; - } - } - } - } - } - - section.powered-by { - padding-bottom: 6em; - text-align: center; - - .prose2 { - max-width: 545px; - text-align: center; - margin: 0 auto; - } - - .logos { - align-items: center; - display: flex; - flex-flow: row wrap; - justify-content: center; - - img { - height: 100px; - padding: 14px; - @media screen and (min-width: 1020px) { - height: 150px; - padding: 20px; - } - - &.round { - height: 106px; - padding: 11px; - @media screen and (min-width: 1020px) { - height: 158px; - padding: 16px; - } - } - } - } - - .button { - display: inline-block; - .headline-font(@size: 17px, @color: @text-color); - border: solid 1px fadeout(black, 60%); - border-radius: 6px; - line-height: 1.0; - transition: border 0.1s ease-out, background 0.1s ease-out, color 0.1s ease-out; - padding: 0.65em 1.6em 0.6em; - margin: 2em; - display: inline-block; - text-decoration: none; - - &:hover, &:focus, &:active { - color: white; - background: @rhodamine-color; - border-color: @rhodamine-color; - text-decoration: none; - } - } - } -} diff --git a/src/assets/css/_css/prism.less b/src/assets/css/_css/prism.less deleted file mode 100644 index 06a78aff07..0000000000 --- a/src/assets/css/_css/prism.less +++ /dev/null @@ -1,183 +0,0 @@ -@import "variables.less"; - -.prism { - .code-font(); - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - - position: relative; -} - - - - -// Colors -// .prism { -// .comment, -// .prolog, -// .doctype, -// .cdata { -// color: slategray; -// } - -// .punctuation { -// color: #999; -// } - -// .namespace { -// opacity: .7; -// } - -// .property, -// .tag, -// .boolean, -// .number, -// .constant, -// .symbol, -// .deleted { -// color: #905; -// } - -// .selector, -// .attr-name, -// .string, -// .char, -// .builtin, -// .inserted { -// color: #690; -// } - -// .operator, -// .entity, -// .url, -// .language-css .string, -// .style .string { -// color: #a67f59; -// background: hsla(0, 0%, 100%, .5); -// } - -// .atrule, -// .attr-value, -// .keyword { -// color: #07a; -// } - -// .function { -// color: #DD4A68; -// } - -// .regex, -// .important, -// .variable { -// color: #e90; -// } - -// .important, -// .bold { -// font-weight: bold; -// } -// .italic { -// font-style: italic; -// } - -// .entity { -// cursor: help; -// } -// } - - - - -/* Comment */ -.prism .comment, -.cm-comment { - color: #999; -} - -/* Punctuation */ -.prism .punctuation, -.cm-punctuation { - color: #555; -} - -/* Keyword */ -.prism .keyword, -.cm-keyword { - color: #B11A04; -} - -/* OperationName, FragmentName */ -.prism .constant, -.cm-def { - color: #D2054E; -} - -/* FieldName */ -.prism .attr-name, -.cm-property { - color: #1F61A0; -} - -/* FieldAlias */ -.cm-qualifier { - color: #1C92A9; -} - -/* ArgumentName and ObjectFieldName */ -.cm-attribute { - color: #8B2BB9; -} - -/* Number */ -.prism .number, -.cm-number { - color: #2882F9; -} - -/* String */ -.prism .string, -.cm-string { - color: #D64292; -} - -/* Boolean */ -.prism .boolean, -.cm-builtin { - color: #D47509; -} - -/* EnumValue */ -.prism .enum, -.cm-string-2 { - color: #0B7FC7; -} - -/* Variable */ -.prism .variable, -.cm-variable { - color: #397D13; -} - -/* Directive */ -.prism .function, -.cm-meta { - color: #B33086; -} - -/* Type */ -.prism .type-name, -.cm-atom { - color: #CA9800; -} \ No newline at end of file diff --git a/src/assets/css/_css/users.less b/src/assets/css/_css/users.less deleted file mode 100644 index a43da5eb87..0000000000 --- a/src/assets/css/_css/users.less +++ /dev/null @@ -1,41 +0,0 @@ -section.whos-using-page, section.foundation-members-page { - padding-bottom: 6em; - max-width: 900px; - - .logos { - align-items: center; - display: flex; - flex-flow: row wrap; - justify-content: center; - - img { - max-height: 100px; - max-width: 180px; - padding: 14px; - @media screen and (min-width: 1020px) { - max-height: 150px; - max-width: 270px; - padding: 20px; - } - - &.round { - max-height: 106px; - max-width: 140px; - padding: 11px; - @media screen and (min-width: 1020px) { - max-height: 158px; - max-width: 210px; - padding: 16px; - } - } - } - } -} - -section.whos-using-page { - .prose2 { - max-width: 560px; - text-align: center; - margin: 0 auto; - } -} diff --git a/src/assets/css/_css/variables.less b/src/assets/css/_css/variables.less deleted file mode 100644 index 9bc159f702..0000000000 --- a/src/assets/css/_css/variables.less +++ /dev/null @@ -1,38 +0,0 @@ -/* https://www.pantone.com/color-finder/Rhodamine-Red-C */ -:root { - --rhodamine: #e10098; -} - -@supports (color: color(display-p3 1 1 1)) { - :root { - --rhodamine: ~"color(display-p3 0.8824 0 0.5961)"; - } -} - -@dark-color: #171e26; -@rhodamine-color: ~"var(--rhodamine)"; -@text-color: #202020; - -.headline-font(@size: 48px, @color: @text-color) { - font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - color: @color; - font-size: @size; - line-height: @size * 1.4; -} - -.body-font(@size: 18px, @color: @text-color) { - font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - color: @color; - font-size: @size; - line-height: @size * 1.6; -} - -.code-font(@size: 13px, @color: @text-color) { - font-family: "Roboto Mono", Menlo, Monaco, monospace; - font-weight: 400; - color: @color; - font-size: @size; - line-height: @size * 17/13; -} diff --git a/src/assets/css/global.css b/src/assets/css/global.css deleted file mode 100644 index f131e7682b..0000000000 --- a/src/assets/css/global.css +++ /dev/null @@ -1,33 +0,0 @@ -/*@tailwind base;*/ -/* WARNING: Don't uncomment this, as it will result in all styles to be overriden and broken */ -/* @tailwind base; */ -@tailwind components; -@tailwind utilities; - -/* The below classes have been added to substitute the missing classes from `base` that breaks the styling */ -.translate-x-0 { - transform: translateX(0); -} - -.transform-none { - transform: none; -} - -.translate-x-full { - transform: translateX(100%); -} - -.list { - & { - list-style: none; /* Remove default bullets */ - } - - & li::before { - content: "•"; - color: #f5009b; - font-weight: 800; - display: inline-block; - width: 1.5em; - margin-left: -1.5em; - } -} diff --git a/src/assets/css/style.less b/src/assets/css/style.less deleted file mode 100644 index be1162c85a..0000000000 --- a/src/assets/css/style.less +++ /dev/null @@ -1,12 +0,0 @@ -@import "_css/graphql.less"; -@import "_css/index.less"; -@import "_css/docs.less"; -@import "_css/users.less"; -@import "_css/prism.less"; -@import "_css/codemirror.less"; -@import "_css/algolia.less"; -@import "_css/code.less"; -@import "_css/faq.less"; -@import "_css/foundation.less"; -@import "_css/brand.less"; - diff --git a/src/components/BackToTop/index.tsx b/src/components/BackToTop/index.tsx deleted file mode 100644 index 2889f06e3b..0000000000 --- a/src/components/BackToTop/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useEffect, useState } from "react" - -interface Props { - scrollThreshold: number -} - -const BackToTop: React.FC = ({ scrollThreshold }) => { - const [isVisible, setIsVisible] = useState(false) - - useEffect(() => { - const handleScroll = () => { - const pageHeight = document.body.scrollHeight - const currentPosition = window.pageYOffset - if (pageHeight < 6000) { - setIsVisible(false) - } else { - if (currentPosition > scrollThreshold) { - setIsVisible(true) - } else { - setIsVisible(false) - } - } - } - window.addEventListener("scroll", handleScroll) - return () => { - window.removeEventListener("scroll", handleScroll) - } - }, [scrollThreshold]) - - const handleBackToTopClick = () => { - window.scrollTo({ - top: 0, - behavior: "smooth", - }) - } - - return ( - <> - {isVisible && ( - - )} - - ) -} - -export default BackToTop diff --git a/src/components/BlogLayout/index.tsx b/src/components/BlogLayout/index.tsx deleted file mode 100644 index 2100ba19cd..0000000000 --- a/src/components/BlogLayout/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from "react" -import { graphql } from "gatsby" -import BlogSidebar from "../BlogSidebar" -import BlogPost from "../BlogPost" - -export const fragments = graphql` - fragment BlogLayout_post on BlogPost { - ...BlogPost_post - } -` - -interface Props { - post: Queries.BlogLayout_postFragment -} - -const BlogLayout: React.FC = ({ post }) => { - return ( -
-
- - -
-
- ) -} - -export default BlogLayout diff --git a/src/components/BlogPost/index.tsx b/src/components/BlogPost/index.tsx deleted file mode 100644 index f487432ab5..0000000000 --- a/src/components/BlogPost/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from "react" -import { graphql, Link } from "gatsby" -import Marked from "../Marked" - -export const fragments = graphql` - fragment BlogPost_post on BlogPost { - title - date - authors - tags - guestBio - remark { - rawMarkdownBody - } - } -` - -interface Props { - post: Queries.BlogPost_postFragment -} - -const BlogPost: React.FC = ({ post }) => { - const byline = post.authors.join(", ") - return ( -
-

{post.title}

- -

- {new Date(post.date).toLocaleDateString()} by {byline} -

- -
- {post.tags.map(tag => ( - - {tag} - - ))} -
- - {post.guestBio && ( -

{`This guest article contributed by ${byline}, ${post.guestBio}.`}

- )} - - {post.remark.rawMarkdownBody} -
- ) -} - -export default BlogPost diff --git a/src/components/BlogPostPreview/index.tsx b/src/components/BlogPostPreview/index.tsx deleted file mode 100644 index 085e48c35c..0000000000 --- a/src/components/BlogPostPreview/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from "react" -import { graphql, Link } from "gatsby" - -export const fragments = graphql` - fragment BlogPostPreview_post on BlogPost { - title - date - authors - tags - postPath: gatsbyPath(filePath: "/blog/{BlogPost.postId}") - remark { - excerpt - } - } -` - -interface Props { - post: Queries.BlogPostPreview_postFragment -} - -const BlogPostPreview: React.FC = ({ post }) => ( -
-

- {post.title} -

- -

- {new Date(post.date).toLocaleDateString()} by {post.authors.join(", ")} -

- -
- {post.tags.map(tag => ( - - {tag} - - ))} -
- -

{post.remark.excerpt}

-
-) - -export default BlogPostPreview diff --git a/src/components/BlogSidebar/index.tsx b/src/components/BlogSidebar/index.tsx deleted file mode 100644 index 5e302b9665..0000000000 --- a/src/components/BlogSidebar/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from "react" -import { Link, useStaticQuery, graphql } from "gatsby" -import { useLocation } from "@reach/router" - -const BlogSidebar: React.FC = () => { - const data = useStaticQuery(graphql` - query AllTagsStatic { - allBlogPost { - group(field: { tags: SELECT }) { - fieldValue - } - } - allRecentBlogPost: allBlogPost(limit: 30, sort: { date: DESC }) { - nodes { - title - postId - postPath: gatsbyPath(filePath: "/blog/{BlogPost.postId}") - } - } - } - `) - - const tags = data.allBlogPost.group.map(group => group.fieldValue!) - const recentPosts = data.allRecentBlogPost.nodes - - const { pathname: currentPath } = useLocation() - - return ( -
-
-

Subscribe

- - RSS - -
-
-

Categories

-
    - {tags.map(tag => { - const formattedTag = tag[0].toUpperCase() + tag.substring(1) - const pathname = `/tags/${tag}/` - return ( -
  • - {pathname === currentPath ? ( - formattedTag - ) : ( - {formattedTag} - )} -
    • - ) - })} -
-
-
-

Recent Posts

-
    - {recentPosts.map(post => ( -
  • - {post.postPath === currentPath ? ( - post.title - ) : ( - {post.title} - )} -
    • - ))} -
-
-
- ) -} - -export default BlogSidebar diff --git a/src/components/CodeLayout/index.tsx b/src/components/CodeLayout/index.tsx deleted file mode 100644 index cb029db624..0000000000 --- a/src/components/CodeLayout/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react" -import Marked from "../Marked" - -export default ({ title, rawMarkdownBody, pageContext }: any) => ( -
-
-
-

{title}

- {rawMarkdownBody} -
-
-
-) diff --git a/src/components/Conf/Layout/index.tsx b/src/components/Conf/Layout/index.tsx deleted file mode 100644 index 58896dd616..0000000000 --- a/src/components/Conf/Layout/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react" - -import "../../../assets/css/style.less" -import "../../../assets/css/global.css" - -interface Props { - children: React.ReactNode -} -const LayoutConf = ({ children }: Props): JSX.Element => ( -
{children}
-) - -export default LayoutConf diff --git a/src/components/Conf/Pricing/index.tsx b/src/components/Conf/Pricing/index.tsx deleted file mode 100644 index 130da086ef..0000000000 --- a/src/components/Conf/Pricing/index.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import React from "react" -import { CheckCircledIcon } from "@radix-ui/react-icons" -import ButtonConf from "../Button" - -interface Pricing { - title: string - date: string - price: string - dateIsExpired: Date -} - -const pricing: Pricing[] = [ - { - title: "Early Bird", - date: "Through May 31, 2023", - price: "$599", - dateIsExpired: new Date("2023-06-01"), - }, - { - title: "Standard", - date: "Jun 1 - Sep 4, 2023", - price: "$799", - dateIsExpired: new Date("2023-09-05"), - }, - { - title: "Late/Onsite", - date: "Sep 5 Through Event", - price: "$899", - dateIsExpired: new Date("2023-10-01"), - }, -] - -const includes: { title: string }[] = [ - { - title: "All conference content", - }, - { - title: "Full-day GraphQL workshop", - }, - { - title: "Lunch and all-day beverages", - }, - { - title: "Entry to Sponsor Showcase", - }, - { - title: "GraphQLConf event t-shirt", - }, - { - title: "Access to watch all sessions", - }, -] - -const PricingConf: React.FC = () => { - const today = new Date() - - const isExpired = (expiredDate: Date): boolean => expiredDate < today - - const renderPriceCard = (pricing: Pricing, index: number) => { - const expired = isExpired(pricing.dateIsExpired) - - const cardStyles = `block mx-auto w-64 p-6 overflow-hidden bg-[#2E343C] shadow-xl rounded-2xl focus:outline-none hover:drop-shadow-lg hover:scale-[102%] hover:no-underline focus:no-underline transition ease-in-out` - const expiredCardStyles = `block mx-auto w-64 p-6 overflow-hidden bg-[#474c52] shadow-xl rounded-2xl focus:outline-none hover:drop-shadow-lg hover:scale-[102%] hover:no-underline focus:no-underline transition ease-in-out cursor-not-allowed` - - return ( - - {expired && ( -
-
- Expired -
-
- )} -
- {pricing.title} -
-
{pricing.date}
-
- {pricing.price} -
- - ) - } - - return ( -
-
-
-

Attend

-
-
-
- {pricing.map(renderPriceCard)} -
-
- - Buy a Ticket! - -
- -
-
-

- What's included? -

-
- {includes.map((include, i) => ( -
- -

- {include.title} -

-
- ))} -
-

- Need assistance? -

-

- Apply for a Visa or{" "} - Scholarship or find more - help in our FAQ. -

-
-
-
-
-
- ) -} - -export default PricingConf diff --git a/src/components/Conf/SF/index.tsx b/src/components/Conf/SF/index.tsx deleted file mode 100644 index 76200e97dd..0000000000 --- a/src/components/Conf/SF/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react" -import { AspectRatio } from "../../aspect-ratio" - -interface Image { - src: string - name: string - description: string - link: string -} - -const images: Image[] = [ - { - src: "https://events.linuxfoundation.org/wp-content/uploads/2022/12/San-Francisco-Golden-Gate-Bridge-unsplash.jpg", - name: "Golden Gate Bridge", - description: - "Each year the Golden Gate Bridge attracts more than 10 million visitors to take in its tremendous 746-foot tall towers, sweeping main cables, signature International Orange color and Art Deco styling. It is a sensory experience featuring color, light and sound.", - link: "https://www.goldengate.org/", - }, - { - src: "https://events.linuxfoundation.org/wp-content/uploads/2022/12/San-Francisco-North-Beach-unsplash.jpg", - name: "North Beach San Francisco", - description: - "North Beach, a buzzy neighborhood steeped in Italian heritage, draws locals and tourists to its checked-tablecloth trattorias, coffee shops and retro-flavored bars.", - link: "https://www.sftravel.com/neighborhoods/north-beach", - }, - { - src: "https://events.linuxfoundation.org/wp-content/uploads/2022/12/San-Francisco-Alcatraz-unsplash.jpg", - name: "Alcatraz", - description: - "Alcatraz reveals stories of American incarceration, justice, and our common humanity. This small island was once a fort, a military prison, and a maximum security federal penitentiary.", - link: "https://www.nps.gov/alca/index.htm", - }, - { - src: "https://events.linuxfoundation.org/wp-content/uploads/2022/12/San-Francisco-Fishermans-Wharf-unsplash.jpg", - name: "Fisherman’s Wharf", - description: - "Fisherman’s Wharf, on the northern waterfront, is one of the city’s busiest tourist areas. Souvenir shops and stalls selling crab and clam chowder in sourdough bread bowls appear at every turn, as do postcard views of the bay, Golden Gate and Alcatraz. There’s also a colony of sea lions to see and historic ships to tour. At Ghirardelli Square, boutiques and eateries reside in the famed former chocolate factory.", - link: "https://www.fishermanswharf.org/", - }, -] -const SFConf = () => { - return ( -
-

- About San Francisco Bay Area -

-
- {images.map(image => ( -
- -
- ))} -
-
- ) -} - -export default SFConf diff --git a/src/components/Conf/Section/index.tsx b/src/components/Conf/Section/index.tsx deleted file mode 100644 index e1df75589f..0000000000 --- a/src/components/Conf/Section/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react" - -interface Props { - id: string - title: string - children: React.ReactNode - className?: string -} - -const SectionConf = ({ id, title, children }: Props): JSX.Element => ( - // Padding down so hash-links to this id display below the header menu -
-

- - {title} - -

- {children} -
-) - -export default SectionConf diff --git a/src/components/Conf/Seo/index.tsx b/src/components/Conf/Seo/index.tsx deleted file mode 100644 index b093f13ceb..0000000000 --- a/src/components/Conf/Seo/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from "react" - -export const defaults = { - title: "GraphQLConf 2023 — Sept 19-21 • SF Bay Area", - twitterTitle: "#GraphQLConf 2023 — Sept 19-21 • SF Bay Area", - description: - "The official GraphQL conference hosted by the GraphQL Foundation.", - url: "https://graphql.org/conf/", - image: "http://graphql.org/img/conf/social-pk.jpg", -} - -export default function SeoConf(props: { - title?: string - twitterTitle?: string - description?: string - ogImage?: { - url: string - width: number - height: number - } -}) { - const title = props.title ?? defaults.title - const twitterTitle = - props.twitterTitle ?? props.title ?? defaults.twitterTitle - const description = props.description ?? defaults.description - const image = props.ogImage?.url ?? defaults.image - - return ( - <> - {title} - - - - - - - - - - - - - ) -} diff --git a/src/components/Conf/Venue/index.tsx b/src/components/Conf/Venue/index.tsx deleted file mode 100644 index 37b7648b08..0000000000 --- a/src/components/Conf/Venue/index.tsx +++ /dev/null @@ -1,251 +0,0 @@ -import React from "react" -import { ReactComponent as TrainIcon } from "../../../../static/img/conf/train.svg" -import { ReactComponent as AroundIcon } from "../../../../static/img/conf/around.svg" -import { ReactComponent as ParkingIcon } from "../../../../static/img/conf/parking.svg" -import { ReactComponent as BusIcon } from "../../../../static/img/conf/bus.svg" - -const VenueConf = () => { - return ( - // Invisible padding so anchor links align to the header menu -
-

- Location & Venue -

-
-

- GraphQLConf 2023 is hosted in the San Francisco Bay Area, where - GraphQL was first created. It's hosted at the{" "} - - Hyatt Regency SFO - {" "} - hotel in Burlingame, CA. -

- -
-
-
-
-

- Venue & Lodging -

-

- - Hyatt Regency SFO - -

-

- - 1333 Old Bayshore Hwy Burlingame, CA 94010 - -

-
- Dates with Availability: September 18, 19, 20, 21, 2023 -
- Room Rates Start From: $179.00 -
- Room Block Closes: 12:00 PM Pacific on September 8, 2023. -
- - (Please note, the rate is valid until the cut-off date or the - room block is full) - -
- Please note, rooms will most likely sell out in advance of the{" "} - - room block - {" "} - close dates. We encourage you to book early to secure a room at - the conference rate. -
-
- -
-

- Alternate lodging options -

- - Holiday Inn Express San Francisco Airport South, and IHG Hotel - -

- Important: The Linux Foundation - will never reach out to attendees by phone to make hotel - reservations for our conferences. Please be advised that the most - secure way to book in our discounted room block is by using the - direct booking link provided below or by calling the hotel - directly. If you receive a phone call or email from someone - claiming to be with The Linux Foundation or the hotel and they - attempt to sell you a hotel room, please email us at{" "} - - housing@linuxfoundation.org - - . -

-

- Welcome to all -

-

- GraphQLConf is welcome to all. Please read our{" "} - - diversity & inclusion - {" "} - guide and{" "} - - code of conduct - - . Your health and safety is our top priority. We have considered a - range of both{" "} - - onsite resources - {" "} - and{" "} - - emergency resources - {" "} - as well as a{" "} - - health & safety - {" "} - policy. -

-
-
-
-
- {[ - { - title: "Public Transportation", - icon: TrainIcon, - content: ( -
- - SamTrans - -

- Service from Burlingame to San Francisco is available for $5 - (adults) or $2.50 youth and seniors.{" "} - - Learn More - -

- - Bay Area Rapid Transit (BART): - -

- Take the Hyatt Shuttle Bus to/from SFO International Terminal - to connect with BART. Approximate cost from the station to - downtown San Francisco is $8.65 one-way. -

-
- ), - }, - { - title: "Airport Information", - icon: AroundIcon, - content: ( -
- - San Francisco International Airport (SFO) - -

- Drive time from venue: 7 mins. -
- Distance from venue: 3.1 miles. -

- - Driving Directions from SFO to Venue - -
- ), - }, - { - title: "Parking", - icon: ParkingIcon, - content: ( -
- - The Hyatt Regency SFO offers self-parking. - -

Self-Parking:

-

- 0-1 hour: $12 -
- 1-6 hours: $22/hour -
- 6+ hours or overnight: $40/night -

-
- ), - }, - { - title: "Complimentary Shuttle Service", - icon: BusIcon, - content: ( -
- - Hyatt Regency SFO - -

- The Hyatt Regency SFO offers a 24-hour complimentary - San Francisco International Airport (SFO) shuttle which runs - every 15 minutes from 4:00AM until 1:00AM and - every 30 minutes from 1:00AM until 4:00AM. At - SFO, go to the area marked "Hotel Shuttle." The bus is marked - "Hyatt Regency and Marriott.” -

-
- ), - }, - ].map(o => ( -
-
- -

- {o.title} -

- {o.content} -
-
- ))} -
-
- ) -} - -export default VenueConf diff --git a/src/components/ConfLayout/index.tsx b/src/components/ConfLayout/index.tsx deleted file mode 100644 index 26ad18fa4e..0000000000 --- a/src/components/ConfLayout/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from "react" -import { Link } from "gatsby" -import DocsSidebar from "../DocsSidebar" -import Marked from "../Marked" - -interface Props { - title: string - heroText: string - nextDoc: any - permalink: string - sideBarData: any - rawMarkdownBody: string - pageContext: any -} - -const Index = ({ - title, - heroText, - nextDoc, - sideBarData, - rawMarkdownBody, - pageContext, -}: Props) => { - return ( -
-
-
-
- GraphQLConf logo -
{heroText}
-
-
-
-
-

{title}

- {rawMarkdownBody} - {nextDoc?.frontmatter?.permalink && ( - - - Continue Reading → - - - {nextDoc.frontmatter.title} - - - )} -
- -
-
-
- ) -} - -export default Index diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx deleted file mode 100644 index d364cb8f1c..0000000000 --- a/src/components/DocsLayout/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react" -import { Link } from "gatsby" -import DocsSidebar from "../DocsSidebar" -import Marked from "../Marked" - -interface Props { - title: string - nextDoc: any - permalink: string - sideBarData: any - rawMarkdownBody: string - pageContext: any -} - -const index = ({ - title, - nextDoc, - sideBarData, - rawMarkdownBody, - pageContext, -}: Props) => { - return ( -
-
-
-

{title}

- {rawMarkdownBody} - {nextDoc?.frontmatter?.permalink && ( - - - Continue Reading → - - - {nextDoc.frontmatter.title} - - - )} -
- -
-
- ) -} - -export default index diff --git a/src/components/DocsSidebar/index.tsx b/src/components/DocsSidebar/index.tsx deleted file mode 100644 index 12c374ef50..0000000000 --- a/src/components/DocsSidebar/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from "react" -import { Link } from "gatsby" -import { toSlug } from "../../utils/slug" -import { AnchorLink } from "gatsby-plugin-anchor-links" - -const SidebarForCategory = ({ category }: any) => { - const listItems = category.links.map((page: any, i: number) => { - return ( -
  • - - {page.frontmatter.sidebarTitle || page.frontmatter.title} - - {page.frontmatter.sublinks && ( -
      - {page.frontmatter.sublinks - .split(",") - .map((sublink: any, i: number) => ( -
    • - - {sublink} - -
      • - ))} -
    - )} -
    • - ) - }) - - return ( -
    -

    {category.name}

    -
      {listItems}
    -
    - ) -} - -const SideBar = ({ sideBarData }: any) => { - return ( -
    - {sideBarData.map((category: any) => ( - - ))} -
    - ) -} - -export default SideBar diff --git a/src/components/FAQLayout/index.tsx b/src/components/FAQLayout/index.tsx deleted file mode 100644 index 0c87814937..0000000000 --- a/src/components/FAQLayout/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react" -import FAQSection from "../FAQSection" - -interface Props { - title: string - rawMarkdownBody: string - pageContext: any -} - -const index = ({ title, rawMarkdownBody, pageContext }: Props) => { - return ( -
    -
    - -
    -
    - ) -} - -export default index diff --git a/src/components/FAQSection/index.tsx b/src/components/FAQSection/index.tsx deleted file mode 100644 index 5c506ab7ba..0000000000 --- a/src/components/FAQSection/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react" -import Marked from "../Marked" - -interface Props { - title: string - rawMarkdownBody: string - pageContext: any -} - -const FAQSection = ({ title, rawMarkdownBody, pageContext }: Props) => ( -
    -

    {title}

    - {rawMarkdownBody} -
    -) - -export default FAQSection diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx deleted file mode 100644 index a5a3e3d746..0000000000 --- a/src/components/Footer/index.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React from "react" -import Link from "../Link" -import { ReactComponent as GitHubIcon } from "../../../static/img/logos/github.svg" -import { ReactComponent as TwitterIcon } from "../../../static/img/logos/twitter.svg" -import { ReactComponent as DiscordIcon } from "../../../static/img/logos/discord.svg" -import { ReactComponent as StackOverflowIcon } from "../../../static/img/logos/stackoverflow.svg" -import { ReactComponent as EditIcon } from "../../../static/img/edit.svg" - -interface LinkItem { - text: string - href: string - icon?: string -} - -interface FooterLinks { - text: string - href?: string - subsections: LinkItem[] -} - -const getLinks = (sourcePath?: string): FooterLinks[] => [ - { - text: "Learn", - href: "/learn/", - subsections: [ - { text: "Introduction to GraphQL", href: "/learn/" }, - { text: "Best Practices", href: "/learn/best-practices/" }, - { text: "Frequently Asked Questions", href: "/faq/" }, - { text: "Training Courses", href: "/community/users/#training-courses" }, - ], - }, - { - text: "Code", - href: "/code", - subsections: [ - { - text: "GitHub", - href: "https://github.com/graphql", - icon: GitHubIcon, - }, - { text: "GraphQL Specification", href: "https://spec.graphql.org" }, - { text: "Libraries & Tools", href: "/code/" }, - { text: "Services & Vendors", href: "/code/#services" }, - ], - }, - { - text: "Community", - href: "/community", - subsections: [ - { - text: "@graphql", - href: "https://twitter.com/graphql", - icon: TwitterIcon, - }, - { - text: "Discord", - href: "https://discord.graphql.org/", - icon: DiscordIcon, - }, - { - text: "Stack Overflow", - href: "http://stackoverflow.com/questions/tagged/graphql", - icon: StackOverflowIcon, - }, - { text: "Resources", href: "/community/users/" }, - { text: "Events", href: "/community/upcoming-events/" }, - { text: "Landscape", href: "https://landscape.graphql.org" }, - { text: "Shop", href: "https://store.graphql.org" }, - ], - }, - { - text: "& More", - subsections: [ - { text: "News Blog", href: "/blog/" }, - { text: "GraphQL Foundation", href: "/foundation/" }, - { text: "GraphQL Community Grant", href: "/foundation/community-grant/" }, - { text: "Logo and Brand Guidelines", href: "/brand" }, - { text: "Code of Conduct", href: "/codeofconduct/" }, - { text: "Contact Us", href: "/foundation/contact/" }, - sourcePath && { - text: "Edit this page", - href: - "https://github.com/graphql/graphql.github.io/edit/source/" + - sourcePath, - icon: EditIcon, - }, - ].filter(Boolean) as LinkItem[], - }, -] - -const Footer = ({ sourcePath }: { sourcePath?: string }) => { - return ( -
    -
    -
    - - {getLinks(sourcePath).map((section, i) => ( -
    -
    - {section.href ? ( - {section.text} - ) : ( - {section.text} - )} -
    - {section.subsections.map((subsection, i) => ( - - {subsection.icon && } - {subsection.text} - - ))} -
    - ))} -
    -
    - Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation. - All rights reserved. -
    - For web site terms of use, trademark policy and general project - policies please see  - - https://lfprojects.org - - . -
    -
    -
    - ) -} - -export default Footer diff --git a/src/components/FoundationLayout/index.tsx b/src/components/FoundationLayout/index.tsx deleted file mode 100644 index 4a58e7e6ce..0000000000 --- a/src/components/FoundationLayout/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react" -import { Link } from "gatsby" -import DocsSidebar from "../DocsSidebar" -import Marked from "../Marked" - -interface Props { - title: string - heroText: string - nextDoc: any - permalink: string - sideBarData: any - rawMarkdownBody: string - pageContext: any -} - -const Index = ({ - title, - heroText, - nextDoc, - sideBarData, - rawMarkdownBody, - pageContext, -}: Props) => { - return ( -
    -
    -
    -
    - GraphQL Foundation logo -
    {heroText}
    -
    -
    -
    -
    -

    {title}

    - {rawMarkdownBody} - {nextDoc?.frontmatter?.permalink && ( - - - Continue Reading → - - - {nextDoc.frontmatter.title} - - - )} -
    - -
    -
    -
    - ) -} - -export default Index diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx deleted file mode 100644 index dc61e491f3..0000000000 --- a/src/components/Header/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react" -import { Link } from "gatsby" -import HeaderLinks from "../HeaderLinks" -import Logo from "../Logo" -import Search from "../Search" - -const Header = () => { - return ( -
    -
    - - - GraphQL - - - -
    -
    - ) -} - -export default Header diff --git a/src/components/HeaderLinks/index.tsx b/src/components/HeaderLinks/index.tsx deleted file mode 100644 index 0d393f3425..0000000000 --- a/src/components/HeaderLinks/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from "react" -import Link from "../Link" - -interface LinkItem { - section: string - text: string - href: string -} - -const links: LinkItem[] = [ - { - section: "learn", - text: "Learn", - href: "/learn/", - }, - { - section: "code", - text: "Code", - href: "/code/", - }, - { - section: "community", - text: "Community", - href: "/community/", - }, - { - section: "faq", - text: "FAQ", - href: "/faq/", - }, - { - section: "spec", - text: "Spec", - href: "https://spec.graphql.org/", - }, - { - section: "foundation", - text: "Foundation", - href: "/foundation/", - }, - { - section: "news", - text: "News", - href: "/blog/", - }, -] - -export default () => ( - -) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx deleted file mode 100644 index 89ee6ab289..0000000000 --- a/src/components/Layout/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react" -import Footer from "../Footer" -import Header from "../Header" - -import "../../assets/css/style.less" -import "../../assets/css/global.css" -import BackToTop from "../BackToTop" -interface Props { - children: React.ReactNode - className?: string - pageContext?: { sourcePath?: string } - showConfBanner?: boolean -} -const IndexLayout = ({ - children, - className, - pageContext: { sourcePath } = {}, - showConfBanner = true, -}: Props): JSX.Element => ( - <> - - - -) - -export default IndexLayout diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx deleted file mode 100644 index ceacf22c58..0000000000 --- a/src/components/Link/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react" -import { Link } from "gatsby" - -interface Props { - children?: React.ReactNode - href: string - className?: string -} - -const LinkWrapped = ({ href, children, className, ...props }: Props) => { - const isExternalUrl = href.slice(0, 4) === "http" - - return isExternalUrl ? ( - - {children} - - ) : ( - - {children} - - ) -} - -export default LinkWrapped diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx deleted file mode 100644 index dba627d725..0000000000 --- a/src/components/Logo/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react" - -export default function Logo({ className }: { className?: string }) { - return ( - GraphQL Logo { - event.preventDefault() - document.location.assign("/brand") - }} - /> - ) -} diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx deleted file mode 100644 index 800f94ab20..0000000000 --- a/src/components/Search/index.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { useEffect } from "react" - -// Added to the global runtime by the script tag further down the file. -declare const docsearch: any | undefined - -// Runs the new docsearch function over possible search inputs -const runDocsearchIfPossible = () => { - if (typeof docsearch !== "undefined") { - const searches = ["algolia-search-input", "hero-search-input"] - for (const searchID of searches) { - if (!document.getElementById(searchID)) continue - - docsearch({ - apiKey: "d103541f3e6041148aade2e746ed4d61", - indexName: "graphql", - inputSelector: `#${searchID}`, - }) - } - } -} - -const Search = ({ searchID }: { searchID?: string }): JSX.Element => { - const searchInputID = searchID || "algolia-search-input" - - // This extra bit of mis-direction ensures that non-essential code runs after - // the page is loaded - useEffect(() => { - runDocsearchIfPossible() - - const handleSearchTrigger = (event: KeyboardEvent) => { - const slashKeyPressed = event.key === "/" || event.code === "Slash" - if (!slashKeyPressed) { - return - } - event.preventDefault() - const searchInput = document.querySelector( - `#${searchInputID}`, - ) - - if (searchInput) { - searchInput.focus() - } - } - - window.addEventListener("keypress", handleSearchTrigger) - - if (document.getElementById("algolia-search")) return - - const searchScript = document.createElement("script") - searchScript.id = "algolia-search" - const searchCSS = document.createElement("link") - - searchScript.src = - "https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js" - searchScript.async = true - searchScript.onload = () => { - if (typeof docsearch !== "undefined") { - runDocsearchIfPossible() - - searchCSS.rel = "stylesheet" - searchCSS.href = - "https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" - searchCSS.type = "text/css" - document.body.appendChild(searchCSS) - } - } - - document.body.appendChild(searchScript) - - return () => { - window.removeEventListener("keypress", handleSearchTrigger) - } - }, []) - - return ( -
    - -
    - ) -} - -export default Search diff --git a/src/components/Seo/index.tsx b/src/components/Seo/index.tsx deleted file mode 100644 index b9f0d317ea..0000000000 --- a/src/components/Seo/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react" -import { useStaticQuery, graphql } from "gatsby" - -interface Props { - title?: string - description?: string -} - -const Seo = ({ title, description }: Props): JSX.Element => { - const data = useStaticQuery(graphql` - query SeoQuery { - site { - siteMetadata { - title - description - } - } - } - `) - - const metadata = data.site!.siteMetadata - - return ( - <> - {title ?? metadata!.title} - - - - - - ) -} - -export default Seo diff --git a/src/components/aspect-ratio.tsx b/src/components/aspect-ratio.tsx deleted file mode 100644 index 5730ce883c..0000000000 --- a/src/components/aspect-ratio.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" -import { clsx } from "clsx" -import React from "react" - -interface AspectRatioProps { - className?: string - href: string - title: string - src: string -} - -export function AspectRatio({ className, href, title, src }: AspectRatioProps) { - return ( - <> - - -

    - {title} -

    -     -
    - {title} -
    -     - - ) -} diff --git a/src/pages/404.tsx b/src/pages/404.tsx deleted file mode 100644 index 20fbb5a4cc..0000000000 --- a/src/pages/404.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react" -import Layout from "../components/Layout" -import Seo from "../components/Seo" - -const NotFound: React.FC = ({}) => { - return ( - -
    -
    -

    Oops!

    -

    Page not found!

    -
    -
    -     - ) -} - -export function Head() { - return -} - -export default NotFound diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx deleted file mode 100644 index 1bb3a7566c..0000000000 --- a/src/pages/blog.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from "react" -import { graphql } from "gatsby" -import type { PageProps } from "gatsby" -import Layout from "../components/Layout" -import BlogPostPreview from "../components/BlogPostPreview" -import BlogSidebar from "../components/BlogSidebar" -import Seo from "../components/Seo" - -export const query = graphql` - query BlogPostListPage { - allBlogPost(sort: { date: DESC }) { - nodes { - id - ...BlogPostPreview_post - } - } - } -` - -type Props = PageProps - -const BlogPostListPage: React.FC = ({ data }) => { - return ( - -
    -
    -
    - {data.allBlogPost.nodes.map(post => ( - - ))} -
    - -
    -
    -     - ) -} - -export function Head() { - return -} - -export default BlogPostListPage diff --git a/src/pages/blog/{BlogPost.postId}.tsx b/src/pages/blog/{BlogPost.postId}.tsx deleted file mode 100644 index e6e10adabb..0000000000 --- a/src/pages/blog/{BlogPost.postId}.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from "react" -import type { PageProps, HeadProps } from "gatsby" -import { graphql } from "gatsby" -import Layout from "../../components/Layout" -import BlogLayout from "../../components/BlogLayout" -import Seo from "../../components/Seo" - -export const query = graphql` - query BlogPostPage($id: String!) { - blogPost(id: { eq: $id }) { - title - ...BlogLayout_post - } - } -` - -type Props = PageProps - -const BlogPostPage: React.FC = ({ data }) => { - // Always exist since it is collected by Gatsby filesystem route API - const post = data.blogPost! - - return ( - - - - ) -} - -export function Head({ data }: HeadProps) { - return -} - -export default BlogPostPage diff --git a/src/pages/brand.tsx b/src/pages/brand.tsx deleted file mode 100644 index 60d9229778..0000000000 --- a/src/pages/brand.tsx +++ /dev/null @@ -1,405 +0,0 @@ -import React, { useState } from "react" -import type { PageProps } from "gatsby" -import Layout from "../components/Layout" -import Seo from "../components/Seo" - -export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => { - return ( - -
    -

    GraphQL Logo & Brand Guidelines

    -
    - -
    -
    -
    -
    -
      -
    • - Do keep the “GraphQL” word consistent, with the first - letter and QL capitalized. -
      • -
    • - Do use "GraphQL" to clearly describe the GraphQL project - or a conforming technology. -
        -
      • GraphQL for Go
        • -
      • Quick Start to GraphQL by <company>
        • -
      -
      • -
    • - Do provide clear attribution for projects, services and - events, balancing "GraphQL" with your own brand. -
        -
      • <service> for GraphQL by <company>
        • -
      • Seattle GraphQL Meetup hosted by <company>
        • -
      -
      • -
    -
      -
    • - Don't lowercase or abbreviate “GraphQL” (for example - "Graphql" or “GQL”). -
      • -
    • - Don't directly combine “GraphQL” with another trademark - or generic term. -
        -
      • Go GraphQL
        • -
      • GraphQL Quick Start by <company>
        • -
      -
      • -
    • - Don't use “GraphQL” in a way that could imply - partnership, sponsorship, or endorsement by the GraphQL project or - GraphQL Foundation either directly or by omission. -
      • -
    • - Don't use the GraphQL brand disparagingly or in any other - way that violates our{" "} - - code of conduct - - . -
      • -
    -
    -
    -
    -
    -
    - Rhodamine -
    -
    P3
    -
    0.8824, 0, 0.5961
    -
    RGB
    -
    225, 0, 152 / #E10098
    -
    PMS
    -
    - - Rhodamine Red C - -
    -
    CMYK
    -
    5, 92, 0, 0
    -
    -
    -
    - - Rubik Light - -
    -
    Weight
    -
    300
    -
    License
    -
    - - Open Font License - -
    -
    -
    GraphQL ÅBCørm123
    -
    -
    -
    -
      -
    • - Do use Rhodamine alongside grayscale or - neutral colors. -
      • -
    • - Do prefer the P3 wide gamut color over RGB in digital; - the PMS spot color over CMYK process in print. -
      • -
    • - Do use Rubik Light with optical kerning and standard - letter spacing. -
      • -
    -
      -
    • - Don't use Rhodamine for large background areas. -
      • -
    • - Don't directly combine Rhodamine with other bright or - saturated colors. -
      • -
    • - Don't bold, italicize, or alter the letter spacing of - the GraphQL wordmark. -
      • -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
      -
    • - Do prefer the horizontal logo, but use the stacked logo - at larger sizes. -
      • -
    • - Do use the provided assets, don't redraw - the hexgraph. -
      • -
    -
    -
    -
      -
    • -
      - Don't rotate or stretch the hexagraph. Position the - inner triangle pointing upwards. -
      - - -
      • -
    • -
      - Don't remove or add any elements within the hexagraph, - or combine with another logo. -
      - - -
      • -
    • -
      - Don't decorate or add effects to any part of - the logo. -
      - -
      - -
      -
      • -
    • -
      - Don't resize or reposition elements of the hexagraph. -
      - - -
      • -
    • -
      - Don't resize or reposition the wordmark relative to the - hexagraph. -
      - -
      • -
    • -
      - Don't change the typeface of the wordmark. -
      - -
      • -
    -
    -

    Spacing

    -

    - Give the logo some space to breathe. Keep a clear space of at least - half the height of the hexagraph along on all sides. -

    -
    - - -
    -

    Color use

    -

    - The GraphQL logo should appear in Rhodamine, white, or black. It may - appear on any color background with the appropriate logo color. -

    -
    - - - - - - - -
    -
    -
      -
    • - Do prefer Rhodamine on a white background, our default - color combination. -
      • -
    • - Do otherwise prefer use the white logo on most - backgrounds unless contrast requires use of black. -
      • -
    -
    -
    - - - - - - -
    -
    -
      -
    • - Don't use black on a background of Rhodamine. -
      • -
    • - Don't use Rhodamine on a color or patterned background; - use white instead. -
      • -
    • - Don't use different colors or apply gradients to the - logo. -
      • -
    • - Don't use different colors for elements of the logo. - Always use the same color for the hexagraph and wordmark. -
      • -
    -
    -
    -
    - -
    -     - ) -} - -export function Head() { - return -} - -function AgreeActions() { - const [agree, setAgree] = useState(false) - return ( -
    - - - Download Logo Files - - - Request Permission - -
    - ) -} diff --git a/src/pages/code.tsx b/src/pages/code.tsx deleted file mode 100644 index 0d5c388a86..0000000000 --- a/src/pages/code.tsx +++ /dev/null @@ -1,426 +0,0 @@ -import type { PageProps } from "gatsby" -import { AnchorLink } from "gatsby-plugin-anchor-links" -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" - -export interface ILibrary { - description: string - github?: string - npm?: string - howto: string - 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: ILibrary[] - Server: ILibrary[] - } -} - -interface Tool { - name: string - totalStars: number - categoryMap: { - GatewaysSupergraphs: ILibrary[] - General: ILibrary[] - } -} -interface PageContext { - languageList: Language[] - toolList: Tool[] - serviceList: ILibrary[] - sourcePath: string -} - -export function Library({ data }: { data: ILibrary }) { - const [overflown, setOverflown] = useState(false) - const [expanded, setExpanded] = useState(false) - return ( -
    -
    - -

    {data.name}

    -     - {data.github && ( -
    - GitHub - - {data.github} - -
    - )} - {data.npm && ( - - )} - {data.gem && ( - - )} - {data.lastRelease && ( -
    - Last Release - {data.formattedLastRelease} -
    - )} - {data.stars && ( -
    - Stars - {data.formattedStars} -
    - )} - {data.license && ( -
    - License - {data.license} -
    - )} - {data.howto ? ( -
    - {data.description} -
    - ) : ( -
    - )} -
    -
    -
    { - if (el && !overflown) { - setOverflown(el.clientHeight < el.scrollHeight) - } - }} - > - {data.howto || data.description} -
    - {overflown && ( -
    setExpanded(true)} - > - -
    - )} -
    -
    - ) -} - -const categorySlugMap = [ - ["Server", toSlug("Server")], - ["Client", toSlug("Client")], - ["Tools", toSlug("Tools")], - ["Gateways-supergraphs", toSlug("Gateways-supergraphs")], - ["General", toSlug("General")], -] - -export function LibraryList({ data }: { data: ILibrary[] }) { - return ( -
    - {data.map(library => ( - - ))} -
    - ) -} - -interface ToolsListProps { - pageContext: PageContext - type: "General" | "GatewaysAndSupergraphs" -} - -export function ToolsList({ pageContext, type }: ToolsListProps) { - return ( - <> -

    - {type === "GatewaysAndSupergraphs" ? "Gateways / Supergraphs" : type} -

    - {pageContext.toolList.map(tool => ( -
    - {Object.entries(tool.categoryMap).map( - ([categoryName, data]) => - categoryName === type && , - )} -
    - ))} - - ) -} -const sortLanguageList = (sortConfig: { - sortType?: "popularity" | "alphabetical" - data: Language[] -}) => { - const { sortType = "popularity", data } = sortConfig - const _data = [...data] - if (sortType === "popularity") return _data - _data?.sort((a, b) => { - if (a.name > b.name) { - return 1 - } - if (a.name < b.name) { - return -1 - } - return 0 - }) - return _data -} - -const SortInput = (props: { - isChecked: boolean - onChange: (e: any) => unknown - value: string - label: string -}) => { - const { isChecked, onChange, value, label } = props - return ( -
    - - -
    - ) -} -export default ({ pageContext }: PageProps<{}, PageContext>) => { - const [sortBy, setSortBy] = useState<"popularity" | "alphabetical">( - "popularity", - ) - const sortedLanguageList = sortLanguageList({ - sortType: sortBy, - data: pageContext.languageList, - }) - const handleInputChange = (e: any) => { - setSortBy(e.target.value) - } - return ( - -
    -
    -

    Code

    -

    using GraphQL

    -
    -
    -
    -
    -
    -
    -

    - Because GraphQL is a communication pattern, there are many tools - to help you get started working which support GraphQL in all - sorts of languages. -

    -
    -

    Go to

    -
    - -

    Language Support

    -     - -

    Tools

    -     - -

    Services

    -     -
    -
    -
    -

    - Language Support -

    -
    -

    Sort By:

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

    -

    - - - Gateways/Supergraphs - - {" / "} - - General - - -

    -
    -
    - - -

    - - Services - - # - -

    - -
    -
    -

    - Want to improve this page? See the{" "} - - docs here - - . -

    -
    -     - ) -} - -export function Head() { - return -} diff --git a/src/pages/conf/faq.tsx b/src/pages/conf/faq.tsx deleted file mode 100644 index a79b9e77b8..0000000000 --- a/src/pages/conf/faq.tsx +++ /dev/null @@ -1,248 +0,0 @@ -import React, { ReactNode } from "react" -import FooterConf from "../../components/Conf/Footer" -import HeaderConf from "../../components/Conf/Header" -import LayoutConf from "../../components/Conf/Layout" -import SectionConf from "../../components/Conf/Section" -import SeoConf from "../../components/Conf/Seo" - -const faq: Array<{ id: string; title: string; contents: ReactNode }> = [ - { - id: "contact", - title: "Contact Us", - contents: ( -

    - Answers to many common questions are readily available on this event’s - website. If you cannot find the answer to your question, you are welcome - to contact us by emailing{" "} - - graphql_events@linuxfoundation.org - - . -

    - ), - }, - { - id: "confidentiality", - title: "Confidentiality", - contents: ( -

    - We never sell attendee lists or contact information, nor do we authorize - others to do so. If you receive an email claiming to sell an attendee - list for a Linux Foundation event, please forward it to{" "} - - events@linuxfoundation.org - - . -

    - ), - }, - { - id: "codeofconduct", - title: "Code of Conduct", - contents: ( - <> -

    - The GraphQL Foundation and the Linux Foundation are dedicated to - providing a harassment-free experience for participants at all of our - events, whether they are held in person or virtually. GraphQLConf is a - working conference intended for professional networking and - collaboration within the open source community. It exists to encourage - the open exchange of ideas and expression and requires an environment - that recognizes the inherent worth of every person and group. While at - GraphQLConf or related ancillary or social events, any participants, - including members, speakers, attendees, volunteers, sponsors, - exhibitors, booth staff and anyone else, should not engage in - harassment in any form. -

    -

    - This Code of Conduct may be revised at any time by The GraphQL - Foundation or The Linux Foundation and the terms are non-negotiable. - Your registration for or attendance at GraphQL, whether in person or - virtually, indicates your agreement to abide by this policy and its - terms. -

    -

    - Please read the full{" "} - - Code of Conduct - {" "} - for the complete policy and terms. -

    - - ), - }, - { - id: "dni", - title: "Diversity & Inclusion", - contents: ( - <> -

    - Education and collaboration are vital to the future of the open source - ecosystem, and it is imperative to us that everyone in the community - that wants to participate feels welcome to do so regardless of gender, - gender identity, sexual orientation, disability, race, ethnicity, age, - religion or economic status. Our{" "} - code of conduct outlines our expectations - for all those who participate in our community, as well as the - consequences for unacceptable behavior. -

    -

    - We offer diversity and need based{" "} - scholarships and have considered a broad - range of both onsite resources and{" "} - emergency resources as well as a{" "} - health & safety policy. -

    -

    - If you have ideas on how we can create a more inclusive event, please - do not hesitate to let us know. Contact Emily Ruf, Senior Event - Manager, at{" "} - eruf@linuxfoundation.org - . -

    - - ), - }, - { - id: "chaoss-event-badge", - title: "CHAOSS D&I Event Badge", - contents: ( - <> - D&I Badging badge state: Gold -

    - Awarded to events in the open source community that fosters healthy - D&I practices.{" "} - - Learn More - - . -

    - - ), - }, - { - id: "invoices", - title: "Invoices & Certificates of Attendance", - contents: ( - <> -

    Registration Invoices

    -

    - Invoice receipts are downloadable from the confirmation email you - received after registering under the Payment Receipt Information - section. If the downloadable invoice receipt does not meet your needs - or you need to have your confirmation email resent, please submit your - request{" "} - - here - - . Please include any additional customization you need for your - invoice receipt in the request. -

    - -

    Certificates of Attendance

    -

    - To request a Certificate of Attendance, please submit a request{" "} - - here - - . -

    -

    - Please Note: We verify attendance through the registration system, and - Certificate of Attendance letters are sent out after the event is - completed. -

    - - ), - }, - { - id: "refund-policy", - title: "Refund Policy", - contents: ( - <> -

    Cancellations

    -

    - If you must cancel for any reason, please{" "} - - sign back into your registration - - , click the “Register/Modify” button and select “Unregister.” If you - need further assistance, email{" "} - - registration@linuxfoundation.org - - . -

    -

    - Refunds will only be issued for cancellations received two weeks prior - to the event start date, including bulk ticket request refunds, and - will appear as a credit on the card’s statement 7 – 10 business days - after cancellation. Due to the ongoing pandemic, individual refund - requests due to COVID-19 positive tests will be honored up until the - start date of the event, and must be accompanied by a photo of a - positive COVID-19 test. -

    -

    - Please note: Refunds can only be issued on the card the original - payment was made. -

    -

    Substitutions

    -

    - If you are unable to attend, you may substitute another attendee in - lieu of cancellation. To substitute an attendee,{" "} - - sign back into your registration - - , click the “Register/Modify”, and select “Transfer Registration” on - your confirmation page. -

    - - ), - }, -] - -export default () => { - return ( - - -
    -
    -

    GraphQLConf FAQ

    - - {faq.map(q => ( - - {q.contents} - - ))} -
    -
    - -     - ) -} - -export function Head() { - return -} diff --git a/src/pages/conf/gallery.tsx b/src/pages/conf/gallery.tsx deleted file mode 100644 index 07cb111d78..0000000000 --- a/src/pages/conf/gallery.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { FC } from "react" -import FooterConf from "../../components/Conf/Footer" -import HeaderConf from "../../components/Conf/Header" -import LayoutConf from "../../components/Conf/Layout" -import SeoConf from "../../components/Conf/Seo" -import GalleryConf from "../../components/Conf/Gallery" -import { Link, PageProps } from "gatsby" - -const GalleryPage: FC = ({ path }) => { - return ( - - -
    -
    - - -
    -
    - -     - ) -} - -export const Tabs = ({ path }: { path: string }) => { - return ( -
    - - Recorded Sessions - - - Gallery - -
    - ) -} - -export function Head() { - return -} - -export default GalleryPage diff --git a/src/pages/conf/sched.tsx b/src/pages/conf/sched.tsx deleted file mode 100644 index b45ee963a9..0000000000 --- a/src/pages/conf/sched.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from "react" -import FooterConf from "../../components/Conf/Footer" -import HeaderConf from "../../components/Conf/Header" -import LayoutConf from "../../components/Conf/Layout" -import SeoConf from "../../components/Conf/Seo" -import { Script } from "gatsby" - -export default () => { - return ( - - - -
    -
    -

    GraphQLConf 2023 Schedule

    -
    -

    September 19-21, 2023 I San Francisco Bay Area, CA

    -

    - Please note: All session times are in Pacific Daylight Time (UTC - -7). To view the schedule in your preferred timezone, - please select from the drop-down menu to the right, above “Filter - by Date.” -

    -

    - IMPORTANT NOTE: Timing of sessions and room locations are{" "} - subject to change. -

    - - {/* -

    Workshop Day

    -

    - Join us for a GraphQLConf Workshop Day on September 19. Workshops - are included in GraphQLConf registration though pre-registration - is required -{" "} - - register now - - , or modify your registration and join us! Workshop space is - available on a first come, first served basis. -

    -

    Thank you to our Workshop Day sponsor, The Guild.

    -
    - -
    */} -
    -
    -
    - -     - ) -} - -export function Head() { - return -} diff --git a/src/pages/conf/speak.tsx b/src/pages/conf/speak.tsx deleted file mode 100644 index 8b6b0c1da4..0000000000 --- a/src/pages/conf/speak.tsx +++ /dev/null @@ -1,348 +0,0 @@ -import React, { ReactNode, Fragment } from "react" -import FooterConf from "../../components/Conf/Footer" -import HeaderConf from "../../components/Conf/Header" -import LayoutConf from "../../components/Conf/Layout" -import ButtonConf from "../../components/Conf/Button" -import SectionConf from "../../components/Conf/Section" -import SeoConf from "../../components/Conf/Seo" - -const cfp: Array<{ id: string; title: string; contents: ReactNode }> = [ - { - id: "dates", - title: "Dates to Remember", - contents: ( -
    - ), - }, - { - id: "topics", - title: "Suggested Topics", - contents: ( -
    - ), - }, - { - id: "types", - title: "Submission Types", - contents: ( -
    - ), - }, - { - id: "important", - title: "Important Notes", - contents: ( - <> -

    - All speakers are required to adhere to our{" "} - Code of Conduct. We also highly - recommend that speakers take our online{" "} - - Inclusive Speaker Orientation Course - - . -

    -

    - Panel submissions must include the names of all participants in the - initial submission to be considered. In an effort to promote speaker - diversity, The Linux Foundation does not accept submissions with - all-male panels, and speakers must not all be from the same company. -

    -

    - Complimentary Passes For Speakers – One complimentary pass for the - event will be provided for the accepted speaker(s) per submission. -

    -

    - Avoid sales or marketing pitches and discussing unlicensed or - potentially closed-source technologies when preparing your proposal; - these talks are almost always rejected due to the fact that they take - away from the integrity of our events, and are rarely well-received by - conference attendees. -

    -

    - The Linux Foundation will not select submissions that have already - been presented at a previous Linux Foundation event within the past - year. If your submission is similar to a previous talk, please explain - how this version differs. -

    -

    - You are allowed to be listed as a speaker on a maximum of two - proposals submitted to the CFP, regardless of the format. If you are - listed on more than two, we will contact you to remove yourself from - any additional proposals. -

    -

    - You may only be selected to speak on one panel and one non-panel - session per event. -

    -

    - All accepted speakers are required to submit their slides prior to the - event. -

    - - ), - }, - { - id: "prepare", - title: "Prepare to Submit", - contents: ( - <> -

    - While it is not our intention to provide you with strict instructions - on how to prepare your proposal, we hope you will take a moment to - review the following guidelines that we have put together to help you - prepare the best submission possible. To get started, here are three - things that you should consider before submitting your proposal: -

    -
      -
    • What are you hoping to get from your presentation?
      • -
    • - What do you expect the audience to gain from your presentation? -
      • -
    • How will your presentation help better the ecosystem?
      • -
    • - There are plenty of ways to give a presentation about projects and - technologies without focusing on company-specific efforts. Remember - the things to consider that we mentioned above when writing your - proposal and think of ways to make it interesting for attendees - while still letting you share your experiences, educate the - community about an issue, or generate interest in a project. -
      • -
    -

    Writing Your Proposal

    -

    - Your abstract title will be the main point of reference for attendees - to decide if they want to attend your talk, so choose it carefully. - The title should accurately reflect the content of your talk and - comply with The Linux Foundation’s{" "} - - Inclusive Language Initiative - - . Please use title case when inputting your title. -

    -

    - In the abstract, make the most of your opportunity to pitch your talk - to the program committee by emphasizing its problem, contribution, and - relevance. Don’t forget technical details, but keep the big picture in - mind. Your proposal’s description should be focused, detailed, and - comply with The Linux Foundation’s Inclusive Language Initiative. It - will appear on the website schedule if accepted, so ensure it’s - error-free, uses full sentences, and written in the third person. This - description can make or break an attendee’s decision to attend your - talk, so provide enough information to aid their choice, and be - concise. The competition for presentation slots is high, so a - well-crafted, engaging abstract will improve your chances of - acceptance. -

    -

    How to Give a Great Talk

    -

    - We want to make sure submitters receive resources to help put together - a great submission and if accepted, give the best presentation - possible. To help with this, we recommend viewing seasoned speaker - Dawn Foster’s in-depth talk:{" "} - - Getting Over Your Imposter Syndrome to Become a Conference Speaker – - Dawn Foster, VMware - -

    -

    - Have More Questions? First Time Submitting? Don’t Feel Intimidated -

    - Linux Foundation events are an excellent way to get to know the - community and share your ideas and the work that you are doing and we - strongly encourage first-time speakers to submit talks for our events. - In the instance that you aren’t sure about your abstract,{" "} - reach out to us and we will - be more than happy to work with you on your proposal. - - ), - }, - { - id: "sessionize", - title: "Using Sessionize", - contents: ( - <> -

    First time using Sessionize?

    -

    - Sessionize is a cloud-based event content management software designed - to be intuitive and user-friendly. If you need guidance, please review - how to submit your session for an event for step-by-step instructions - and helpful screenshots. -

    - -

    Submitting on behalf of somebody else?

    -

    - While speakers ordinarily submit their sessions themselves, it’s also - common for them to have someone else do it in their name. Submitters - can choose to submit as someone else and must fill out the necessary - speaker fields, but the session submission process is otherwise - identical to when the session is submitted by the speaker themselves. -

    - - ), - }, -] - -function DL({ items }: { items: [header: string, contents: ReactNode][] }) { - return ( -
    - {items.map(([header, contents]) => ( - -
    {header}
    -
    {contents}
    -     - ))} -
    - ) -} - -export default () => { - const today = new Date() - const expiredDate = new Date("2023-06-10") - const isExpired = expiredDate > today - - return ( - - -
    -
    -

    Speak at GraphQLConf

    -
    -

    - Putting on an amazing conference depends on great content, which - is where you come in! Join other GraphQL leaders and community - members as a presenter by submitting to our Call for Proposals - (CFP) and sharing your experience across a wide range of topics. -

    -

    - The CFP is open through Friday, June 9. For any questions - regarding the CFP process, please email{" "} - - cfp@linuxfoundation.org - - . -

    - {isExpired ? ( - - Submit a Proposal - - ) : ( -
    The CFP has closed.
    - )} -

    - Please be aware that the Linux Foundation will now be utilizing - Sessionize for CFP submissions. Sessionize is a cloud-based event - content management software designed to be intuitive and - user-friendly. If you need guidance, please review{" "} - - how to submit your session for an event - {" "} - to see step-by-step instructions and helpful screenshots. -

    -
    - - {cfp.map(q => ( - - {q.contents} - - ))} -
    -
    - -     - ) -} - -export function Head() { - return ( - - ) -} diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx deleted file mode 100644 index c44d1c2fe1..0000000000 --- a/src/pages/faq.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from "react" -import Layout from "../components/Layout" -import FAQSection from "../components/FAQSection" -import type { PageProps } from "gatsby" -import { graphql } from "gatsby" -import { useFAQAccordion } from "../utils/useFAQAccordion" -import Seo from "../components/Seo" - -export default ({ - pageContext, - data, -}: PageProps) => { - useFAQAccordion() - - const sections = data.allMarkdownRemark.edges - .map(e => e.node) - .sort((a, b) => { - const aPosition = a?.frontmatter?.position ?? 0 - const bPosition = b?.frontmatter?.position ?? 0 - if (aPosition < bPosition) { - return -1 - } - return 1 - }) - - return ( - -
    -
    -
    -

    Frequently Asked Questions (FAQ)

    -
    - {sections.map( - ({ frontmatter: { title } = {}, rawMarkdownBody }, i) => ( - - ), - )} -
    -
    -
    -
    -     - ) -} - -export function Head() { - return -} - -export const query = graphql` - query GetAllFAQSections { - allMarkdownRemark( - filter: { frontmatter: { permalink: { regex: "/faq/" } } } - ) { - edges { - node { - frontmatter { - title - position - } - id - rawMarkdownBody - } - } - } - } -` diff --git a/src/pages/foundation/members.tsx b/src/pages/foundation/members.tsx deleted file mode 100644 index e0f33a4964..0000000000 --- a/src/pages/foundation/members.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react" -import type { PageProps } from "gatsby" -import Layout from "../../components/Layout" -import Seo from "../../components/Seo" -import IframeResizer from "iframe-resizer-react" - -export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => { - return ( - -
    -
    -

    GraphQL Foundation members

    -

    - The GraphQL Foundation is the primary way - in which funding is raised and distributed to support essential - GraphQL community programs. The members listed on this page are - directly invested in the success and long-term sustainability of the - GraphQL community. -

    -

    - To learn more about the GraphQL Foundation{" "} - and becoming a member, please see our{" "} - FAQ, reach out to{" "} - membership@graphql.org, - or{" "} - - complete a membership application - - . -

    -
    - - -
    -     - ) -} - -export function Head() { - return -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx deleted file mode 100644 index a512fa90af..0000000000 --- a/src/pages/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react" -import type { PageProps } from "gatsby" -import Layout from "../components/Layout" - -import Hero from "../Containers/Sections/Hero" -import SingleRequest from "../Containers/Sections/SingleRequest" -import TypeSystem from "../Containers/Sections/TypeSystem" -import PredictableResults from "../Containers/Sections/PredictableResults" -import BringYourOwnData from "../Containers/Sections/BringYourOwnCode" -import WithoutVersions from "../Containers/Sections/WithoutVersion" -import PowerFulTools from "../Containers/Sections/PowerFulTools" -import WhosUsing from "../Containers/Sections/WhosUsing" -import Seo from "../components/Seo" - -export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => { - return ( - - -
    - - GraphQLConf logo - - -
    -
    -

    A query language for your API

    -

    - GraphQL is a query language for APIs and a runtime for fulfilling - those queries with your existing data. GraphQL provides a complete and - understandable description of the data in your API, gives clients the - power to ask for exactly what they need and nothing more, makes it - easier to evolve APIs over time, and enables powerful - developer tools. -

    -
    - - - - - - - -     - ) -} - -export function Head() { - return -} diff --git a/src/pages/users.tsx b/src/pages/users.tsx deleted file mode 100644 index 530d6171e4..0000000000 --- a/src/pages/users.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react" -import type { PageProps } from "gatsby" -import Layout from "../components/Layout" -import Seo from "../components/Seo" - -export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => { - return ( - -
    -
    -

    Who’s using GraphQL?

    -

    - GraphQL is used by teams of all sizes in many different environments - and languages to power mobile apps, websites, and APIs. -

    -

    - Is your company using GraphQL? -
    - Please send a pull request to the{" "} - - GraphQL Landscape - {" "} - and follow{" "} - - instructions. - -

    -
    - - -
    -     - ) -} - -export function Head() { - return -} diff --git a/src/templates/EventOgImageTemplate.tsx b/src/templates/EventOgImageTemplate.tsx deleted file mode 100644 index f420a52944..0000000000 --- a/src/templates/EventOgImageTemplate.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import React from "react" -import { PageProps } from "gatsby" -import { ScheduleSession } from "../components/Conf/Schedule/session-list" -import { SchedSpeaker } from "../components/Conf/Speakers/Speaker" -import { format, parseISO } from "date-fns" -import { getEventTitle } from "../utils/eventTitle" - -const EventOgImageTemplate = ({ - pageContext, -}: PageProps<{}, { event: ScheduleSession; speakers: SchedSpeaker[] }>) => { - const speakers = pageContext.speakers.map(speaker => ({ - name: speaker.name, - avatar: speaker.avatar, - company: speaker.company, - position: speaker.position, - })) - const { event_type, event_start, event_end } = pageContext.event - - const eventType = event_type.endsWith("s") - ? event_type.slice(0, -1) - : event_type - - const eventTitle = getEventTitle( - pageContext.event, - pageContext.speakers.map(s => s.name), - ) - - return ( -
    -
    -
    -

    - GraphQLConf - 2023 - - {eventType.toUpperCase()} - -

    -
    -
    -
    - - - {/* */} - - - - {format(parseISO(event_start), "EEEE, MMM d")} - - - - {/* */} - - - - {format(parseISO(event_start), "hh:mm aaaa") + - " - " + - format(parseISO(event_end), "hh:mm aaaa") + - " PDT"} - -
    - -

    - {eventTitle} -

    -
    -
    - {speakers.map(speaker => ( -
    - {speaker.avatar && ( - {speaker.name} - )} -
    - - {speaker.name} - - - {speaker.company} - {speaker.position ? " " + speaker.position : ""} - -
    -
    - ))} -
    -
    -
    - ) -} - -export default EventOgImageTemplate diff --git a/src/templates/SpeakerOgImageTemplate.tsx b/src/templates/SpeakerOgImageTemplate.tsx deleted file mode 100644 index 93b8d94d61..0000000000 --- a/src/templates/SpeakerOgImageTemplate.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import React from "react" -import { PageProps } from "gatsby" -import { SchedSpeaker } from "../components/Conf/Speakers/Speaker" - -const SpeakerOgImageTemplate = ({ - pageContext: { speaker }, -}: PageProps<{}, { speaker: SchedSpeaker; schedule: any }>) => { - const { name, company } = speaker - - const positions = speaker.position?.split(",") - - return ( -
    -
    -
    -

    - GraphQLConf - 2023 - - SPEAKERS - -

    -
    - - - {/* */} - - - September 19-21, 2023 - - - - {/* */} - - - SF Bay Area - -
    -
    -
    - {speaker.avatar && ( - {speaker.name} - )} -
    -

    - {name} -

    - - {company} - {company && positions?.length && ", "} - {positions?.length === 1 - ? positions[0] - : positions?.map(position => ( - {position} - ))} - -
    -
    -
    -
    - ) -} - -export default SpeakerOgImageTemplate diff --git a/src/templates/conf.tsx b/src/templates/conf.tsx deleted file mode 100644 index a6d10c1820..0000000000 --- a/src/templates/conf.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React, { FC } from "react" -import FooterConf from "../components/Conf/Footer" -import HeaderConf from "../components/Conf/Header" -import LayoutConf from "../components/Conf/Layout" -import SpeakersConf from "../components/Conf/Speakers" -import AboutConf from "../components/Conf/About" -import SeoConf, { defaults as seoDefaults } from "../components/Conf/Seo" -import { GlobeIcon } from "@radix-ui/react-icons" -import ThanksConf from "../components/Conf/Thanks" -import { PageProps } from "gatsby" -import { ScheduleSession } from "../components/Conf/Schedule/session-list" - -const IndexTemplate: FC< - PageProps< - {}, - { - schedule: ScheduleSession[] - } - > -> = ({ pageContext }) => { - return ( - - -
    -
    - -
    -
    - - - - - - - - - - - September 19-21, 2023 -
    - -
    - - San Francisco Bay Area, CA -
    -
    -
    -
    - - - - -     - ) -} - -export function Head() { - return ( - <> - - - - - ) -} - -export default IndexTemplate diff --git a/src/templates/doc.tsx b/src/templates/doc.tsx deleted file mode 100644 index 3c91e23243..0000000000 --- a/src/templates/doc.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from "react" -import type { HeadProps, PageProps } from "gatsby" -import { graphql } from "gatsby" -import Layout from "../components/Layout" -import DocsLayout from "../components/DocsLayout" -import FoundationLayout from "../components/FoundationLayout" -import BlogLayout from "../components/BlogLayout" -import CodeLayout from "../components/CodeLayout" -import FAQLayout from "../components/FAQLayout" -import ConfLayout from "../components/ConfLayout" -import Seo from "../components/Seo" - -interface PageContext extends Queries.DocTemplateQueryVariables { - sideBarData: Array<{ - name: string - links: Array - }> - sourcePath: string -} - -const layoutMap: Record> = { - docs: DocsLayout, - foundation: FoundationLayout, - blog: BlogLayout, - code: CodeLayout, - faq: FAQLayout, - conf: ConfLayout, -} - -const Blog = ({ - data, - pageContext, -}: PageProps) => { - const { doc, nextDoc } = data - const { frontmatter, rawMarkdownBody } = doc || {} - const { title, date, heroText, permalink, byline, guestBio, layout, tags } = - frontmatter || {} - - const InnerLayout = layoutMap[layout!] - return ( - - - - ) -} - -export function Head({ data }: HeadProps) { - const { frontmatter } = data.doc || {} - const { title } = frontmatter || {} - - return -} - -export const query = graphql` - query DocTemplate($permalink: String!, $nextPermalink: String) { - doc: markdownRemark(frontmatter: { permalink: { eq: $permalink } }) { - frontmatter { - title - heroText - date - permalink - byline - guestBio - sublinks - layout - tags - } - id - rawMarkdownBody - } - nextDoc: markdownRemark( - frontmatter: { permalink: { eq: $nextPermalink } } - ) { - frontmatter { - title - permalink - } - } - } -` - -export default Blog diff --git a/src/templates/event.tsx b/src/templates/event.tsx deleted file mode 100644 index d64c57f9f5..0000000000 --- a/src/templates/event.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import React, { FC } from "react" -import ReactMarkdown from "react-markdown" -import rehypeRaw from "rehype-raw" -import remarkGfm from "remark-gfm" -import { HeadProps, PageProps } from "gatsby" -import FooterConf from "../components/Conf/Footer" -import HeaderConf from "../components/Conf/Header" -import LayoutConf from "../components/Conf/Layout" -import SeoConf from "../components/Conf/Seo" -import { SchedSpeaker } from "../components/Conf/Speakers/Speaker" -import { ScheduleSession } from "../components/Conf/Schedule/session-list" -import { Avatar } from "../components/Conf/Speakers/Avatar" -import clsx from "clsx" -import { - SocialMediaIcon, - SocialMediaIconServiceType, -} from "../components/Conf/Speakers/SocialMedia" -import { BackLink } from "../components/Conf/Schedule/BackLink" -import { getEventTitle } from "../utils/eventTitle" -import { videos } from "./videos" -import { findBestMatch } from "string-similarity" - -const Tag = ({ - text, - featured = false, -}: { - text: string - featured?: boolean -}) => - !text ? null : ( - - {text} - - ) - -export const EventComponent: FC<{ - event: ScheduleSession - speakers: SchedSpeaker[] - hideBackButton?: boolean -}> = ({ event, speakers, hideBackButton }) => { - event.event_type ??= "" - const eventType = event.event_type.endsWith("s") - ? event.event_type.slice(0, -1) - : event.event_type - - const eventTitle = getEventTitle( - event, - speakers.map(s => s.name), - ) - - const recordingTitle = findBestMatch( - `${eventTitle} ${speakers.map(e => e.name).join(" ")}`, - videos.map(e => e.title), - ).bestMatch - - return ( -
    -
    -
    - {!hideBackButton && } - {recordingTitle.rating > 0.5 && ( -