Improve blog index and docs content

Author: naps62

src/docs/01-getting-started/01-what-is-ethui.mdx

@@ -12,8 +12,8 @@ ethui is a tool for interacting with Ethereum chains in a developer-friendly way
 
 At the surface, it replaces traditional wallets (MetaMask, Rabby, etc.). But it also provides a number of features that make it more interesting for power users and developers, such as:
 
-- An [anvil][anvil]-aware syncing process
-- quick feedback loops, by bypassing popups and password-prompts when testing conditions apply
-- Support for test-focused wallets
-- built-in contract explorer
-- Automatic indexing of ABIs found in local [forge][forge] projects
+- An [anvil][anvil]-aware syncing process.
+- Quick feedback loops by bypassing popups and password prompts when testing conditions apply.
+- Support for test-focused wallets.
+- Built-in contract explorer.
+- Automatic indexing of ABIs found in local [forge][forge] projects.

src/docs/02-features/03-auto-impersonation.mdx

@@ -9,6 +9,8 @@ ethui automatically uses `anvil_impersonateAccount` whenever submitting transact
 
 This allows you to submit transactions without having to unlock your wallet, and enables [fast mode](/docs/features/fast-mode) to work on secure wallets as well.
 
+If you want to explicitly pick which account is being impersonated, use the [Impersonator wallet](/docs/wallets/impersonator).
+
 ## Why?
 
 This is actually a security feature that happens to be very convenient for development.
@@ -27,3 +29,6 @@ By auto-impersonating accounts, you now skip the signing step, but are still abl
 - no signature is ever produced from your private key
 - [fast mode](/docs/features/fast-mode) can now be available as well, since the confirmation steps that would be needed for a signature is now optional
 
+## Related
+
+- [Impersonator wallet](/docs/wallets/impersonator)

src/docs/03-wallets/03-keystore.mdx

@@ -6,3 +6,19 @@ slug: keystore
 # Keystore
 
 The `Keystore` wallet allows you to use a keystore file to unlock your wallet. The keystore file format encodes a single private key in a file.
+
+## When to use it
+
+Choose this option when you already have a JSON keystore file (from geth, foundry, or another wallet export) and want to unlock it with a password.
+
+## Setup
+
+1. Export or locate your JSON keystore file.
+2. In ethui, create a new wallet and select **Keystore**.
+3. Choose the keystore file and enter its password.
+4. Confirm the derived address before using it.
+
+## Tips
+
+- Treat the keystore file like a password-protected secret.
+- If you lose the password, the keystore cannot be recovered.

src/docs/03-wallets/04-pkey.mdx

@@ -8,3 +8,15 @@ slug: pkey
 The `Private Key` wallet allows you to use a single private key directly.
 
 While this method is secure (the key is password-protected), it is not the most convenient or recommended way to use a wallet. It is supported only for scenarios where a user already has a private key and needs to access it.
+
+## Setup
+
+1. Copy your private key from a trusted source.
+2. In ethui, create a new wallet and select **Private Key**.
+3. Paste the key and set a strong password.
+4. Verify the derived address matches your expected account.
+
+## Security notes
+
+- Only paste keys on a trusted machine.
+- Prefer keystore or hardware wallets for long-term use.

src/docs/03-wallets/06-impersonator.mdx

@@ -9,20 +9,15 @@ The `Impersonator` wallet allows you to impersonate any account on the chain, by
 
 This is useful for testing, as it allows you to submit transactions without having to unlock your wallet, and enables [fast mode](/docs/features/fast-mode) to work on secure wallets as well.
 
-## Why?
+## How it works
 
-This is actually a security feature that happens to be very convenient for development.
+The wallet sends `anvil_impersonateAccount` for the address you choose, so you can run transactions as that account without signing locally.
 
-Let's say you're spawning the following anvil node:
+## Setup
 
-```sh
-anvil --chain-id 1
-```
+1. Start an anvil node.
+2. Create a new wallet and select **Impersonator**.
+3. Enter the address you want to impersonate.
+4. Submit transactions as usual.
 
-This could open you up for [replay attacks](https://chain.link/education-hub/replay-attack), where you end up signing a payload that can actually end up being used on the real mainnet chain to execute a real transaction, either maliciously or by mistake.
-
-By auto-impersonating accounts, you now skip the signing step, but are still able to include transactions on the test chain. In the end:
-
-- you never have to actually unlock your wallet
-- no signature is ever produced from your private key
-- [fast mode](/docs/features/fast-mode) can be used
+For the background on why this is safe and how it avoids signing, see [Auto Impersonation](/docs/features/auto-impersonation).

src/docs/03-wallets/07-ledger.mdx

@@ -6,3 +6,15 @@ slug: ledger
 # Ledger
 
 The `Ledger` wallet allows you to connect to a Ledger device. Currently, this is the only type of hardware wallet supported.
+
+## Setup
+
+1. Connect your Ledger device via USB.
+2. Unlock it and open the Ethereum app.
+3. In ethui, create a new wallet and select **Ledger**.
+4. Choose the account path and confirm the address on the device.
+
+## Troubleshooting
+
+- If the device is not detected, reconnect the cable and reopen the Ethereum app.
+- Make sure the Ledger firmware and Ethereum app are up to date.

src/routes/_l.blog/-manifest.ts

@@ -1,17 +1,32 @@
+import banner01 from "#/blog/01-announcing-ethui/banner.png";
 import * as blog01 from "#/blog/01-announcing-ethui/index.mdx";
+import banner02 from "#/blog/02-ethui-0.2.0-ui-level-up/banner.png";
 import * as blog02 from "#/blog/02-ethui-0.2.0-ui-level-up/index.mdx";
+import banner03 from "#/blog/03-ethui-0.3.1-mainnet/banner.png";
 import * as blog03 from "#/blog/03-ethui-0.3.1-mainnet/index.mdx";
+import banner04 from "#/blog/04-instant-foundry-abi-explorer/banner.png";
 import * as blog04 from "#/blog/04-instant-foundry-abi-explorer/index.mdx";
+import banner05 from "#/blog/05-ethui-0.5.0-impersonation/banner.png";
 import * as blog05 from "#/blog/05-ethui-0.5.0-impersonation/index.mdx";
+import banner06 from "#/blog/06-ethui-0.6.0-going-multi-chain/banner.png";
 import * as blog06 from "#/blog/06-ethui-0.6.0-going-multi-chain/index.mdx";
+import banner07 from "#/blog/07-ethui-0.7.0-eth-lisbon/banner.png";
 import * as blog07 from "#/blog/07-ethui-0.7.0-eth-lisbon/index.mdx";
+import banner08 from "#/blog/08-ethui-1.1.1-ledger-devtools/banner.png";
 import * as blog08 from "#/blog/08-ethui-1.1.1-ledger-devtools/index.mdx";
+import banner09 from "#/blog/09-ethui-1.6-a-new-beginning/banner.png";
 import * as blog09 from "#/blog/09-ethui-1.6-a-new-beginning/index.mdx";
+import banner10 from "#/blog/10-ethui-1.7-forms/banner.png";
 import * as blog10 from "#/blog/10-ethui-1.7-forms/index.mdx";
+import banner11 from "#/blog/11-ethui-1.13-were-back/banner.png";
 import * as blog11 from "#/blog/11-ethui-1.13-were-back/index.mdx";
+import banner12 from "#/blog/12-ethui-1.14/banner.png";
 import * as blog12 from "#/blog/12-ethui-1.14/index.mdx";
+import banner13 from "#/blog/13-ethui-explorer/banner.png";
 import * as blog13 from "#/blog/13-ethui-explorer/index.mdx";
+import banner14 from "#/blog/14-stacks/banner.png";
 import * as blog14 from "#/blog/14-stacks/index.mdx";
+import banner15 from "#/blog/15-ethui-1.27-hardhat-support/banner.png";
 import * as blog15 from "#/blog/15-ethui-1.27-hardhat-support/index.mdx";
 
 // Helper to get og-banner image for a slug
@@ -62,11 +77,30 @@ const rawBlogManifest = [
   blog15,
 ];
 
+const bannerImages: Record<string, string> = {
+  "announcing-ethui": banner01,
+  "ethui-0.2.0-ui-level-up": banner02,
+  "ethui-0.3.1-mainnet": banner03,
+  "instant-foundry-abi-explorer": banner04,
+  "ethui-0.5.0-impersonation": banner05,
+  "ethui-0.6.0-going-multi-chain": banner06,
+  "ethui-0.7.0-eth-lisbon": banner07,
+  "ethui-1.1.1-ledger-devtools": banner08,
+  "ethui-1.6.0-a-new-beginning": banner09,
+  "ethui-1.7.0-forms": banner10,
+  "ethui-1.13.0-were-back": banner11,
+  "ethui-1.14.0": banner12,
+  "ethui-explorer": banner13,
+  stacks: banner14,
+  "ethui-1.27-hardhat-support": banner15,
+};
+
 // Enhanced blog manifest with og-banner images
 export const blogManifest = rawBlogManifest.map((post) => ({
   ...post,
   frontmatter: {
     ...post.frontmatter,
     ogBanner: getOgBannerForSlug(post.frontmatter.slug),
+    bannerImage: bannerImages[post.frontmatter.slug],
   },
 }));

src/routes/_l.blog/_l.index.tsx

@@ -22,18 +22,44 @@ export const Route = createFileRoute("/_l/blog/_l/")({
 
 function RouteComponent() {
   return (
-    <ul className="prose">
-      {postsList.map(({ title, slug }) => (
-        <li key={slug} className="border-b pb-2">
-          <Link
-            to="/blog/$slug"
-            params={{ slug }}
-            className="font-medium text-lg no-underline transition-colors hover:text-primary"
-          >
-            {title}
-          </Link>
-        </li>
-      ))}
-    </ul>
+    <div className="flex flex-col gap-6">
+      <header className="prose">
+        <h1>Blog</h1>
+        <p>
+          Product updates, release notes, and behind-the-scenes development
+          stories from the ethui team.
+        </p>
+      </header>
+      <div className="grid gap-6">
+        {postsList.map(({ title, slug, banner, ogBanner, bannerImage }) => (
+          <article key={slug} className="border">
+            <Link
+              to="/blog/$slug"
+              params={{ slug }}
+              className="block no-underline"
+            >
+              <div className="grid gap-4 md:grid-cols-[140px_1fr] md:items-stretch">
+                {(bannerImage || ogBanner) && (
+                  <img
+                    src={bannerImage || ogBanner}
+                    alt={`${title} banner`}
+                    loading="lazy"
+                    className="h-full w-full object-cover"
+                  />
+                )}
+                <div className="space-y-2 p-4">
+                  {banner?.date && (
+                    <p className="text-gray-500 text-sm">{banner.date}</p>
+                  )}
+                  <h2 className="font-semibold text-gray-900 text-xl">
+                    {title}
+                  </h2>
+                </div>
+              </div>
+            </Link>
+          </article>
+        ))}
+      </div>
+    </div>
   );
 }

src/routes/docs/-search-form.tsx

@@ -6,7 +6,16 @@ import {
 } from "@ethui/ui/components/shadcn/sidebar";
 import { Search } from "lucide-react";
 
-export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+interface SearchFormProps extends React.ComponentProps<"form"> {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export function SearchForm({
+  value,
+  onValueChange,
+  ...props
+}: SearchFormProps) {
   return (
     <form {...props}>
       <SidebarGroup className="py-0">
@@ -18,6 +27,9 @@ export function SearchForm({ ...props }: React.ComponentProps<"form">) {
             id="search"
             placeholder="Search the docs..."
             className="pl-8"
+            type="search"
+            value={value}
+            onChange={(event) => onValueChange(event.target.value)}
           />
           <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 select-none opacity-50" />
         </SidebarGroupContent>

src/routes/docs/-sidebar.tsx

@@ -19,6 +19,7 @@ import {
 } from "@ethui/ui/components/shadcn/sidebar";
 import { Link, useRouterState } from "@tanstack/react-router";
 import { ChevronRightIcon } from "lucide-react";
+import { useMemo, useState } from "react";
 import { docsManifest } from "./-manifest";
 import { SearchForm } from "./-search-form";
 
@@ -27,6 +28,43 @@ export function DocsSidebar({
 }: React.ComponentProps<typeof Sidebar>) {
   const routerState = useRouterState();
   const currentPath = routerState.location.pathname;
+  const [query, setQuery] = useState("");
+  const normalizedQuery = query.trim().toLowerCase();
+
+  const filteredSections = useMemo(() => {
+    if (!normalizedQuery) {
+      return docsManifest.sections;
+    }
+
+    return docsManifest.sections
+      .map((section) => {
+        const sectionMatches = section.title
+          .toLowerCase()
+          .includes(normalizedQuery);
+        if (sectionMatches) {
+          return section;
+        }
+
+        const filteredChildren = section.children.filter(({ frontmatter }) =>
+          frontmatter.title.toLowerCase().includes(normalizedQuery),
+        );
+
+        if (filteredChildren.length === 0) {
+          return null;
+        }
+
+        return {
+          ...section,
+          children: filteredChildren,
+        };
+      })
+      .filter(
+        (section): section is (typeof docsManifest.sections)[number] =>
+          section !== null,
+      );
+  }, [normalizedQuery]);
+
+  const hasResults = filteredSections.length > 0;
 
   return (
     <Sidebar {...props}>
@@ -41,10 +79,15 @@ export function DocsSidebar({
             </Link>
           </SidebarMenuItem>
         </SidebarMenu>
-        <SearchForm />
+        <SearchForm value={query} onValueChange={setQuery} />
       </SidebarHeader>
       <SidebarContent className="gap-0">
-        {docsManifest.sections.map(({ title, slug: sectionSlug, children }) => (
+        {!hasResults && normalizedQuery && (
+          <div className="px-4 py-6 text-muted-foreground text-sm">
+            No docs match "{query}".
+          </div>
+        )}
+        {filteredSections.map(({ title, slug: sectionSlug, children }) => (
           <Collapsible
             key={title}
             title={title}