From 9890a0f06337a0c57971b47492ae68b3d292101f Mon Sep 17 00:00:00 2001 From: htessaro Date: Mon, 23 Jun 2025 14:54:27 -0300 Subject: [PATCH 1/2] chore: first commit new doc version --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 95fd2615de3a..26345a543ea2 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ # [Flagsmith](https://flagsmith.com/) is an Open-Source Feature Flagging Tool to Ship Faster & Control Releases -Change the way your team releases software. Roll out, segment, and optimise—with granular control. Stay secure with on-premise and private cloud hosting. +Change the way your team releases software. Roll out, segment, and optimise—with granular control. Stay secure with on-premise and private cloud hosting. * Feature flags: Release features behind the safety of a feature flag * Make changes remotely: Easily toggle individual features on and off, and make changes without deploying new code From caf39f0b242aa5b18cba1e05bf9ca4268dd8ef17 Mon Sep 17 00:00:00 2001 From: lucaspr2 Date: Fri, 15 Aug 2025 16:02:27 -0300 Subject: [PATCH 2/2] Merge branch 'Flagsmith:main' into homepage (cherry picked from commit ac54bd2acd201f24082869a02f4806822f404b03) --- docs/docs/index.md | 2 +- docs/package-lock.json | 313 +++++++++++++++++++ docs/package.json | 2 + docs/src/components/Card/CardBody/index.js | 44 +++ docs/src/components/Card/CardFooter/index.js | 44 +++ docs/src/components/Card/CardHeader/index.js | 16 + docs/src/components/Card/CardImage/index.js | 20 ++ docs/src/components/Card/index.js | 16 + docs/src/css/custom.css | 234 +++++++++++++- docs/src/pages/index.module.css | 232 +++++++++++++- docs/src/pages/index.tsx | 166 ++++++++++ docs/static/img/full-logo.svg | 20 ++ 12 files changed, 1088 insertions(+), 21 deletions(-) create mode 100644 docs/src/components/Card/CardBody/index.js create mode 100644 docs/src/components/Card/CardFooter/index.js create mode 100644 docs/src/components/Card/CardHeader/index.js create mode 100644 docs/src/components/Card/CardImage/index.js create mode 100644 docs/src/components/Card/index.js create mode 100644 docs/src/pages/index.tsx create mode 100644 docs/static/img/full-logo.svg diff --git a/docs/docs/index.md b/docs/docs/index.md index 682ebc14fd2c..264f373a61e5 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -1,6 +1,6 @@ --- id: intro -slug: / +slug: /docs title: Welcome to the Flagsmith Docs sidebar_position: 1 sidebar_label: Overview diff --git a/docs/package-lock.json b/docs/package-lock.json index 0215ddffb5f2..0d210690c3ee 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -13,10 +13,12 @@ "@docusaurus/plugin-google-tag-manager": "^3.6.3", "@docusaurus/preset-classic": "^3.6.3", "@docusaurus/theme-mermaid": "^3.6.3", + "@ionic/react": "^8.5.7", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", "docusaurus-plugin-openapi-docs": "^4.2.0", "docusaurus-theme-openapi-docs": "^4.2.0", + "ionicons": "^8.0.8", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", @@ -4033,6 +4035,50 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@ionic/core": { + "version": "8.5.7", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.7.tgz", + "integrity": "sha512-V5ZRYXD1MgAPdjfLyOejILAdTqIzpMY7/v6GSynFPPWoEpfFbGe/tNsimrYm1/D8iouigYLkJjWSeg2rpIpESA==", + "license": "MIT", + "dependencies": { + "@stencil/core": "4.20.0", + "ionicons": "^7.2.2", + "tslib": "^2.1.0" + } + }, + "node_modules/@ionic/core/node_modules/ionicons": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz", + "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.0.3" + } + }, + "node_modules/@ionic/react": { + "version": "8.5.7", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.5.7.tgz", + "integrity": "sha512-AgX4iu6SfuBhNgYr0H+K3oGsp7ESkCsnaqZdHRO2+GtKTmo4akMrFPihGj4LrZB/IaYwcvYQR/bPWHuZGJYsnw==", + "license": "MIT", + "dependencies": { + "@ionic/core": "8.5.7", + "ionicons": "^7.0.0", + "tslib": "*" + }, + "peerDependencies": { + "react": ">=16.8.6", + "react-dom": ">=16.8.6" + } + }, + "node_modules/@ionic/react/node_modules/ionicons": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz", + "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.0.3" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -4676,6 +4722,110 @@ } } }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", + "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", + "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", + "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", + "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", + "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", + "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", + "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", + "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -4720,6 +4870,19 @@ "micromark-util-symbol": "^1.0.1" } }, + "node_modules/@stencil/core": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz", + "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + } + }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", @@ -12140,6 +12303,38 @@ "loose-envify": "^1.0.0" } }, + "node_modules/ionicons": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.8.tgz", + "integrity": "sha512-CRHhDQA5vsNxC7raeEPqddgO90iR2F13VZS7hB0Vx7JrxJMM2060E3ddgYbpMQNJjzeBsgpkNwdBeK5qQ7RbLA==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.30.0" + } + }, + "node_modules/ionicons/node_modules/@stencil/core": { + "version": "4.31.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.31.0.tgz", + "integrity": "sha512-Ei9MFJ6LPD9BMFs+klkHylbVOOYhG10Jv4bvoFf3GMH15kA41rSYkEdr4DiX84ZdErQE2qtFV/2SUyWoXh0AhA==", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.34.9", + "@rollup/rollup-darwin-x64": "4.34.9", + "@rollup/rollup-linux-arm64-gnu": "4.34.9", + "@rollup/rollup-linux-arm64-musl": "4.34.9", + "@rollup/rollup-linux-x64-gnu": "4.34.9", + "@rollup/rollup-linux-x64-musl": "4.34.9", + "@rollup/rollup-win32-arm64-msvc": "4.34.9", + "@rollup/rollup-win32-x64-msvc": "4.34.9" + } + }, "node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", @@ -25173,6 +25368,46 @@ } } }, + "@ionic/core": { + "version": "8.5.7", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.5.7.tgz", + "integrity": "sha512-V5ZRYXD1MgAPdjfLyOejILAdTqIzpMY7/v6GSynFPPWoEpfFbGe/tNsimrYm1/D8iouigYLkJjWSeg2rpIpESA==", + "requires": { + "@stencil/core": "4.20.0", + "ionicons": "^7.2.2", + "tslib": "^2.1.0" + }, + "dependencies": { + "ionicons": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz", + "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==", + "requires": { + "@stencil/core": "^4.0.3" + } + } + } + }, + "@ionic/react": { + "version": "8.5.7", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.5.7.tgz", + "integrity": "sha512-AgX4iu6SfuBhNgYr0H+K3oGsp7ESkCsnaqZdHRO2+GtKTmo4akMrFPihGj4LrZB/IaYwcvYQR/bPWHuZGJYsnw==", + "requires": { + "@ionic/core": "8.5.7", + "ionicons": "^7.0.0", + "tslib": "*" + }, + "dependencies": { + "ionicons": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz", + "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==", + "requires": { + "@stencil/core": "^4.0.3" + } + } + } + }, "@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -25556,6 +25791,54 @@ "reselect": "^4.1.8" } }, + "@rollup/rollup-darwin-arm64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", + "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "optional": true + }, + "@rollup/rollup-darwin-x64": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", + "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "optional": true + }, + "@rollup/rollup-linux-arm64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", + "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "optional": true + }, + "@rollup/rollup-linux-arm64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", + "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "optional": true + }, + "@rollup/rollup-linux-x64-gnu": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", + "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "optional": true + }, + "@rollup/rollup-linux-x64-musl": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", + "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "optional": true + }, + "@rollup/rollup-win32-arm64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", + "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "optional": true + }, + "@rollup/rollup-win32-x64-msvc": { + "version": "4.34.9", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", + "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "optional": true + }, "@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -25594,6 +25877,11 @@ "micromark-util-symbol": "^1.0.1" } }, + "@stencil/core": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz", + "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", @@ -30973,6 +31261,31 @@ "loose-envify": "^1.0.0" } }, + "ionicons": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.8.tgz", + "integrity": "sha512-CRHhDQA5vsNxC7raeEPqddgO90iR2F13VZS7hB0Vx7JrxJMM2060E3ddgYbpMQNJjzeBsgpkNwdBeK5qQ7RbLA==", + "requires": { + "@stencil/core": "^4.30.0" + }, + "dependencies": { + "@stencil/core": { + "version": "4.31.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.31.0.tgz", + "integrity": "sha512-Ei9MFJ6LPD9BMFs+klkHylbVOOYhG10Jv4bvoFf3GMH15kA41rSYkEdr4DiX84ZdErQE2qtFV/2SUyWoXh0AhA==", + "requires": { + "@rollup/rollup-darwin-arm64": "4.34.9", + "@rollup/rollup-darwin-x64": "4.34.9", + "@rollup/rollup-linux-arm64-gnu": "4.34.9", + "@rollup/rollup-linux-arm64-musl": "4.34.9", + "@rollup/rollup-linux-x64-gnu": "4.34.9", + "@rollup/rollup-linux-x64-musl": "4.34.9", + "@rollup/rollup-win32-arm64-msvc": "4.34.9", + "@rollup/rollup-win32-x64-msvc": "4.34.9" + } + } + } + }, "ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", diff --git a/docs/package.json b/docs/package.json index bae09da38eb7..bfd132ba8ad0 100644 --- a/docs/package.json +++ b/docs/package.json @@ -25,10 +25,12 @@ "@docusaurus/plugin-google-tag-manager": "^3.6.3", "@docusaurus/preset-classic": "^3.6.3", "@docusaurus/theme-mermaid": "^3.6.3", + "@ionic/react": "^8.5.7", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", "docusaurus-plugin-openapi-docs": "^4.2.0", "docusaurus-theme-openapi-docs": "^4.2.0", + "ionicons": "^8.0.8", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/docs/src/components/Card/CardBody/index.js b/docs/src/components/Card/CardBody/index.js new file mode 100644 index 000000000000..5fb71fec28e8 --- /dev/null +++ b/docs/src/components/Card/CardBody/index.js @@ -0,0 +1,44 @@ +import React, { CSSProperties } from 'react'; +import clsx from 'clsx'; +const CardBody = ({ + className, // classNamees for the container card + style, // Custom styles for the container card + children, // Content to be included within the card + textAlign, + variant, + italic = false , + noDecoration = false, + transform, + breakWord = false, + truncate = false, + weight, +}) => { + const text = textAlign ? `text--${textAlign}` :''; + const textColor = variant ? `text--${variant}` : ''; + const textItalic = italic ? 'text--italic' : ''; + const textDecoration = noDecoration ? 'text-no-decoration' : ''; + const textType = transform ? `text--${transform}` : ''; + const textBreak = breakWord ? 'text--break' : ''; + const textTruncate = truncate ? 'text--truncate' : ''; + const textWeight = weight ? `text--${weight}` : ''; + return ( +
+ {children} +
+ ); +} +export default CardBody; \ No newline at end of file diff --git a/docs/src/components/Card/CardFooter/index.js b/docs/src/components/Card/CardFooter/index.js new file mode 100644 index 000000000000..2828f6109624 --- /dev/null +++ b/docs/src/components/Card/CardFooter/index.js @@ -0,0 +1,44 @@ +import React, { CSSProperties } from 'react'; +import clsx from 'clsx'; +const CardFooter = ({ + className, + style, + children, + textAlign, + variant, + italic = false , + noDecoration = false, + transform, + breakWord = false, + truncate = false, + weight, +}) => { + const text = textAlign ? `text--${textAlign}` :''; + const textColor = variant ? `text--${variant}` : ''; + const textItalic = italic ? 'text--italic' : ''; + const textDecoration = noDecoration ? 'text-no-decoration' : ''; + const textType = transform ? `text--${transform}` : ''; + const textBreak = breakWord ? 'text--break' : ''; + const textTruncate = truncate ? 'text--truncate' : ''; + const textWeight = weight ? `text--${weight}` : ''; + return ( +
+ {children} +
+ ); +} +export default CardFooter; \ No newline at end of file diff --git a/docs/src/components/Card/CardHeader/index.js b/docs/src/components/Card/CardHeader/index.js new file mode 100644 index 000000000000..6155b421bdb6 --- /dev/null +++ b/docs/src/components/Card/CardHeader/index.js @@ -0,0 +1,16 @@ +import React, { CSSProperties } from 'react'; // CSSProperties allows inline styling with better type checking. +import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner. +const Card = ({ + className, // Custom classes for the container card + style, // Custom styles for the container card + children, // Content to be included within the card + shadow, // Used to add shadow under your card. Expected values are: low (lw), medium (md), tall (tl) +}) => { + const cardShadow = shadow ? `item shadow--${shadow}` : ''; + return ( +
+ {children} +
+ ); +}; +export default Card; \ No newline at end of file diff --git a/docs/src/components/Card/CardImage/index.js b/docs/src/components/Card/CardImage/index.js new file mode 100644 index 000000000000..731fc074d709 --- /dev/null +++ b/docs/src/components/Card/CardImage/index.js @@ -0,0 +1,20 @@ +import React, { CSSProperties } from 'react'; +import clsx from 'clsx'; +import useBaseUrl from '@docusaurus/useBaseUrl'; // Import the useBaseUrl function from Docusaurus +const CardImage = ({ + className, + style, + cardImageUrl, + alt, + title, +}) => { + const generatedCardImageUrl = useBaseUrl(cardImageUrl); + return ( + {alt} + ) +} +export default CardImage; \ No newline at end of file diff --git a/docs/src/components/Card/index.js b/docs/src/components/Card/index.js new file mode 100644 index 000000000000..6155b421bdb6 --- /dev/null +++ b/docs/src/components/Card/index.js @@ -0,0 +1,16 @@ +import React, { CSSProperties } from 'react'; // CSSProperties allows inline styling with better type checking. +import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner. +const Card = ({ + className, // Custom classes for the container card + style, // Custom styles for the container card + children, // Content to be included within the card + shadow, // Used to add shadow under your card. Expected values are: low (lw), medium (md), tall (tl) +}) => { + const cardShadow = shadow ? `item shadow--${shadow}` : ''; + return ( +
+ {children} +
+ ); +}; +export default Card; \ No newline at end of file diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index ef99c3df2377..c36cb07400bb 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -18,29 +18,106 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #956cff; + --ifm-color-primary-dark: #7c49ff; + --ifm-color-primary-darker: #6837fc; + --ifm-color-primary-darkest: #5425e8; + --ifm-color-primary-light: #ae8fff; + --ifm-color-primary-lighter: #bca1ff; + --ifm-color-primary-lightest: #d5c4ff; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --ifm-font-family-base: 'Open Sans Regular'; --ifm-font-size-base: 92%; + --icon-color: #22194D; /* icon color */ + --icon-circle-color: #F6F3EE; /* circle color */ + --button-primary-color: #7B51FB; + --button-primary-hover: #5D3DC2; + --card-bg-hover: #7B51FB; } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; + --ifm-color-primary: #956cff; + --ifm-color-primary-dark: #7c49ff; + --ifm-color-primary-darker: #6837fc; + --ifm-color-primary-darkest: #5425e8; + --ifm-color-primary-light: #ae8fff; + --ifm-color-primary-lighter: #bca1ff; + --ifm-color-primary-lightest: #d5c4ff; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-background-color: #111111; /* Base dark background */ + --ifm-background-surface-color: #222221; /* Lighter dark background for cards/sections */ + --icon-color: #22194D; /* icon color */ + --icon-circle-color: #7B51FB; /* circle color */ + --button-primary-color: #7B51FB; + --button-primary-hover: #5D3DC2; + --card-bg-hover: #7B51FB; +} + +/* Card styles */ +.card { + padding: 24px; + border-radius: 8px; + transition: all 0.2s ease; + border: 1px solid var(--ifm-color-primary-lightest); +} + +[data-theme='light'] .card { + background: #ffffff; + box-shadow: 0px 4px 8px rgba(35, 41, 54, 0.05); + border-color: #D7D7D7; +} + +[data-theme='dark'] .card { + background: var(--ifm-background-surface-color); + border-color: rgba(255, 255, 255, 0.1); +} + +.card:hover { + transform: translateY(-4px); + box-shadow: 0px 8px 16px rgba(35, 41, 54, 0.1); + background: var(--card-bg-hover) +} + +/* Card title and text styles */ +.card h3 { + margin-top: 0; + font-size: 1.25rem; /* Increased from 1.1rem */ + font-weight: 600; /* Added bold */ + margin-bottom: 0.5rem; + color: var(--ifm-heading-color); +} + +.card p { + font-size: 1rem; /* Increased from 0.95rem */ + line-height: 1.5; + color: var(--ifm-color-emphasis-700); + margin-bottom: 1rem; +} + +/* Card link styles */ +.card a { + font-size: 1rem; + font-weight: 600; + color: var(--ifm-color-primary); + text-decoration: none; +} + + + +/* Grid layout for cards */ + + +/* Section styles */ +.section { + margin: 3rem 0; +} + +.section h2 { + margin-bottom: 24px; + font-size: 24px; + font-weight: 600; } /* Sidebar Method labels */ @@ -89,3 +166,132 @@ content: "patch"; background-color: var(--openapi-code-orange); } + +/* Homepage buttons */ +.button.button--primary { + background-color: var(--button-primary-color); + color: #ffffff; + border: none; + transition: background-color 400ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.button.button--primary:hover { + background-color: var(--button-primary-hover); +} + +.button.button--lg { + font-weight: 700; + line-height: 44px; + padding: 0 20px; + height: 44px; +} + +/* Icon container styles */ +.card-header { + display: flex; + align-items: left; + gap: 1rem; + margin-bottom: 1rem; +} + +.flex-column { + flex-direction: column; + align-items: left; + text-align: left; +} + + + +/* Icon styles */ +.card-icon { + font-size: 30px !important; /* Increased from 24px */ + padding: 10px; /* Increased from 12px for larger circle */ + border-radius: 50%; + color: var(--icon-color); + background-color: var(--icon-circle-color); +} + +/* Add bottom padding */ +main.container { + padding-bottom: 5rem; +} + + + + +/* Section background alternation for dark mode */ +[data-theme='dark'] section:nth-child(even) { + background: var(--ifm-background-surface-color); + padding: 3rem 0; + margin: 0; + /* full width */ + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} + +[data-theme='dark'] section:nth-child(odd) { + background: #111111; + padding: 3rem 0; + margin: 0; + /* full width */ + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} + +/* Section background alternation for dark mode - alternating every 2 sections */ +[data-theme='dark'] section:nth-child(4n+1), +[data-theme='dark'] section:nth-child(4n+2) { + background: #111111; + padding: 3rem 0; + margin: 0; + /* full width */ + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} + +[data-theme='dark'] section:nth-child(4n+3), +[data-theme='dark'] section:nth-child(4n+4) { + background: var(--ifm-background-surface-color); + padding: 3rem 0; + margin: 0; + /* full width */ + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} + +/* container width inside sections */ +section > div, +section > h2 { + margin: 0 auto; + max-width: var(--ifm-container-width); + padding: 0 var(--ifm-spacing-horizontal); + width: 100%; +} + +section > h2 { + padding-left: var(--ifm-spacing-horizontal); /* Using the same padding as div */ +} + +/* Ensure consistent container width */ +.container { + max-width: var(--ifm-container-width); + margin: 0 auto; + padding: 0 var(--ifm-spacing-horizontal); + width: 100%; +} diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index 9f71a5da775b..cc828b9bf25c 100644 --- a/docs/src/pages/index.module.css +++ b/docs/src/pages/index.module.css @@ -2,6 +2,25 @@ * CSS files with the .module.css suffix will be treated as CSS modules * and scoped locally. */ +:root { + --card-primary-text: #23232A; + --card-secondary-text: #71768B; + --border-color: #D7D7D7; + --link-color: #7B51FB; + --link-hover-color: #FFFFFF; + --icon-color: #22194D; + --icon-circle-color: #F6F3EE; +} + +[data-theme="dark"] { + --card-primary-text: #FFFFFF; + --card-secondary-text: #FFFFFF; + --border-color: #464646; + --link-color: #A384FF; + --link-hover-color: #FFFFFF; + --icon-color: #22194D; + --icon-circle-color: #7B51FB; +} .heroBanner { padding: 4rem 0; @@ -10,14 +29,215 @@ overflow: hidden; } -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - .buttons { display: flex; align-items: center; justify-content: center; } + +.hero { + background: #fdf9f6; + padding: 4rem 0; +} + +[data-theme="dark"] .hero { + background: #222221; +} + +.heroInner { + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; + vertical-align: middle; + padding: 2rem 0; +} + +.heroInner > div { + flex: 1; + max-width: 55%; +} + +.logo { + max-width: 80%; + width: 35%; + height: auto; +} + +.section { + margin-top: 4rem; +} + +.cardGrid { + display: grid; + gap: 24px; + margin-top: 1rem; +} + +[data-section="introduction"] .cardGrid { + grid-template-columns: repeat(2, 1fr); +} + +[data-section="integration"] .cardGrid { + grid-template-columns: repeat(4, 1fr); +} + +[data-section="configuration"] .cardGrid { + grid-template-columns: repeat(2, 1fr); +} + +[data-section="configuration"] .cardGrid > *:last-child { + grid-column: 1 / 3; + margin: 0 auto; + width: 100%; +} + +[data-section="ecosystem"] .cardGrid { + grid-template-columns: repeat(3, 1fr); +} + +.card { + background: #fff; + padding: 1.5rem; + border-radius: 12px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + border: 1px solid var(--border-color); + transition: transform 0.2s; +} + +[data-theme="dark"] .card { + background: #222221; +} + +.card:hover { + transform: translateY(-4px); + background: #7B51FB; + box-shadow: 0 8px 16px rgba(35, 41, 54, 0.1); +} + +.card:hover h3, +.card:hover p, +.card:hover a { + color: var(--link-hover-color); +} + +.card:focus { + outline: none; + border-color: #7B51FB; + box-shadow: 0 0 0 2px rgba(123, 81, 251, 0.2); +} + +.card h3 { + margin: 0 0 0.1rem; + font-size: 1.25rem; + font-weight: 600; + color: var(--card-primary-text); +} + +.card p { + color: var(--card-primary-text); + font-size: 1rem; + line-height: 1.5; + margin-bottom: 1.25rem; +} + +[data-theme="dark"] .card p { + color: #CCCCCC; +} + +.card a { + font-weight: 600; + font-size: 1rem; + color: var(--link-color); + text-decoration: none; +} + +.card-icon { + font-size: 24px !important; + padding: 12px; + border-radius: 50%; + color: var(--icon-color); + background-color: var(--icon-circle-color); + transition: color 0.2s; +} + +[data-theme='dark'] .card:hover .card-icon { + color: white; +} + +.cardHeader { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1rem; + text-align: center; +} + +.iconContainer { + margin-bottom: 1rem; +} + +.cardIcon { + font-size: 24px !important; + padding: 12px; + border-radius: 50%; + color: var(--icon-color); + background-color: var(--icon-circle-color); + transition: color 0.2s; +} + +.cardLink { + font-weight: 600; + font-size: 1rem; + color: var(--link-color); + text-decoration: none; +} + +@media (max-width: 996px) { + section .cardGrid { + grid-template-columns: 1fr; + padding: 0 1rem; + } + + .heroInner { + flex-direction: column; + padding: 0 1rem; + } + + .heroInner > div, + .logo { + max-width: 100%; + width: 100%; + } + + .card { + width: 100%; + margin: 0 auto; + } + + section, + .hero, + .cardGrid { + width: 100vw; + max-width: 100%; + margin: 0; + overflow-x: hidden; + } + + :global(body) { + overflow-x: hidden; + width: 100%; + } +} + +@media (max-width: 768px) { + .hero { + padding: 2rem 0; + } + + .section { + margin-top: 2rem; + } +} + + diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx new file mode 100644 index 000000000000..bada92e89992 --- /dev/null +++ b/docs/src/pages/index.tsx @@ -0,0 +1,166 @@ +import React from 'react'; +import clsx from 'clsx'; +import Layout from '@theme/Layout'; +import Link from '@docusaurus/Link'; +import { IonIcon } from '@ionic/react'; +import { + play, + flag, + cog, + gitCompare, + gitMerge, + phonePortrait, + server, + codeWorking, + extensionPuzzle, + settings, + cloudUpload, + documentText, + map, + gitBranch, +} from 'ionicons/icons'; +import styles from './index.module.css'; + +function Card({ title, description, link, icon }) { + return ( +
+
+ {icon && ( +
+ +
+ )} +

{title}

+
+

{description}

+ Learn more → +
+ ); +} + +function Section({ title, children, id }) { + return ( +
+

{title}

+
{children}
+
+ ); +} + +export default function Home() { + return ( + +
+
+
+
+

Manage feature flags and remote config across web, mobile, and server-side apps.

+ + Get Started + +
+ Flagsmith Logo +
+
+
+ +
+
+ + + + +
+ +
+ + + + +
+ +
+ + {/*Placeholder until this section has a index*/} + +
+ +
+ + + +
+
+ + ); +} diff --git a/docs/static/img/full-logo.svg b/docs/static/img/full-logo.svg new file mode 100644 index 000000000000..16fd7d721bde --- /dev/null +++ b/docs/static/img/full-logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + +