From c0d7e00a6edec3e9e050c91950bf96ef52fa4ed0 Mon Sep 17 00:00:00 2001 From: David Goss Date: Thu, 30 Nov 2023 14:52:05 +0000 Subject: [PATCH 1/5] add link in top nav --- docusaurus.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docusaurus.config.js b/docusaurus.config.js index f4b5912..8fae8fe 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -67,6 +67,11 @@ const config = { label: 'Documentation', position: 'left' }, + { + to: '/sponsors', + label: 'Sponsor', + position: 'left' + }, { href: 'https://github.com/cucumber', label: 'GitHub', From 13c79778a49cf95707c41f5f36fa0a1decb8625f Mon Sep 17 00:00:00 2001 From: David Goss Date: Wed, 6 Dec 2023 12:51:06 +0000 Subject: [PATCH 2/5] wip sponsors page --- src/pages/sponsors.module.scss | 30 +++++++++++++++ src/pages/sponsors.tsx | 69 ++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+) create mode 100644 src/pages/sponsors.module.scss create mode 100644 src/pages/sponsors.tsx diff --git a/src/pages/sponsors.module.scss b/src/pages/sponsors.module.scss new file mode 100644 index 0000000..346cde1 --- /dev/null +++ b/src/pages/sponsors.module.scss @@ -0,0 +1,30 @@ +.tiersList { + display: flex; + list-style: none; + gap: 1rem; +} + +.tiersItem { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 25%; + padding: 2rem; + border: 1px solid var(--ifm-color-secondary); +} + +.tiersAmount { + font-weight: 300; + font-size: 2.5rem; + line-height: 1em; +} + +.tiersFrequency { + color: var(--ifm-color-secondary-darkest); + font-size: 0.875rem; + margin-left: 0.25em; +} + +.tiersTitle { + margin-top: 0.5rem; +} diff --git a/src/pages/sponsors.tsx b/src/pages/sponsors.tsx new file mode 100644 index 0000000..763baed --- /dev/null +++ b/src/pages/sponsors.tsx @@ -0,0 +1,69 @@ +import React, {FC} from "react"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import styles from './sponsors.module.scss' + +const numberFormat = new Intl.NumberFormat("en", { style: "currency", currency: "USD", maximumFractionDigits: 0 }) + +const tiers = [ + { + title: 'Individual', + description: 'For individuals who want to keep the community healthy', + amount: 5, + url: 'https://opencollective.com/cucumber/contribute/monthly-backers-182/checkout' + }, + { + title: 'Bronze', + description: 'For small organisations', + amount: 100, + url: 'https://opencollective.com/cucumber/contribute/bronze-sponsors-181/checkout' + }, + { + title: 'Silver', + description: 'For organisations of more than 50 people', + amount: 250, + url: 'https://opencollective.com/cucumber/contribute/silver-sponsors-3222/checkout' + }, + { + title: 'Gold', + description: 'For organisations of more than 100 people', + amount: 500, + url: 'https://opencollective.com/cucumber/contribute/gold-sponsors-3224/checkout' + } +] as const + +const Tiers: FC = () => { + return
    + {tiers.map(tier => { + return
  1. +
    + {numberFormat.format(tier.amount)} + monthly +

    {tier.title}

    +

    {tier.description}

    +
    + + Sponsor now + +
    2. + })} +
+} + +export default function Sponsors() { + return +
+
+

Sponsor Cucumber

+

The Cucumber project has no full-time staff or big commercial backer — our tools are mostly maintained by volunteers, in their spare time. Sponsorship from individuals and companies helps keep the project healthy.

+
+
+ +
+

Or, you can always make a one-time donation:

+ Donate now +
+
+
+ +} From d745c678096b11a0af19b7cef7780a97c8fac589 Mon Sep 17 00:00:00 2001 From: David Goss Date: Thu, 7 Dec 2023 22:40:54 +0000 Subject: [PATCH 3/5] expand on sponsor content --- src/css/custom.scss | 6 +++ src/pages/sponsors.module.scss | 32 ++++++++++-- src/pages/sponsors.tsx | 55 +++++++++++++++----- static/img/illustrations/admin.svg | 81 ++++++++++++++++++++++++++++++ static/img/illustrations/code.svg | 1 + static/img/illustrations/docs.svg | 1 + 6 files changed, 161 insertions(+), 15 deletions(-) create mode 100644 static/img/illustrations/admin.svg create mode 100644 static/img/illustrations/code.svg create mode 100644 static/img/illustrations/docs.svg diff --git a/src/css/custom.scss b/src/css/custom.scss index 8a57eaa..183060a 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -18,6 +18,12 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } +.readable-blurb { + max-width: 50rem; + margin-left: auto; + margin-right: auto; +} + .footer__copyright { font-size: 0.75rem; line-height: 1em; diff --git a/src/pages/sponsors.module.scss b/src/pages/sponsors.module.scss index 346cde1..97d73c0 100644 --- a/src/pages/sponsors.module.scss +++ b/src/pages/sponsors.module.scss @@ -1,30 +1,56 @@ .tiersList { display: flex; list-style: none; - gap: 1rem; + padding: 0; + margin: -0.5rem; } .tiersItem { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; - width: 25%; + width: calc(25% - 1rem); padding: 2rem; border: 1px solid var(--ifm-color-secondary); + margin: 0.5rem; +} + +@media all and (max-width: 799px) { + .tiersList { + flex-wrap: wrap; + } + + .tiersItem { + width: calc(50% - 1rem); + } +} + +@media all and (max-width: 499px) { + + .tiersItem { + width: 100%; + } } .tiersAmount { + display: block; font-weight: 300; font-size: 2.5rem; line-height: 1em; } .tiersFrequency { + display: block; color: var(--ifm-color-secondary-darkest); font-size: 0.875rem; - margin-left: 0.25em; } .tiersTitle { margin-top: 0.5rem; } + +.reasonIllustration { + max-width: 80%; + max-height: 150px; +} diff --git a/src/pages/sponsors.tsx b/src/pages/sponsors.tsx index 763baed..720e02f 100644 --- a/src/pages/sponsors.tsx +++ b/src/pages/sponsors.tsx @@ -2,33 +2,38 @@ import React, {FC} from "react"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import styles from './sponsors.module.scss' +import clsx from "clsx"; const numberFormat = new Intl.NumberFormat("en", { style: "currency", currency: "USD", maximumFractionDigits: 0 }) const tiers = [ { title: 'Individual', - description: 'For individuals who want to keep the community healthy', + description: 'For individuals who want to support the project', amount: 5, - url: 'https://opencollective.com/cucumber/contribute/monthly-backers-182/checkout' + url: 'https://opencollective.com/cucumber/contribute/monthly-backers-182/checkout', + from: true }, { title: 'Bronze', - description: 'For small organisations', + description: 'For small organisations; our most popular tier', amount: 100, - url: 'https://opencollective.com/cucumber/contribute/bronze-sponsors-181/checkout' + url: 'https://opencollective.com/cucumber/contribute/bronze-sponsors-181/checkout', + from: false }, { title: 'Silver', description: 'For organisations of more than 50 people', amount: 250, - url: 'https://opencollective.com/cucumber/contribute/silver-sponsors-3222/checkout' + url: 'https://opencollective.com/cucumber/contribute/silver-sponsors-3222/checkout', + from: false }, { title: 'Gold', description: 'For organisations of more than 100 people', amount: 500, - url: 'https://opencollective.com/cucumber/contribute/gold-sponsors-3224/checkout' + url: 'https://opencollective.com/cucumber/contribute/gold-sponsors-3224/checkout', + from: false } ] as const @@ -38,12 +43,12 @@ const Tiers: FC = () => { return
  • {numberFormat.format(tier.amount)} - monthly + {tier.from && 'or above, '}monthly

    {tier.title}

    {tier.description}

    - Sponsor now + Sponsor
    • })} @@ -53,15 +58,41 @@ const Tiers: FC = () => { export default function Sponsors() { return
    -
    +

    Sponsor Cucumber

    The Cucumber project has no full-time staff or big commercial backer — our tools are mostly maintained by volunteers, in their spare time. Sponsorship from individuals and companies helps keep the project healthy.

    - +
    +

    If you can, we'd love for you to commit a regular amount to support Cucumber:

    + +
    -

    Or, you can always make a one-time donation:

    - Donate now +

    Or, you can always make a one-time donation:

    +

    + Donate +

    +
    +
    +
    +

    Why sponsor?

    +

    Your sponsorship will directly contribute to the core team's most important and impactful work:

    +
    +
    + +

    Boring stuff

    +

    Releases, security, bug fixes, issue triage. Domains, hosting, tools, admin. Unglamorous but essential.

    +
    +
    + +

    Extensibility

    +

    Adapting our architecture so you can extend and augment Cucumber for whatever you need.

    +
    +
    + +

    Documentation

    +

    Expanding and improving the docs so it's as easy as possible for people to be successful with Cucumber.

    +
    diff --git a/static/img/illustrations/admin.svg b/static/img/illustrations/admin.svg new file mode 100644 index 0000000..9240024 --- /dev/null +++ b/static/img/illustrations/admin.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/illustrations/code.svg b/static/img/illustrations/code.svg new file mode 100644 index 0000000..d8fbc36 --- /dev/null +++ b/static/img/illustrations/code.svg @@ -0,0 +1 @@ + diff --git a/static/img/illustrations/docs.svg b/static/img/illustrations/docs.svg new file mode 100644 index 0000000..efbaafe --- /dev/null +++ b/static/img/illustrations/docs.svg @@ -0,0 +1 @@ + From 2da3f9f3ec90d43c1b6d4b8683dd6b37b9864308 Mon Sep 17 00:00:00 2001 From: David Goss Date: Sat, 9 Dec 2023 19:45:31 +0000 Subject: [PATCH 4/5] amendments --- src/css/custom.scss | 2 +- src/pages/sponsors.tsx | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/css/custom.scss b/src/css/custom.scss index 183060a..e8346f8 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -19,7 +19,7 @@ } .readable-blurb { - max-width: 50rem; + max-width: 60rem; margin-left: auto; margin-right: auto; } diff --git a/src/pages/sponsors.tsx b/src/pages/sponsors.tsx index 720e02f..8cc358a 100644 --- a/src/pages/sponsors.tsx +++ b/src/pages/sponsors.tsx @@ -60,15 +60,17 @@ export default function Sponsors() {

    Sponsor Cucumber

    -

    The Cucumber project has no full-time staff or big commercial backer — our tools are mostly maintained by volunteers, in their spare time. Sponsorship from individuals and companies helps keep the project healthy.

    +

    Cucumber was downloaded over 100 million times in 2023.

    +

    Thousands of companies rely on Cucumber tests to validate their software. We are a team of volunteers who maintain the core Gherkin parser, the Java, Ruby, JavaScript and Go flavoured implementations of Cucumber. That's a lot of work!

    +

    Your sponsorship ensures the team can get paid for their time, and ensures Cucumber will remain a reliable and fun way to test your software for years to come.

    -

    If you can, we'd love for you to commit a regular amount to support Cucumber:

    +

    If you can, we'd love for you to commit a regular amount to support Cucumber

    -

    Or, you can always make a one-time donation:

    +

    Or, you can always make a one-time donation

    Donate

    @@ -86,7 +88,7 @@ export default function Sponsors() {

    Extensibility

    -

    Adapting our architecture so you can extend and augment Cucumber for whatever you need.

    +

    Adapting our architecture so you - and other tools you love - can extend Cucumber for whatever you need.

    From edfc3f024def67d6fc313eaf8c8a47c930babaa3 Mon Sep 17 00:00:00 2001 From: David Goss Date: Sat, 9 Dec 2023 19:49:14 +0000 Subject: [PATCH 5/5] add redirect for continuity with old site --- netlify.toml | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 netlify.toml diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..2a70909 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,4 @@ +[[redirects]] + from = "/tools/cucumber-open/sponsors" + to = "/sponsors" + status = 301