From 03f5fa7fed11ca8f928a5090b866cdf13459ffb7 Mon Sep 17 00:00:00 2001 From: TuvalSimha Date: Tue, 2 May 2023 17:35:02 +0300 Subject: [PATCH 1/2] Add `Sponsors` section to conf page Signed-off-by: TuvalSimha --- src/assets/css/_css/brand.less | 9 +++++ src/components/Conf/Sponers/index.tsx | 57 +++++++++++++++++++++++++++ src/pages/conf/index.tsx | 2 + static/img/conf/Sponsors/Postman.svg | 1 + static/img/conf/Sponsors/Stellate.svg | 1 + 5 files changed, 70 insertions(+) create mode 100644 src/components/Conf/Sponers/index.tsx create mode 100644 static/img/conf/Sponsors/Postman.svg create mode 100644 static/img/conf/Sponsors/Stellate.svg diff --git a/src/assets/css/_css/brand.less b/src/assets/css/_css/brand.less index 0826c9c92a..28e5502d68 100644 --- a/src/assets/css/_css/brand.less +++ b/src/assets/css/_css/brand.less @@ -257,4 +257,13 @@ .conf-style { font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; + .zoom { + transition: transform .2s; /* Animation */ + width: 200px; + height: 200px; + } + + .zoom:hover { + transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ + } } \ No newline at end of file diff --git a/src/components/Conf/Sponers/index.tsx b/src/components/Conf/Sponers/index.tsx new file mode 100644 index 0000000000..b8eac593a9 --- /dev/null +++ b/src/components/Conf/Sponers/index.tsx @@ -0,0 +1,57 @@ +import React from "react" +import { ReactComponent as Stellate } from "../../../../static/img/conf/Sponsors/Stellate.svg" +import { ReactComponent as Postman } from "../../../../static/img/conf/Sponsors/Postman.svg" + +interface Image { + iconPath: string + name: string + link: string +} + +const imagesSilver: Image[] = [ + { + iconPath: Stellate, + name: "Stellate", + link: "https://stellate.co/", + }, + { + iconPath: Postman, + name: "Postman", + link: "https://www.postman.com/", + }, +] + +const SponsersConf = () => { + return ( +
+

+ Sponsors +

+

+ SILVER +

+
+ {imagesSilver + .sort(function (a, b) { + if (a.name < b.name) { + return -1 + } + if (a.name > b.name) { + return 1 + } + return 0 + }) + .map(image => ( + // eslint-disable-next-line tailwindcss/no-custom-classname +
+ + + +
+ ))} +
+
+ ) +} + +export default SponsersConf diff --git a/src/pages/conf/index.tsx b/src/pages/conf/index.tsx index d75d63489a..d73080426d 100644 --- a/src/pages/conf/index.tsx +++ b/src/pages/conf/index.tsx @@ -11,6 +11,7 @@ import SFConf from "../../components/Conf/SF" import ScheduleGlanceConf from "../../components/Conf/Schedule" import SeoConf, { defaults as seoDefaults } from "../../components/Conf/Seo" import { CalendarIcon, GlobeIcon } from "@radix-ui/react-icons" +import SponsersConf from "../../components/Conf/Sponers" export default () => { return ( @@ -50,6 +51,7 @@ export default () => { + ) diff --git a/static/img/conf/Sponsors/Postman.svg b/static/img/conf/Sponsors/Postman.svg new file mode 100644 index 0000000000..33f93878a1 --- /dev/null +++ b/static/img/conf/Sponsors/Postman.svg @@ -0,0 +1 @@ +pm-orange-logo-horiz.svg \ No newline at end of file diff --git a/static/img/conf/Sponsors/Stellate.svg b/static/img/conf/Sponsors/Stellate.svg new file mode 100644 index 0000000000..a51a6de09e --- /dev/null +++ b/static/img/conf/Sponsors/Stellate.svg @@ -0,0 +1 @@ +Stellate Wordmark Blue.svg \ No newline at end of file From 373bf38cb5703dac386f66886e12b6dee2d86756 Mon Sep 17 00:00:00 2001 From: TuvalSimha Date: Wed, 3 May 2023 12:58:38 +0300 Subject: [PATCH 2/2] new requested Signed-off-by: TuvalSimha --- src/assets/css/_css/brand.less | 29 ++++++-- src/components/Conf/Footer/index.tsx | 95 +++++++++++++----------- src/components/Conf/Sponers/index.tsx | 103 +++++++++++++++++++------- src/pages/conf/index.tsx | 2 - static/img/conf/Sponsors/Solo.svg | 1 + 5 files changed, 153 insertions(+), 77 deletions(-) create mode 100644 static/img/conf/Sponsors/Solo.svg diff --git a/src/assets/css/_css/brand.less b/src/assets/css/_css/brand.less index 28e5502d68..315b618169 100644 --- a/src/assets/css/_css/brand.less +++ b/src/assets/css/_css/brand.less @@ -257,13 +257,32 @@ .conf-style { font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif; - .zoom { + .zoom-diamond { transition: transform .2s; /* Animation */ - width: 200px; - height: 200px; + 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: 299px; + 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-silver { + transition: transform .2s; /* Animation */ + width: 208px; + height: 106px; + cursor: pointer; } - .zoom:hover { - transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ + .zoom-silver:hover { + transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } } \ No newline at end of file diff --git a/src/components/Conf/Footer/index.tsx b/src/components/Conf/Footer/index.tsx index f98c113bd0..b0a99204fe 100644 --- a/src/components/Conf/Footer/index.tsx +++ b/src/components/Conf/Footer/index.tsx @@ -1,5 +1,6 @@ import React from "react" import SocialIcons from "../SocialIcons" +import SponsersConf from "../Sponers" const links = [ [ @@ -24,52 +25,58 @@ const links = [ const FooterConf = () => { return ( -
-
-
- - - -
-
- {links.map((link, i) => ( -
-
- {link.map((link, i) => ( -
  • - - {link.text} - -
    • - ))} + <> + +
    +
    +
    + + + +
    +
    + {links.map((link, i) => ( +
    +
    + {link.map((link, i) => ( +
  • + + {link.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 + + . +

    + + +
    -
    -
    -

    - 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 - - . -

    - - - -
    -
    + + ) } diff --git a/src/components/Conf/Sponers/index.tsx b/src/components/Conf/Sponers/index.tsx index b8eac593a9..55553d93c5 100644 --- a/src/components/Conf/Sponers/index.tsx +++ b/src/components/Conf/Sponers/index.tsx @@ -1,6 +1,8 @@ +/* eslint-disable tailwindcss/no-custom-classname */ import React from "react" import { ReactComponent as Stellate } from "../../../../static/img/conf/Sponsors/Stellate.svg" import { ReactComponent as Postman } from "../../../../static/img/conf/Sponsors/Postman.svg" +import { ReactComponent as Solo } from "../../../../static/img/conf/Sponsors/Solo.svg" interface Image { iconPath: string @@ -8,12 +10,17 @@ interface Image { link: string } -const imagesSilver: Image[] = [ - { - iconPath: Stellate, - name: "Stellate", - link: "https://stellate.co/", - }, +function alphabetSort(a: Image, b: Image) { + if (a.name < b.name) { + return -1 + } + if (a.name > b.name) { + return 1 + } + return 0 +} + +const sponsorDiamond: Image[] = [ { iconPath: Postman, name: "Postman", @@ -21,33 +28,77 @@ const imagesSilver: Image[] = [ }, ] +const sponsorPlatinum: Image[] = [ + { + iconPath: Solo, + name: "Solo.io", + link: "https://www.solo.io/", + }, +] + +const sponsorSilver: Image[] = [ + { + iconPath: Stellate, + name: "Stellate", + link: "https://stellate.co/", + }, +] + const SponsersConf = () => { return ( -
    +

    Sponsors

    -

    +

    + DIAMOND +

    +
    + {sponsorDiamond + .sort((a, b) => alphabetSort(a, b)) + .map((sponsor, i) => ( + + + + ))} +
    +

    + PLATINUM +

    +
    + {sponsorPlatinum + .sort((a, b) => alphabetSort(a, b)) + .map((sponsor, i) => ( + + + + ))} +
    +

    SILVER

    -
    - {imagesSilver - .sort(function (a, b) { - if (a.name < b.name) { - return -1 - } - if (a.name > b.name) { - return 1 - } - return 0 - }) - .map(image => ( - // eslint-disable-next-line tailwindcss/no-custom-classname -
    - - - -
    +
    + {sponsorSilver + .sort((a, b) => alphabetSort(a, b)) + .map((sponsor, i) => ( + + + ))}
    diff --git a/src/pages/conf/index.tsx b/src/pages/conf/index.tsx index d73080426d..d75d63489a 100644 --- a/src/pages/conf/index.tsx +++ b/src/pages/conf/index.tsx @@ -11,7 +11,6 @@ import SFConf from "../../components/Conf/SF" import ScheduleGlanceConf from "../../components/Conf/Schedule" import SeoConf, { defaults as seoDefaults } from "../../components/Conf/Seo" import { CalendarIcon, GlobeIcon } from "@radix-ui/react-icons" -import SponsersConf from "../../components/Conf/Sponers" export default () => { return ( @@ -51,7 +50,6 @@ export default () => { - ) diff --git a/static/img/conf/Sponsors/Solo.svg b/static/img/conf/Sponsors/Solo.svg new file mode 100644 index 0000000000..8eb78f63a9 --- /dev/null +++ b/static/img/conf/Sponsors/Solo.svg @@ -0,0 +1 @@ +solo.io-svg-1.svg \ No newline at end of file