docs: add bash script (placeholder)

NethermindEth · Oct 29, 2024 · 290fcd1 · 290fcd1
1 parent 0361b80
commit 290fcd1
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 42 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -65,19 +65,23 @@ const config = {
               items: [
                 {
                   label: 'Ethereum',
-                  to: '/networks/mainnet',
+                  to: '/docs/networks/mainnet',
                 },
                 {
-                  label: 'Sepolia (Testnet)',
-                  to: '/networks/sepolia',
+                  label: 'Holesky',
+                  to: '/docs/networks/holesky',
+                },
+                {
+                  label: 'Sepolia',
+                  to: '/docs/networks/sepolia',
                 },
                 {
                   label: 'Gnosis',
-                  to: '/networks/gnosis',
+                  to: '/docs/networks/gnosis',
                 },
                 {
-                  label: 'Chiado (Testnet)',
-                  to: '/networks/chiado',
+                  label: 'Chiado',
+                  to: '/docs/networks/chiado',
                 },
                 {
                   label: 'Optimism',
@@ -87,6 +91,10 @@ const config = {
                   label: 'Base',
                   to: '/docs/quickstart/running-optimism-node#base-support',
                 },
+                {
+                  label: 'Lido CSM',
+                  to: '/docs/quickstart/staking-with-lido',
+                },
               ]
             },
             {
@@ -126,6 +134,14 @@ const config = {
                   label: 'Optimism',
                   to: '/docs/networks/optimism',
                 },
+                {
+                  label: 'Base',
+                  to: '/docs/quickstart/running-optimism-node#base-support',
+                },
+                {
+                  label: 'Lido CSM',
+                  to: '/docs/quickstart/staking-with-lido',
+                },
               ],
             },
             {

diff --git a/docs/package.json b/docs/package.json
@@ -21,6 +21,7 @@
     "@emotion/styled": "^11.13.0",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^1.2.1",
+    "lucide-react": "^0.452.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

diff --git a/docs/src/components/BashScript/index.js b/docs/src/components/BashScript/index.js
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+
+const BashCommand = () => {
+    const [copied, setCopied] = useState(false);
+    const command = "curl -sL brew install nethermindeth/sedge/sedge";
+
+    const copyToClipboard = async () => {
+        try {
+            await navigator.clipboard.writeText(command);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy text: ', err);
+        }
+    };
+
+    return (
+        <div className="rounded-md bg-gray-900 text-white font-mono text-sm">
+            <div className="flex items-center p-4">
+                <div className="flex-grow overflow-x-auto mr-4">
+                    <pre className="flex items-center">
+                        <code className="overflow-x-auto">{command}</code>
+                    </pre>
+                </div>
+                <div className="flex-shrink-0">
+                    <button
+                        onClick={copyToClipboard}
+                        className="p-2 rounded hover:bg-gray-700 transition-colors"
+                        aria-label="Copy to clipboard"
+                    >
+                        {copied ? (
+                            <Check className="h-5 w-5 text-green-400"/>
+                        ) : (
+                            <Copy className="h-5 w-5 text-gray-400"/>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BashCommand;
diff --git a/docs/src/components/Header/index.js b/docs/src/components/Header/index.js
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import SearchBar from "@theme/SearchBar";
+import BashCommand from "../BashScript";
 
 export function Header() {
     const HeaderWrapper = styled.div`
@@ -63,6 +64,7 @@ export function Header() {
                     alt="Sedge Logo"
                 />
                 <Title>Easy node setup and deployment tool</Title>
+                <BashCommand/>
                 <SearchWrapper>
                     <SearchBar />
                 </SearchWrapper>

diff --git a/docs/src/components/SupportedNetworks/index.js b/docs/src/components/SupportedNetworks/index.js
@@ -12,15 +12,20 @@ const SectionTitle = styled.h2`
 
 const GridContainer = styled.div`
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
 `;
 
 const NetworkCard = styled.div`
-    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    padding-right: 4rem;
+    padding-left: 4rem;
+    padding-top: 2rem;
+    padding-bottom: 1rem;
     border: 1px solid var(--ifm-color-emphasis-300);
     border-radius: 8px;
     text-align: center;
@@ -31,7 +36,7 @@ const NetworkLogo = styled(ThemedImage)`
     width: 80px;
     height: 80px;
     object-fit: contain;
-    margin-bottom: 0.5rem;
+    margin: 0 auto 0.5rem;
 `;
 
 const NetworkName = styled.h3`
@@ -51,27 +56,38 @@ const NetworkButton = styled.a`
     font-size: 0.9rem;
 `;
 
-const ComingSoonLabel = styled.span`
-    display: inline-block;
-    margin-top: 0.5rem;
-    padding: 0.25rem 0.5rem;
-    background-color: var(--ifm-color-emphasis-100);
-    color: var(--ifm-color-emphasis-600);
-    border-radius: 4px;
-    font-size: 0.9rem;
+const TestnetsList = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+`;
+
+const TestnetButton = styled(NetworkButton)`
+    display: block;
+    margin: 0;
 `;
 
 export const SupportedNetworks = () => {
     const networks = [
+        {
+            name: 'Base',
+            logo: {
+                light: '/img/chains/base-logo.png',
+                dark: '/img/chains/base-logo.png',
+            },
+            networks: [
+                { name: 'Mainnet', link: '/docs/quickstart/running-optimism-node#base-support' },
+            ]
+        },
         {
             name: 'Ethereum',
             logo: {
                 light: '/img/chains/eth-logo.svg',
                 dark: '/img/chains/eth-logo.svg'
             },
             networks: [
-                { name: 'Mainnet', link: '/networks/mainnet' },
-                { name: 'Testnet', link: '/networks/sepolia' },
+                { name: 'Mainnet', link: '/docs/networks/mainnet' },
             ]
         },
         {
@@ -81,8 +97,7 @@ export const SupportedNetworks = () => {
                 dark: '/img/chains/gno-logo.png'
             },
             networks: [
-                { name: 'Mainnet', link: '/networks/gnosis' },
-                { name: 'Chiado', link: '/networks/chiado' }
+                { name: 'Mainnet', link: '/docs/networks/gnosis' },
             ]
         },
         {
@@ -92,26 +107,26 @@ export const SupportedNetworks = () => {
                 dark: '/img/chains/op-logo.png'
             },
             networks: [
-                { name: 'Mainnet', link: 'docs/quickstart/running-optimism-node' }
+                { name: 'Mainnet', link: '/docs/quickstart/running-optimism-node' }
             ]
         },
         {
-            name: 'Base',
-            logo: {
-                light: '/img/chains/base-logo.png',
-                dark: '/img/chains/base-logo.png',
-            },
+            name: 'Testnets',
             networks: [
-                { name: 'Mainnet', link: '/docs/quickstart/running-optimism-node#base-support' },
+                { name: 'Holesky', link: '/docs/networks/holesky' },
+                { name: 'Sepolia', link: '/docs/networks/sepolia' },
+                { name: 'Chiado', link: '/docs/networks/chiado' }
             ]
         },
         {
-            name: 'Obol',
+            name: 'Lido',
             logo: {
-                light: '/img/chains/obol-logo.png',
-                dark: '/img/chains/obol-logo.png',
+                light: '/img/chains/lido-logo.png',
+                dark: '/img/chains/lido-logo.png',
             },
-            comingSoon: true
+            networks: [
+                { name: 'CSM', link: '/docs/quickstart/staking-with-lido' }
+            ]
         },
     ];
 
@@ -121,16 +136,24 @@ export const SupportedNetworks = () => {
             <GridContainer>
                 {networks.map((network) => (
                     <NetworkCard key={network.name}>
-                        <NetworkLogo
-                            sources={{
-                                light: useBaseUrl(network.logo.light),
-                                dark: useBaseUrl(network.logo.dark),
-                            }}
-                            alt={`${network.name} logo`}
-                        />
+                        {network.logo && (
+                            <NetworkLogo
+                                sources={{
+                                    light: useBaseUrl(network.logo.light),
+                                    dark: useBaseUrl(network.logo.dark),
+                                }}
+                                alt={`${network.name} logo`}
+                            />
+                        )}
                         <NetworkName>{network.name}</NetworkName>
-                        {network.comingSoon ? (
-                            <ComingSoonLabel>Coming Soon</ComingSoonLabel>
+                        {network.name === 'Testnets' ? (
+                            <TestnetsList>
+                                {network.networks.map((net) => (
+                                    <TestnetButton key={net.name} href={net.link}>
+                                        {net.name}
+                                    </TestnetButton>
+                                ))}
+                            </TestnetsList>
                         ) : (
                             network.networks.map((net) => (
                                 <NetworkButton key={net.name} href={net.link}>
@@ -143,4 +166,6 @@ export const SupportedNetworks = () => {
             </GridContainer>
         </>
     );
-};
+};
+
+export default SupportedNetworks;
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -8,6 +8,7 @@ import SearchBar from '@theme/SearchBar';
 import {QuickLinks} from "../components/QuickLinks";
 import {SupportedNetworks} from "../components/SupportedNetworks";
 import {Header} from "../components/Header";
+import BashCommand from "../components/BashScript";
 
 
 const Container = styled.div`