Skip to content

Darkmode responsiveness #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sprtd merged 2 commits into from
Oct 8, 2025
Merged

Darkmode responsiveness #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
875ca17
chore : responsiveness
JayWebtech Oct 8, 2025
04d176c
feat : dark mode
JayWebtech Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@ docs/.gitbook/
docs/dist/
docs/build/

# Next.js build outputs
docs/.next/
docs/out/
docs/next-env.d.ts
.next/
out/
next-env.d.ts

# IDE and editor files
.vscode/
.idea/
Expand Down
11 changes: 6 additions & 5 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@
"start": "next start"
},
"dependencies": {
"next": "15.5.4",
"next-themes": "^0.4.6",
"react": "19.1.0",
"react-dom": "19.1.0",
"next": "15.5.4"
"react-dom": "19.1.0"
},
"devDependencies": {
"typescript": "^5",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4"
"tailwindcss": "^4",
"typescript": "^5"
}
}
204 changes: 106 additions & 98 deletions docs/src/app/clients/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

132 changes: 68 additions & 64 deletions docs/src/app/commands/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,72 +6,76 @@ export default function Commands() {
<div className="prose prose-lg max-w-none">
<h1 className="text-4xl font-bold mb-4">Commands Reference</h1>

<p className="text-xl text-gray-600 mb-4 leading-relaxed">
<p className="text-xl text-white mb-4 leading-relaxed">
Complete reference for all starknode-kit commands. Each command helps
you manage different aspects of your Ethereum and Starknet nodes.
</p>

<h2 className="text-3xl font-semibold mb-6">Command Overview</h2>

<div className="not-prose my-8">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Command</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">add</td>
<td className="px-6 py-4 text-sm">Add an Ethereum or Starknet client to the config</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">completion</td>
<td className="px-6 py-4 text-sm">Generate the autocompletion script for the specified shell</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">config</td>
<td className="px-6 py-4 text-sm">Create, show, and update your Starknet node configuration</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">monitor</td>
<td className="px-6 py-4 text-sm">Launch real-time monitoring dashboard</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">remove</td>
<td className="px-6 py-4 text-sm">Remove a specified resource</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">run</td>
<td className="px-6 py-4 text-sm">Run a specific local infrastructure service</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">start</td>
<td className="px-6 py-4 text-sm">Run the configured Ethereum clients</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">status</td>
<td className="px-6 py-4 text-sm">Display status of running clients</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">stop</td>
<td className="px-6 py-4 text-sm">Stop the configured Ethereum clients</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">update</td>
<td className="px-6 py-4 text-sm">Check for and install client updates</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">validator</td>
<td className="px-6 py-4 text-sm">Manage the Starknet validator client</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono">version</td>
<td className="px-6 py-4 text-sm">Show version of starknode-kit or a specific client</td>
</tr>
</tbody>
</table>
<div className="not-prose my-8 overflow-x-auto -mx-4 sm:mx-0">
<div className="inline-block min-w-full align-middle">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50 dark:bg-gray-800">
<tr>
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Command</th>
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Description</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">add</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Add an Ethereum or Starknet client to the config</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">completion</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Generate the autocompletion script for the specified shell</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">config</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Create, show, and update your Starknet node configuration</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">monitor</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Launch real-time monitoring dashboard</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">remove</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Remove a specified resource</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">run</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Run a specific local infrastructure service</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">start</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Run the configured Ethereum clients</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">status</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Display status of running clients</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">stop</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Stop the configured Ethereum clients</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">update</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Check for and install client updates</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">validator</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Manage the Starknet validator client</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-source-code text-gray-900 dark:text-gray-300">version</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">Show version of starknode-kit or a specific client</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<h2 className="text-3xl font-semibold mt-16 mb-6">Quick Examples</h2>
Expand Down Expand Up @@ -142,13 +146,13 @@ starknode-kit completion zsh > "\${fpath[1]}/_starknode-kit"
starknode-kit completion fish > ~/.config/fish/completions/starknode-kit.fish`}
/>

<div className="mt-12 p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
<h3 className="text-lg font-semibold mb-2">📖 Next Steps</h3>
<p className="text-gray-700 mb-4">
<div className="mt-12 p-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-yellow-400">📖 Next Steps</h3>
<p className="text-gray-700 dark:text-gray-300 mb-4">
Ready to dive deeper? Check out our comprehensive guides:
</p>
<div className="flex flex-wrap gap-3">
<Link href="/clients" className="text-blue-600 hover:text-blue-800 font-medium">Supported Clients</Link>
<Link href="/clients" className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium">Supported Clients</Link>
</div>
</div>
</div>
Expand Down
94 changes: 49 additions & 45 deletions docs/src/app/configuration/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function Configuration() {
<div className="prose prose-lg max-w-none">
<h1 className="text-4xl font-bold mb-4">Configuration</h1>

<p className="text-xl text-gray-600 mb-4 leading-relaxed">
<p className="text-xl text-white mb-4 leading-relaxed">
Learn how to configure starknode-kit for your Ethereum and Starknet
nodes.
</p>
Expand Down Expand Up @@ -171,9 +171,9 @@ starknode-kit config set juno eth_node=http://localhost:8545`}
</li>
</ul>

<div className="bg-yellow-50 border-l-4 border-yellow-500 p-6 my-10 rounded-r-lg">
<p className="font-semibold mb-3 text-lg">⚠️ Important</p>
<p className="mb-0 text-base">
<div className="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 dark:border-yellow-600 p-6 my-10 rounded-r-lg">
<p className="font-semibold mb-3 text-lg text-gray-900 dark:text-yellow-400">⚠️ Important</p>
<p className="mb-0 text-base text-gray-700 dark:text-gray-300">
Changing the network will affect all clients. Make sure to stop your
nodes before changing networks.
</p>
Expand All @@ -187,43 +187,47 @@ starknode-kit config set juno eth_node=http://localhost:8545`}

<p className="text-lg mb-6">Default ports for each client:</p>

<div className="not-prose my-8">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ports</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Purpose</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">Geth</td>
<td className="px-6 py-4 text-sm font-mono">8545, 8546, 30303</td>
<td className="px-6 py-4 text-sm">HTTP RPC, WS RPC, P2P</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">Reth</td>
<td className="px-6 py-4 text-sm font-mono">8545, 8546, 30303</td>
<td className="px-6 py-4 text-sm">HTTP RPC, WS RPC, P2P</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">Lighthouse</td>
<td className="px-6 py-4 text-sm font-mono">5052, 9000</td>
<td className="px-6 py-4 text-sm">HTTP API, P2P</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">Prysm</td>
<td className="px-6 py-4 text-sm font-mono">4000, 13000</td>
<td className="px-6 py-4 text-sm">HTTP API, P2P</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">Juno</td>
<td className="px-6 py-4 text-sm font-mono">6060</td>
<td className="px-6 py-4 text-sm">RPC</td>
</tr>
</tbody>
</table>
<div className="not-prose my-8 overflow-x-auto -mx-4 sm:mx-0">
<div className="inline-block min-w-full align-middle">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50 dark:bg-gray-800">
<tr>
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Client</th>
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Ports</th>
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Purpose</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Geth</td>
<td className="px-4 sm:px-6 py-4 text-sm font-source-code text-gray-900 dark:text-gray-300">8545, 8546, 30303</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">HTTP RPC, WS RPC, P2P</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Reth</td>
<td className="px-4 sm:px-6 py-4 text-sm font-source-code text-gray-900 dark:text-gray-300">8545, 8546, 30303</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">HTTP RPC, WS RPC, P2P</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Lighthouse</td>
<td className="px-4 sm:px-6 py-4 text-sm font-source-code text-gray-900 dark:text-gray-300">5052, 9000</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">HTTP API, P2P</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Prysm</td>
<td className="px-4 sm:px-6 py-4 text-sm font-source-code text-gray-900 dark:text-gray-300">4000, 13000</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">HTTP API, P2P</td>
</tr>
<tr>
<td className="px-4 sm:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Juno</td>
<td className="px-4 sm:px-6 py-4 text-sm font-source-code text-gray-900 dark:text-gray-300">6060</td>
<td className="px-4 sm:px-6 py-4 text-sm text-gray-900 dark:text-gray-300">RPC</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<h2 className="text-3xl font-semibold mt-16 mb-6">
Expand Down Expand Up @@ -316,13 +320,13 @@ starknode-kit config set juno eth_node=http://localhost:8545`}
<li className="text-base">Stop conflicting services</li>
</ul>

<div className="mt-12 p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
<h3 className="text-lg font-semibold mb-2">📖 Next Steps</h3>
<p className="text-gray-700 mb-4">
<div className="mt-12 p-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-yellow-400">📖 Next Steps</h3>
<p className="text-gray-700 dark:text-gray-300 mb-4">
Ready to dive deeper? Check out our comprehensive guides:
</p>
<div className="flex flex-wrap gap-3">
<Link href="/commands" className="text-blue-600 hover:text-blue-800 font-medium">Commands Reference</Link>
<Link href="/commands" className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium">Commands Reference</Link>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions docs/src/app/contributing/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function Contributing() {
<div className="prose prose-lg max-w-none">
<h1 className="text-4xl font-bold mb-4">Contributing</h1>

<p className="text-xl text-gray-600 mb-4 leading-relaxed">
<p className="text-xl text-white mb-4 leading-relaxed">
We welcome contributions to starknode-kit! This guide will help you get
started with contributing to the project.
</p>
Expand Down Expand Up @@ -251,9 +251,9 @@ Error log output here
<li><a href="https://www.conventionalcommits.org/" target="_blank" rel="noopener noreferrer">Conventional Commits</a></li>
</ul>

<div className="bg-green-50 border-l-4 border-green-500 p-4 my-6">
<p className="font-semibold mb-2">🎉 Thank You!</p>
<p className="mb-0">
<div className="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 dark:border-green-600 p-4 my-6">
<p className="font-semibold mb-2 text-gray-900 dark:text-green-400">🎉 Thank You!</p>
<p className="mb-0 text-gray-700 dark:text-gray-300">
Thank you for considering contributing to starknode-kit! Your contributions help make this tool better for everyone.
</p>
</div>
Expand Down
Loading