From b42c8cc6095d5ae7bd6c076da10a9dba23dd3752 Mon Sep 17 00:00:00 2001 From: Eli Ma Date: Sun, 24 Nov 2024 00:34:20 +0800 Subject: [PATCH] [mars] Add svg to website page, and upgrade nextjs Signed-off-by: Eli Ma --- mars/package.json | 20 +-- mars/src/components/AppDemo.jsx | 244 --------------------------- mars/src/components/AppStoreLink.jsx | 24 --- mars/src/components/CallToAction.jsx | 4 +- mars/src/components/GitHubLink.jsx | 24 +++ mars/src/components/Hero.jsx | 44 +++-- mars/src/components/MegaArch.jsx | 56 ++++++ 7 files changed, 112 insertions(+), 304 deletions(-) delete mode 100644 mars/src/components/AppDemo.jsx delete mode 100644 mars/src/components/AppStoreLink.jsx create mode 100644 mars/src/components/GitHubLink.jsx create mode 100644 mars/src/components/MegaArch.jsx diff --git a/mars/package.json b/mars/package.json index 07e065daf..b29080155 100644 --- a/mars/package.json +++ b/mars/package.json @@ -10,20 +10,20 @@ }, "browserslist": "defaults, not ie <= 11", "dependencies": { - "@headlessui/react": "^2.1.0", + "@headlessui/react": "^2.2.0", "@headlessui/tailwindcss": "^0.2.1", - "@next/third-parties": "^14.2.4", - "@tailwindcss/forms": "^0.5.7", - "@vercel/analytics": "^1.3.1", - "autoprefixer": "^10.4.19", + "@next/third-parties": "^15.0.3", + "@tailwindcss/forms": "^0.5.9", + "@vercel/analytics": "^1.4.1", + "autoprefixer": "^10.4.20", "clsx": "^2.1.1", - "framer-motion": "^11.2.11", - "next": "^14.2.4", + "framer-motion": "^11.11.17", + "next": "^15.0.3", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-inlinesvg": "^4.1.3", - "tailwindcss": "^3.4.4", - "use-debounce": "^10.0.1" + "react-inlinesvg": "^4.1.5", + "tailwindcss": "^3.4.15", + "use-debounce": "^10.0.4" }, "devDependencies": { "eslint": "^8.56.0", diff --git a/mars/src/components/AppDemo.jsx b/mars/src/components/AppDemo.jsx deleted file mode 100644 index bef214e66..000000000 --- a/mars/src/components/AppDemo.jsx +++ /dev/null @@ -1,244 +0,0 @@ -'use client' - -import { useId, useRef, useState } from 'react' -import clsx from 'clsx' -import { motion, useInView, useMotionValue } from 'framer-motion' - -import { AppScreen } from '@/components/AppScreen' - -const prices = [ - 997.56, 944.34, 972.25, 832.4, 888.76, 834.8, 805.56, 767.38, 861.21, 669.6, - 694.39, 721.32, 694.03, 610.1, 502.2, 549.56, 611.03, 583.4, 610.14, 660.6, - 752.11, 721.19, 638.89, 661.7, 694.51, 580.3, 638.0, 613.3, 651.64, 560.51, - 611.45, 670.68, 752.56, -] -const maxPrice = Math.max(...prices) -const minPrice = Math.min(...prices) - -function Chart({ - className, - activePointIndex, - onChangeActivePointIndex, - width: totalWidth, - height: totalHeight, - paddingX = 0, - paddingY = 0, - gridLines = 6, - ...props -}) { - let width = totalWidth - paddingX * 2 - let height = totalHeight - paddingY * 2 - - let id = useId() - let svgRef = useRef(null) - let pathRef = useRef(null) - let isInView = useInView(svgRef, { amount: 0.5, once: true }) - let pathWidth = useMotionValue(0) - let [interactionEnabled, setInteractionEnabled] = useState(false) - - let path = '' - let points = [] - - for (let index = 0; index < prices.length; index++) { - let x = paddingX + (index / (prices.length - 1)) * width - let y = - paddingY + - (1 - (prices[index] - minPrice) / (maxPrice - minPrice)) * height - points.push({ x, y }) - path += `${index === 0 ? 'M' : 'L'} ${x.toFixed(4)} ${y.toFixed(4)}` - } - - return ( - onChangeActivePointIndex(null), - onPointerMove: (event) => { - let x = event.nativeEvent.offsetX - let closestPointIndex = null - let closestDistance = Infinity - for ( - let pointIndex = 0; - pointIndex < points.length; - pointIndex++ - ) { - let point = points[pointIndex] - let distance = Math.abs(point.x - x) - if (distance < closestDistance) { - closestDistance = distance - closestPointIndex = pointIndex - } else { - break - } - } - onChangeActivePointIndex(closestPointIndex) - }, - } - : {})} - {...props} - > - - - - - - - - - - {[...Array(gridLines - 1).keys()].map((index) => ( - - ))} - - { - if (pathRef.current && typeof pathLength === 'number') { - pathWidth.set( - pathRef.current.getPointAtLength( - pathLength * pathRef.current.getTotalLength(), - ).x, - ) - } - }} - onAnimationComplete={() => setInteractionEnabled(true)} - /> - {activePointIndex !== null && ( - <> - - - - )} - - ) -} - -export function AppDemo() { - let [activePointIndex, setActivePointIndex] = useState(null) - let activePriceIndex = activePointIndex ?? prices.length - 1 - let activeValue = prices[activePriceIndex] - let previousValue = prices[activePriceIndex - 1] - let percentageChange = - activePriceIndex === 0 - ? null - : ((activeValue - previousValue) / previousValue) * 100 - - return ( - - -
-
-
- Tailwind Labs, Inc. -
-
$CSS
- - - -
-
-
-
- {activeValue.toFixed(2)} -
-
USD
- {percentageChange && ( -
= 0 ? 'text-cyan-500' : 'text-gray-500', - )} - > - {`${ - percentageChange >= 0 ? '+' : '' - }${percentageChange.toFixed(2)}%`} -
- )} -
-
-
1D
-
5D
-
1M
-
6M
-
1Y
-
5Y
-
-
- -
-
- Trade -
-
-
-
Open
-
6,387.55
-
-
-
Closed
-
6,487.09
-
-
-
Low
-
6,322.01
-
-
-
-
- - - ) -} diff --git a/mars/src/components/AppStoreLink.jsx b/mars/src/components/AppStoreLink.jsx deleted file mode 100644 index 5c203a0b1..000000000 --- a/mars/src/components/AppStoreLink.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import Link from 'next/link' -import clsx from 'clsx' - -export function AppStoreLink({ color = 'black' }) { - return ( - - - - ) -} diff --git a/mars/src/components/CallToAction.jsx b/mars/src/components/CallToAction.jsx index 9ac75670c..518c0ec70 100644 --- a/mars/src/components/CallToAction.jsx +++ b/mars/src/components/CallToAction.jsx @@ -1,4 +1,4 @@ -import { AppStoreLink } from '@/components/AppStoreLink' +import { GitHubLink } from '@/components/GitHubLink' import { CircleBackground } from '@/components/CircleBackground' import { Container } from '@/components/Container' @@ -22,7 +22,7 @@ export function CallToAction() { first investment.

- +
diff --git a/mars/src/components/GitHubLink.jsx b/mars/src/components/GitHubLink.jsx new file mode 100644 index 000000000..6a6f20a23 --- /dev/null +++ b/mars/src/components/GitHubLink.jsx @@ -0,0 +1,24 @@ +import Link from 'next/link' + +import clsx from 'clsx' + +export function GitHubLink({ color = 'black' }) { + return ( + + + + + ) +} diff --git a/mars/src/components/Hero.jsx b/mars/src/components/Hero.jsx index 53123b504..70d4f867c 100644 --- a/mars/src/components/Hero.jsx +++ b/mars/src/components/Hero.jsx @@ -2,8 +2,8 @@ import { useId } from 'react' import Image from 'next/image' import clsx from 'clsx' -import { AppDemo } from '@/components/AppDemo' -import { AppStoreLink } from '@/components/AppStoreLink' +import { MegaArch } from '@/components/MegaArch' +import { GitHubLink } from '@/components/GitHubLink' import { Button } from '@/components/Button' import { Container } from '@/components/Container' import { PhoneFrame } from '@/components/PhoneFrame' @@ -108,34 +108,30 @@ export function Hero() { Redefining Open Source with Monolithic and Decentralized

- Mega is an unofficial open source implementation of Google Piper. It is a monorepo & monolithic codebase - management system that supports Git. Mega is designed to manage large-scale codebases, + Mega is an unofficial open source implementation of Google Piper. + It is a monorepo & monolithic codebase management system that + supports Git. Mega is designed to manage large-scale codebases, streamline development, and foster collaboration.

- {/*
*/} - {/* */} - {/* */} - {/* */} - {/* Watch the video*/} - {/* */} - {/*
*/} - +
+ + +
-
- - {/**/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - + +
+ +
+
{/*

*/} {/* As featured in*/} diff --git a/mars/src/components/MegaArch.jsx b/mars/src/components/MegaArch.jsx new file mode 100644 index 000000000..3479550c9 --- /dev/null +++ b/mars/src/components/MegaArch.jsx @@ -0,0 +1,56 @@ +'use client' + +function Chart() { + return ( + + + + + + + + + Monorepo + + + Monolithic + + + Decentralized + + + Collaboration + + + + Git Compatible + + + + + Trunk-based + Development + + + + + Code Owners + + + + + Conventional + Commits + + + + ) +} + +export function MegaArch() { + return ( +

+ +
+ ) +}