From 0f5662dd0f8b1a04f0068ac5447dbba5579bfb07 Mon Sep 17 00:00:00 2001 From: davidjgoss Date: Tue, 17 Dec 2024 22:07:45 +0000 Subject: [PATCH] Improved homepage (conservative) (#47) --- docusaurus.config.ts | 4 + package-lock.json | 136 +++++++++++++++++++++++-- package.json | 1 + src/components/Hero/Hero.module.scss | 28 ++--- src/components/Hero/Hero.tsx | 38 +++++-- src/components/Intro/Intro.module.scss | 7 +- src/components/Intro/Intro.tsx | 21 ++-- src/components/Intro/feature.ts | 20 ++-- 8 files changed, 196 insertions(+), 59 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 62722844..97bffc52 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -1,5 +1,6 @@ import { Config } from '@docusaurus/types' import { themes } from 'prism-react-renderer' +import { globbySync } from 'globby' import YAML from 'yaml' import { readFileSync } from 'node:fs' @@ -12,6 +13,8 @@ const darkCodeTheme = { }, } +const platformsCount = globbySync('docs/installation/*.md').length + export default { title: 'Cucumber', tagline: 'lets you write automated tests in plain language', @@ -134,6 +137,7 @@ export default { }, plugins: ['docusaurus-plugin-sass'], customFields: { + platformsCount, versions: YAML.parse(readFileSync('./versions.yaml', { encoding: 'utf-8' })), }, } satisfies Config diff --git a/package-lock.json b/package-lock.json index f7382ff8..3c0217e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "@docusaurus/types": "^3.1.1", "@tsconfig/docusaurus": "2.0.3", "@types/lodash.sortby": "^4.7.9", + "globby": "^14.0.2", "prettier": "^3.4.2", "yaml": "^2.6.1" }, @@ -3778,6 +3779,26 @@ "node": ">=18.0" } }, + "node_modules/@docusaurus/utils/node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "license": "MIT", + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -4034,6 +4055,19 @@ "url": "https://github.com/sindresorhus/is?sponsor=1" } }, + "node_modules/@sindresorhus/merge-streams": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz", + "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@slorber/remark-comment": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@slorber/remark-comment/-/remark-comment-1.0.0.tgz", @@ -5113,6 +5147,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "license": "MIT", "engines": { "node": ">=8" } @@ -6738,6 +6773,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/del/node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "license": "MIT", + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -8026,19 +8081,47 @@ } }, "node_modules/globby": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", - "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz", + "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==", + "dev": true, + "license": "MIT", "dependencies": { - "array-union": "^2.1.0", - "dir-glob": "^3.0.1", - "fast-glob": "^3.2.9", - "ignore": "^5.2.0", - "merge2": "^1.4.1", - "slash": "^3.0.0" + "@sindresorhus/merge-streams": "^2.1.0", + "fast-glob": "^3.3.2", + "ignore": "^5.2.4", + "path-type": "^5.0.0", + "slash": "^5.1.0", + "unicorn-magic": "^0.1.0" }, "engines": { - "node": ">=10" + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/globby/node_modules/path-type": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz", + "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/globby/node_modules/slash": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.16" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -14065,6 +14148,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/react-dev-utils/node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "license": "MIT", + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/react-dev-utils/node_modules/loader-utils": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz", @@ -16006,6 +16109,19 @@ "node": ">=4" } }, + "node_modules/unicorn-magic": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz", + "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/unified": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz", diff --git a/package.json b/package.json index 431b4d4c..edaac21b 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@tsconfig/docusaurus": "2.0.3", "@types/lodash.sortby": "^4.7.9", "prettier": "^3.4.2", + "globby": "^14.0.2", "yaml": "^2.6.1" }, "browserslist": { diff --git a/src/components/Hero/Hero.module.scss b/src/components/Hero/Hero.module.scss index 100cb556..c4c3de97 100644 --- a/src/components/Hero/Hero.module.scss +++ b/src/components/Hero/Hero.module.scss @@ -1,28 +1,18 @@ -.backdrop { - padding: 6rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -.title { - font-size: 4.5rem; - font-weight: 300; - line-height: 1em; -} - .ctas { display: flex; align-items: center; justify-content: center; + gap: 16px; } -@media screen and (max-width: 996px) { - .backdrop { - padding: 2rem; - } +.platforms { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; - .title { - font-size: 3rem; + img { + max-width: 24px; + max-height: 24px; } } diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx index 572a1c9a..aa9806ca 100644 --- a/src/components/Hero/Hero.tsx +++ b/src/components/Hero/Hero.tsx @@ -1,22 +1,44 @@ import React, { FC } from 'react' import clsx from 'clsx' import Link from '@docusaurus/Link' +import useDocusaurusContext from '@docusaurus/useDocusaurusContext' import styles from './Hero.module.scss' export const Hero: FC = () => { + const { siteConfig } = useDocusaurusContext() + const platformsCount = siteConfig.customFields['platformsCount'] as number return ( -
-
-

- Cucumber - lets you write -
- automated tests in plain language +
+
+

+ Cucumber  + + lets you write +
+ automated tests in plain language +

-
+
Get Started + + Join the Community + +
+

+ Cucumber is a tool for running automated acceptance tests, written in{' '} + plain language. Because they're written in plain language, they can be + read by anyone on your team, improving communication,{' '} + collaboration and trust. +

+
+ + + + + + +{platformsCount - 4} more platforms
diff --git a/src/components/Intro/Intro.module.scss b/src/components/Intro/Intro.module.scss index 9b9fe40a..38abfe32 100644 --- a/src/components/Intro/Intro.module.scss +++ b/src/components/Intro/Intro.module.scss @@ -1,4 +1,5 @@ -.introRow { - align-items: center; - justify-content: center; +.example { + max-width: 45rem; + margin: 0 auto; + font-size: 1.125rem; } diff --git a/src/components/Intro/Intro.tsx b/src/components/Intro/Intro.tsx index ef721a8d..6054de03 100644 --- a/src/components/Intro/Intro.tsx +++ b/src/components/Intro/Intro.tsx @@ -3,23 +3,22 @@ import clsx from 'clsx' import CodeBlock from '@theme/CodeBlock' import { feature } from './feature' import styles from './Intro.module.scss' +import Link from '@docusaurus/Link' export const Intro: FC = () => { return ( -
-
-

- Cucumber is a tool for running automated acceptance tests, written in{' '} - plain language. Because they're written in plain language, they can be - read by anyone on your team, improving communication,{' '} - collaboration and trust. -

-
-
- +
+
+ {feature}
+
+

Got 10 minutes?

+ + Take the Tutorial + +
) } diff --git a/src/components/Intro/feature.ts b/src/components/Intro/feature.ts index 59cef9d7..51efc4ef 100644 --- a/src/components/Intro/feature.ts +++ b/src/components/Intro/feature.ts @@ -1,10 +1,14 @@ -export const feature = `@tag -Feature: Eating too many cucumbers may not be good for you +export const feature = `Feature: Withdrawing cash - Eating too much of anything may not be good for you - - Scenario: Eating a few is no problem - Given Alice is hungry - When she eats 3 cucumbers - Then she will be full + Rule: Customers cannot withdraw more than their balance + + Scenario: Successful withdrawal within balance + Given Alice has $234.56 in their account + When Alice tries to withdraw $200.00 + Then the withdrawal is successful + + Scenario: Declined withdrawal in excess of balance + Given Hamza has $198.76 in their account + When Hamza tries to withdraw $200.00 + Then the withdrawal is declined `