From 88759055554ed8d80f9864b94e2630d2ebaa4762 Mon Sep 17 00:00:00 2001 From: ADNY <66500121+ErKeLost@users.noreply.github.com> Date: Mon, 12 Aug 2024 10:53:36 +0800 Subject: [PATCH] chore: update home page (#136) * chore: update home page * chore: update styles * chore: update home page * chore: update homepage * chore: update code * chore: update color * chore: update page * chore: finish docs * chore: finish docs --- components.json | 20 ++ i18n/zh/code.json | 6 + nyxbui.json | 17 ++ package.json | 2 + pnpm-lock.yaml | 32 ++ src/components/Benchmark/index.tsx | 2 +- src/components/MagicUi/animated-beam.tsx | 188 ++++++++++++ .../MagicUi/animated-shiny-text.tsx | 2 +- src/components/MagicUi/card.tsx | 276 ++++++++++++++++++ src/components/MagicUi/shiny-text.tsx | 10 +- src/components/ui/aurora-back.tsx | 54 ++++ src/components/ui/beam.tsx | 139 +++++++++ src/components/ui/bento-grid.tsx | 56 ++++ src/components/ui/timeline.tsx | 208 +++++++++++++ src/css/_admonition.scss | 30 +- src/css/custom.scss | 4 + src/pages/index.tsx | 64 +++- tailwind.config.js | 32 +- 18 files changed, 1104 insertions(+), 38 deletions(-) create mode 100644 components.json create mode 100644 nyxbui.json create mode 100644 src/components/MagicUi/animated-beam.tsx create mode 100644 src/components/MagicUi/card.tsx create mode 100644 src/components/ui/aurora-back.tsx create mode 100644 src/components/ui/beam.tsx create mode 100644 src/components/ui/bento-grid.tsx create mode 100644 src/components/ui/timeline.tsx diff --git a/components.json b/components.json new file mode 100644 index 000000000..a2672fe89 --- /dev/null +++ b/components.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/css/custom.scss", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "examples": "@/components/examples", + "blocks": "@/components/blocks" + } +} \ No newline at end of file diff --git a/i18n/zh/code.json b/i18n/zh/code.json index 3965edec2..0a9dd01c0 100644 --- a/i18n/zh/code.json +++ b/i18n/zh/code.json @@ -425,6 +425,9 @@ "Rich Features": { "message": "丰富的特性" }, + "Rich Features and Fully Pluggable": { + "message": "丰富的特性和完全可插拔" + }, "Fully Pluggable": { "message": "完全可插拔" }, @@ -482,6 +485,9 @@ "Everything inside Farm is powered by plugins, Supports both Rust and JavaScript plugins. Support Vite plugins out of box.": { "message": "Farm 由插件驱动, 通过创建插件来实现任何您想要的功能, 同时支持 Rust 和 JavaScript 两种插件模式, 开箱即用支持 Vite 插件。" }, + "Farm supports compiling HTML, CSS, CSS Modules, Js/Jsx/Ts/Tsx, JSON, Static Assets out of the box, supports Sass, Less, PostCSS, Vue, React, Solid by way of official plugins, supports lazy compiling, partial bundling and more. Everything inside Farm is powered by plugins, Supports both Rust and JavaScript plugins. Support Vite plugins out of box.": { + "message": "丰富的编译能力支持: 开箱即用, Farm 内置了 Js/Ts/Jsx/Tsx、Css/Css Modules/Sass/Less、HTML 和静态资源，可以通过官方插件支持 sass、less、postcss、react、vue、solid 等常用技术栈，支持懒编译、局部打包等海量特性。并且 Farm 由插件驱动, 通过创建插件来实现任何您想要的功能, 同时支持 Rust 和 JavaScript 两种插件模式, 开箱即用支持 Vite 插件。" + }, "Partial Bundling: Bundle your project into a few reasonable bundles, speeding up resource loading without losing caching granularity.": { "message": "自动根据依赖关系、资源大小，将项目打包成若干个资源，提升资源加载性能的同时，保证缓存命中率。" }, diff --git a/nyxbui.json b/nyxbui.json new file mode 100644 index 000000000..35c2caf04 --- /dev/null +++ b/nyxbui.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://nyxbui.design/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/css/custom.scss", + "baseColor": "rose", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "~/components", + "utils": "~/lib/utils" + } +} \ No newline at end of file diff --git a/package.json b/package.json index 915895f8f..a7a3d31fe 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,9 @@ "@react-spring/web": "^9.7.3", "@react-three/drei": "7.16.3", "@react-three/fiber": "7.0.16", + "@tabler/icons-react": "^3.11.0", "autoprefixer": "^10.4.14", + "class-variance-authority": "^0.7.0", "docusaurus-plugin-sass": "^0.2.4", "leva": "^0.9.35", "lucide-react": "^0.394.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20f966ff4..f4b748ee1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,9 +44,15 @@ importers: '@react-three/fiber': specifier: 7.0.16 version: 7.0.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(three@0.128.0) + '@tabler/icons-react': + specifier: ^3.11.0 + version: 3.11.0(react@18.2.0) autoprefixer: specifier: ^10.4.14 version: 10.4.14(postcss@8.4.24) + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 docusaurus-plugin-sass: specifier: ^0.2.4 version: 0.2.4(@docusaurus/core@3.4.0(@docusaurus/types@3.4.0(@swc/core@1.3.101)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@swc/core@1.3.101)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5))(sass@1.63.6)(webpack@5.88.2(@swc/core@1.3.101)) @@ -1557,24 +1563,28 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [glibc] '@swc/core-linux-arm64-musl@1.3.101': resolution: {integrity: sha512-OGjYG3H4BMOTnJWJyBIovCez6KiHF30zMIu4+lGJTCrxRI2fAjGLml3PEXj8tC3FMcud7U2WUn6TdG0/te2k6g==} engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [musl] '@swc/core-linux-x64-gnu@1.3.101': resolution: {integrity: sha512-/kBMcoF12PRO/lwa8Z7w4YyiKDcXQEiLvM+S3G9EvkoKYGgkkz4Q6PSNhF5rwg/E3+Hq5/9D2R+6nrkF287ihg==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [glibc] '@swc/core-linux-x64-musl@1.3.101': resolution: {integrity: sha512-kDN8lm4Eew0u1p+h1l3JzoeGgZPQ05qDE0czngnjmfpsH2sOZxVj1hdiCwS5lArpy7ktaLu5JdRnx70MkUzhXw==} engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [musl] '@swc/core-win32-arm64-msvc@1.3.101': resolution: {integrity: sha512-9Wn8TTLWwJKw63K/S+jjrZb9yoJfJwCE2RV5vPCCWmlMf3U1AXj5XuWOLUX+Rp2sGKau7wZKsvywhheWm+qndQ==} @@ -1613,6 +1623,14 @@ packages: resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==} engines: {node: '>=14.16'} + '@tabler/icons-react@3.11.0': + resolution: {integrity: sha512-xHNBi9mns1slvqos+7LkP3ube4CjWrANMbxMaorzwzO9J/+y1sAEG/sN8CV8FmtpYW/9/gDR+OWCjjLLg0RmAw==} + peerDependencies: + react: '>= 16' + + '@tabler/icons@3.11.0': + resolution: {integrity: sha512-/vZinJNvCYhdAB+RUsyCpanSPuOEKHHIZi4Uu0Bw7ilewHnQhCWUPrT704uHCRli2ROl7spADPmWzAqOganA5A==} + '@trysound/sax@0.2.0': resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} @@ -2211,6 +2229,9 @@ packages: resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==} engines: {node: '>=8'} + class-variance-authority@0.7.0: + resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==} + clean-css@5.3.2: resolution: {integrity: sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==} engines: {node: '>= 10.0'} @@ -7897,6 +7918,13 @@ snapshots: dependencies: defer-to-connect: 2.0.1 + '@tabler/icons-react@3.11.0(react@18.2.0)': + dependencies: + '@tabler/icons': 3.11.0 + react: 18.2.0 + + '@tabler/icons@3.11.0': {} + '@trysound/sax@0.2.0': {} '@tsconfig/node10@1.0.9': {} @@ -8599,6 +8627,10 @@ snapshots: ci-info@3.8.0: {} + class-variance-authority@0.7.0: + dependencies: + clsx: 2.0.0 + clean-css@5.3.2: dependencies: source-map: 0.6.1 diff --git a/src/components/Benchmark/index.tsx b/src/components/Benchmark/index.tsx index 15348ae4b..04dec9727 100644 --- a/src/components/Benchmark/index.tsx +++ b/src/components/Benchmark/index.tsx @@ -199,7 +199,7 @@ export default function Benchmark() { ))} -
+
; // Container ref + fromRef: RefObject; + toRef: RefObject; + curvature?: number; + reverse?: boolean; + pathColor?: string; + pathWidth?: number; + pathOpacity?: number; + gradientStartColor?: string; + gradientStopColor?: string; + delay?: number; + duration?: number; + startXOffset?: number; + startYOffset?: number; + endXOffset?: number; + endYOffset?: number; +} + +export const AnimatedBeam: React.FC = ({ + className, + containerRef, + fromRef, + toRef, + curvature = 0, + reverse = false, // Include the reverse prop + duration = Math.random() * 3 + 4, + delay = 0, + pathColor = "gray", + pathWidth = 2, + pathOpacity = 0.2, + gradientStartColor = "#ffaa40", + gradientStopColor = "#9c40ff", + startXOffset = 0, + startYOffset = 0, + endXOffset = 0, + endYOffset = 0, +}) => { + const id = useId(); + const [pathD, setPathD] = useState(""); + const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 }); + + // Calculate the gradient coordinates based on the reverse prop + const gradientCoordinates = reverse + ? { + x1: ["90%", "-10%"], + x2: ["100%", "0%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + } + : { + x1: ["10%", "110%"], + x2: ["0%", "100%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + }; + + useEffect(() => { + const updatePath = () => { + if (containerRef.current && fromRef.current && toRef.current) { + const containerRect = containerRef.current.getBoundingClientRect(); + const rectA = fromRef.current.getBoundingClientRect(); + const rectB = toRef.current.getBoundingClientRect(); + + const svgWidth = containerRect.width; + const svgHeight = containerRect.height; + setSvgDimensions({ width: svgWidth, height: svgHeight }); + + const startX = + rectA.left - containerRect.left + rectA.width / 2 + startXOffset; + const startY = + rectA.top - containerRect.top + rectA.height / 2 + startYOffset; + const endX = + rectB.left - containerRect.left + rectB.width / 2 + endXOffset; + const endY = + rectB.top - containerRect.top + rectB.height / 2 + endYOffset; + + const controlY = startY - curvature; + const d = `M ${startX},${startY} Q ${ + (startX + endX) / 2 + },${controlY} ${endX},${endY}`; + setPathD(d); + } + }; + + // Initialize ResizeObserver + const resizeObserver = new ResizeObserver((entries) => { + // For all entries, recalculate the path + for (let entry of entries) { + updatePath(); + } + }); + + // Observe the container element + if (containerRef.current) { + resizeObserver.observe(containerRef.current); + } + + // Call the updatePath initially to set the initial path + updatePath(); + + // Clean up the observer on component unmount + return () => { + resizeObserver.disconnect(); + }; + }, [ + containerRef, + fromRef, + toRef, + curvature, + startXOffset, + startYOffset, + endXOffset, + endYOffset, + ]); + + return ( + + + + + + + + + + + + + ); +}; diff --git a/src/components/MagicUi/animated-shiny-text.tsx b/src/components/MagicUi/animated-shiny-text.tsx index 8f4e1c6c0..9732075b6 100644 --- a/src/components/MagicUi/animated-shiny-text.tsx +++ b/src/components/MagicUi/animated-shiny-text.tsx @@ -13,7 +13,7 @@ export function AnimatedGradientText({ return (
diff --git a/src/components/MagicUi/card.tsx b/src/components/MagicUi/card.tsx new file mode 100644 index 000000000..e93d8bccc --- /dev/null +++ b/src/components/MagicUi/card.tsx @@ -0,0 +1,276 @@ +"use client"; +import { cn } from "../../lib/utils"; +import React from "react"; +import { BentoGrid, BentoGridItem } from "../ui/bento-grid"; +import Translate from "@docusaurus/Translate"; +import Rocket from "@site/static/img/rocket.png"; +import Plug from "@site/static/img/plug.png"; +import FeaturePng from "@site/static/img/feature.png"; +import Box from "@site/static/img/box.png"; +import Compatibility from "@site/static/img/compatible.png"; +import Consistency from "@site/static/img/consistency.png"; +import { + IconBoxAlignRightFilled, + IconClipboardCopy, + IconFileBroken, + IconSignature, + IconTableColumn, +} from "@tabler/icons-react"; +import { motion } from "framer-motion"; +import { AnimatedBeamPig } from "../ui/beam"; + +export default function BentoGridCard() { + return ( + + {items.map((item, i) => ( + p:text-lg]", item.className)} + icon={item.icon} + /> + ))} + + ); +} + +const SkeletonOne = () => { + const variants = { + initial: { + x: 0, + y: 0, + opacity: 1, + }, + animate: { + x: [0, 12], + transition: { + duration: .2, // + ease: "easeInOut", // + }, + }, + }; + + return ( + + + + + + ); +}; +const SkeletonTwo = () => { + const variants = { + initial: { + x: 0, + y: 0, + opacity: 1, + }, + animate: { + x: [0, 12], + transition: { + duration: .2, // + ease: "easeInOut", // + }, + }, + }; + + return ( + + + + + + ); +}; +const SkeletonThree = () => { + const variants = { + initial: { + x: 0, + y: 0, + opacity: 1, + }, + animate: { + x: [0, 12], + transition: { + duration: .2, // + ease: "easeInOut", // + }, + }, + }; + + return ( + + + + + + ); +}; +const SkeletonFour = () => { + const variants = { + initial: { + x: 0, + y: 0, + opacity: 1, + }, + animate: { + x: [0, 12], + transition: { + duration: .2, // + ease: "easeInOut", // + }, + }, + }; + + return ( + + + + ); +}; +const SkeletonFive = () => { + const variants = { + initial: { + x: 0, + y: 0, + opacity: 1, + }, + animate: { + x: [0, 12], + transition: { + duration: .2, // + ease: "easeInOut", // + }, + }, + }; + + return ( + + + + + + ); +}; +const items = [ + { + title: Extremely Fast, + description: ( + + + Written in Rust, start a React / Vue project in milliseconds and perform an HMR update within 10ms for most situations. + + + ), + header: , + className: "md:col-span-1", + icon: , + }, + { + title: Incremental Building, + description: ( + + + Incremental Building: Support persistent cache, module level cache + enabled by default, any module won't be compiled twice until it's + changed! + + + ), + header: , + className: "md:col-span-1", + icon: , + }, + { + title: Partial Bundling, + description: ( + + + Partial Bundling: Bundle your project into a few reasonable bundles, + speeding up resource loading without losing caching granularity. + + + ), + header: , + className: "md:col-span-1", + icon: , + }, + { + title: Rich Features and Fully Pluggable, + description: ( + + + Farm supports compiling HTML, CSS, CSS Modules, Js/Jsx/Ts/Tsx, JSON, Static Assets out of the box, supports Sass, Less, PostCSS, Vue, React, Solid by way of official plugins, supports lazy compiling, partial bundling and more. Everything inside Farm is powered by plugins, Supports both Rust and JavaScript plugins. Support Vite plugins out of box. + + + ), + header: , + className: "md:col-span-2", + icon: , + }, + + { + title: Consistency and Compatibility, + description: ( + + + What you see in development will be the same as what you get in + production. Supports both legacy (ES5) and modern browsers. + + + ), + header: , + className: "md:col-span-1", + icon: , + }, +]; diff --git a/src/components/MagicUi/shiny-text.tsx b/src/components/MagicUi/shiny-text.tsx index c65fa452b..0c1d6f178 100644 --- a/src/components/MagicUi/shiny-text.tsx +++ b/src/components/MagicUi/shiny-text.tsx @@ -14,14 +14,14 @@ const ShinyText: FC = ({ shimmerWidth = 100, }) => { return ( -

= ({ )} > {children} -

+
); }; @@ -43,10 +43,10 @@ export default function ShinyTextEx() {
- + 📈 See Benchmark Details diff --git a/src/components/ui/aurora-back.tsx b/src/components/ui/aurora-back.tsx new file mode 100644 index 000000000..ce77b52f5 --- /dev/null +++ b/src/components/ui/aurora-back.tsx @@ -0,0 +1,54 @@ +"use client"; +import { cn } from "../../lib/utils"; +import React, { ReactNode } from "react"; + +interface AuroraBackgroundProps extends React.HTMLProps { + children: ReactNode; + showRadialGradient?: boolean; +} + +export const AuroraBackground = ({ + className, + children, + showRadialGradient = true, + ...props +}: AuroraBackgroundProps) => { + return ( +
+
+
+
+
+ {children} +
+
+ ); +}; diff --git a/src/components/ui/beam.tsx b/src/components/ui/beam.tsx new file mode 100644 index 000000000..219e1058b --- /dev/null +++ b/src/components/ui/beam.tsx @@ -0,0 +1,139 @@ +"use client"; + +import React, { forwardRef, useRef } from "react"; + +import { cn } from "../../lib/utils"; +import { AnimatedBeam } from "../MagicUi/animated-beam"; + +const Circle = forwardRef< + HTMLDivElement, + { className?: string; children?: React.ReactNode } +>(({ className, children }, ref) => { + return ( +
+ {children} +
+ ); +}); + +Circle.displayName = "Circle"; + +export function AnimatedBeamPig() { + const containerRef = useRef(null); + const div1Ref = useRef(null); + const div2Ref = useRef(null); + const div3Ref = useRef(null); + const div4Ref = useRef(null); + const div5Ref = useRef(null); + const div6Ref = useRef(null); + const div7Ref = useRef(null); + + return ( +
+
+
+ + + + + + +
+
+ + + + + + + + + +
+
+ + + + + + +
+
+ + + + + + + +
+ ); +} + +const Icons = { + notion: () => ( + + ), + openai: () => ( + + ), + googleDrive: () => ( + + ), + whatsapp: () => ( + + ), + googleDocs: () => ( + + ), + zapier: () => ( + + ), + messenger: () => ( + + ), +}; diff --git a/src/components/ui/bento-grid.tsx b/src/components/ui/bento-grid.tsx new file mode 100644 index 000000000..7251f27e6 --- /dev/null +++ b/src/components/ui/bento-grid.tsx @@ -0,0 +1,56 @@ +import { cn } from "../../lib/utils"; +import React from 'react' + +export const BentoGrid = ({ + className, + children, +}: { + className?: string; + children?: React.ReactNode; +}) => { + return ( +
+ {children} +
+ ); +}; + +export const BentoGridItem = ({ + className, + title, + description, + header, + icon, +}: { + className?: string; + title?: string | React.ReactNode; + description?: string | React.ReactNode; + header?: React.ReactNode; + icon?: React.ReactNode; +}) => { + return ( +
+ {header} +
+ {icon} +
+ {title} +
+
+ {description} +
+
+
+ ); +}; diff --git a/src/components/ui/timeline.tsx b/src/components/ui/timeline.tsx new file mode 100644 index 000000000..77ad753ea --- /dev/null +++ b/src/components/ui/timeline.tsx @@ -0,0 +1,208 @@ +import React from 'react' +import type { VariantProps } from 'class-variance-authority' +import { cva } from 'class-variance-authority' +import { Check, Circle, X } from 'lucide-react' + +import { cn } from '../../lib/utils' + +const timelineVariants = cva('grid', { + variants: { + positions: { + left: '[&>li]:grid-cols-[0_min-content_1fr]', + right: '[&>li]:grid-cols-[1fr_min-content]', + center: '[&>li]:grid-cols-[1fr_min-content_1fr]', + }, + }, + defaultVariants: { + positions: 'left', + }, +}) + +interface TimelineProps + extends React.HTMLAttributes, + VariantProps { } + +const Timeline = React.forwardRef( + ({ children, className, positions, ...props }, ref) => { + return ( +
    + {children} +
+ ) + }, +) +Timeline.displayName = 'Timeline' + +const timelineItemVariants = cva('grid items-center gap-x-2', { + variants: { + status: { + done: 'text-primary', + default: 'text-muted-foreground', + }, + }, + defaultVariants: { + status: 'default', + }, +}) + +interface TimelineItemProps + extends React.HTMLAttributes, + VariantProps { } + +const TimelineItem = React.forwardRef( + ({ className, status, ...props }, ref) => ( +
  • + ), +) +TimelineItem.displayName = 'TimelineItem' + +const timelineDotVariants = cva( + 'col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current', + { + variants: { + status: { + default: '[&>*]:hidden', + current: + '[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current', + done: 'bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background', + error: + 'border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background', + custom: '[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block', + }, + }, + defaultVariants: { + status: 'default', + }, + }, +) + +interface TimelineDotProps + extends React.HTMLAttributes, + VariantProps { + customIcon?: React.ReactNode +} + +const TimelineDot = React.forwardRef( + ({ className, status, customIcon, ...props }, ref) => ( +
    + + + + {customIcon} +
    + ), +) +TimelineDot.displayName = 'TimelineDot' + +const timelineContentVariants = cva( + 'row-start-2 row-end-2 pb-8 text-muted-foreground', + { + variants: { + side: { + right: 'col-start-3 col-end-4 mr-auto text-left', + left: 'col-start-1 col-end-2 ml-auto text-right', + }, + }, + defaultVariants: { + side: 'right', + }, + }, +) + +interface TimelineContentProps + extends React.HTMLAttributes, + VariantProps { } + +const TimelineContent = React.forwardRef( + ({ className, side, ...props }, ref) => ( +
    + ), +) +TimelineContent.displayName = 'TimelineContent' + +const timelineHeadingVariants = cva( + 'row-start-1 row-end-1 line-clamp-1 max-w-full truncate', + { + variants: { + side: { + right: 'col-start-3 col-end-4 mr-auto text-left', + left: 'col-start-1 col-end-2 ml-auto text-right', + }, + variant: { + primary: 'text-base font-medium text-primary', + secondary: 'text-sm font-light text-muted-foreground', + }, + }, + defaultVariants: { + side: 'right', + variant: 'primary', + }, + }, +) + +interface TimelineHeadingProps + extends React.HTMLAttributes, + VariantProps { } + +const TimelineHeading = React.forwardRef< + HTMLParagraphElement, + TimelineHeadingProps +>(({ className, side, variant, ...props }, ref) => ( +

    +)) +TimelineHeading.displayName = 'TimelineHeading' + +interface TimelineLineProps extends React.HTMLAttributes { + done?: boolean +} + +const TimelineLine = React.forwardRef( + ({ className, done = false, ...props }, ref) => { + return ( +

    + ) + }, +) +TimelineLine.displayName = 'TimelineLine' + +export { + Timeline, + TimelineDot, + TimelineItem, + TimelineContent, + TimelineHeading, + TimelineLine, +} diff --git a/src/css/_admonition.scss b/src/css/_admonition.scss index 68f57a945..efe095cf4 100644 --- a/src/css/_admonition.scss +++ b/src/css/_admonition.scss @@ -52,21 +52,21 @@ html[data-theme="light"] { --ifm-alert-note-background-color: #ff9ff360; --ifm-alert-info-background-color: var(--c-teal-10); --ifm-alert-caution-background-color: var(--c-green-10); - body { - --angle: 220deg; - background-image: linear-gradient( - var(--angle), - white 15%, - #ff9ff360 20%, - white 25%, - #f4eef8 30%, - white 35%, - #f8edf5 40%, - white 60% - ); - background-attachment: fixed; - background-size: cover; - } + // body { + // --angle: 220deg; + // background-image: linear-gradient( + // var(--angle), + // white 15%, + // #ff9ff360 20%, + // white 25%, + // #f4eef8 30%, + // white 35%, + // #f8edf5 40%, + // white 60% + // ); + // background-attachment: fixed; + // background-size: cover; + // } } html[data-theme="dark"] { diff --git a/src/css/custom.scss b/src/css/custom.scss index ec89f9e7a..08e4e1029 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -46,6 +46,7 @@ --ifm-f-white: #ffffff; --ifm-f-re-white: #181818; --ifm-f-white-soft: #f8f8f8; + --ifm-f-white-soft2: #fff; --ifm-f-white-mute: #f2f2f2; --ifm-f-bg-soft: #f6f6f7; --farm--border: rgba(86, 86, 86, 0.125); @@ -54,6 +55,7 @@ --ifm-navbar-link-hover-color: initial; --ifm-navbar-padding-vertical: 0; --ifm-navbar-item-padding-vertical: 0; + --ifm-color-soft: rgb(82 82 82 / var(--tw-text-opacity)); --ifm-font-family-base: -apple-system, BlinkMacSystemFont, Inter, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji"; @@ -71,6 +73,7 @@ /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme="dark"] { + --ifm-color-soft: rgb(82 82 82 / var(--tw-text-opacity)); --ifm-f-bg-soft: #252529; --ifm-background-color: #000 !important; --ifm-color-primary: #fff; @@ -87,6 +90,7 @@ --ifm-f-white: #c74040; --ifm-f-re-white: #ffffff; --ifm-f-white-soft: #222222; + --ifm-f-white-soft2: #111; --ifm-f-white-mute: #282828; --ifm-footer-background-color: #181818; --farm--border: #fafafa20; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d4c2e2f94..2d6468afb 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,19 +1,24 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import clsx from "clsx"; import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; import HomepageFeatures from "@site/src/components/HomepageFeatures"; import Benchmark from "../components/Benchmark"; +import { useColorMode } from '@docusaurus/theme-common'; import StarrySky from "../components/StarrySky"; import styles from "./index.module.css"; import Translate from "@docusaurus/Translate"; import AnimatedGradientStarWithGithub from "../components/MagicUi/animated-shiny-text"; import NeonGradientCard from '../components/MagicUi/neon-gradient-card'; import BlurFade from "../components/MagicUi/blur-fade"; +import BentoGridCard from "../components/MagicUi/card"; +import { AuroraBackground } from "../components/ui/aurora-back"; +import BrowserOnly from "@docusaurus/BrowserOnly"; function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); + return (
    - -
    +
    -

    +

    Extremely @@ -51,11 +55,11 @@ function HomepageHeader() { Rust
    -

    +
    -

    +

    Farm @@ -64,7 +68,7 @@ function HomepageHeader() { is a Rust-Based Web Building Engine to Facilitate Your Web Program and JavaScript Library
    -

    +
    @@ -97,6 +101,40 @@ function HomepageHeader() { ); } +const HomeBase = () => { + return ( + + {() => } + + ); +}; + +const HomeBaseContent = () => { + const { colorMode } = useColorMode(); + const MainContent = () => ( +
    + + + +
    + ); + + if (colorMode === 'dark') { + return ( + <> + + + + ); + } else { + return ( + + + + ); + } +}; + export default function Home() { const { siteConfig } = useDocusaurusContext(); return ( @@ -104,14 +142,12 @@ export default function Home() { title={`${siteConfig.title} Documentation`} description="Description will go into a meta tag in " > - -
    - - - -
    + {/* */} {/* */} - + {/* */} + ); } + + diff --git a/tailwind.config.js b/tailwind.config.js index cfd69cf6b..2ea478a57 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,15 +1,24 @@ +const { + default: flattenColorPalette, +} = require("tailwindcss/lib/util/flattenColorPalette"); + /** @type {import('tailwindcss').Config} */ module.exports = { corePlugins: { preflight: false, }, - // darkMode: ["class", '[data-mode="dark"]'], + darkMode: ["class"], content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: { "brand-color": "#fea7df", + colors: { + soft: "var(--ifm-f-white-soft2)", + }, }, + animation: { + aurora: "aurora 60s linear infinite", shimmer: "shimmer 8s infinite", "border-beam": "border-beam calc(var(--duration)*1s) infinite linear", marquee: "marquee var(--duration) linear infinite", @@ -18,6 +27,14 @@ module.exports = { "background-position-spin 3000ms infinite alternate", }, keyframes: { + aurora: { + from: { + backgroundPosition: "50% 50%, 50% 50%", + }, + to: { + backgroundPosition: "350% 50%, 350% 50%", + }, + }, marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(calc(-100% - var(--gap)))" }, @@ -45,5 +62,16 @@ module.exports = { }, }, }, - plugins: [], + plugins: [addVariablesForColors], }; + +function addVariablesForColors({ addBase, theme }) { + let allColors = flattenColorPalette(theme("colors")); + let newVars = Object.fromEntries( + Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) + ); + + addBase({ + ":root": newVars, + }); +}