From 78c7cee06bd31f7430ec035b59c2d9ee2835abbe Mon Sep 17 00:00:00 2001 From: cordt-sei Date: Sun, 26 May 2024 11:37:53 -0600 Subject: [PATCH] chore: Update import path for Logo component in theme.config.tsx and components/index.ts --- components/BrandKitGallery/BrandImage.tsx | 59 +++++++++ components/BrandKitGallery/DownloadButton.tsx | 22 ++++ components/BrandKitGallery/index.ts | 2 + components/DownloadableImage.tsx | 73 ----------- components/EcosystemApps/EcosystemApps.tsx | 6 +- .../EvmWalletConnect/CustomConnectButton.tsx | 73 +++++++++++ .../EvmWalletConnect/EvmWalletConnect.tsx | 111 ++++++++--------- components/index.ts | 2 + data/imageData.ts | 23 ---- next.config.js | 8 +- package.json | 2 + pages/_app.mdx | 17 +-- pages/brand-kit.mdx | 117 ++++++++---------- pages/node-operators.mdx | 3 +- styles/DownloadableImage.module.css | 64 ---------- styles/custom.css | 89 +++++++++++++ styles/custom.module.css | 89 +++++++++++++ styles/globals.css | 23 +--- tailwind.config.js | 2 - theme.config.tsx | 2 +- yarn.lock | 116 ++++++++++++++--- 21 files changed, 568 insertions(+), 335 deletions(-) create mode 100644 components/BrandKitGallery/BrandImage.tsx create mode 100644 components/BrandKitGallery/DownloadButton.tsx create mode 100644 components/BrandKitGallery/index.ts delete mode 100644 components/DownloadableImage.tsx create mode 100644 components/EvmWalletConnect/CustomConnectButton.tsx delete mode 100644 data/imageData.ts delete mode 100644 styles/DownloadableImage.module.css create mode 100644 styles/custom.css create mode 100644 styles/custom.module.css diff --git a/components/BrandKitGallery/BrandImage.tsx b/components/BrandKitGallery/BrandImage.tsx new file mode 100644 index 00000000..5a065a71 --- /dev/null +++ b/components/BrandKitGallery/BrandImage.tsx @@ -0,0 +1,59 @@ +// components/BrandKitGallery/BrandImage.tsx +import NextImage from 'next/image'; +import styles from '../../styles/custom.module.css'; +import { useState, useEffect } from 'react'; + +interface BrandImageProps { + url: string; + alt: string; + name: string; +} + +const BrandImage = ({ url, alt, name }: BrandImageProps) => { + const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 }); + const [showModal, setShowModal] = useState(false); + + useEffect(() => { + const img = new window.Image(); + img.src = url; + img.onload = () => { + setImageDimensions({ width: img.width, height: img.height }); + }; + }, [url]); + + const handleImageClick = () => { + setShowModal(true); + document.body.style.overflow = 'hidden'; + }; + + const closeModal = () => { + setShowModal(false); + document.body.style.overflow = 'auto'; + }; + + return ( + <> +
+
+ +
+
+ {showModal && ( +
+
+ +
+
+ )} + + ); +}; + +export default BrandImage; diff --git a/components/BrandKitGallery/DownloadButton.tsx b/components/BrandKitGallery/DownloadButton.tsx new file mode 100644 index 00000000..678bbd76 --- /dev/null +++ b/components/BrandKitGallery/DownloadButton.tsx @@ -0,0 +1,22 @@ +// components/BrandKitGallery/DownloadButton.tsx +import React from 'react'; +import styles from '../../styles/custom.module.css'; + +const DownloadButton = ({ url, fileName, children }) => { + const handleDownload = () => { + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', fileName); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + + return ( + + ); +}; + +export default DownloadButton; diff --git a/components/BrandKitGallery/index.ts b/components/BrandKitGallery/index.ts new file mode 100644 index 00000000..4ccda5e9 --- /dev/null +++ b/components/BrandKitGallery/index.ts @@ -0,0 +1,2 @@ +export { default as BrandImage } from './BrandImage'; +export { default as DownloadButton } from './DownloadButton'; diff --git a/components/DownloadableImage.tsx b/components/DownloadableImage.tsx deleted file mode 100644 index 9426f81a..00000000 --- a/components/DownloadableImage.tsx +++ /dev/null @@ -1,73 +0,0 @@ -// components/DownloadableImage.tsx -import NextImage from 'next/image'; -import styles from '../styles/DownloadableImage.module.css'; -import { useState, useEffect } from 'react'; - -interface DownloadableImageProps { -url: string; -alt: string; -name: string; -downloadable?: boolean; -} - -const DownloadableImage = ({ url, alt, name, downloadable = true }: DownloadableImageProps) => { -const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 }); -const [showModal, setShowModal] = useState(false); - -useEffect(() => { -const img = new window.Image(); -img.src = url; -img.onload = () => { - setImageDimensions({ width: img.width, height: img.height }); -}; -}, [url]); - -const handleImageClick = (e: React.MouseEvent) => { -if (downloadable) { - e.preventDefault(); - const link = document.createElement('a'); - link.href = url; - link.download = name; - link.click(); -} else { - setShowModal(true); - document.body.style.overflow = 'hidden'; -} -}; - -const closeModal = () => { -setShowModal(false); -document.body.style.overflow = 'auto'; -}; - -return ( -<> -
-
- -
- {downloadable && ( - - - - )} -
- {showModal && ( -
-
- -
-
- )} - -); -}; - -export default DownloadableImage; diff --git a/components/EcosystemApps/EcosystemApps.tsx b/components/EcosystemApps/EcosystemApps.tsx index 44767c2c..d867f15d 100644 --- a/components/EcosystemApps/EcosystemApps.tsx +++ b/components/EcosystemApps/EcosystemApps.tsx @@ -17,7 +17,7 @@ const EcosystemApps = () => { const filteredApps = useMemo(() => ( appData.filter(app => app.title.toLowerCase().includes(searchTerm.toLowerCase()) || - app.tags.some(tag => + app.tags.some(tag => tagPrettyNames[tag]?.some(prettyName => prettyName.toLowerCase().includes(searchTerm.toLowerCase())) ) ) @@ -27,13 +27,13 @@ const EcosystemApps = () => {
setSearchTerm(e.target.value)} className="w-full p-2 text-sm border rounded shadow-sm placeholder-gray-400" />
- Filter by Tags: {allTags.join(', ')} + {allTags.join(', ')}
{filteredApps.length > 0 ? ( diff --git a/components/EvmWalletConnect/CustomConnectButton.tsx b/components/EvmWalletConnect/CustomConnectButton.tsx new file mode 100644 index 00000000..e9064b13 --- /dev/null +++ b/components/EvmWalletConnect/CustomConnectButton.tsx @@ -0,0 +1,73 @@ +// components/EvmWalletConnect/CustomConnectButton.tsx +import { ConnectButton } from "@rainbow-me/rainbowkit"; +import styled from 'styled-components'; + +const CustomButton = styled.button` +background: #001B2A; /* Dark color */ +border: none; +color: #ECDEDE; /* Light color */ +padding: 0.5rem 1rem; +font-size: 1rem; +cursor: pointer; +transition: color 0.3s, background 0.3s; +display: inline-block; +margin-top: 1rem; +margin-right: 0.5rem; +border-radius: 25px; /* Rounded corners */ +text-align: center; +box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +font-family: 'Inter', sans-serif; + +&:hover { +color: #001B2A; /* Dark color */ +background: #ECDEDE; /* Light color */ +} +`; + +const CustomConnectButton = (props) => ( + +{({ account, chain, openAccountModal, openConnectModal, openChainModal, mounted }) => { + const ready = mounted; + const connected = ready && account && chain; + + return ( +
+ {(() => { + if (!connected) { + return ( + + Connect Wallet + + ); + } + + if (chain.unsupported) { + return ( + + Wrong network + + ); + } + + return ( + + {account.displayName} + + ); + })()} +
+ ); +}} + +); + +export default CustomConnectButton; diff --git a/components/EvmWalletConnect/EvmWalletConnect.tsx b/components/EvmWalletConnect/EvmWalletConnect.tsx index 7914554d..99c130da 100644 --- a/components/EvmWalletConnect/EvmWalletConnect.tsx +++ b/components/EvmWalletConnect/EvmWalletConnect.tsx @@ -1,71 +1,68 @@ +// components/EvmWalletConnect/EvmWalletConnect.tsx import { - ConnectButton, - connectorsForWallets, - RainbowKitProvider, +connectorsForWallets, +RainbowKitProvider, } from "@rainbow-me/rainbowkit"; import { injectedWallet, metaMaskWallet } from "@rainbow-me/rainbowkit/wallets"; import { Chain, configureChains, createConfig, WagmiConfig } from "wagmi"; import { publicProvider } from "wagmi/providers/public"; import "@rainbow-me/rainbowkit/styles.css"; import { ChainRpcUrls } from "viem/_types/types/chain"; +import CustomConnectButton from './CustomConnectButton'; export default function EvmWalletConnect() { - const rpcUrl: ChainRpcUrls = { - http: ["https://evm-rpc.sei-apis.com"], - webSocket: ["wss://evm-ws.sei-apis.com"], - }; - const seiDevnet: Chain = { - id: 513, - name: "Sei Network", - network: "Sei", - nativeCurrency: { - decimals: 18, - name: "Sei", - symbol: "SEI", - }, - rpcUrls: { - public: rpcUrl, - default: rpcUrl, - }, - testnet: true, - blockExplorers: { - default: { name: "Seitrace", url: "https://seitrace.com" }, - }, - }; +const rpcUrl: ChainRpcUrls = { + http: ["https://evm-rpc.sei-apis.com"], + webSocket: ["wss://evm-ws.sei-apis.com"], +}; +const seiDevnet: Chain = { + id: 513, + name: "Sei Network", + network: "Sei", + nativeCurrency: { + decimals: 18, + name: "Sei", + symbol: "SEI", + }, + rpcUrls: { + public: rpcUrl, + default: rpcUrl, + }, + testnet: true, + blockExplorers: { + default: { name: "Seitrace", url: "https://seitrace.com" }, + }, +}; - const { chains, publicClient } = configureChains( - [seiDevnet], - [publicProvider()] - ); +const { chains, publicClient } = configureChains( + [seiDevnet], + [publicProvider()] +); - const projectId = "385413c214cb74213e0679bc30dd4e4c"; - const connectors = connectorsForWallets([ - { - groupName: "Recommended", - wallets: [ - injectedWallet({ chains }), - metaMaskWallet({ projectId, chains }), - ], - }, - ]); +const projectId = "385413c214cb74213e0679bc30dd4e4c"; +const connectors = connectorsForWallets([ + { + groupName: "Recommended", + wallets: [ + injectedWallet({ chains }), + metaMaskWallet({ projectId, chains }), + ], + }, +]); - const wagmiConfig = createConfig({ - autoConnect: false, - connectors, - publicClient, - }); +const wagmiConfig = createConfig({ + autoConnect: false, + connectors, + publicClient, +}); - return ( -
- - - - - -
- ); +return ( +
+ + + + + +
+); } diff --git a/components/index.ts b/components/index.ts index e93119ac..8ed226fa 100644 --- a/components/index.ts +++ b/components/index.ts @@ -2,6 +2,8 @@ export * from "./EcosystemApps"; export * from "./EcosystemCard"; export * from "./EvmWalletConnect"; export * from "./HelpCallout"; +export * from "./BrandKitGallery"; export * from "./ImageWithCaption"; export * from "./Logo"; export * from "./Nfts"; +export * from "./VersionFetcher"; \ No newline at end of file diff --git a/data/imageData.ts b/data/imageData.ts deleted file mode 100644 index a28c2373..00000000 --- a/data/imageData.ts +++ /dev/null @@ -1,23 +0,0 @@ -// src/imageData.ts -export interface ImageData { - url: string; - alt: string; - name: string; - } - -const images: ImageData[] = [ - { url: 'https://cdn.sei.io/brand_/brand_01.png', alt: 'Logotype', name: 'brand_01' }, - { url: 'https://cdn.sei.io/brand_/brand_02.png', alt: 'Main Logo', name: 'brand_02' }, - { url: 'https://cdn.sei.io/brand_/brand_03.png', alt: 'Symbol Gradient', name: 'brand_03' }, - { url: 'https://cdn.sei.io/brand_/brand_04.png', alt: 'Symbol Clearspace', name: 'brand_04' }, - { url: 'https://cdn.sei.io/brand_/brand_05.png', alt: 'Logo Misuse', name: 'brand_05' }, - { url: 'https://cdn.sei.io/brand_/brand_06.png', alt: 'Sei Color Palette', name: 'brand_06' }, - { url: 'https://cdn.sei.io/brand_/brand_07.png', alt: 'Sei Gradient', name: 'brand_07' }, - { url: 'https://cdn.sei.io/brand_/brand_08.png', alt: 'Typography', name: 'brand_08' }, - { url: 'https://cdn.sei.io/brand_/brand_09.png', alt: 'Typography', name: 'brand_09' }, - { url: 'https://cdn.sei.io/brand_/brand_10.png', alt: 'Typography', name: 'brand_10' }, - { url: 'https://cdn.sei.io/brand_/brand_11.png', alt: 'Typography', name: 'brand_11' }, - // Add more image entries as needed - ]; - -export default images; diff --git a/next.config.js b/next.config.js index 45c87776..dae00273 100644 --- a/next.config.js +++ b/next.config.js @@ -5,6 +5,12 @@ const withNextra = require('nextra')({ module.exports = withNextra({ images: { - domains: ['cdn.sei.io'], + remotePatterns: [ + { + protocol: 'https', + hostname: 'cdn.sei.io', + pathname: '**', + } + ], }, }); diff --git a/package.json b/package.json index 42445a2b..284811f5 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@mdx-js/loader": "^3.0.1", "@next/mdx": "^14.2.3", "@rainbow-me/rainbowkit": "^1.3.3", + "@types/styled-components": "^5.1.34", "lucide-react": "^0.314.0", "next": "^14.2.3", "next-compose-plugins": "^2.2.1", @@ -21,6 +22,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "sharp": "^0.33.2", + "styled-components": "^6.1.11", "tailwind-merge": "^2.2.1", "viem": "^1.21.4", "wagmi": "^1.4.13" diff --git a/pages/_app.mdx b/pages/_app.mdx index 9c615a65..1bc7fb96 100644 --- a/pages/_app.mdx +++ b/pages/_app.mdx @@ -1,9 +1,12 @@ -import '../styles/globals.css' +import '../styles/globals.css'; +import '../styles/custom.css'; +import '@rainbow-me/rainbowkit/styles.css'; +import { ThemeProvider } from 'next-themes'; export default function Nextra({ Component, pageProps }) { - return ( - <> - - - ) -} \ No newline at end of file + return ( + + + + ); +} diff --git a/pages/brand-kit.mdx b/pages/brand-kit.mdx index 155c86cb..bb356325 100644 --- a/pages/brand-kit.mdx +++ b/pages/brand-kit.mdx @@ -1,15 +1,17 @@ ---- -title: Sei Brand Kit ---- +# Sei Branding +import { BrandImage, DownloadButton } from '../components/BrandKitGallery'; import { Callout } from "nextra/components"; -import DownloadableImage from '../components/DownloadableImage'; -import images from '../data/imageData'; - -# Sei Branding +import '../styles/custom.module.css'; - Please adhere to these guidelines when featuring Sei in marketing communications, such as advertising, articles, websites, and printed materials. +Please adhere to these guidelines when featuring Sei in marketing communications, such as advertising, articles, websites, and printed materials. + +**Download full brand assets and guidelines** + + + Sei Brand Assets + Sei’s brand is inspired by Japanese Zen gardens, reflecting harmony, simplicity, and mindfulness. The angular and minimalistic design conveys speed, efficiency, and tranquility, aligning with Sei’s commitment to high performance and ease of use in the blockchain space. @@ -18,82 +20,71 @@ Sei’s brand is inspired by Japanese Zen gardens, reflecting harmony, simplicit ### Logotype -{images.filter(image => image.name === 'brand_01').map(image => ( - -))} - -
- -### Logotype Clearspace - -{images.filter(image => ['brand_03', 'brand_04'].includes(image.name)).map(image => ( - -))} + -
- -### Logo Misuse - -{images.filter(image => image.name === 'brand_08').map(image => ( - -))} +### Main Logo -
+ -### Symbol Clearspace + + PNG + + + SVG + -{images.filter(image => image.name === 'brand_07').map(image => ( - -))} +### Logotype Clearspace -
+A certain amount of space is needed around the logomark to prevent it from becoming cluttered by surrounding artwork, images, or the edge of a page. -### Typography +Below are the minimum spacings: -{images.filter(image => image.name.includes('brand_11') || image.name.includes('brand_12') || image.name.includes('brand_13') || image.name.includes('brand_14')).map(image => ( - -))} + + -
+### Symbol -## Downloadable Assets + + -
+ + PNG + + + SVG + -### Main Logo +### Symbol Clearspace -{images.filter(image => image.name === 'brand_02').map(image => ( - -))} + -
+### Logo Misuse -### Symbol + -{images.filter(image => image.name === 'brand_05').map(image => ( - -))} +## Sei Colors -
+### Sei Color Palette -### Symbol Gradient + -{images.filter(image => image.name === 'brand_06').map(image => ( - -))} +### Sei Gradient -
+ -### Sei Color Palette +## Typography -{images.filter(image => image.name === 'brand_09').map(image => ( - -))} + + + + -
+--- -### Sei Gradient + +**Download full brand assets and guidelines** -{images.filter(image => image.name === 'brand_10').map(image => ( - -))} + + Sei Brand Assets + + diff --git a/pages/node-operators.mdx b/pages/node-operators.mdx index 46fdb468..c36f0f1f 100644 --- a/pages/node-operators.mdx +++ b/pages/node-operators.mdx @@ -90,10 +90,11 @@ apt install nano make build-essential gcc git jq chrony tar curl lz4 wget -y mv genesis.json ~/.sei/config ``` -
+
For light-client setup stop here, and add an RPC connection to `client.toml` as a final step.
+ #### Configure Node 1. Set persistent peers: diff --git a/styles/DownloadableImage.module.css b/styles/DownloadableImage.module.css deleted file mode 100644 index 3e876f61..00000000 --- a/styles/DownloadableImage.module.css +++ /dev/null @@ -1,64 +0,0 @@ -/* styles/DownloadableImage.module.css */ -.imageWrapper { - margin: 2rem 0; - text-align: center; - cursor: pointer; - position: relative; -} - -.imageWrapper:hover { - transform: scale(1.05); - transition: transform 0.3s ease; -} - -.imageContainer { - display: flex; - justify-content: center; - align-items: center; -} - -.image { - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} - -.downloadButton { - background: none; - border: none; - color: #E63946; /* Sei logo color */ - padding: 0.5rem; - font-size: 1.5rem; - cursor: pointer; - transition: color 0.3s; - display: inline-block; - margin-top: 1rem; -} - -.downloadButton:hover { - color: #C92A3A; /* Darker shade of Sei logo color */ -} - -.modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; -} - -.modalContent { - position: relative; - width: 80%; - height: 80%; -} - -.modalContent img { - max-width: 100%; - max-height: 100%; - object-fit: contain; -} diff --git a/styles/custom.css b/styles/custom.css new file mode 100644 index 00000000..2f1b7a0f --- /dev/null +++ b/styles/custom.css @@ -0,0 +1,89 @@ +/* styles/custom.css */ +.callout.custom-green { + background-color: rgba(0, 255, 0, 0.1); /* Light transparent green background */ + border: 1px solid rgba(0, 255, 0, 0.3); /* Light green border */ + padding: 8px 12px; /* Smaller padding */ + margin: 16px 0; + border-radius: 8px; /* Slightly rounded corners */ + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + color: #00FF00; /* Green text color */ + display: flex; + align-items: center; + font-size: 14px; /* Smaller font size */ +} + +.callout.custom-green::before { + content: "✅"; + margin-right: 8px; + font-size: 16px; /* Smaller icon size */ +} + +.downloadButton { + background: #001B2A; /* Dark color */ + border: none; + color: #ECDEDE; /* Light color */ + padding: 0.5rem 1rem; + font-size: 1rem; + cursor: pointer; + transition: color 0.3s, background 0.3s; + display: inline-block; + margin-top: 1rem; + margin-right: 0.5rem; + border-radius: 25px; /* Rounded corners */ + text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + font-family: Inter, sans-serif; +} + +.downloadButton:hover { + color: #001B2A; /* Dark color */ + background: #ECDEDE; /* Light color */ +} + +.imageWrapper { + margin: 2rem 0; + text-align: center; + cursor: pointer; + position: relative; +} + +.imageWrapper:hover { + transform: scale(1.05); + transition: transform 0.3s ease; +} + +.imageContainer { + display: flex; + justify-content: center; + align-items: center; +} + +.image { + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modalContent { + position: relative; + width: 80%; + height: 80%; +} + +.modalContent img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} diff --git a/styles/custom.module.css b/styles/custom.module.css new file mode 100644 index 00000000..365cbe8f --- /dev/null +++ b/styles/custom.module.css @@ -0,0 +1,89 @@ +/* styles/custom.module.css */ +.callout.custom-green { +background-color: rgba(0, 255, 0, 0.1); /* Light transparent green background */ +border: 1px solid rgba(0, 255, 0, 0.3); /* Light green border */ +padding: 8px 12px; /* Smaller padding */ +margin: 16px 0; +border-radius: 8px; /* Slightly rounded corners */ +box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +color: #00FF00; /* Green text color */ +display: flex; +align-items: center; +font-size: 14px; /* Smaller font size */ +} + +.callout.custom-green::before { +content: "✅"; +margin-right: 8px; +font-size: 16px; /* Smaller icon size */ +} + +.downloadButton { +background: #001B2A; /* Dark color */ +border: none; +color: #ECDEDE; /* Light color */ +padding: 0.5rem 1rem; +font-size: 1rem; +cursor: pointer; +transition: color 0.3s, background 0.3s; +display: inline-block; +margin-top: 1rem; +margin-right: 0.5rem; +border-radius: 25px; /* Rounded corners */ +text-align: center; +box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +font-family: Inter, sans-serif; +} + +.downloadButton:hover { +color: #001B2A; /* Dark color */ +background: #ECDEDE; /* Light color */ +} + +.imageWrapper { +margin: 2rem 0; +text-align: center; +cursor: pointer; +position: relative; +} + +.imageWrapper:hover { +transform: scale(1.05); +transition: transform 0.3s ease; +} + +.imageContainer { +display: flex; +justify-content: center; +align-items: center; +} + +.image { +border-radius: 8px; +box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.modal { +position: fixed; +top: 0; +left: 0; +width: 100%; +height: 100%; +background: rgba(0, 0, 0, 0.8); +display: flex; +justify-content: center; +align-items: center; +z-index: 1000; +} + +.modalContent { +position: relative; +width: 80%; +height: 80%; +} + +.modalContent img { +max-width: 100%; +max-height: 100%; +object-fit: contain; +} diff --git a/styles/globals.css b/styles/globals.css index e7b21c4b..fbd2d3b7 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,25 +1,4 @@ +/* styles/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; - -.callout.custom-green { - background-color: rgba(0, 255, 0, 0.1); /* Light transparent green background */ - border: 1px solid rgba(255, 255, 255, 0.2); /* Light white border */ - padding: 8px 12px; /* Smaller padding */ - margin: 16px 0; - border-radius: 8px; /* Slightly rounded corners */ - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - color: #f0f0f0; /* Light text color */ - display: flex; - align-items: center; - font-size: 14px; /* Smaller font size */ -} - -.callout.custom-green::before { - content: "✅"; - margin-right: 8px; - font-size: 16px; /* Smaller icon size */ -} - - - diff --git a/tailwind.config.js b/tailwind.config.js index d4473863..50846ac1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,3 @@ -// tailwind.config.js - /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", diff --git a/theme.config.tsx b/theme.config.tsx index a238aa46..ab7e26c5 100644 --- a/theme.config.tsx +++ b/theme.config.tsx @@ -1,6 +1,6 @@ import React from "react"; import { DocsThemeConfig } from "nextra-theme-docs"; -import { Logo } from "./components"; +import { Logo } from "./components/Logo"; const config: DocsThemeConfig = { logo: , diff --git a/yarn.lock b/yarn.lock index 5a1e245d..f920039a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -52,6 +52,23 @@ resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== +"@emotion/is-prop-valid@1.2.2": + version "1.2.2" + resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz" + integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw== + dependencies: + "@emotion/memoize" "^0.8.1" + +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/unitless@0.8.1": + version "0.8.1" + resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + "@headlessui/react@^1.7.17": version "1.7.19" resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz" @@ -813,6 +830,12 @@ dependencies: "@types/unist" "*" +"@types/hoist-non-react-statics@*": + version "3.3.5" + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/js-yaml@^4.0.0": version "4.0.9" resolved "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz" @@ -867,14 +890,26 @@ resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz" integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q== -"@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@>=16", "@types/react@>=16.8": - version "18.3.1" - resolved "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz" - integrity sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw== +"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@>=16", "@types/react@>=16.8": + version "18.3.3" dependencies: "@types/prop-types" "*" csstype "^3.0.2" +"@types/styled-components@^5.1.34": + version "5.1.34" + resolved "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz" + integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + +"@types/stylis@4.2.5": + version "4.2.5" + resolved "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz" + integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw== + "@types/trusted-types@^2.0.2": version "2.0.7" resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz" @@ -1738,6 +1773,11 @@ camelcase@^5.0.0: resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599: version "1.0.30001614" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz" @@ -1997,6 +2037,20 @@ crossws@^0.2.0, crossws@^0.2.2: resolved "https://registry.npmjs.org/crossws/-/crossws-0.2.4.tgz" integrity sha512-DAxroI2uSOgUKLz00NX6A8U/8EE3SZHmIND+10jkVSaypvyt57J5JEOxAQOL6lQxyzi/wZbTIwssU1uy69h5Vg== +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz" + integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + +css-to-react-native@3.2.0: + version "3.2.0" + resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz" + integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-what@^6.1.0: version "6.1.0" resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz" @@ -2007,7 +2061,7 @@ cssesc@^3.0.0: resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz" integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== -csstype@^3.0.2, csstype@^3.0.7: +csstype@^3.0.2, csstype@^3.0.7, csstype@3.1.3: version "3.1.3" resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== @@ -3231,6 +3285,11 @@ hey-listen@^1.0.8: resolved "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz" integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== +hoist-non-react-statics@^3.3.0: + version "3.3.2" + dependencies: + react-is "^16.7.0" + html-void-elements@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz" @@ -5075,9 +5134,7 @@ node-forge@^1.3.1: integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA== node-gyp-build@^4.2.0: - version "4.8.0" - resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.0.tgz" - integrity sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og== + version "4.8.1" node-releases@^2.0.14: version "2.0.14" @@ -5407,12 +5464,12 @@ postcss-selector-parser@^6.0.11: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0: +postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.35, postcss@>=8.0.9: +postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.35, postcss@>=8.0.9, postcss@8.4.38: version "8.4.38" resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz" integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A== @@ -5524,7 +5581,7 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" -react-dom@*, "react-dom@^16 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@^18.3.1, react-dom@>=16.0.0, react-dom@>=16.13.1, "react-dom@>=16.x <=18.x", react-dom@>=17: +react-dom@*, "react-dom@^16 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@^18.3.1, "react-dom@>= 16.8.0", react-dom@>=16.0.0, react-dom@>=16.13.1, "react-dom@>=16.x <=18.x", react-dom@>=17: version "18.3.1" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz" integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== @@ -5532,6 +5589,9 @@ react-dom@*, "react-dom@^16 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18 loose-envify "^1.1.0" scheduler "^0.23.2" +react-is@^16.7.0: + version "16.13.1" + react-remove-scroll-bar@^2.3.4: version "2.3.6" resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz" @@ -5560,7 +5620,7 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" -react@*, "react@^16 || ^17 || ^18", "react@^16.5.1 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.0.0, react@>=16.13.1, react@>=16.8, "react@>=16.x <=18.x", react@>=17, react@>=17.0.0: +react@*, "react@^16 || ^17 || ^18", "react@^16.5.1 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.0.0, react@>=16.13.1, react@>=16.8, "react@>=16.x <=18.x", react@>=17, react@>=17.0.0: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== @@ -5880,6 +5940,11 @@ sha.js@^2.4.11: inherits "^2.0.1" safe-buffer "^5.0.1" +shallowequal@1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + sharp@^0.33.2: version "0.33.3" resolved "https://registry.npmjs.org/sharp/-/sharp-0.33.3.tgz" @@ -6152,6 +6217,21 @@ style-to-object@^1.0.0: dependencies: inline-style-parser "0.2.3" +styled-components@^6.1.11: + version "6.1.11" + resolved "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz" + integrity sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA== + dependencies: + "@emotion/is-prop-valid" "1.2.2" + "@emotion/unitless" "0.8.1" + "@types/stylis" "4.2.5" + css-to-react-native "3.2.0" + csstype "3.1.3" + postcss "8.4.38" + shallowequal "1.1.0" + stylis "4.3.2" + tslib "2.6.2" + styled-jsx@5.1.1: version "5.1.1" resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz" @@ -6159,7 +6239,7 @@ styled-jsx@5.1.1: dependencies: client-only "0.0.1" -stylis@^4.1.3: +stylis@^4.1.3, stylis@4.3.2: version "4.3.2" resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz" integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg== @@ -6387,6 +6467,11 @@ tslib@^2.4.0: resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz" integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== +tslib@2.6.2: + version "2.6.2" + resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + type-fest@^1.0.2: version "1.4.0" resolved "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz" @@ -6426,11 +6511,6 @@ uncrypto@^0.1.3: resolved "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz" integrity sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q== -undici-types@~5.26.4: - version "5.26.5" - resolved "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz" - integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== - unenv@^1.9.0: version "1.9.0" resolved "https://registry.npmjs.org/unenv/-/unenv-1.9.0.tgz"