From be5c44186d7c75225141e8b45893b20d349c0851 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Mon, 3 Apr 2023 17:09:15 +0200 Subject: [PATCH 1/2] fix conflicts with tailwindcss --- .../Sections/BringYourOwnCode/index.tsx | 2 +- .../Sections/PowerFulTools/index.tsx | 2 +- .../Sections/PredictableResults/index.tsx | 2 +- .../Sections/SingleRequest/index.tsx | 4 +-- src/Containers/Sections/TypeSystem/index.tsx | 2 +- src/Containers/Sections/WhosUsing/index.tsx | 2 +- .../Sections/WithoutVersion/index.tsx | 2 +- src/assets/css/_css/graphql.less | 3 +- src/assets/css/_css/index.less | 16 +++++----- src/assets/css/_css/users.less | 2 +- src/assets/css/global.css | 2 +- src/components/Footer/index.tsx | 30 +++++++++++-------- src/pages/foundation/members.tsx | 2 +- src/pages/users.tsx | 2 +- 14 files changed, 39 insertions(+), 34 deletions(-) diff --git a/src/Containers/Sections/BringYourOwnCode/index.tsx b/src/Containers/Sections/BringYourOwnCode/index.tsx index a347591de7..b6964cd687 100644 --- a/src/Containers/Sections/BringYourOwnCode/index.tsx +++ b/src/Containers/Sections/BringYourOwnCode/index.tsx @@ -19,7 +19,7 @@ const Index = (): JSX.Element => { return (
-
+

Bring your own
diff --git a/src/Containers/Sections/PowerFulTools/index.tsx b/src/Containers/Sections/PowerFulTools/index.tsx index 048cfddeed..cff196169d 100644 --- a/src/Containers/Sections/PowerFulTools/index.tsx +++ b/src/Containers/Sections/PowerFulTools/index.tsx @@ -4,7 +4,7 @@ const PowerFulTools = () => { return (
-
+

Move faster with
diff --git a/src/Containers/Sections/PredictableResults/index.tsx b/src/Containers/Sections/PredictableResults/index.tsx index 17735430d4..5a38cf75d1 100644 --- a/src/Containers/Sections/PredictableResults/index.tsx +++ b/src/Containers/Sections/PredictableResults/index.tsx @@ -50,7 +50,7 @@ const PredictableResults = () => { }, []) return (
-
+

Ask for what you need,
diff --git a/src/Containers/Sections/SingleRequest/index.tsx b/src/Containers/Sections/SingleRequest/index.tsx index 867783d28b..7f1e171768 100644 --- a/src/Containers/Sections/SingleRequest/index.tsx +++ b/src/Containers/Sections/SingleRequest/index.tsx @@ -5,7 +5,7 @@ const SingleRequest = () => { return (
-
+

Get many resources
@@ -64,4 +64,4 @@ const SingleRequest = () => { ); }; -export default SingleRequest; \ No newline at end of file +export default SingleRequest; diff --git a/src/Containers/Sections/TypeSystem/index.tsx b/src/Containers/Sections/TypeSystem/index.tsx index 592bbc9590..2b1e60ebcb 100644 --- a/src/Containers/Sections/TypeSystem/index.tsx +++ b/src/Containers/Sections/TypeSystem/index.tsx @@ -21,7 +21,7 @@ const TypeSysyem = () => { }, []) return (
-
+

Describe what’s possible
diff --git a/src/Containers/Sections/WhosUsing/index.tsx b/src/Containers/Sections/WhosUsing/index.tsx index 5f00a8f608..58f917d805 100644 --- a/src/Containers/Sections/WhosUsing/index.tsx +++ b/src/Containers/Sections/WhosUsing/index.tsx @@ -4,7 +4,7 @@ import { Link } from "gatsby" const WhosUsing = () => { return (
-
+

Who’s using GraphQL?

Facebook's mobile apps have been powered by GraphQL since 2012. A diff --git a/src/Containers/Sections/WithoutVersion/index.tsx b/src/Containers/Sections/WithoutVersion/index.tsx index 27baee4adf..f4a4415b75 100644 --- a/src/Containers/Sections/WithoutVersion/index.tsx +++ b/src/Containers/Sections/WithoutVersion/index.tsx @@ -15,7 +15,7 @@ const WithoutVersion = () => { return (

-
+

Evolve your API
diff --git a/src/assets/css/_css/graphql.less b/src/assets/css/_css/graphql.less index a226736f3f..79e7e3f5bb 100644 --- a/src/assets/css/_css/graphql.less +++ b/src/assets/css/_css/graphql.less @@ -289,10 +289,11 @@ footer { padding: 3px 10px; position: relative; - img { + svg { opacity: 0.6; position: absolute; height: 0.85em; + width: 0.85em; right: ~"calc(100% - 4px)"; top: 50%; transform: translateY(-50%); diff --git a/src/assets/css/_css/index.less b/src/assets/css/_css/index.less index 674d11bd35..7bd3219840 100644 --- a/src/assets/css/_css/index.less +++ b/src/assets/css/_css/index.less @@ -338,7 +338,7 @@ div.index { min-height: 75vh; @media screen and (max-width: 1019px) { min-height: none; - .prose { + .prose2 { text-align: center; } } @@ -350,7 +350,7 @@ div.index { justify-content: space-between; } - .prose { + .prose2 { max-width: 415px; } @@ -399,7 +399,7 @@ div.index { justify-content: space-between; } - .prose { + .prose2 { max-width: 415px; } @@ -490,7 +490,7 @@ div.index { justify-content: space-between; } - .prose { + .prose2 { max-width: 415px; } @@ -535,7 +535,7 @@ div.index { font-family: Palatino, Georgia, serif; } - .prose { + .prose2 { display: flex; flex-direction: column; flex: 1; @@ -574,7 +574,7 @@ div.index { justify-content: space-between; } - .prose { + .prose2 { max-width: 415px; } @@ -741,7 +741,7 @@ div.index { justify-content: space-between; } - .prose { + .prose2 { max-width: 415px; } @@ -807,7 +807,7 @@ div.index { padding-bottom: 6em; text-align: center; - .prose { + .prose2 { max-width: 545px; text-align: center; margin: 0 auto; diff --git a/src/assets/css/_css/users.less b/src/assets/css/_css/users.less index b6e5bebee6..a43da5eb87 100644 --- a/src/assets/css/_css/users.less +++ b/src/assets/css/_css/users.less @@ -33,7 +33,7 @@ section.whos-using-page, section.foundation-members-page { } section.whos-using-page { - .prose { + .prose2 { max-width: 560px; text-align: center; margin: 0 auto; diff --git a/src/assets/css/global.css b/src/assets/css/global.css index b5c61c9567..558f64ff3c 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global.css @@ -1,3 +1,3 @@ -@tailwind base; +/*@tailwind base;*/ @tailwind components; @tailwind utilities; diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 77390b34ee..56e584f136 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,5 +1,10 @@ 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 @@ -31,7 +36,7 @@ const getLinks = (sourcePath?: string): FooterLinks[] => [ { text: "GitHub", href: "https://github.com/graphql", - icon: "/img/logos/github.svg", + icon: GitHubIcon, }, { text: "GraphQL Specification", href: "https://spec.graphql.org" }, { text: "Libraries & Tools", href: "/code/" }, @@ -45,17 +50,17 @@ const getLinks = (sourcePath?: string): FooterLinks[] => [ { text: "@graphql", href: "https://twitter.com/graphql", - icon: "/img/logos/twitter.svg", + icon: TwitterIcon, }, { text: "Discord", href: "https://discord.graphql.org/", - icon: "/img/logos/discord.svg", + icon: DiscordIcon, }, { text: "Stack Overflow", href: "http://stackoverflow.com/questions/tagged/graphql", - icon: "/img/logos/stackoverflow.svg", + icon: StackOverflowIcon, }, { text: "Resources", href: "/community/users/" }, { text: "Events", href: "/community/upcoming-events/" }, @@ -76,7 +81,7 @@ const getLinks = (sourcePath?: string): FooterLinks[] => [ href: "https://github.com/graphql/graphql.github.io/edit/source/" + sourcePath, - icon: "/img/edit.svg", + icon: EditIcon, }, ].filter(Boolean) as LinkItem[], }, @@ -97,9 +102,10 @@ const Footer = ({ sourcePath }: { sourcePath?: string }) => { {section.text} )}

- {section.subsections.map((subsection: any, i) => ( - - {subsection.icon && } + {section.subsections.map((subsection, i) => ( + + {/* @ts-ignore */} + {subsection.icon && } {subsection.text} ))} @@ -108,13 +114,11 @@ const Footer = ({ sourcePath }: { sourcePath?: string }) => {
Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation. - All rights reserved.
+ All rights reserved. +
For web site terms of use, trademark policy and general project policies please see  - + https://lfprojects.org . diff --git a/src/pages/foundation/members.tsx b/src/pages/foundation/members.tsx index b7e61f9e8a..d21aef0ad7 100644 --- a/src/pages/foundation/members.tsx +++ b/src/pages/foundation/members.tsx @@ -9,7 +9,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => { pageContext={pageContext} >
-
+

GraphQL Foundation members

The GraphQL Foundation is the primary way diff --git a/src/pages/users.tsx b/src/pages/users.tsx index 7a7c54816c..530d6171e4 100644 --- a/src/pages/users.tsx +++ b/src/pages/users.tsx @@ -7,7 +7,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => { return (

-
+

Who’s using GraphQL?

GraphQL is used by teams of all sizes in many different environments From 296cd6c0584e2e62186c0176551fed65c58b17c3 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Mon, 3 Apr 2023 17:11:17 +0200 Subject: [PATCH 2/2] Update src/components/Footer/index.tsx --- src/components/Footer/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 56e584f136..f3bcbe1f6f 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -104,7 +104,6 @@ const Footer = ({ sourcePath }: { sourcePath?: string }) => {

{section.subsections.map((subsection, i) => ( - {/* @ts-ignore */} {subsection.icon && } {subsection.text}