From 63896e94cc6cf4472d7429014c23fe7878b89cb2 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Wed, 1 Nov 2023 10:41:48 +0300 Subject: [PATCH 01/78] feat(docs): new landing --- documentation/src/pages/index.tsx | 25 ++++++------------------- documentation/tailwind.config.js | 12 ++++++------ 2 files changed, 12 insertions(+), 25 deletions(-) diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index 40fa06ffeb47..68bb16923eca 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -5,11 +5,6 @@ import React from "react"; import { CommonLayout } from "../refine-theme/common-layout"; import { LandingFooter } from "../refine-theme/landing-footer"; import { LandingHeader } from "../refine-theme/landing-header"; -import { LandingHero } from "../refine-theme/landing-hero"; -import { LandingPlayground } from "../refine-theme/landing-playground"; -import { LandingStats } from "../refine-theme/landing-stats"; -import { LandingTiles } from "../refine-theme/landing-tiles"; -import { LandingWalkthrough } from "../refine-theme/landing-walkthrough"; function Home() { return ( @@ -26,24 +21,16 @@ function Home() { title={`refine | Build your React-based CRUD applications, without constraints!`} description="refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. It ships with Ant Design, an enterprise-level UI toolkit." > -
+
- -
- - - - -
+ >
diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js index 513614b8dbbc..b1d2a8260b23 100644 --- a/documentation/tailwind.config.js +++ b/documentation/tailwind.config.js @@ -17,6 +17,7 @@ module.exports = { orange: "#FF9933", yellow: "#FFBF00", green: "#1FAD66", + "green-alt": "#26D97F", cyan: "#0FBDBD", "cyan-alt": "#47EBEB", blue: "#0080FF", @@ -338,13 +339,12 @@ module.exports = { "content-4xl": "1536px", "header-sm": "640px", "header-md": "1200px", - "landing-xs": "360px", - "landing-sm": "480px", - "landing-md": "640px", "landing-content": "944px", - "landing-lg": "960px", - "landing-xl": "1200px", - "landing-2xl": "1440px", + "landing-xs": "360px", + "landing-sm": "720px", + "landing-md": "960px", + "landing-lg": "1296px", + "landing-xl": "1440px", "landing-footer": "1264px", "pricing-content-sm": "640px", "pricing-content": "960px", From faf8e39176e3000dbec2ba8645c97079a890c5e2 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Wed, 1 Nov 2023 11:48:57 +0300 Subject: [PATCH 02/78] feat(docs): add section cta button --- .../landing-section-cta-button.tsx | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 documentation/src/refine-theme/landing-section-cta-button.tsx diff --git a/documentation/src/refine-theme/landing-section-cta-button.tsx b/documentation/src/refine-theme/landing-section-cta-button.tsx new file mode 100644 index 000000000000..c55da38fbd6b --- /dev/null +++ b/documentation/src/refine-theme/landing-section-cta-button.tsx @@ -0,0 +1,62 @@ +import Link from "@docusaurus/Link"; +import clsx from "clsx"; +import React, { FC, PropsWithChildren, SVGProps } from "react"; + +type Props = { + className?: string; + icon?: React.ReactNode; + to: string; +}; + +export const LandingSectionCtaButton: FC> = ({ + children, + className, + to, +}) => { + return ( + + {children} + + + ); +}; + +const DefaultIcon = (props: SVGProps) => ( + + + + +); From 68f885c863d733f2373e1f3a63496fe12c1a8b24 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Wed, 1 Nov 2023 14:42:19 +0300 Subject: [PATCH 03/78] feat(docs): add new icons --- .../integration-icons/elide-graphql.tsx | 1 + .../assets/integration-icons/entrefine.tsx | 1 + .../src/assets/integration-icons/headless.tsx | 1 + .../src/assets/integration-icons/index.ts | 12 +++--- .../src/assets/integration-icons/json-api.tsx | 3 +- .../assets/integration-icons/nest-query.tsx | 2 + .../src/assets/integration-icons/shadcn.tsx | 23 +++++++++++ .../components/landing/icons/amazon-icon.tsx | 38 +++++++++++++++++ .../landing/icons/atlassian-icon.tsx | 24 +++++++++++ .../landing/icons/autodesk-icon.tsx | 20 +++++++++ .../components/landing/icons/cisco-icon.tsx | 28 +++++++++++++ .../landing/icons/deloitte-icon.tsx | 41 +++++++++++++++++++ .../src/components/landing/icons/ibm-icon.tsx | 18 ++++++++ .../src/components/landing/icons/index.ts | 12 ++++++ .../components/landing/icons/intel-icon.tsx | 31 ++++++++++++++ .../landing/icons/jp-morgan-icon.tsx | 18 ++++++++ .../components/landing/icons/meta-icon.tsx | 40 ++++++++++++++++++ .../components/landing/icons/oracle-icon.tsx | 18 ++++++++ .../landing/icons/salesforce-icon.tsx | 24 +++++++++++ .../components/landing/icons/upwork-icon.tsx | 28 +++++++++++++ 20 files changed, 376 insertions(+), 7 deletions(-) create mode 100644 documentation/src/assets/integration-icons/shadcn.tsx create mode 100644 documentation/src/components/landing/icons/amazon-icon.tsx create mode 100644 documentation/src/components/landing/icons/atlassian-icon.tsx create mode 100644 documentation/src/components/landing/icons/autodesk-icon.tsx create mode 100644 documentation/src/components/landing/icons/cisco-icon.tsx create mode 100644 documentation/src/components/landing/icons/deloitte-icon.tsx create mode 100644 documentation/src/components/landing/icons/ibm-icon.tsx create mode 100644 documentation/src/components/landing/icons/intel-icon.tsx create mode 100644 documentation/src/components/landing/icons/jp-morgan-icon.tsx create mode 100644 documentation/src/components/landing/icons/meta-icon.tsx create mode 100644 documentation/src/components/landing/icons/oracle-icon.tsx create mode 100644 documentation/src/components/landing/icons/salesforce-icon.tsx create mode 100644 documentation/src/components/landing/icons/upwork-icon.tsx diff --git a/documentation/src/assets/integration-icons/elide-graphql.tsx b/documentation/src/assets/integration-icons/elide-graphql.tsx index 0a6227f2a333..6e823ec7a915 100644 --- a/documentation/src/assets/integration-icons/elide-graphql.tsx +++ b/documentation/src/assets/integration-icons/elide-graphql.tsx @@ -7,6 +7,7 @@ const SvgElideGraphql = ({ className, ...props }: SVGProps) => ( xmlns="http://www.w3.org/2000/svg" width={48} height={48} + viewBox="0 0 48 48" fill="none" className={clsx( "dark:text-[#ffffff] dark:fill-[#14141f] text-[#14141f] fill-[#ffffff]", diff --git a/documentation/src/assets/integration-icons/entrefine.tsx b/documentation/src/assets/integration-icons/entrefine.tsx index 4aa9aa16f5d3..dba90fe826df 100644 --- a/documentation/src/assets/integration-icons/entrefine.tsx +++ b/documentation/src/assets/integration-icons/entrefine.tsx @@ -6,6 +6,7 @@ const SvgEntRefine = (props: SVGProps) => ( xmlns="http://www.w3.org/2000/svg" width={48} height={48} + viewBox="0 0 48 48" fill="none" {...props} > diff --git a/documentation/src/assets/integration-icons/headless.tsx b/documentation/src/assets/integration-icons/headless.tsx index e9ac446fdd9b..a31aaeb720ee 100644 --- a/documentation/src/assets/integration-icons/headless.tsx +++ b/documentation/src/assets/integration-icons/headless.tsx @@ -9,6 +9,7 @@ const SvgHeadless = ({ xmlns="http://www.w3.org/2000/svg" width={48} height={48} + viewBox="0 0 48 48" fill="none" {...props} > diff --git a/documentation/src/assets/integration-icons/index.ts b/documentation/src/assets/integration-icons/index.ts index b9fb5a69a13a..866174931357 100644 --- a/documentation/src/assets/integration-icons/index.ts +++ b/documentation/src/assets/integration-icons/index.ts @@ -1,23 +1,25 @@ +export { default as Antd } from "./antd"; +export { default as Mui } from "./mui"; +export { default as Mantine } from "./mantine"; +export { default as Chakra } from "./chakra"; +export { default as ShadCn } from "./shadcn"; +export { default as Firebase } from "./firebase"; + export { default as Ably } from "./ably"; export { default as Airtable } from "./airtable"; -export { default as Antd } from "./antd"; export { default as Appwrite } from "./appwrite"; -export { default as Chakra } from "./chakra"; export { default as Directus } from "./directus"; export { default as Dp } from "./dp"; export { default as Elide } from "./elide"; export { default as ElideGraphql } from "./elide-graphql"; export { default as EntRefine } from "./entrefine"; -export { default as Firebase } from "./firebase"; export { default as Gatsby } from "./gatsby"; export { default as Graphql } from "./graphql"; export { default as Hasura } from "./hasura"; export { default as Headless } from "./headless"; export { default as HookForm } from "./hook-form"; export { default as Kbar } from "./kbar"; -export { default as Mantine } from "./mantine"; export { default as Medusa } from "./medusa"; -export { default as Mui } from "./mui"; export { default as Nest } from "./nest"; export { default as NestQuery } from "./nest-query"; export { default as Nextjs } from "./nextjs"; diff --git a/documentation/src/assets/integration-icons/json-api.tsx b/documentation/src/assets/integration-icons/json-api.tsx index 03c71cf28712..5ec5a95ecbbf 100644 --- a/documentation/src/assets/integration-icons/json-api.tsx +++ b/documentation/src/assets/integration-icons/json-api.tsx @@ -14,7 +14,7 @@ const SvgJSONApi = (props: SVGProps) => ( > @@ -26,4 +26,3 @@ const SvgJSONApi = (props: SVGProps) => ( ); export default SvgJSONApi; - diff --git a/documentation/src/assets/integration-icons/nest-query.tsx b/documentation/src/assets/integration-icons/nest-query.tsx index 7f42a5a7f48a..9aea58b8ae25 100644 --- a/documentation/src/assets/integration-icons/nest-query.tsx +++ b/documentation/src/assets/integration-icons/nest-query.tsx @@ -13,6 +13,8 @@ const SvgNestQuery = (props: SVGProps) => ( height={48} version="1.1" viewBox="0 0 500 500" + {...props} + className={props.className} > ) => ( + + + +); + +export default ShadCn; diff --git a/documentation/src/components/landing/icons/amazon-icon.tsx b/documentation/src/components/landing/icons/amazon-icon.tsx new file mode 100644 index 000000000000..912dd0c9a44f --- /dev/null +++ b/documentation/src/components/landing/icons/amazon-icon.tsx @@ -0,0 +1,38 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const AmazonIcon = (props: SVGProps) => ( + + + + + + + +); diff --git a/documentation/src/components/landing/icons/atlassian-icon.tsx b/documentation/src/components/landing/icons/atlassian-icon.tsx new file mode 100644 index 000000000000..29f349a8d1a8 --- /dev/null +++ b/documentation/src/components/landing/icons/atlassian-icon.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const AtlassianIcon = (props: SVGProps) => ( + + + + +); diff --git a/documentation/src/components/landing/icons/autodesk-icon.tsx b/documentation/src/components/landing/icons/autodesk-icon.tsx new file mode 100644 index 000000000000..bbdf0d00f669 --- /dev/null +++ b/documentation/src/components/landing/icons/autodesk-icon.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const AutodeskIcon = (props: SVGProps) => ( + + + +); diff --git a/documentation/src/components/landing/icons/cisco-icon.tsx b/documentation/src/components/landing/icons/cisco-icon.tsx new file mode 100644 index 000000000000..d2244efabb24 --- /dev/null +++ b/documentation/src/components/landing/icons/cisco-icon.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const CiscoIcon = (props: SVGProps) => ( + + + + + +); diff --git a/documentation/src/components/landing/icons/deloitte-icon.tsx b/documentation/src/components/landing/icons/deloitte-icon.tsx new file mode 100644 index 000000000000..0fc530467f41 --- /dev/null +++ b/documentation/src/components/landing/icons/deloitte-icon.tsx @@ -0,0 +1,41 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const DeloitteIcon = (props: SVGProps) => ( + + + + + + + + +); diff --git a/documentation/src/components/landing/icons/ibm-icon.tsx b/documentation/src/components/landing/icons/ibm-icon.tsx new file mode 100644 index 000000000000..d02e1f46ef06 --- /dev/null +++ b/documentation/src/components/landing/icons/ibm-icon.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const IbmIcon = (props: SVGProps) => ( + + + +); diff --git a/documentation/src/components/landing/icons/index.ts b/documentation/src/components/landing/icons/index.ts index 0d004dfc0285..cf44e5bb8852 100644 --- a/documentation/src/components/landing/icons/index.ts +++ b/documentation/src/components/landing/icons/index.ts @@ -1,3 +1,15 @@ export * from "./cloud-tip-icon"; export * from "./github-icon"; export * from "./timeline-icon"; +export * from "./oracle-icon"; +export * from "./salesforce-icon"; +export * from "./ibm-icon"; +export * from "./cisco-icon"; +export * from "./meta-icon"; +export * from "./deloitte-icon"; +export * from "./amazon-icon"; +export * from "./atlassian-icon"; +export * from "./autodesk-icon"; +export * from "./jp-morgan-icon"; +export * from "./upwork-icon"; +export * from "./intel-icon"; diff --git a/documentation/src/components/landing/icons/intel-icon.tsx b/documentation/src/components/landing/icons/intel-icon.tsx new file mode 100644 index 000000000000..2fd34c81d06b --- /dev/null +++ b/documentation/src/components/landing/icons/intel-icon.tsx @@ -0,0 +1,31 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const IntelIcon = (props: SVGProps) => ( + + + + + + +); diff --git a/documentation/src/components/landing/icons/jp-morgan-icon.tsx b/documentation/src/components/landing/icons/jp-morgan-icon.tsx new file mode 100644 index 000000000000..48dd9a666c9b --- /dev/null +++ b/documentation/src/components/landing/icons/jp-morgan-icon.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const JpMorganIcon = (props: SVGProps) => ( + + + +); diff --git a/documentation/src/components/landing/icons/meta-icon.tsx b/documentation/src/components/landing/icons/meta-icon.tsx new file mode 100644 index 000000000000..b8874bb7ae27 --- /dev/null +++ b/documentation/src/components/landing/icons/meta-icon.tsx @@ -0,0 +1,40 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const MetaIcon = (props: SVGProps) => ( + + + + + + + +); diff --git a/documentation/src/components/landing/icons/oracle-icon.tsx b/documentation/src/components/landing/icons/oracle-icon.tsx new file mode 100644 index 000000000000..afac0b8b1a76 --- /dev/null +++ b/documentation/src/components/landing/icons/oracle-icon.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const OracleIcon = (props: SVGProps) => ( + + + +); diff --git a/documentation/src/components/landing/icons/salesforce-icon.tsx b/documentation/src/components/landing/icons/salesforce-icon.tsx new file mode 100644 index 000000000000..efff83c97802 --- /dev/null +++ b/documentation/src/components/landing/icons/salesforce-icon.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const SalesforceIcon = (props: SVGProps) => ( + + + + +); diff --git a/documentation/src/components/landing/icons/upwork-icon.tsx b/documentation/src/components/landing/icons/upwork-icon.tsx new file mode 100644 index 000000000000..d9f34dfa11d8 --- /dev/null +++ b/documentation/src/components/landing/icons/upwork-icon.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export const UpworkIcon = (props: SVGProps) => ( + + + + + +); From cd6b1da76f03959fa11a05c18b7e2e138bc1d5d7 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Thu, 2 Nov 2023 12:20:16 +0300 Subject: [PATCH 04/78] [new-landing]: add start faster section (#5203) * feat(docs): add start faster section * feat(docs): update packages * fix(docs): link --- documentation/src/css/custom.css | 12 + documentation/src/pages/index.tsx | 9 +- .../src/refine-theme/landing-packages.tsx | 493 ++++++++++++++++++ documentation/tailwind.config.js | 23 + 4 files changed, 536 insertions(+), 1 deletion(-) create mode 100644 documentation/src/refine-theme/landing-packages.tsx diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index 8151d29bb9ef..a3ba8337d822 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -1091,3 +1091,15 @@ html[data-theme="dark"] .sourcecode-badge { mask-repeat: repeat; background: rgba(71, 235, 235, 0.25); } + +.landing-packages-mask { + mask-image: linear-gradient( + 92.03deg, + rgba(0, 0, 0, 0) 3.05%, + #000000 25%, + #000000 50%, + #000000 75%, + rgba(0, 0, 0, 0) 100% + ); + mask-repeat: no-repeat; +} diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index 68bb16923eca..af76f5838c63 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -5,6 +5,7 @@ import React from "react"; import { CommonLayout } from "../refine-theme/common-layout"; import { LandingFooter } from "../refine-theme/landing-footer"; import { LandingHeader } from "../refine-theme/landing-header"; +import { LandingPackages } from "../refine-theme/landing-packages"; function Home() { return ( @@ -30,7 +31,13 @@ function Home() { "p-2 landing-sm:p-12", "mx-auto", )} - >
+ > + + diff --git a/documentation/src/refine-theme/landing-packages.tsx b/documentation/src/refine-theme/landing-packages.tsx new file mode 100644 index 000000000000..fdfa624e4ae8 --- /dev/null +++ b/documentation/src/refine-theme/landing-packages.tsx @@ -0,0 +1,493 @@ +import clsx from "clsx"; +import React, { + DetailedHTMLProps, + FC, + ReactNode, + SVGProps, + useState, +} from "react"; +import { + Ably, + Airtable, + Antd, + Appwrite, + Chakra, + Directus, + Dp, + Elide, + ElideGraphql, + EntRefine, + Firebase, + Gatsby, + Graphql, + Hasura, + Headless, + HookForm, + Kbar, + Mantine, + Medusa, + Mui, + Nest, + NestQuery, + Nextjs, + Nhost, + ShadCn, + React as ReactIcon, + Remix, + Rest, + Strapi, + StrapiWithText, + Supabase, + Hygraph, + UseGenerated, + Sanity, + SQLite, + JSONApi, +} from "../assets/integration-icons"; +import { LandingSectionCtaButton } from "./landing-section-cta-button"; + +type Props = { + className?: string; +}; + +export const LandingPackages: FC = ({ className }) => { + return ( +
+
+

+ Start{" "} + + faster + + , maintain{" "} + + easier + + , manage{" "} + + complexity + + . +

+
+ +
+
+ + {[...listOne, ...listOne].map( + ({ icon: Icon, label, tooltip }) => ( + } + /> + ), + )} + + + {[...listTwo, ...listTwo].map( + ({ icon: Icon, label, tooltip }) => ( + } + /> + ), + )} + +
+ +
+
+ Seamless connectivity +
+
+

+ Out-of-the box integrations for 15+ services + including custom REST and GraphQL API’s. +

+ + All integrations + +
+
+
+
+ ); +}; + +const PackagesContainer = ({ + children, + className, + animDirection, + ...props +}: DetailedHTMLProps, HTMLDivElement> & { + animDirection: "left" | "right"; +}) => { + const [animate, setAnimate] = useState(true); + + return ( +
setAnimate(false)} + onMouseLeave={() => setAnimate(true)} + className={clsx( + className, + animate ? "animation-running" : "animation-paused", + animDirection === "left" + ? "animate-landing-packages-left" + : "animate-landing-packages-right", + "flex", + "items-center", + "justify-center", + "gap-[18px]", + "mt-6", + "relative", + )} + {...props} + > + {children} +
+ ); +}; + +const PackageItem = (props: { + icon: ReactNode; + label: string; + tooltip: string; +}) => { + const { tooltip, icon, label } = props; + + return ( +
+
{icon}
+
+ {label} +
+ +
+
+ {tooltip} +
+
+ + + + +
+ ); +}; + +const listOne = [ + { + icon: (props: SVGProps) => , + label: "Ant Design", + tooltip: "npm i @refinedev/antd", + }, + { + icon: (props: SVGProps) => , + label: "Material UI", + tooltip: "npm i @refinedev/mui", + }, + { + icon: (props: SVGProps) => , + label: "Mantine", + tooltip: "npm i @refinedev/mantine", + }, + { + icon: (props: SVGProps) => , + label: "Chakra UI", + tooltip: "npm i @refinedev/chakra-ui", + }, + { + icon: (props: SVGProps) => , + label: "Shadcn", + tooltip: "npm i @refinedev/shadcn", + }, + { + icon: (props: SVGProps) => , + label: "Firebase", + tooltip: "npm i refine-firebase", + }, + { + icon: (props: SVGProps) => , + label: "Ably", + tooltip: "npm i @refinedev/ably", + }, + { + icon: (props: SVGProps) => , + label: "Airtable", + tooltip: "npm i @refinedev/airtable", + }, + { + icon: (props: SVGProps) => , + label: "Appwrite", + tooltip: "npm i @refinedev/appwrite", + }, + { + icon: (props: SVGProps) => , + label: "Directus", + tooltip: "npm i @tspvivek/refine-directus", + }, + { + icon: (props: SVGProps) => , + label: "Dp", + tooltip: "npm i data-provider-customizer", + }, + { + icon: (props: SVGProps) => , + label: "Elide", + tooltip: "npm i elide-simple-graphql", + }, + { + icon: (props: SVGProps) => , + label: "Elide GraphQL", + tooltip: "npm i @refinedev/elide-graphql", + }, + { + icon: (props: SVGProps) => , + label: "EntRefine", + tooltip: "npm i entrefine", + }, + { + icon: (props: SVGProps) => , + label: "Gatsby", + tooltip: "npm i @refinedev/gatsby-router", + }, + { + icon: (props: SVGProps) => , + label: "Hasura", + tooltip: "npm i @refinedev/hasura", + }, + { + icon: (props: SVGProps) => , + label: "Headless", + tooltip: "npm i tailwindcss", + }, + { + icon: (props: SVGProps) => , + label: "Hook Form", + tooltip: "npm i @refinedev/react-hook-form", + }, +]; + +const listTwo = [ + { + icon: (props: SVGProps) => , + label: "GraphQL", + tooltip: "npm i @refinedev/graphql", + }, + { + icon: (props: SVGProps) => , + label: "Kbar", + tooltip: "npm i @refinedev/kbar", + }, + { + icon: (props: SVGProps) => , + label: "Medusa", + tooltip: "npm i @refinedev/medusa", + }, + { + icon: (props: SVGProps) => , + label: "Nest", + tooltip: "npm i @refinedev/nest", + }, + { + icon: (props: SVGProps) => , + label: "Nest Query", + tooltip: "npm i @refinedev/nest-query", + }, + { + icon: (props: SVGProps) => , + label: "Next.js", + tooltip: "npm i @refinedev/nextjs-router", + }, + { + icon: (props: SVGProps) => , + label: "Nhost", + tooltip: "npm i @refinedev/nhost", + }, + { + icon: (props: SVGProps) => , + label: "React", + tooltip: "npm i @refinedev/react", + }, + { + icon: (props: SVGProps) => , + label: "Remix", + tooltip: "npm i @refinedev/remix-router", + }, + { + icon: (props: SVGProps) => , + label: "REST", + tooltip: "npm i @refinedev/simple-rest", + }, + { + icon: (props: SVGProps) => , + label: "Strapi", + tooltip: "npm i @refinedev/strapi-v4", + }, + { + icon: (props: SVGProps) => , + label: "Supabase", + tooltip: "npm i @refinedev/supabase", + }, + { + icon: (props: SVGProps) => , + label: "Use Generated", + tooltip: "npm i refine-use-generated", + }, + { + icon: (props: SVGProps) => , + label: "Hygraph", + tooltip: "npm i @acomagu/refine-hygraph", + }, + { + icon: (props: SVGProps) => , + label: "Sanity", + tooltip: "npm i refine-sanity", + }, + { + icon: (props: SVGProps) => , + label: "SQLite", + tooltip: "npm i refine-sqlite", + }, + { + icon: (props: SVGProps) => , + label: "JSON API", + tooltip: "npm i refine-jsonapi", + }, +]; diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js index b1d2a8260b23..e78439720e13 100644 --- a/documentation/tailwind.config.js +++ b/documentation/tailwind.config.js @@ -163,6 +163,17 @@ module.exports = { "url('https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-playground-slide-left.svg')", "landing-playground-slide-right-bg": "url('https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-playground-slide-right.svg')", + "landing-packages-dark": [ + "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp)", + "radial-gradient(50% 100% at 50% -40%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%)", + ], + "landing-packages": [ + "radial-gradient(50% 100% at 50% -60%, rgba(0, 128, 255, 0.15) 0%, #F4F8FB 100%)", + ], + "landing-packages-text": + "linear-gradient(180deg, #14141F 0%, #474E6B 100%)", + "landing-packages-text-dark": + "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.50) 100%)", "hackathon-button-bg": "linear-gradient(90deg, rgba(255, 76, 166, 0.3) 0%, rgba(128, 0, 255, 0.3) 50%, rgba(0, 128, 255, 0.3) 100%);", "refine-week-supabase-timeline-item-bg": @@ -239,6 +250,10 @@ module.exports = { "walkthrough-bounce 3s ease-in-out infinite", "top-announcement-glow": "top-announcement-glow 1s ease-in-out infinite alternate", + "landing-packages-left": + "landing-packages-left 20s linear infinite", + "landing-packages-right": + "landing-packages-right 20s linear infinite", }, keyframes: { "walkthrough-bounce": { @@ -329,6 +344,14 @@ module.exports = { opacity: 0, }, }, + "landing-packages-left": { + "0%": { transform: "translateX(0)" }, + "100%": { transform: "translateX(-50%)" }, + }, + "landing-packages-right": { + "0%": { transform: "translateX(0)" }, + "100%": { transform: "translateX(50%)" }, + }, }, }, screens: { From 24050f33c28dcd3e8adb765770a2110c058060ce Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Thu, 2 Nov 2023 12:30:59 +0300 Subject: [PATCH 05/78] feat(docs): add trusted by developers section (#5204) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Ali Emir Şen --- documentation/src/pages/index.tsx | 6 + .../landing-trusted-by-developers.tsx | 193 ++++++++++++++++++ documentation/tailwind.config.js | 7 + 3 files changed, 206 insertions(+) create mode 100644 documentation/src/refine-theme/landing-trusted-by-developers.tsx diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index af76f5838c63..bbf9f07f9262 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -5,6 +5,7 @@ import React from "react"; import { CommonLayout } from "../refine-theme/common-layout"; import { LandingFooter } from "../refine-theme/landing-footer"; import { LandingHeader } from "../refine-theme/landing-header"; +import { LandingTrustedByDevelopers } from "../refine-theme/landing-trusted-by-developers"; import { LandingPackages } from "../refine-theme/landing-packages"; function Home() { @@ -32,6 +33,11 @@ function Home() { "mx-auto", )} > + = ({ className }) => { + const lastChangedIndex = React.useRef(0); + + const [randomIcons, setRandomIcons] = React.useState(() => { + // get random 6 icon from the list. + const randomIcons = list.sort(() => 0.5 - Math.random()).slice(0, 6); + return randomIcons; + }); + + useEffect(() => { + // change one random icon in the list every X seconds. + const interval = setInterval(() => { + setRandomIcons((prev) => { + const { changedIndex, newList } = changeOneRandomIcon( + prev, + list, + lastChangedIndex.current, + ); + lastChangedIndex.current = changedIndex; + return newList; + }); + }, 2000); + + return () => clearInterval(interval); + }, [randomIcons]); + + return ( +
+
+

+ Trusted by developers working at +

+
+ + {randomIcons.map((item) => ( + + {item.icon} + + ))} + +
+
+
+ ); +}; + +// change only one random icon in the list +const changeOneRandomIcon = ( + currentList: IList, + list: IList, + lastChangedIndex: number, +): { newList: IList; changedIndex: number } => { + const newList = [...currentList]; + + // pick randomIndex from the current list + let randomIndex = Math.floor(Math.random() * newList.length); + // if the randomIndex is the same as the last changed index, pick another randomIndex + while (randomIndex === lastChangedIndex) { + randomIndex = Math.floor(Math.random() * newList.length); + } + + // pick randomIcon from the list + let randomIcon = list[Math.floor(Math.random() * list.length)]; + // check if the randomIcon is already in the current list + let isExist = newList.find((item) => item.id === randomIcon.id); + // if the randomIcon is already in the current list, pick another randomIcon + while (isExist) { + randomIcon = list[Math.floor(Math.random() * list.length)]; + isExist = newList.find((item) => item.id === randomIcon.id); + } + + // change the randomIcon in the current list + newList[randomIndex] = randomIcon; + + return { newList, changedIndex: randomIndex }; +}; + +type IList = { + icon: React.ReactNode; + id: number; +}[]; + +const list: IList = [ + { + icon: , + id: 1, + }, + { + icon: , + id: 2, + }, + { + icon: , + id: 3, + }, + { + icon: , + id: 4, + }, + { + icon: , + id: 5, + }, + { + icon: , + id: 6, + }, + { + icon: , + id: 7, + }, + { + icon: , + id: 8, + }, + { + icon: , + id: 9, + }, + { + icon: , + id: 10, + }, + { + icon: , + id: 11, + }, + { + icon: , + id: 12, + }, + { + icon: , + id: 13, + }, +]; diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js index e78439720e13..489090689d0e 100644 --- a/documentation/tailwind.config.js +++ b/documentation/tailwind.config.js @@ -163,6 +163,13 @@ module.exports = { "url('https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-playground-slide-left.svg')", "landing-playground-slide-right-bg": "url('https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-playground-slide-right.svg')", + "landing-trusted-by-developers-dark": [ + "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp)", + "radial-gradient(40% 100% at 110% 0%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%)", + ], + "landing-trusted-by-developers": [ + "radial-gradient(40% 100% at 110% 20%, rgba(0, 128, 255, 0.15) 0%, #F4F8FB 100%)", + ], "landing-packages-dark": [ "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp)", "radial-gradient(50% 100% at 50% -40%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%)", From 748a212becbec02059da44ddf16c89d2a67fba72 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Thu, 2 Nov 2023 16:16:32 +0300 Subject: [PATCH 06/78] feat(docs): add enterprise developers section (#5214) --- .../landing/icons/best-practices-icon.tsx | 66 +++++++++ .../src/components/landing/icons/index.ts | 6 + .../icons/infinite-scalability-icon.tsx | 66 +++++++++ .../landing/icons/no-vendor-lockin-icon.tsx | 66 +++++++++ .../landing/icons/pro-services-icon.tsx | 57 ++++++++ .../landing/icons/security-icon.tsx | 66 +++++++++ .../landing/icons/self-hosted-icon.tsx | 66 +++++++++ documentation/src/pages/index.tsx | 8 +- .../landing-enterprise-developers.tsx | 138 ++++++++++++++++++ documentation/tailwind.config.js | 4 + 10 files changed, 542 insertions(+), 1 deletion(-) create mode 100644 documentation/src/components/landing/icons/best-practices-icon.tsx create mode 100644 documentation/src/components/landing/icons/infinite-scalability-icon.tsx create mode 100644 documentation/src/components/landing/icons/no-vendor-lockin-icon.tsx create mode 100644 documentation/src/components/landing/icons/pro-services-icon.tsx create mode 100644 documentation/src/components/landing/icons/security-icon.tsx create mode 100644 documentation/src/components/landing/icons/self-hosted-icon.tsx create mode 100644 documentation/src/refine-theme/landing-enterprise-developers.tsx diff --git a/documentation/src/components/landing/icons/best-practices-icon.tsx b/documentation/src/components/landing/icons/best-practices-icon.tsx new file mode 100644 index 000000000000..61449c1a8c14 --- /dev/null +++ b/documentation/src/components/landing/icons/best-practices-icon.tsx @@ -0,0 +1,66 @@ +import clsx from "clsx"; +import * as React from "react"; +import { SVGProps } from "react"; + +export const BestPracticeIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/components/landing/icons/index.ts b/documentation/src/components/landing/icons/index.ts index cf44e5bb8852..73c865745cb3 100644 --- a/documentation/src/components/landing/icons/index.ts +++ b/documentation/src/components/landing/icons/index.ts @@ -13,3 +13,9 @@ export * from "./autodesk-icon"; export * from "./jp-morgan-icon"; export * from "./upwork-icon"; export * from "./intel-icon"; +export * from "./security-icon"; +export * from "./infinite-scalability-icon"; +export * from "./no-vendor-lockin-icon"; +export * from "./self-hosted-icon"; +export * from "./best-practices-icon"; +export * from "./pro-services-icon"; diff --git a/documentation/src/components/landing/icons/infinite-scalability-icon.tsx b/documentation/src/components/landing/icons/infinite-scalability-icon.tsx new file mode 100644 index 000000000000..aad9a5c5ec89 --- /dev/null +++ b/documentation/src/components/landing/icons/infinite-scalability-icon.tsx @@ -0,0 +1,66 @@ +import clsx from "clsx"; +import * as React from "react"; +import { SVGProps } from "react"; + +export const InfiniteScalabilityIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/components/landing/icons/no-vendor-lockin-icon.tsx b/documentation/src/components/landing/icons/no-vendor-lockin-icon.tsx new file mode 100644 index 000000000000..56a25361327b --- /dev/null +++ b/documentation/src/components/landing/icons/no-vendor-lockin-icon.tsx @@ -0,0 +1,66 @@ +import clsx from "clsx"; +import * as React from "react"; +import { SVGProps } from "react"; + +export const NoVendorLockinIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/components/landing/icons/pro-services-icon.tsx b/documentation/src/components/landing/icons/pro-services-icon.tsx new file mode 100644 index 000000000000..ec615b93e823 --- /dev/null +++ b/documentation/src/components/landing/icons/pro-services-icon.tsx @@ -0,0 +1,57 @@ +import clsx from "clsx"; +import * as React from "react"; +import { SVGProps } from "react"; + +export const ProServicesIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/components/landing/icons/security-icon.tsx b/documentation/src/components/landing/icons/security-icon.tsx new file mode 100644 index 000000000000..56fe923449e6 --- /dev/null +++ b/documentation/src/components/landing/icons/security-icon.tsx @@ -0,0 +1,66 @@ +import clsx from "clsx"; +import * as React from "react"; +import { SVGProps } from "react"; + +export const SecurityIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/components/landing/icons/self-hosted-icon.tsx b/documentation/src/components/landing/icons/self-hosted-icon.tsx new file mode 100644 index 000000000000..127c78ff8c3f --- /dev/null +++ b/documentation/src/components/landing/icons/self-hosted-icon.tsx @@ -0,0 +1,66 @@ +import clsx from "clsx"; +import * as React from "react"; +import { SVGProps } from "react"; + +export const SelfHostedIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index bbf9f07f9262..dca31d7b46b8 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -5,6 +5,7 @@ import React from "react"; import { CommonLayout } from "../refine-theme/common-layout"; import { LandingFooter } from "../refine-theme/landing-footer"; import { LandingHeader } from "../refine-theme/landing-header"; +import LandingEnterpriseDevelopers from "../refine-theme/landing-enterprise-developers"; import { LandingTrustedByDevelopers } from "../refine-theme/landing-trusted-by-developers"; import { LandingPackages } from "../refine-theme/landing-packages"; @@ -34,7 +35,7 @@ function Home() { )} > @@ -43,6 +44,11 @@ function Home() { "mt-16 landing-sm:mt-20 landing-md:mt-28 landing-lg:mt-40", )} /> + diff --git a/documentation/src/refine-theme/landing-enterprise-developers.tsx b/documentation/src/refine-theme/landing-enterprise-developers.tsx new file mode 100644 index 000000000000..c4333e2853f8 --- /dev/null +++ b/documentation/src/refine-theme/landing-enterprise-developers.tsx @@ -0,0 +1,138 @@ +import clsx from "clsx"; +import React, { FC } from "react"; +import { + SecurityIcon, + BestPracticeIcon, + InfiniteScalabilityIcon, + NoVendorLockinIcon, + ProServicesIcon, + SelfHostedIcon, +} from "../components/landing/icons"; + +const list = [ + { + icon: , + title: "Security", + description: "Zero Trust model with SSO and SCIM directory sync.", + }, + { + icon: , + title: "Infinite Scalability", + description: + "Built with the most complex business applications in mind.", + }, + { + icon: , + title: "Self-hosted", + description: + "Deploy to your own infrastructure and always stay in control.", + }, + { + icon: , + title: "No vendor lock-in", + description: "Open source solution with open architecture.", + }, + { + icon: , + title: "Professional services", + description: "Plans for priority support, training and transformation.", + }, + { + icon: , + title: "Industry best practices", + description: "Standardize how teams build across the organization.", + }, +]; + +type Props = { + className?: string; +}; + +const LandingEnterpriseDevelopers: FC = ({ className }) => { + return ( +
+
+

+ Enterprise developers 💖{" "} + + refine + + . +

+

+ refine is designed to target the specific pain points of + larger organizations for internal tooling. +

+
+ +
+ {list.map((item, index) => { + return ( +
+
{item.icon}
+
+ {item.title} +
+
+ {item.description} +
+
+ ); + })} +
+
+ ); +}; + +export default LandingEnterpriseDevelopers; diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js index 489090689d0e..f031b76f03c0 100644 --- a/documentation/tailwind.config.js +++ b/documentation/tailwind.config.js @@ -21,8 +21,10 @@ module.exports = { cyan: "#0FBDBD", "cyan-alt": "#47EBEB", blue: "#0080FF", + "blue-alt": "#6EB3F7", indigo: "#3333FF", purple: "#8000FF", + "purple-alt": "#B366FF", pink: "#ED5EC9", bg: "#0A0A29", kdb: "#DBDBF0", @@ -94,6 +96,8 @@ module.exports = { "header-blur": "12px", }, backgroundImage: { + "landing-noise": + "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp)", "walkthrough-button-shadow": "conic-gradient(from 231deg at 50% 50%, #A3A3F5 0%, #4D4DB2 6%, #4D4DB2 44%, #A3A3F5 50%, #4D4DB2 56%, #4D4DB2 94%, #A3A3F5 100%)", "walkthrough-button-alt-shadow": From b9e6af50a3e5f3951af0ac410fccbb8f68a0dae6 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Thu, 2 Nov 2023 16:26:51 +0300 Subject: [PATCH 07/78] [new-landing]: add great community section (#5212) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(docs): add great community section * feat(docs): update image * feat(docs): add light-dark mode * chore(docs): update component name * feat(docs): add counting number * chore(docs): remove not used component --------- Co-authored-by: Ali Emir Şen --- .../src/components/counting-number/index.tsx | 25 +- .../src/context/CommunityStats/index.tsx | 40 ++- .../src/hooks/use-animated-counter.tsx | 1 + documentation/src/pages/index.tsx | 8 +- .../src/refine-theme/landing-community.tsx | 172 +++++++++ .../src/refine-theme/landing-stats.tsx | 338 ------------------ documentation/tailwind.config.js | 4 + 7 files changed, 218 insertions(+), 370 deletions(-) create mode 100644 documentation/src/refine-theme/landing-community.tsx delete mode 100644 documentation/src/refine-theme/landing-stats.tsx diff --git a/documentation/src/components/counting-number/index.tsx b/documentation/src/components/counting-number/index.tsx index 2ddd489e749c..fb78c6a95ab5 100644 --- a/documentation/src/components/counting-number/index.tsx +++ b/documentation/src/components/counting-number/index.tsx @@ -3,33 +3,30 @@ import { useInView } from "framer-motion"; import { useAnimatedCounter } from "../../hooks/use-animated-counter"; type CountingNumberProps = { + className?: string; from?: number; to: number; duration?: number; - format?: boolean; + format?: (value: number) => string; once?: boolean; }; export const CountingNumber: React.FC = ({ - // from, + className, + from, to, - // duration, format, - // once, + duration = 1, + once = true, }) => { - // const ref = React.useRef(null); - // const inView = useInView(ref, { once }); + const ref = React.useRef(null); + const inView = useInView(ref, { once }); - // const counter = useAnimatedCounter(inView ? to : from ?? 0, from, duration); - - // const rounded = Math.round(counter); + const counter = useAnimatedCounter(inView ? to : from ?? 0, from, duration); return ( - - {/* {format ? rounded.toLocaleString("en-US") : rounded} */} - {format ? to?.toLocaleString?.("en-US") ?? to ?? 0 : to} + + {format ? format(counter) : counter} ); }; diff --git a/documentation/src/context/CommunityStats/index.tsx b/documentation/src/context/CommunityStats/index.tsx index a36a86411f74..ea00fb40687f 100644 --- a/documentation/src/context/CommunityStats/index.tsx +++ b/documentation/src/context/CommunityStats/index.tsx @@ -13,6 +13,7 @@ interface ICommunityStatsContext { githubStarCountText: string; githubCommitCount: number; discordMemberCount: number; + discordMemberCountText: string; loading: boolean; refetch: () => Promise; } @@ -56,28 +57,19 @@ export const CommunityStatsProvider: FC = ({ children }) => { }, [fetchGithubCount]); const githubStarCountText = useMemo(() => { - const hasIntlSupport = - typeof Intl == "object" && - Intl && - typeof Intl.NumberFormat == "function"; - - if (!hasIntlSupport) { - return `${(githubStarCount / 1000).toFixed(1)}k`; - } - - const formatter = new Intl.NumberFormat("en-US", { - notation: "compact", - compactDisplay: "short", - maximumSignificantDigits: 3, - }); - return formatter.format(githubStarCount); + return convertStatToText(githubStarCount); }, [githubStarCount]); + const discordMemberCountText = useMemo(() => { + return convertStatToText(discordMemberCount); + }, [discordMemberCount]); + const value = { githubStarCount, githubStarCountText, githubCommitCount, discordMemberCount, + discordMemberCountText, loading, refetch: fetchGithubCount, }; @@ -98,3 +90,21 @@ export const useCommunityStatsContext = () => { } return context; }; + +export const convertStatToText = (num: number) => { + const hasIntlSupport = + typeof Intl == "object" && + Intl && + typeof Intl.NumberFormat == "function"; + + if (!hasIntlSupport) { + return `${(num / 1000).toFixed(1)}k`; + } + + const formatter = new Intl.NumberFormat("en-US", { + notation: "compact", + compactDisplay: "short", + maximumSignificantDigits: 3, + }); + return formatter.format(num); +}; diff --git a/documentation/src/hooks/use-animated-counter.tsx b/documentation/src/hooks/use-animated-counter.tsx index bf9801cf9251..84be553cb0f8 100644 --- a/documentation/src/hooks/use-animated-counter.tsx +++ b/documentation/src/hooks/use-animated-counter.tsx @@ -22,6 +22,7 @@ export const useAnimatedCounter: UseAnimatedCounter = ( setCounter(value); }, }); + return () => controls.stop(); }, [initialValue, maxValue, duration]); diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index dca31d7b46b8..6483e76537c2 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -5,6 +5,7 @@ import React from "react"; import { CommonLayout } from "../refine-theme/common-layout"; import { LandingFooter } from "../refine-theme/landing-footer"; import { LandingHeader } from "../refine-theme/landing-header"; +import { LandingCommunity } from "../refine-theme/landing-community"; import LandingEnterpriseDevelopers from "../refine-theme/landing-enterprise-developers"; import { LandingTrustedByDevelopers } from "../refine-theme/landing-trusted-by-developers"; import { LandingPackages } from "../refine-theme/landing-packages"; @@ -28,9 +29,9 @@ function Home() {
@@ -44,6 +45,7 @@ function Home() { "mt-16 landing-sm:mt-20 landing-md:mt-28 landing-lg:mt-40", )} /> + = ({ className }) => { + const { colorMode } = useColorMode(); + + const { discordMemberCount, githubStarCount } = useCommunityStatsContext(); + + const list = useMemo(() => { + return [ + { + stat: githubStarCount, + description: "Stars on GitHub", + }, + { + stat: 5_000, + description: + "Projects on production, including large enterprises", + }, + { + stat: discordMemberCount, + description: "Active developers in our open-source community", + }, + { + stat: 200_000, + description: "End users are using apps built with refine", + }, + ]; + }, [discordMemberCount, githubStarCount]); + + return ( +
+
+

+ Feel the power of a{" "} + + great community + + . +

+
+ +
+
+ {list.map((item, index) => { + return ( +
+ + `${convertStatToText(value)}+` + } + className={clsx( + "text-[40px] leading-[48px] landing-sm:text-[64px] landing-sm:leading-[72px]", + "-tracking-tighter", + "dark:bg-landing-stats-text-dark bg-landing-stats-text", + "bg-clip-text", + "text-transparent", + "font-bold", + "drop-shadow-2xl", + )} + /> +
+ {item.description} +
+
+ ); + })} +
+ +
+ investors +
+ Backed by{" "} + + Y Combinator + {" "} + (YC S23) and{" "} + + 500 Emerging Europe + + . +
+
+
+
+ ); +}; diff --git a/documentation/src/refine-theme/landing-stats.tsx b/documentation/src/refine-theme/landing-stats.tsx deleted file mode 100644 index 6b89c38c8712..000000000000 --- a/documentation/src/refine-theme/landing-stats.tsx +++ /dev/null @@ -1,338 +0,0 @@ -import { useCommunityStatsContext } from "@site/src/context/CommunityStats"; -import clsx from "clsx"; -import React from "react"; -import { CountingNumber } from "../components/counting-number"; -import { LandingStatsDiscordIcon } from "./icons/landing-stats-discord"; -import { LandingStatsGithubIcon } from "./icons/landing-stats-github"; -import { LandingStatsTwitterIcon } from "./icons/landing-stats-twitter"; - -const NumberField = ({ number, label }: { number: number; label: string }) => { - return ( -
-
- - + -
-
- {label} -
-
- ); -}; - -const GithubStats = ({ className }: { className?: string }) => { - const { githubStarCount, githubCommitCount } = useCommunityStatsContext(); - - return ( -
-
-
-
- -
-
-
- -
-
- -
-
- -
- -
-
- -
-
-
-
-
- - -
-
-
- ); -}; - -const DiscordStats = () => { - const { discordMemberCount } = useCommunityStatsContext(); - return ( -
-
-
- -
-
- -
-
-
- ); -}; - -const TwitterStats = () => { - return ( -
-
-
- -
-
- -
-
-
- ); -}; - -export const LandingStats = () => { - return ( -
-
- - Feel the power of - {" "} - - a great community - -
-
- -
- - -
-
-
- ); -}; diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js index f031b76f03c0..5c776a961bd7 100644 --- a/documentation/tailwind.config.js +++ b/documentation/tailwind.config.js @@ -159,6 +159,10 @@ module.exports = { ], "landing-stats-border-bg": "conic-gradient(from -90deg at 50% 50%, rgba(77, 77, 179, 0) 0deg, #4D4DB3 39.37deg, rgba(77, 77, 179, 0) 86.25deg, rgba(77, 77, 179, 0) 198.75deg, #4D4DB3 232.5deg, rgba(77, 77, 179, 0) 275.62deg, rgba(77, 77, 179, 0) 360deg)", + "landing-stats-text-dark": + "linear-gradient(180deg, #FFF 25%, rgba(255, 255, 255, 0.25) 100%)", + "landing-stats-text": + "linear-gradient(180deg, #14141F 25%, rgba(20, 20, 31, 0.50) 100%)", "landing-playground-bg": [ "linear-gradient(90deg, rgba(23, 23, 79, 0) 0%, #17174F 100%)", "linear-gradient(180deg, rgba(0, 0, 0, 0.165) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 0.165) 100%)", From 12890b21b222115d103eb580c7d82dd9fe605529 Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Fri, 3 Nov 2023 09:31:07 +0300 Subject: [PATCH 08/78] fix(docs): landing page overflow-x --- documentation/src/pages/index.tsx | 4 ++++ documentation/src/refine-theme/landing-packages.tsx | 3 +-- .../src/refine-theme/landing-trusted-by-developers.tsx | 4 ---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index 6483e76537c2..128f39d35b18 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -46,6 +46,10 @@ function Home() { )} /> = ({ className }) => { "dark:bg-landing-packages-dark bg-landing-packages", "dark:bg-gray-800 bg-gray-50", "rounded-3xl", + "overflow-hidden", )} >
diff --git a/documentation/src/refine-theme/landing-trusted-by-developers.tsx b/documentation/src/refine-theme/landing-trusted-by-developers.tsx index 0535cf66f804..4d45149f486d 100644 --- a/documentation/src/refine-theme/landing-trusted-by-developers.tsx +++ b/documentation/src/refine-theme/landing-trusted-by-developers.tsx @@ -158,10 +158,6 @@ const list: IList = [ icon: , id: 5, }, - { - icon: , - id: 6, - }, { icon: , id: 7, From df42b1040398829dd514ad1902d49de209636f1e Mon Sep 17 00:00:00 2001 From: Alican Erdurmaz Date: Fri, 3 Nov 2023 15:46:08 +0300 Subject: [PATCH 09/78] fix(docs): unique key --- documentation/src/refine-theme/landing-community.tsx | 2 ++ .../src/refine-theme/landing-enterprise-developers.tsx | 4 +--- documentation/src/refine-theme/landing-packages.tsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/documentation/src/refine-theme/landing-community.tsx b/documentation/src/refine-theme/landing-community.tsx index b2d534e30369..40c0d2f3e6de 100644 --- a/documentation/src/refine-theme/landing-community.tsx +++ b/documentation/src/refine-theme/landing-community.tsx @@ -101,6 +101,8 @@ export const LandingCommunity: FC = ({ className }) => { `${convertStatToText(value)}+` } className={clsx( + "tabular-nums", + "whitespace-nowrap", "text-[40px] leading-[48px] landing-sm:text-[64px] landing-sm:leading-[72px]", "-tracking-tighter", "dark:bg-landing-stats-text-dark bg-landing-stats-text", diff --git a/documentation/src/refine-theme/landing-enterprise-developers.tsx b/documentation/src/refine-theme/landing-enterprise-developers.tsx index c4333e2853f8..21c8ff4f6751 100644 --- a/documentation/src/refine-theme/landing-enterprise-developers.tsx +++ b/documentation/src/refine-theme/landing-enterprise-developers.tsx @@ -48,7 +48,7 @@ type Props = { className?: string; }; -const LandingEnterpriseDevelopers: FC = ({ className }) => { +export const LandingEnterpriseDevelopers: FC = ({ className }) => { return (
= ({ className }) => {
); }; - -export default LandingEnterpriseDevelopers; diff --git a/documentation/src/refine-theme/landing-packages.tsx b/documentation/src/refine-theme/landing-packages.tsx index 236ae7de0f1d..a6c2fb2d0eb0 100644 --- a/documentation/src/refine-theme/landing-packages.tsx +++ b/documentation/src/refine-theme/landing-packages.tsx @@ -118,9 +118,9 @@ export const LandingPackages: FC = ({ className }) => { > {[...listOne, ...listOne].map( - ({ icon: Icon, label, tooltip }) => ( + ({ icon: Icon, label, tooltip }, index) => ( } @@ -130,9 +130,9 @@ export const LandingPackages: FC = ({ className }) => { {[...listTwo, ...listTwo].map( - ({ icon: Icon, label, tooltip }) => ( + ({ icon: Icon, label, tooltip }, index) => ( } From e665179bc0092a3b074ccf421cd38d6a13abb390 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= Date: Tue, 7 Nov 2023 11:04:29 +0300 Subject: [PATCH 10/78] docs(landing): new hero section (#5222) * docs(landing): update header * docs(landing): add hero base * docs(landing): fix aspect ratio * docs(landing): add wizard section * docs(landing): fix wizard height * docs(landing): update wizard * docs(landing): update tailwindcss version * docs(landing): add showcase demo * docs(landing): fix playground url * docs(landing): optimize landing animations * docs(landing): update hero animation * docs(landing): fix live demo z index * docs(landing): add new footer * docs(landing): fix hero animation item colors * docs(landing): add wizard shadows * docs(landing): live demo link on hover * docs(landing): add star glow * docs(landing): dynamic star count on hero * docs(landing): update showcase links * docs(landing): update footer * docs(landing): fix hover color change * docs(landing): update copy button hover * docs(landing): fix button hover states * docs(landing): update index --- documentation/package-lock.json | 541 ++++++----- documentation/package.json | 4 +- .../components/landing/showcase-indicator.tsx | 143 +++ .../components/landing/showcase-wrapper.tsx | 287 ++++++ documentation/src/css/custom.css | 11 +- documentation/src/pages/index.tsx | 20 +- .../refine-theme/changing-text-element.tsx | 113 +++ .../common-header/mobile-menu-modal.tsx | 272 +++--- .../common-header/navbar-item.tsx | 3 +- .../common-header/navbar-popover-item.tsx | 27 +- .../src/refine-theme/common-layout.tsx | 3 + .../src/refine-theme/common-theme-toggle.tsx | 60 +- documentation/src/refine-theme/css/fonts.css | 1 - documentation/src/refine-theme/footer-data.ts | 27 +- .../src/refine-theme/icons/dark-mode.tsx | 13 +- .../src/refine-theme/icons/hamburger.tsx | 16 +- .../refine-theme/icons/landing-app-crm.tsx | 890 ++++++++++++++++++ .../icons/landing-arrow-right.tsx | 23 + .../icons/landing-copy-success.tsx | 21 + .../refine-theme/icons/landing-hero-beam.tsx | 79 ++ .../icons/landing-hero-center.tsx | 31 + .../refine-theme/icons/landing-hero-grid.tsx | 81 ++ .../icons/landing-hero-item-node.tsx | 23 + .../refine-theme/icons/landing-hero/antd.tsx | 164 ++++ .../icons/landing-hero/appwrite.tsx | 56 ++ .../refine-theme/icons/landing-hero/auth0.tsx | 46 + .../icons/landing-hero/chakra.tsx | 76 ++ .../icons/landing-hero/google.tsx | 70 ++ .../icons/landing-hero/material-ui.tsx | 52 + .../icons/landing-hero/nestjs.tsx | 50 + .../icons/landing-hero/nextjs.tsx | 106 +++ .../refine-theme/icons/landing-hero/remix.tsx | 54 ++ .../icons/landing-hero/strapi.tsx | 96 ++ .../icons/landing-hero/supabase.tsx | 110 +++ .../refine-theme/icons/landing-hero/vite.tsx | 102 ++ .../icons/landing-start-action.tsx | 21 + .../src/refine-theme/icons/light-mode.tsx | 8 +- .../src/refine-theme/icons/orange-star.tsx | 17 + .../src/refine-theme/icons/ph-badge.tsx | 56 ++ .../refine-theme/icons/refine-logo-single.tsx | 23 + .../src/refine-theme/icons/refine-logo.tsx | 23 +- .../src/refine-theme/landing-community.tsx | 3 + .../landing-copy-command-button.tsx | 129 +++ .../src/refine-theme/landing-footer.tsx | 424 +++++---- .../landing-github-star-button.tsx | 15 +- .../src/refine-theme/landing-header.tsx | 162 ++-- .../landing-hero-animation-item.tsx | 216 +++++ .../refine-theme/landing-hero-animation.tsx | 304 ++++++ .../landing-hero-github-stars.tsx | 67 ++ .../src/refine-theme/landing-hero-section.tsx | 126 +++ .../landing-hero-showcase-section.tsx | 420 +++++++++ .../refine-theme/landing-playground-modal.tsx | 31 +- .../refine-theme/landing-try-it-section.tsx | 411 ++++++++ documentation/tailwind.config.js | 167 +++- 54 files changed, 5557 insertions(+), 737 deletions(-) create mode 100644 documentation/src/components/landing/showcase-indicator.tsx create mode 100644 documentation/src/components/landing/showcase-wrapper.tsx create mode 100644 documentation/src/refine-theme/changing-text-element.tsx create mode 100644 documentation/src/refine-theme/icons/landing-app-crm.tsx create mode 100644 documentation/src/refine-theme/icons/landing-arrow-right.tsx create mode 100644 documentation/src/refine-theme/icons/landing-copy-success.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero-beam.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero-center.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero-grid.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero-item-node.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/antd.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/appwrite.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/auth0.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/chakra.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/google.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/material-ui.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/nestjs.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/nextjs.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/remix.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/strapi.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/supabase.tsx create mode 100644 documentation/src/refine-theme/icons/landing-hero/vite.tsx create mode 100644 documentation/src/refine-theme/icons/landing-start-action.tsx create mode 100644 documentation/src/refine-theme/icons/orange-star.tsx create mode 100644 documentation/src/refine-theme/icons/ph-badge.tsx create mode 100644 documentation/src/refine-theme/icons/refine-logo-single.tsx create mode 100644 documentation/src/refine-theme/landing-copy-command-button.tsx create mode 100644 documentation/src/refine-theme/landing-hero-animation-item.tsx create mode 100644 documentation/src/refine-theme/landing-hero-animation.tsx create mode 100644 documentation/src/refine-theme/landing-hero-github-stars.tsx create mode 100644 documentation/src/refine-theme/landing-hero-section.tsx create mode 100644 documentation/src/refine-theme/landing-hero-showcase-section.tsx create mode 100644 documentation/src/refine-theme/landing-try-it-section.tsx diff --git a/documentation/package-lock.json b/documentation/package-lock.json index 36fc9bfa3bd9..e4c5d88ffb9e 100644 --- a/documentation/package-lock.json +++ b/documentation/package-lock.json @@ -19,6 +19,7 @@ "base64url": "^3.0.1", "clsx": "^1.2.1", "copy-text-to-clipboard": "^3.1.0", + "dedent": "^0.7.0", "docusaurus-plugin-copy": "^0.1.1", "dotenv": "^16.0.2", "framer-motion": "^6.5.1", @@ -35,13 +36,14 @@ "react-use-cookie": "^1.4.0", "snarkdown": "^2.0.0", "swc-loader": "^0.2.3", - "tailwindcss": "^3.1.8", + "tailwindcss": "^3.3.5", "title-case": "^3.0.3" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.4.0", "@tailwindcss/typography": "^0.5.9", "@tsconfig/docusaurus": "^1.0.4", + "@types/dedent": "^0.7.0", "@types/fs-extra": "^9.0.13", "@types/gtag.js": "^0.0.12", "@types/react": "^17.0.19", @@ -199,6 +201,17 @@ "@algolia/requester-common": "4.17.0" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -3513,6 +3526,12 @@ "@types/ms": "*" } }, + "node_modules/@types/dedent": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@types/dedent/-/dedent-0.7.1.tgz", + "integrity": "sha512-NKo033xLkoVCgUobq+FS1S3J6kwWeOcyqEBc2r2oi9J/dKncY11J9VgS0Giv7T4rxVt/MajUVcFppT2TPJA2Cg==", + "dev": true + }, "node_modules/@types/eslint": { "version": "8.4.6", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz", @@ -3936,35 +3955,6 @@ "node": ">= 0.6" } }, - "node_modules/acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-node": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", - "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", - "dependencies": { - "acorn": "^7.0.0", - "acorn-walk": "^7.0.0", - "xtend": "^4.0.2" - } - }, - "node_modules/acorn-walk": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", - "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/address": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/address/-/address-1.2.1.tgz", @@ -4154,8 +4144,7 @@ "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", - "dev": true + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==" }, "node_modules/anymatch": { "version": "3.1.2", @@ -5835,6 +5824,11 @@ "node": ">=4" } }, + "node_modules/dedent": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", + "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==" + }, "node_modules/deep-extend": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", @@ -5902,11 +5896,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/defined": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", - "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==" - }, "node_modules/del": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz", @@ -6012,22 +6001,6 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, - "node_modules/detective": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", - "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", - "dependencies": { - "acorn-node": "^1.8.2", - "defined": "^1.0.0", - "minimist": "^1.2.6" - }, - "bin": { - "detective": "bin/detective.js" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -6866,9 +6839,9 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { - "version": "3.2.12", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", - "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", + "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -7394,9 +7367,12 @@ } }, "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/gensync": { "version": "1.0.0-beta.2", @@ -7687,6 +7663,17 @@ "node": ">=8" } }, + "node_modules/hasown": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", + "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/hast-to-hyperscript": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz", @@ -8298,11 +8285,11 @@ } }, "node_modules/is-core-module": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz", - "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", "dependencies": { - "has": "^1.0.3" + "hasown": "^2.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -8584,6 +8571,14 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", + "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/joi": { "version": "17.6.1", "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.1.tgz", @@ -8733,9 +8728,9 @@ } }, "node_modules/lilconfig": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz", - "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", + "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", "engines": { "node": ">=10" } @@ -9739,7 +9734,6 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", - "dev": true, "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", @@ -9747,9 +9741,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -10323,7 +10323,6 @@ "version": "4.0.5", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==", - "dev": true, "engines": { "node": ">= 6" } @@ -10404,9 +10403,9 @@ } }, "node_modules/postcss": { - "version": "8.4.16", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", - "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "funding": [ { "type": "opencollective", @@ -10415,10 +10414,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -10529,25 +10532,25 @@ } }, "node_modules/postcss-import": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", - "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "engines": { - "node": ">=10.0.0" + "node": ">=14.0.0" }, "peerDependencies": { "postcss": "^8.0.0" } }, "node_modules/postcss-js": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz", - "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", "dependencies": { "camelcase-css": "^2.0.1" }, @@ -10559,19 +10562,19 @@ "url": "https://opencollective.com/postcss/" }, "peerDependencies": { - "postcss": "^8.3.3" + "postcss": "^8.4.21" } }, "node_modules/postcss-load-config": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", - "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", + "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", "dependencies": { "lilconfig": "^2.0.5", - "yaml": "^1.10.2" + "yaml": "^2.1.1" }, "engines": { - "node": ">= 10" + "node": ">= 14" }, "funding": { "type": "opencollective", @@ -10590,6 +10593,14 @@ } } }, + "node_modules/postcss-load-config/node_modules/yaml": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "engines": { + "node": ">= 14" + } + }, "node_modules/postcss-loader": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.1.tgz", @@ -10774,11 +10785,11 @@ } }, "node_modules/postcss-nested": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz", - "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", + "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", "dependencies": { - "postcss-selector-parser": "^6.0.6" + "postcss-selector-parser": "^6.0.11" }, "engines": { "node": ">=12.0" @@ -10791,6 +10802,18 @@ "postcss": "^8.2.14" } }, + "node_modules/postcss-nested/node_modules/postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", @@ -11248,17 +11271,6 @@ } ] }, - "node_modules/quick-lru": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", - "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -12543,11 +12555,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, "node_modules/resolve": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", - "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "dependencies": { - "is-core-module": "^2.9.0", + "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, @@ -13452,11 +13464,11 @@ } }, "node_modules/sucrase": { - "version": "3.27.0", - "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.27.0.tgz", - "integrity": "sha512-IjpEeFzOWCGrB/e2DnPawkFajW6ONFFgs+lQT1+Ts5Z5ZM9gPnxpDh0q8tu7HVLt6IfRiUTbSsjfhqjHOP/cwQ==", - "dev": true, + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", + "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==", "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "glob": "7.1.6", "lines-and-columns": "^1.1.6", @@ -13472,11 +13484,23 @@ "node": ">=8" } }, + "node_modules/sucrase/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/sucrase/node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", - "dev": true, "engines": { "node": ">= 6" } @@ -13485,7 +13509,6 @@ "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", - "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -13629,42 +13652,39 @@ } }, "node_modules/tailwindcss": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz", - "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==", + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz", + "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==", "dependencies": { + "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", - "color-name": "^1.1.4", - "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.2.11", + "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "lilconfig": "^2.0.6", + "jiti": "^1.19.1", + "lilconfig": "^2.1.0", + "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.14", - "postcss-import": "^14.1.0", - "postcss-js": "^4.0.0", - "postcss-load-config": "^3.1.4", - "postcss-nested": "5.0.6", - "postcss-selector-parser": "^6.0.10", - "postcss-value-parser": "^4.2.0", - "quick-lru": "^5.1.1", - "resolve": "^1.22.1" + "postcss": "^8.4.23", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.1", + "postcss-nested": "^6.0.1", + "postcss-selector-parser": "^6.0.11", + "resolve": "^1.22.2", + "sucrase": "^3.32.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" }, "engines": { - "node": ">=12.13.0" - }, - "peerDependencies": { - "postcss": "^8.0.9" + "node": ">=14.0.0" } }, "node_modules/tailwindcss/node_modules/glob-parent": { @@ -13678,6 +13698,18 @@ "node": ">=10.13.0" } }, + "node_modules/tailwindcss/node_modules/postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -13778,7 +13810,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", - "dev": true, "dependencies": { "any-promise": "^1.0.0" } @@ -13787,7 +13818,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", - "dev": true, "dependencies": { "thenify": ">= 3.1.0 < 4" }, @@ -13938,8 +13968,7 @@ "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", - "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", - "dev": true + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" }, "node_modules/tslib": { "version": "2.4.0", @@ -15479,6 +15508,11 @@ "@algolia/requester-common": "4.17.0" } }, + "@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==" + }, "@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -17742,6 +17776,12 @@ "@types/ms": "*" } }, + "@types/dedent": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@types/dedent/-/dedent-0.7.1.tgz", + "integrity": "sha512-NKo033xLkoVCgUobq+FS1S3J6kwWeOcyqEBc2r2oi9J/dKncY11J9VgS0Giv7T4rxVt/MajUVcFppT2TPJA2Cg==", + "dev": true + }, "@types/eslint": { "version": "8.4.6", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz", @@ -18158,26 +18198,6 @@ } } }, - "acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==" - }, - "acorn-node": { - "version": "1.8.2", - "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", - "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", - "requires": { - "acorn": "^7.0.0", - "acorn-walk": "^7.0.0", - "xtend": "^4.0.2" - } - }, - "acorn-walk": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", - "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==" - }, "address": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/address/-/address-1.2.1.tgz", @@ -18321,8 +18341,7 @@ "any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", - "dev": true + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==" }, "anymatch": { "version": "3.1.2", @@ -19522,6 +19541,11 @@ "mimic-response": "^1.0.0" } }, + "dedent": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", + "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==" + }, "deep-extend": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", @@ -19568,11 +19592,6 @@ "object-keys": "^1.1.1" } }, - "defined": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", - "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==" - }, "del": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz", @@ -19649,16 +19668,6 @@ } } }, - "detective": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", - "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", - "requires": { - "acorn-node": "^1.8.2", - "defined": "^1.0.0", - "minimist": "^1.2.6" - } - }, "didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -20301,9 +20310,9 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "fast-glob": { - "version": "3.2.12", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", - "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", + "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", "requires": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -20717,9 +20726,9 @@ "optional": true }, "function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==" }, "gensync": { "version": "1.0.0-beta.2", @@ -20938,6 +20947,14 @@ "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz", "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==" }, + "hasown": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", + "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "requires": { + "function-bind": "^1.1.2" + } + }, "hast-to-hyperscript": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz", @@ -21374,11 +21391,11 @@ } }, "is-core-module": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz", - "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", "requires": { - "has": "^1.0.3" + "hasown": "^2.0.0" } }, "is-decimal": { @@ -21556,6 +21573,11 @@ } } }, + "jiti": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", + "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==" + }, "joi": { "version": "17.6.1", "resolved": "https://registry.npmjs.org/joi/-/joi-17.6.1.tgz", @@ -21675,9 +21697,9 @@ "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==" }, "lilconfig": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz", - "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", + "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==" }, "lines-and-columns": { "version": "1.2.4", @@ -22329,7 +22351,6 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", - "dev": true, "requires": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", @@ -22337,9 +22358,9 @@ } }, "nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" }, "negotiator": { "version": "0.6.3", @@ -22757,8 +22778,7 @@ "pirates": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", - "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==", - "dev": true + "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==" }, "pkg-dir": { "version": "4.2.0", @@ -22820,11 +22840,11 @@ } }, "postcss": { - "version": "8.4.16", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", - "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "requires": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -22891,9 +22911,9 @@ } }, "postcss-import": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", - "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", "requires": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", @@ -22901,20 +22921,27 @@ } }, "postcss-js": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz", - "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", "requires": { "camelcase-css": "^2.0.1" } }, "postcss-load-config": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", - "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", + "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", "requires": { "lilconfig": "^2.0.5", - "yaml": "^1.10.2" + "yaml": "^2.1.1" + }, + "dependencies": { + "yaml": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==" + } } }, "postcss-loader": { @@ -23025,11 +23052,22 @@ } }, "postcss-nested": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz", - "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", + "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", "requires": { - "postcss-selector-parser": "^6.0.6" + "postcss-selector-parser": "^6.0.11" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + } } }, "postcss-normalize-charset": { @@ -23343,11 +23381,6 @@ "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" }, - "quick-lru": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", - "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==" - }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -24295,11 +24328,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, "resolve": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", - "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "requires": { - "is-core-module": "^2.9.0", + "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" } @@ -24993,11 +25026,11 @@ } }, "sucrase": { - "version": "3.27.0", - "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.27.0.tgz", - "integrity": "sha512-IjpEeFzOWCGrB/e2DnPawkFajW6ONFFgs+lQT1+Ts5Z5ZM9gPnxpDh0q8tu7HVLt6IfRiUTbSsjfhqjHOP/cwQ==", - "dev": true, + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", + "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==", "requires": { + "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "glob": "7.1.6", "lines-and-columns": "^1.1.6", @@ -25006,17 +25039,25 @@ "ts-interface-checker": "^0.1.9" }, "dependencies": { + "@jridgewell/gen-mapping": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "requires": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, "commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", - "dev": true + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==" }, "glob": { "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", - "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -25119,32 +25160,32 @@ "requires": {} }, "tailwindcss": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz", - "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==", + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz", + "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==", "requires": { + "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", - "color-name": "^1.1.4", - "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.2.11", + "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "lilconfig": "^2.0.6", + "jiti": "^1.19.1", + "lilconfig": "^2.1.0", + "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.14", - "postcss-import": "^14.1.0", - "postcss-js": "^4.0.0", - "postcss-load-config": "^3.1.4", - "postcss-nested": "5.0.6", - "postcss-selector-parser": "^6.0.10", - "postcss-value-parser": "^4.2.0", - "quick-lru": "^5.1.1", - "resolve": "^1.22.1" + "postcss": "^8.4.23", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.1", + "postcss-nested": "^6.0.1", + "postcss-selector-parser": "^6.0.11", + "resolve": "^1.22.2", + "sucrase": "^3.32.0" }, "dependencies": { "glob-parent": { @@ -25154,6 +25195,15 @@ "requires": { "is-glob": "^4.0.3" } + }, + "postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } } } }, @@ -25218,7 +25268,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", - "dev": true, "requires": { "any-promise": "^1.0.0" } @@ -25227,7 +25276,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", - "dev": true, "requires": { "thenify": ">= 3.1.0 < 4" } @@ -25349,8 +25397,7 @@ "ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", - "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", - "dev": true + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" }, "tslib": { "version": "2.4.0", diff --git a/documentation/package.json b/documentation/package.json index db2c4ba5f4c4..afc01ad6c289 100644 --- a/documentation/package.json +++ b/documentation/package.json @@ -27,6 +27,7 @@ "base64url": "^3.0.1", "clsx": "^1.2.1", "copy-text-to-clipboard": "^3.1.0", + "dedent": "^0.7.0", "docusaurus-plugin-copy": "^0.1.1", "dotenv": "^16.0.2", "framer-motion": "^6.5.1", @@ -43,7 +44,7 @@ "react-use-cookie": "^1.4.0", "snarkdown": "^2.0.0", "swc-loader": "^0.2.3", - "tailwindcss": "^3.1.8", + "tailwindcss": "^3.3.5", "title-case": "^3.0.3" }, "browserslist": { @@ -62,6 +63,7 @@ "@docusaurus/module-type-aliases": "2.4.0", "@tailwindcss/typography": "^0.5.9", "@tsconfig/docusaurus": "^1.0.4", + "@types/dedent": "^0.7.0", "@types/fs-extra": "^9.0.13", "@types/gtag.js": "^0.0.12", "@types/react": "^17.0.19", diff --git a/documentation/src/components/landing/showcase-indicator.tsx b/documentation/src/components/landing/showcase-indicator.tsx new file mode 100644 index 000000000000..7aebacb2f666 --- /dev/null +++ b/documentation/src/components/landing/showcase-indicator.tsx @@ -0,0 +1,143 @@ +import React from "react"; +import clsx from "clsx"; + +type Props = { + x: string | number; + y: string | number; + className?: string; +}; + +export const ShowcaseIndicator = React.memo(function ShowcaseIndicatorBase({ + x, + y, + className, +}: Props) { + return ( +
+
+
+ {[0, 400, 800].map((d) => ( +
+
+
+ ))} +
+
+ ); + // return ( + // + //
+ //
+ // {[0, 400, 800].map((d) => ( + //
+ //
+ //
+ // ))} + //
+ // + // ); +}); diff --git a/documentation/src/components/landing/showcase-wrapper.tsx b/documentation/src/components/landing/showcase-wrapper.tsx new file mode 100644 index 000000000000..bdf5b009198a --- /dev/null +++ b/documentation/src/components/landing/showcase-wrapper.tsx @@ -0,0 +1,287 @@ +import React from "react"; +import clsx from "clsx"; +import { ShowcaseIndicator } from "./showcase-indicator"; +import Highlight, { defaultProps } from "prism-react-renderer"; +import theme from "prism-react-renderer/themes/nightOwl"; +import dedent from "dedent"; +import { motion } from "framer-motion"; + +type HighlightProps = { + render: string; + code: string; + x: string | number; + y: string | number; + width: string | number; + height: string | number; + codePosition: "top" | "bottom" | "left" | "right"; +}; + +type Props = { + className?: string; + render: string; + highlights?: Array; +}; + +const HighlightItem = React.memo(function HighlightBase({ + render, + code, + x, + y, + width, + height, + codePosition, +}: HighlightProps) { + return ( +
+ + +
+
+ + {({ tokens, getLineProps, getTokenProps }) => ( + <> + {tokens.map((line, i) => ( +
+ {line.map((token, key) => { + const content = + `${token.content}`.replace( + "___", + "    ", + ); + + const { + children: _children, + ...tokenProps + } = getTokenProps({ + token, + }); + + return ( + + ); + })} +
+ ))} + + )} + +
+
+
+ ); +}); + +export const ShowcaseWrapper = React.memo( + function ShowcaseWrapperBase({ className, render, highlights }: Props) { + const [mounted, setMounted] = React.useState(false); + + React.useEffect(() => { + setTimeout(() => { + setMounted(true); + }, 500); + }, []); + + return ( + + + + {mounted && ( + +
+ {highlights.map((h) => ( + + ))} + + )} + + + ); + }, + (prev, next) => + prev.render === next.render && prev.className === next.className, +); diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index a3ba8337d822..1ca909e6ce4e 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -9,8 +9,8 @@ @tailwind components; @tailwind utilities; -@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +@import url("https://refine.ams3.cdn.digitaloceanspaces.com/website/static/fonts/disket.css"); @layer utilities { .animation-running { @@ -39,6 +39,13 @@ mask-size: 1920px 288px; mask-position: center; } + .scrollbar-hidden { + -ms-overflow-style: none; + scrollbar-width: none; + } + .scrollbar-hidden::-webkit-scrollbar { + display: none; + } .landing-image-bottom-mobile-bg { mask-image: url("../../static/assets/hero-video-bottom-mobile.svg"); @@ -148,7 +155,7 @@ --ifm-alert-shadow: 0.5px 1px 1px 0px rgba(0, 0, 0, 0.15); /* var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base) */ --ifm-menu-link-sublist-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E"); - --primary-font-sans: "Outfit"; + --primary-font-sans: "Inter"; --ifm-font-family-base: var(--primary-font-sans), system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index 128f39d35b18..efc422a90750 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -6,9 +6,11 @@ import { CommonLayout } from "../refine-theme/common-layout"; import { LandingFooter } from "../refine-theme/landing-footer"; import { LandingHeader } from "../refine-theme/landing-header"; import { LandingCommunity } from "../refine-theme/landing-community"; -import LandingEnterpriseDevelopers from "../refine-theme/landing-enterprise-developers"; +import { LandingEnterpriseDevelopers } from "../refine-theme/landing-enterprise-developers"; import { LandingTrustedByDevelopers } from "../refine-theme/landing-trusted-by-developers"; import { LandingPackages } from "../refine-theme/landing-packages"; +import { LandingHeroSection } from "../refine-theme/landing-hero-section"; +import { LandingTryItSection } from "../refine-theme/landing-try-it-section"; function Home() { return ( @@ -29,12 +31,19 @@ function Home() {
+ +
diff --git a/documentation/src/refine-theme/changing-text-element.tsx b/documentation/src/refine-theme/changing-text-element.tsx new file mode 100644 index 000000000000..77fd576eaecf --- /dev/null +++ b/documentation/src/refine-theme/changing-text-element.tsx @@ -0,0 +1,113 @@ +import React from "react"; + +type Props = { + first: string; + second: string; + onEnd?: () => void; + tick?: number; + className?: string; + prevClassName?: string; + nextClassName?: string; + activeClassName?: string; +}; + +export type ChangingTextElementRef = { + start: () => void; + reset: () => void; +}; + +export const ChangingTextElement = React.forwardRef< + ChangingTextElementRef, + Props +>(function ChangingText( + { + first, + second, + onEnd, + tick = 75, + className, + prevClassName, + nextClassName, + activeClassName, + }, + ref, +) { + const maxLen = Math.max(first.length, second.length); + const prev = first.padEnd(maxLen, " "); + const next = second.padEnd(maxLen, " "); + const [pos, setPos] = React.useState(-1); + const [status, setStatus] = React.useState<"idle" | "running" | "done">( + "idle", + ); + + React.useImperativeHandle(ref, () => ({ + start: () => { + setPos(-1); + setStatus("running"); + }, + reset: () => { + setPos(-1); + setStatus("idle"); + }, + })); + + React.useEffect(() => { + if (status === "running") { + setPos(-1); + } + }, [status]); + + React.useEffect(() => { + if (status === "running") { + const timer = setInterval(() => { + setPos((prev) => { + if (prev === maxLen - 1) { + setStatus("done"); + return prev; + } + + return prev + 1; + }); + }, tick); + + return () => clearInterval(timer); + } + }, [status, tick, maxLen]); + + React.useEffect(() => { + if (status === "done") { + onEnd?.(); + } + }, [status]); + + return ( + + {next + .split("") + .slice(0, Math.max(pos, 0)) + + .map((letter, index) => { + return ( + + {letter} + + ); + })} + {next.split("")[pos] && ( + + {next.split("")[pos]} + + )} + {prev + .split("") + .slice(pos + 1) + .map((letter, index) => { + return ( + + {letter} + + ); + })} + + ); +}); diff --git a/documentation/src/refine-theme/common-header/mobile-menu-modal.tsx b/documentation/src/refine-theme/common-header/mobile-menu-modal.tsx index 61a5a252f5c9..28a19f5ae117 100644 --- a/documentation/src/refine-theme/common-header/mobile-menu-modal.tsx +++ b/documentation/src/refine-theme/common-header/mobile-menu-modal.tsx @@ -15,6 +15,7 @@ import { RefineLogoIcon } from "../icons/refine-logo"; import { MENU_ITEMS, NavbarItemType } from "./constants"; import { MenuItem } from "./menu-item"; import { MobileNavItem } from "./mobile-nav-item"; +import { TopAnnouncement } from "../top-announcement"; type MobileMenuModalProps = { isModalOpen: boolean; @@ -44,13 +45,16 @@ export const MobileMenuModal: React.FC = ({
+
= ({ />
+ +
+ +
+
-
= ({ "overflow-auto", )} > - -
-
- {MENU_ITEMS.map((item) => { - if (item.isPopover) { - return ( - - {({ open }) => ( - <> - - - {item.items.map( - ( - subItem, - ) => ( - - ), - )} - - - )} - - ); - } - - return ( - - ); - })} -
-
-
-

- Join the party! -

-
- - - - - - - - - -
-
- -
- -

- If you like refine, don’t forget - to star us on GitHub! -

-
- -
-
-
-
+
*/} ); }; + +const MenuSection = () => { + return ( +
+
+ {MENU_ITEMS.map((item) => { + if (item.isPopover) { + return ( + + {({ open }) => ( + <> + + + + {item.items.map((subItem) => ( + + ))} + + + )} + + ); + } + + return ( + + ); + })} +
+
+
+

+ Join the party! +

+
+ + + + + + + + + +
+
+ +
+ +

+ If you like refine, don’t forget to star us on + GitHub! +

+
+ +
+
+ ); +}; diff --git a/documentation/src/refine-theme/common-header/navbar-item.tsx b/documentation/src/refine-theme/common-header/navbar-item.tsx index 97172bcd08cb..6051c9ebd666 100644 --- a/documentation/src/refine-theme/common-header/navbar-item.tsx +++ b/documentation/src/refine-theme/common-header/navbar-item.tsx @@ -45,7 +45,8 @@ export const NavbarItem: React.FC = ({ to={item.href} className={clsx( "inline-flex items-center gap-2", - "text-base font-medium text-gray-900 dark:text-white", + "text-sm leading-6 font-normal text-gray-900 dark:text-gray-300", + "transition-colors duration-150 ease-in-out", "no-underline", isPermanentDark && "!text-white", item.label === "Hackathon" diff --git a/documentation/src/refine-theme/common-header/navbar-popover-item.tsx b/documentation/src/refine-theme/common-header/navbar-popover-item.tsx index 68a5e572aec4..f82a261f01d0 100644 --- a/documentation/src/refine-theme/common-header/navbar-popover-item.tsx +++ b/documentation/src/refine-theme/common-header/navbar-popover-item.tsx @@ -48,14 +48,15 @@ export const NavbarPopoverItem: React.FC = ({ {item.label} @@ -63,27 +64,19 @@ export const NavbarPopoverItem: React.FC = ({ { "min-h-screen", "flex flex-col", "dark:bg-gray-900 bg-gray-0", + "transition-colors", + "duration-150", + "ease-in-out", )} > { ); }; diff --git a/documentation/src/refine-theme/css/fonts.css b/documentation/src/refine-theme/css/fonts.css index c46e5a9e0873..fd84b4d14d93 100644 --- a/documentation/src/refine-theme/css/fonts.css +++ b/documentation/src/refine-theme/css/fonts.css @@ -1,2 +1 @@ -@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;400;500;600;700&display=swap"); diff --git a/documentation/src/refine-theme/footer-data.ts b/documentation/src/refine-theme/footer-data.ts index 73cf50a1d677..1788282defa4 100644 --- a/documentation/src/refine-theme/footer-data.ts +++ b/documentation/src/refine-theme/footer-data.ts @@ -58,22 +58,29 @@ export const menuItems = [ label: "Store", href: "https://store.refine.dev", }, - // { - // label: "Terms & Conditions", - // href: "/terms-and-conditions", - // }, - { - label: "Privacy Policy", - href: "/privacy-policy", - }, { - label: "License", - href: "https://github.com/refinedev/refine/blob/next/LICENSE", + label: "Contact Us", + href: "#", }, ], }, ]; +export const secondaryMenuItems = [ + { + label: "Terms & Conditions", + href: "#", + }, + { + label: "Privacy Policy", + href: "/privacy-policy", + }, + { + label: "License", + href: "https://github.com/refinedev/refine/blob/next/LICENSE", + }, +]; + export const footerDescription = `refine is a React-based framework for the rapid development of web applications. It eliminates the repetitive tasks demanded by CRUD operations and provides industry standard solutions.`; export const socialLinks = [ diff --git a/documentation/src/refine-theme/icons/dark-mode.tsx b/documentation/src/refine-theme/icons/dark-mode.tsx index 09cbd3e2da41..3a2f594dc041 100644 --- a/documentation/src/refine-theme/icons/dark-mode.tsx +++ b/documentation/src/refine-theme/icons/dark-mode.tsx @@ -3,15 +3,20 @@ import React from "react"; export const DarkModeIcon = (props: React.SVGProps) => ( ); diff --git a/documentation/src/refine-theme/icons/hamburger.tsx b/documentation/src/refine-theme/icons/hamburger.tsx index 19459ddd0f9e..04b211215d05 100644 --- a/documentation/src/refine-theme/icons/hamburger.tsx +++ b/documentation/src/refine-theme/icons/hamburger.tsx @@ -3,24 +3,16 @@ import { SVGProps } from "react"; export const HamburgerIcon = (props: SVGProps) => ( - - ); diff --git a/documentation/src/refine-theme/icons/landing-app-crm.tsx b/documentation/src/refine-theme/icons/landing-app-crm.tsx new file mode 100644 index 000000000000..e8cbf88e94c0 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-app-crm.tsx @@ -0,0 +1,890 @@ +import React from "react"; + +export const LandingAppCrmSvg = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-arrow-right.tsx b/documentation/src/refine-theme/icons/landing-arrow-right.tsx new file mode 100644 index 000000000000..2c6f3a3ac550 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-arrow-right.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export const LandingArrowRightIcon = (props: React.SVGProps) => ( + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-copy-success.tsx b/documentation/src/refine-theme/icons/landing-copy-success.tsx new file mode 100644 index 000000000000..09410da1825d --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-copy-success.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const LandingCopySuccessIcon = ( + props: React.SVGProps, +) => ( + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero-beam.tsx b/documentation/src/refine-theme/icons/landing-hero-beam.tsx new file mode 100644 index 000000000000..07c90d420828 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero-beam.tsx @@ -0,0 +1,79 @@ +import React from "react"; + +export const LandingHeroBeamSvg = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero-center.tsx b/documentation/src/refine-theme/icons/landing-hero-center.tsx new file mode 100644 index 000000000000..c0a50f86da28 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero-center.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export const LandingHeroCenterSvg = (props: React.SVGProps) => ( + <> + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero-grid.tsx b/documentation/src/refine-theme/icons/landing-hero-grid.tsx new file mode 100644 index 000000000000..712b9e05def9 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero-grid.tsx @@ -0,0 +1,81 @@ +import clsx from "clsx"; +import React from "react"; + +const BgGridMask = React.memo(function GridMask() { + return ( + + {Array.from({ length: 20 }) + .fill(null) + .map((_, i) => { + return Array.from({ length: 16 }) + .fill(null) + .map((_, j) => { + return ( + + ); + }); + })} + + ); +}); + +export const LandingHeroGridSvg = (props: React.SVGProps) => ( + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero-item-node.tsx b/documentation/src/refine-theme/icons/landing-hero-item-node.tsx new file mode 100644 index 000000000000..db12255de985 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero-item-node.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export const LandingHeroItemNodeSvg = ( + props: React.SVGProps, +) => ( + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/antd.tsx b/documentation/src/refine-theme/icons/landing-hero/antd.tsx new file mode 100644 index 000000000000..ce001f3b2ee1 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/antd.tsx @@ -0,0 +1,164 @@ +import React from "react"; + +export const LandingHeroAntdIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/appwrite.tsx b/documentation/src/refine-theme/icons/landing-hero/appwrite.tsx new file mode 100644 index 000000000000..63268fb67816 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/appwrite.tsx @@ -0,0 +1,56 @@ +import React from "react"; + +export const LandingHeroAppwriteIcon = ( + props: React.SVGProps, +) => ( + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/auth0.tsx b/documentation/src/refine-theme/icons/landing-hero/auth0.tsx new file mode 100644 index 000000000000..5458742bd93b --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/auth0.tsx @@ -0,0 +1,46 @@ +import React from "react"; + +export const LandingHeroAuth0Icon = (props: React.SVGProps) => ( + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/chakra.tsx b/documentation/src/refine-theme/icons/landing-hero/chakra.tsx new file mode 100644 index 000000000000..b76d9ba0b9cf --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/chakra.tsx @@ -0,0 +1,76 @@ +import React from "react"; + +export const LandingHeroChakraUIIcon = ( + props: React.SVGProps, +) => ( + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/google.tsx b/documentation/src/refine-theme/icons/landing-hero/google.tsx new file mode 100644 index 000000000000..45d94c2c27ad --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/google.tsx @@ -0,0 +1,70 @@ +import React from "react"; + +export const LandingHeroGoogleIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/material-ui.tsx b/documentation/src/refine-theme/icons/landing-hero/material-ui.tsx new file mode 100644 index 000000000000..4f0392eba22d --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/material-ui.tsx @@ -0,0 +1,52 @@ +import React from "react"; + +export const LandingHeroMaterialUIIcon = ( + props: React.SVGProps, +) => ( + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/nestjs.tsx b/documentation/src/refine-theme/icons/landing-hero/nestjs.tsx new file mode 100644 index 000000000000..661665062991 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/nestjs.tsx @@ -0,0 +1,50 @@ +import React from "react"; + +export const LandingHeroNestjsIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/nextjs.tsx b/documentation/src/refine-theme/icons/landing-hero/nextjs.tsx new file mode 100644 index 000000000000..534a32f699a7 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/nextjs.tsx @@ -0,0 +1,106 @@ +import React from "react"; + +export const LandingHeroNextjsIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/remix.tsx b/documentation/src/refine-theme/icons/landing-hero/remix.tsx new file mode 100644 index 000000000000..09caff26752f --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/remix.tsx @@ -0,0 +1,54 @@ +import React from "react"; + +export const LandingHeroRemixIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/strapi.tsx b/documentation/src/refine-theme/icons/landing-hero/strapi.tsx new file mode 100644 index 000000000000..ede19cce9332 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/strapi.tsx @@ -0,0 +1,96 @@ +import React from "react"; + +export const LandingHeroStrapiIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/supabase.tsx b/documentation/src/refine-theme/icons/landing-hero/supabase.tsx new file mode 100644 index 000000000000..248d215fa48f --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/supabase.tsx @@ -0,0 +1,110 @@ +import React from "react"; + +export const LandingHeroSupabaseIcon = ( + props: React.SVGProps, +) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-hero/vite.tsx b/documentation/src/refine-theme/icons/landing-hero/vite.tsx new file mode 100644 index 000000000000..aa72fbec35df --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-hero/vite.tsx @@ -0,0 +1,102 @@ +import React from "react"; + +export const LandingHeroViteIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/landing-start-action.tsx b/documentation/src/refine-theme/icons/landing-start-action.tsx new file mode 100644 index 000000000000..2d23bfc829b3 --- /dev/null +++ b/documentation/src/refine-theme/icons/landing-start-action.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const LandingStartActionIcon = ( + props: React.SVGProps, +) => ( + + + +); diff --git a/documentation/src/refine-theme/icons/light-mode.tsx b/documentation/src/refine-theme/icons/light-mode.tsx index ab98847f4253..6880e68c3ffa 100644 --- a/documentation/src/refine-theme/icons/light-mode.tsx +++ b/documentation/src/refine-theme/icons/light-mode.tsx @@ -3,15 +3,15 @@ import React from "react"; export const LightModeIcon = (props: React.SVGProps) => ( ); diff --git a/documentation/src/refine-theme/icons/orange-star.tsx b/documentation/src/refine-theme/icons/orange-star.tsx new file mode 100644 index 000000000000..7ade512c4038 --- /dev/null +++ b/documentation/src/refine-theme/icons/orange-star.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +export const OrangeStarIcon = (props: React.SVGProps) => ( + + + +); diff --git a/documentation/src/refine-theme/icons/ph-badge.tsx b/documentation/src/refine-theme/icons/ph-badge.tsx new file mode 100644 index 000000000000..edab3ee89b8b --- /dev/null +++ b/documentation/src/refine-theme/icons/ph-badge.tsx @@ -0,0 +1,56 @@ +import React from "react"; + +export const PHBadgeIcon = (props: React.SVGProps) => ( + + + + + + + + + + + + +); diff --git a/documentation/src/refine-theme/icons/refine-logo-single.tsx b/documentation/src/refine-theme/icons/refine-logo-single.tsx new file mode 100644 index 000000000000..ebd1b740496e --- /dev/null +++ b/documentation/src/refine-theme/icons/refine-logo-single.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export const RefineLogoSingleIcon = (props: React.SVGProps) => ( + + + + +); diff --git a/documentation/src/refine-theme/icons/refine-logo.tsx b/documentation/src/refine-theme/icons/refine-logo.tsx index b89d4dc2ffee..cd1cbb8a180b 100644 --- a/documentation/src/refine-theme/icons/refine-logo.tsx +++ b/documentation/src/refine-theme/icons/refine-logo.tsx @@ -3,41 +3,32 @@ import React from "react"; export const RefineLogoIcon = (props: React.SVGProps) => ( - - + ); diff --git a/documentation/src/refine-theme/landing-community.tsx b/documentation/src/refine-theme/landing-community.tsx index 40c0d2f3e6de..eb8c02530983 100644 --- a/documentation/src/refine-theme/landing-community.tsx +++ b/documentation/src/refine-theme/landing-community.tsx @@ -142,6 +142,9 @@ export const LandingCommunity: FC = ({ className }) => { src={`https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/investors${ colorMode === "dark" ? "-dark" : "" }.png`} + style={{ + aspectRatio: "908/544", + }} alt="investors" loading="lazy" /> diff --git a/documentation/src/refine-theme/landing-copy-command-button.tsx b/documentation/src/refine-theme/landing-copy-command-button.tsx new file mode 100644 index 000000000000..892a6a60fb26 --- /dev/null +++ b/documentation/src/refine-theme/landing-copy-command-button.tsx @@ -0,0 +1,129 @@ +import React from "react"; +import clsx from "clsx"; + +import { + ChangingTextElement, + ChangingTextElementRef, +} from "./changing-text-element"; +import { LandingCopySuccessIcon } from "./icons/landing-copy-success"; + +const installText = "npm create refine-app@latest"; +const copiedText = "copied to clipboard!"; + +export const LandingCopyCommandButton = ({ + className, +}: { + className?: string; +}) => { + const changingTextRef = React.useRef(null); + const copyTimeoutRef = React.useRef(null); + const [copied, setCopied] = React.useState(false); + const [fadedOut, setFadedOut] = React.useState(false); + + const onCopy = () => { + if (changingTextRef.current) { + if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current); + setCopied(false); + changingTextRef.current.start(); + // copy to clipboard + navigator.clipboard.writeText(installText); + copyTimeoutRef.current = setTimeout(() => { + setFadedOut(true); + setTimeout(() => { + changingTextRef.current?.reset(); + setFadedOut(false); + }, 300); + }, 3000); + } + }; + + return ( + + ); +}; diff --git a/documentation/src/refine-theme/landing-footer.tsx b/documentation/src/refine-theme/landing-footer.tsx index 1d5fbe3755dd..0cfcfc91789c 100644 --- a/documentation/src/refine-theme/landing-footer.tsx +++ b/documentation/src/refine-theme/landing-footer.tsx @@ -1,233 +1,327 @@ import clsx from "clsx"; import React from "react"; import { openFigma } from "../utils/open-figma"; -import { footerDescription, menuItems, socialLinks } from "./footer-data"; +import { menuItems, secondaryMenuItems, socialLinks } from "./footer-data"; import { HeartOutlinedIcon } from "./icons/heart-outlined"; -import { RefineLogoIcon } from "./icons/refine-logo"; -import { ProductHuntLogo } from "./product-hunt-logo"; +import Link from "@docusaurus/Link"; +import { RefineLogoSingleIcon } from "./icons/refine-logo-single"; +import { PHBadgeIcon } from "./icons/ph-badge"; export const LandingFooter = () => { + const info = ( +
+
+ Refine Inc. +
+
+ 256 Chapman Road STE 105-4 Newark, DE 19702 +
+ + info@refine.dev + +
+ ); + + const social = ( +
+
+
+ Join us on +
+
+ {socialLinks.map(({ href, icon: Icon }) => ( + + + + ))} +
+
+
+ ); + return ( - <> +
-
- - -
-
- {footerDescription} -
- + + + + + +
+
- {menuItems.map((menu) => ( + {info} +
+ {menuItems.map((menu) => ( +
-
- {menu.label} -
-
- {menu.items.map((item) => ( - - {item.label} - - ))} -
+ {menu.label}
- ))} -
-
-
- Contact -
-
-
- Refine Development Inc.{" "} -
- 256 Chapman Road STE 105-4{" "} -
- Newark, DE 19702 -
-
-
+
+ {menu.items.map((item) => ( - info@refine.dev + {item.label} -
+ ))}
+ ))} +
+ {social}
+
+ {info} + {social} +
-
- © 2023, refine from San Francisco to wherever - you're with{" "} - -
- - Join us on - -
( + + {menu.label} + + ))} +
+
+ { + "© 2023, Refine from Delaware to wherever you're with " + } + - {socialLinks.map(({ href, icon: Icon }) => ( - - - - ))} -
+ />
- +
); }; diff --git a/documentation/src/refine-theme/landing-github-star-button.tsx b/documentation/src/refine-theme/landing-github-star-button.tsx index b1dfe679ecac..6b53ac41f06b 100644 --- a/documentation/src/refine-theme/landing-github-star-button.tsx +++ b/documentation/src/refine-theme/landing-github-star-button.tsx @@ -13,17 +13,18 @@ export const LandingGithubStarButton = () => { target="_blank" rel="noreferrer" className={clsx( - "text-base", - "text-gray-0", - "flex gap-2.5 items-center", + "flex gap-2 items-center", + "font-normal", + "text-sm leading-6", + "text-gray-500 dark:text-gray-400", + "hover:text-gray-400 dark:hover:text-gray-300", "hover:no-underline", - "hover:text-gray-0", "transition-colors", "duration-200", "ease-in-out", )} > - +
{loading ? ( { }} /> ) : ( - - {githubStarCountText} - + {githubStarCountText} )}
diff --git a/documentation/src/refine-theme/landing-header.tsx b/documentation/src/refine-theme/landing-header.tsx index f80f09ba7b75..aa4bf258d75a 100644 --- a/documentation/src/refine-theme/landing-header.tsx +++ b/documentation/src/refine-theme/landing-header.tsx @@ -1,124 +1,108 @@ import clsx from "clsx"; -import React, { useEffect, useState } from "react"; +import React from "react"; import Link from "@docusaurus/Link"; -import SearchBar from "@theme/SearchBar"; import { Menu } from "./common-header/menu"; import { MobileMenuModal } from "./common-header/mobile-menu-modal"; -import { LandingDocSearchButton } from "./landing-doc-search-button"; import { LandingGithubStarButton } from "./landing-github-star-button"; import { openFigma } from "../utils/open-figma"; -import { DiscordIcon } from "./icons/discord"; import { HamburgerIcon } from "./icons/hamburger"; import { RefineLogoIcon } from "./icons/refine-logo"; import { TopAnnouncement } from "./top-announcement"; +import { CommonThemeToggle } from "./common-theme-toggle"; export const LandingHeader = () => { const [isModalOpen, setIsModalOpen] = React.useState(false); - const [offset, setOffset] = useState(false); - - useEffect(() => { - const onScroll = () => { - const scrollY = window.scrollY; - - if (scrollY > 24) { - return setOffset(true); - } - - return setOffset(false); - }; - - window.removeEventListener("scroll", onScroll); - window.addEventListener("scroll", onScroll, { passive: true }); - return () => window.removeEventListener("scroll", onScroll); - }, []); - return ( <> -
-
-
-
- - - -
-
-
- -
-
- -
- - - - -
-
- -
-
-
- -
- {offset && (
+
+ + + +
+
+ +
+
+ + +
+
- )} -
+ ); }; diff --git a/documentation/src/refine-theme/landing-hero-animation-item.tsx b/documentation/src/refine-theme/landing-hero-animation-item.tsx new file mode 100644 index 000000000000..32b6bdce78b4 --- /dev/null +++ b/documentation/src/refine-theme/landing-hero-animation-item.tsx @@ -0,0 +1,216 @@ +import React from "react"; +import clsx from "clsx"; +import { LandingHeroItemNodeSvg } from "./icons/landing-hero-item-node"; +import { AnimatePresence, motion } from "framer-motion"; +import { + ChangingTextElement, + ChangingTextElementRef, +} from "./changing-text-element"; + +const hexToRgba = (hex: string, alpha: number) => { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + + return `rgba(${r}, ${g}, ${b}, ${alpha})`; +}; + +type ItemProps = { + vertical: "top" | "bottom"; + horizontal: "left" | "right"; + previousName?: string; + icon: React.ComponentType>; + section: string; + name: string; + color: string; +}; + +export const LandingHeroAnimationItem = function ItemBase({ + vertical, + horizontal, + previousName, + icon: Icon, + section, + name, + color, +}: ItemProps) { + const ref = React.useRef(null); + + React.useEffect(() => { + if (ref.current) { + ref.current.start(); + } + }, [ref]); + + return ( +
+
+ + + + + +
+
+
+ {section} +
+
+ +
+
+ +
+
+
+
+ ); +}; diff --git a/documentation/src/refine-theme/landing-hero-animation.tsx b/documentation/src/refine-theme/landing-hero-animation.tsx new file mode 100644 index 000000000000..037c0079064d --- /dev/null +++ b/documentation/src/refine-theme/landing-hero-animation.tsx @@ -0,0 +1,304 @@ +import React from "react"; +import clsx from "clsx"; +import { LandingHeroViteIcon } from "./icons/landing-hero/vite"; +import { LandingHeroGridSvg } from "./icons/landing-hero-grid"; +import { LandingHeroCenterSvg } from "./icons/landing-hero-center"; +import { LandingHeroBeamSvg } from "./icons/landing-hero-beam"; +import { LandingHeroAnimationItem } from "./landing-hero-animation-item"; +import { LandingHeroNextjsIcon } from "./icons/landing-hero/nextjs"; +import { LandingHeroRemixIcon } from "./icons/landing-hero/remix"; +import { LandingHeroMaterialUIIcon } from "./icons/landing-hero/material-ui"; +import { LandingHeroAntdIcon } from "./icons/landing-hero/antd"; +import { LandingHeroChakraUIIcon } from "./icons/landing-hero/chakra"; +import { LandingHeroSupabaseIcon } from "./icons/landing-hero/supabase"; +import { LandingHeroNestjsIcon } from "./icons/landing-hero/nestjs"; +import { LandingHeroAppwriteIcon } from "./icons/landing-hero/appwrite"; +import { LandingHeroGoogleIcon } from "./icons/landing-hero/google"; +import { LandingHeroAuth0Icon } from "./icons/landing-hero/auth0"; +import { LandingHeroStrapiIcon } from "./icons/landing-hero/strapi"; + +type ItemType = { + icon: React.ComponentType>; + name: string; + color: string; +}; + +const platformItems: ItemType[] = [ + { + name: "Vite", + icon: LandingHeroViteIcon, + color: "#ffa800", + }, + { + name: "Next.js", + icon: LandingHeroNextjsIcon, + color: "#ffffff", + }, + { + name: "Remix", + icon: LandingHeroRemixIcon, + color: "#ffffff", + }, +]; + +const uiItems: ItemType[] = [ + { + name: "Material UI", + icon: LandingHeroMaterialUIIcon, + color: "#007FFF", + }, + { + name: "Ant Design", + icon: LandingHeroAntdIcon, + color: "#148EFF", + }, + { + name: "Chakra UI", + icon: LandingHeroChakraUIIcon, + color: "#29C6B7", + }, +]; + +const backendItems: ItemType[] = [ + { + name: "Supabase", + icon: LandingHeroSupabaseIcon, + color: "#3ECF8E", + }, + { + name: "NestJS", + icon: LandingHeroNestjsIcon, + color: "#E0234E", + }, + { + name: "Appwrite", + icon: LandingHeroAppwriteIcon, + color: "#FD366E", + }, +]; + +const authItems: ItemType[] = [ + { + name: "Google", + icon: LandingHeroGoogleIcon, + color: "#EA4335", + }, + { + name: "Auth0", + icon: LandingHeroAuth0Icon, + color: "#EB5424", + }, + { + name: "Strapi", + icon: LandingHeroStrapiIcon, + color: "#4945FF", + }, +]; + +export const LandingHeroAnimation = React.memo(function HeroAnimation() { + const [activePlatform, setActivePlatform] = React.useState(0); + const [activeUI, setActiveUI] = React.useState(0); + const [activeBackend, setActiveBackend] = React.useState(0); + const [activeAuth, setActiveAuth] = React.useState(0); + + React.useEffect(() => { + const interval = setInterval(() => { + setActivePlatform((prev) => (prev + 1) % platformItems.length); + setTimeout(() => { + setActiveUI((prev) => (prev + 1) % uiItems.length); + }, 1500); + setTimeout(() => { + setActiveBackend((prev) => (prev + 1) % backendItems.length); + }, 3000); + setTimeout(() => { + setActiveAuth((prev) => (prev + 1) % authItems.length); + }, 4500); + }, 7500); + + return () => clearInterval(interval); + }, []); + + return ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ ); +}); diff --git a/documentation/src/refine-theme/landing-hero-github-stars.tsx b/documentation/src/refine-theme/landing-hero-github-stars.tsx new file mode 100644 index 000000000000..6150eafec083 --- /dev/null +++ b/documentation/src/refine-theme/landing-hero-github-stars.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import clsx from "clsx"; +import { useCommunityStatsContext } from "../context/CommunityStats"; +import { OrangeStarIcon } from "./icons/orange-star"; +import { Spinner } from "./spinner"; + +export const LandingHeroGithubStars = () => { + const { loading, githubStarCountText } = useCommunityStatsContext(); + + return ( + + + + + {loading ? ( + + ) : ( + {githubStarCountText} + )} + {" "} + GitHub stars so far + + + ); +}; diff --git a/documentation/src/refine-theme/landing-hero-section.tsx b/documentation/src/refine-theme/landing-hero-section.tsx new file mode 100644 index 000000000000..7da06171e5ea --- /dev/null +++ b/documentation/src/refine-theme/landing-hero-section.tsx @@ -0,0 +1,126 @@ +import React from "react"; +import clsx from "clsx"; +import { LandingHeroGithubStars } from "./landing-hero-github-stars"; +import { LandingStartActionIcon } from "./icons/landing-start-action"; + +import { LandingHeroAnimation } from "./landing-hero-animation"; +import { LandingCopyCommandButton } from "./landing-copy-command-button"; +import Link from "@docusaurus/Link"; +import { LandingHeroShowcaseSection } from "./landing-hero-showcase-section"; + +export const LandingHeroSection = ({ className }: { className?: string }) => { + return ( +
+
+
+ +

+ Open-source Retool for Enterprise +

+

+ Build React-based internal tools, admin panels, + dashboards & B2B apps with unmatched flexibilty. +

+
+ + + + Get started + + + +
+
+
+ +
+
+ +
+ ); +}; diff --git a/documentation/src/refine-theme/landing-hero-showcase-section.tsx b/documentation/src/refine-theme/landing-hero-showcase-section.tsx new file mode 100644 index 000000000000..a6ea677d75fb --- /dev/null +++ b/documentation/src/refine-theme/landing-hero-showcase-section.tsx @@ -0,0 +1,420 @@ +import React from "react"; +import clsx from "clsx"; +import { AnimatePresence } from "framer-motion"; +import { LandingArrowRightIcon } from "./icons/landing-arrow-right"; +import { ShowcaseWrapper } from "../components/landing/showcase-wrapper"; + +export const LandingHeroShowcaseSection = ({}) => { + const [activeApp, setActiveApp] = React.useState(apps[0]); + + const ShowcaseComponent = React.useMemo(() => { + return activeApp.showcase; + }, [activeApp.name]); + + return ( +
+
+
+
f.name === activeApp.name, + ) * + (244 + 8) + }px) translateZ(0px)`, + }} + /> + {apps.map((app, index) => ( + + ))} +
+ + See more + + +
+
+
+ + + +
+
+ +
+ ); +}; + +const ShowcaseCRM = ({ className }: { className?: string }) => { + return ( + } /> + } /> + } /> + } /> + } /> + } /> + } /> + `, + }, + { + x: 224, + y: 240, + width: 296, + height: 472, + render: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/crm/upcoming_events.png", + codePosition: "right", + code: ` + import { useList } from "@refinedev/core"; + const { data } = useList({ + resource: "events", + }); + `, + }, + { + x: 536, + y: 240, + width: 608, + height: 472, + render: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/crm/latest_activities.png", + codePosition: "left", + code: ` + import { useTable } from "@refinedev/core"; + const { data } = useTable({ + resource: "activities" + }); + `, + }, + { + x: 456, + y: 16, + width: 256, + height: 32, + render: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/crm/search_bar.png", + codePosition: "bottom", + code: ` + import { RefineKbar } from "@refinedev/kbar"; + `, + }, + { + x: 1120, + y: 16, + width: 32, + height: 32, + render: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/crm/user_avatar.png", + codePosition: "left", + code: ` + import { useGetIdentity } from "@refinedev/core"; + const { data: identity } = useGetIdentity(); + `, + }, + ]} + /> + ); +}; + +const ShowcaseHR = ({ className }: { className?: string }) => { + return ; +}; + +const ShowcaseECommerce = ({ className }: { className?: string }) => { + return ; +}; + +const ShowcaseDevOps = ({ className }: { className?: string }) => { + return ; +}; + +const apps = [ + { + name: "CRM Application", + link: "https://refine.dev/docs", + showcase: ShowcaseCRM, + }, + { + name: "HR Application", + link: "https://refine.dev/docs", + showcase: ShowcaseHR, + }, + { + name: "E-Commerce Application", + link: "https://refine.dev/docs", + showcase: ShowcaseECommerce, + }, + { + name: "Dev-Ops Dashboard", + link: "https://refine.dev/docs", + showcase: ShowcaseDevOps, + }, +]; diff --git a/documentation/src/refine-theme/landing-playground-modal.tsx b/documentation/src/refine-theme/landing-playground-modal.tsx index c9db2d05b202..c48f96464295 100644 --- a/documentation/src/refine-theme/landing-playground-modal.tsx +++ b/documentation/src/refine-theme/landing-playground-modal.tsx @@ -2,16 +2,33 @@ import React, { Fragment } from "react"; import clsx from "clsx"; import { Dialog, Transition } from "@headlessui/react"; import { useLocation } from "@docusaurus/router"; - +import { useColorMode } from "@docusaurus/theme-common"; import { CloseIcon } from "./icons/close"; export const LandingPlaygroundModal = ({ visible, close }) => { + const iframeRef = React.useRef(null); + const { colorMode } = useColorMode(); + const { search, hash } = useLocation(); const [isActive, setIsActive] = React.useState(false); React.useEffect(() => { - const mediaQuery = window.matchMedia("(max-width: 960px)"); + // when color mode changes, post a message to the iframe + // to update its color mode + if (iframeRef.current) { + iframeRef.current.contentWindow?.postMessage( + { + type: "colorMode", + colorMode, + }, + "*", + ); + } + }, [colorMode, visible, isActive]); + + React.useEffect(() => { + const mediaQuery = window.matchMedia("(max-width: 959px)"); setIsActive(mediaQuery.matches); @@ -84,7 +101,7 @@ export const LandingPlaygroundModal = ({ visible, close }) => {
{ "fixed top-0 left-0 right-0", "overflow-y-auto", "bg-gray-100", + "dark:bg-gray-900", "h-full", "w-full", "z-[10]", @@ -118,6 +136,8 @@ export const LandingPlaygroundModal = ({ visible, close }) => { "rounded-lg", "text-gray-500", "hover:bg-gray-200", + "dark:hover:bg-gray-700", + "dark:text-gray-300", "active:scale-90", "transition-transform duration-200 ease-in-out", "focus:outline-none", @@ -146,8 +166,11 @@ export const LandingPlaygroundModal = ({ visible, close }) => { >