namehash · lightwalker-eth · May 25, 2026 · May 25, 2026 · May 25, 2026 · May 25, 2026
@@ -1,4 +1,4 @@
-import { LinkCard, Steps } from '@astrojs/starlight/components';
+import { LinkCard, Steps, Aside } from '@astrojs/starlight/components';
 import IntegrateHostedEnsNodeTip from '@components/molecules/IntegrateHostedEnsNodeTip.astro';
 
 `enskit` is the React toolkit for ENSv2 development. It provides a fully typed Omnigraph API client (powered by [`urql`](https://nearform.com/open-source/urql/) and [`gql.tada`](https://gql-tada.0no.co/)), the `OmnigraphProvider`, and the `useOmnigraphQuery` hook for writing type-safe ENS queries with editor autocomplete, Relay-style pagination, and Omnigraph-specific cache directives.
@@ -26,9 +26,9 @@ npm install
 npm install enskit@1.13.1 enssdk@1.13.1
 ```
 
-:::caution[Pin exact versions]
+<Aside type="caution" title="Pin exact versions">
 Always pin **exact** versions (no `^` or `~`) of `enskit` and `enssdk`, and keep them on the same version. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking exact versions keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+</Aside>
 
 ## 3. Configure the `gql.tada` TypeScript plugin
 
@@ -98,9 +98,9 @@ export function App() {
 
 Create `src/DomainView.tsx`. We'll start with the simplest possible query — look up the `eth` Domain and render its owner and protocol version.
 
-:::tip[InterpretedName]
+<Aside type="tip" title="InterpretedName" >
 An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+</Aside>
 
 ```tsx title="src/DomainView.tsx"
 import { graphql, useOmnigraphQuery } from "enskit/react/omnigraph";

@@ -1,4 +1,4 @@
-import { LinkCard, Steps } from '@astrojs/starlight/components';
+import { LinkCard, Steps, Aside } from '@astrojs/starlight/components';
 import IntegrateHostedEnsNodeTip from '@components/molecules/IntegrateHostedEnsNodeTip.astro';
 
 `enskit` is the React toolkit for ENSv2 development. It provides a fully typed Omnigraph API client (powered by [`urql`](https://nearform.com/open-source/urql/) and [`gql.tada`](https://gql-tada.0no.co/)), the `OmnigraphProvider`, and the `useOmnigraphQuery` hook for writing type-safe ENS queries with editor autocomplete, Relay-style pagination, and Omnigraph-specific cache directives.
@@ -26,9 +26,9 @@ npm install
 npm install enskit@1.15.0 enssdk@1.15.0
 ```
 
-:::caution[Pin exact versions]
+<Aside type="caution" title="Pin exact versions">
 Always pin **exact** versions (no `^` or `~`) of `enskit` and `enssdk`, and keep them on the same version. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking exact versions keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+</Aside>
 
 ## 3. Configure the `gql.tada` TypeScript plugin
 
@@ -98,9 +98,9 @@ export function App() {
 
 Create `src/DomainView.tsx`. We'll start with the simplest possible query — look up the `eth` Domain and render its owner and protocol version.
 
-:::tip[InterpretedName]
+<Aside type="tip" title="InterpretedName" >
 An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+</Aside>
 
 ```tsx title="src/DomainView.tsx"
 import { graphql, useOmnigraphQuery } from "enskit/react/omnigraph";

@@ -1,4 +1,4 @@
-import { LinkCard } from '@astrojs/starlight/components';
+import { LinkCard, Aside } from '@astrojs/starlight/components';
 import IntegrateHostedEnsNodeTip from '@components/molecules/IntegrateHostedEnsNodeTip.astro';
 
 `enssdk` is the foundational TypeScript/JavaScript SDK for ENS development. It's a fully modular and tree-shakeable modern TypeScript/JavaScript package that provides ENS-specific types and helpers — usable from any JS runtime, browser or server.
@@ -30,9 +30,9 @@ npm install enssdk@1.13.1
 npm install -D tsx typescript @types/node
 ```
 
-:::caution[Pin exact versions]
+<Aside type="caution" title="Pin exact versions">
 Always pin an **exact** version (no `^` or `~`) of `enssdk`. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking the exact version keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+</Aside>
 
 
 ## 3. Configure the `gql.tada` TypeScript plugin
@@ -104,9 +104,9 @@ const client = createEnsNodeClient({ url: ENSNODE_URL }).extend(omnigraph);
 
 Add your first query — look up the `eth` Domain and print its owner and protocol version.
 
-:::tip[InterpretedName]
+<Aside type="tip" title="InterpretedName" >
 An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+</Aside>
 
 ```ts title="src/index.ts"
 // existing imports...

@@ -30,9 +30,9 @@ npm install enssdk@1.15.0
 npm install -D tsx typescript @types/node
 ```
 
-:::caution[Pin exact versions]
+<Aside type="caution" title="Pin exact versions">
 Always pin an **exact** version (no `^` or `~`) of `enssdk`. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking the exact version keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+</Aside>
 
 
 ## 3. Configure the `gql.tada` TypeScript plugin
@@ -104,9 +104,9 @@ const client = createEnsNodeClient({ url: ENSNODE_URL }).extend(omnigraph);
 
 Add your first query — look up the `eth` Domain and print its owner and protocol version.
 
-:::tip[InterpretedName]
+<Aside type="tip" title="InterpretedName" >
 An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+</Aside>
 
 ```ts title="src/index.ts"
 // existing imports...

@@ -6,13 +6,13 @@ import OmnigraphAPIExample from "@components/organisms/OmnigraphAPIExample.astro
 
 [ENSv2](https://ens.domains/ensv2) is the next generation of the [Ethereum Name Service](https://ens.domains) — a protocol upgrade that fundamentally changes how the ENS protocol works.
 
-:::tip[Prepare for ENSv2]
+<Aside type="tip" title="Prepare for ENSv2">
 The ENSv2 upgrade to the ENS protocol is coming **Summer 2026**! Your app, regardless of how it interacts with names, needs to be updated to avoid being left behind.
 
 <a href="/docs/integrate/ensv2-readiness">
   Learn more about ENSv2 Readiness
 </a>
-:::
+</Aside>
 
 ## What is the ENS Omnigraph?
 

@@ -6,13 +6,13 @@ import OmnigraphAPIExample from "@components/organisms/OmnigraphAPIExample.astro
 
 [ENSv2](https://ens.domains/ensv2) is the next generation of the [Ethereum Name Service](https://ens.domains) — a protocol upgrade that fundamentally changes how the ENS protocol works.
 
-:::tip[Prepare for ENSv2]
+<Aside type="tip" title="Prepare for ENSv2">
 The ENSv2 upgrade to the ENS protocol is coming **Summer 2026**! Your app, regardless of how it interacts with names, needs to be updated to avoid being left behind.
 
 <a href="/docs/integrate/ensv2-readiness">
   Learn more about ENSv2 Readiness
 </a>
-:::
+</Aside>
 
 ## What is the ENS Omnigraph?
 

@@ -7,6 +7,10 @@ sidebar:
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
+:::caution[`unigraph` plugin required]
+Using the Unigraph SQL requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
 Count the Domains owned by an address, grouped by Domain `type` (`ENSv1Domain` vs `ENSv2Domain`) — a single query spanning both protocol versions. See [Connect](/docs/integrate/unigraph/examples) for setup.
 
 <Tabs syncKey="unigraph-client">

@@ -7,6 +7,10 @@ sidebar:
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
+:::caution[`unigraph` plugin required]
+Using the Unigraph SQL requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
 Fetch a Domain by its canonical name. Because `canonical_name` is materialized across both ENSv1 and ENSv2, the same lookup works regardless of protocol version. See [Connect](/docs/integrate/unigraph/examples) for setup.
 
 <Tabs syncKey="unigraph-client">

@@ -11,6 +11,10 @@ These examples show the same queries two ways: in **raw SQL** (any PostgreSQL cl
 
 SQL access requires connecting to your own [self-hosted](/docs/self-host) ENSDb instance.
 
+:::caution[`unigraph` plugin required]
+Using the Unigraph SQL requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
 ## Connect
 
 The Unigraph lives in [ENSDb](/docs/services/ensdb), a PostgreSQL database. Each ENSIndexer instance writes to its own **ENSIndexer Schema** (e.g. `ensindexer_0`); shared operational metadata lives in the `ensnode` schema.

@@ -7,6 +7,10 @@ sidebar:
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
+:::caution[`unigraph` plugin required]
+Using the Unigraph SQL requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
 Read the indexing status snapshot for an ENSIndexer instance from the shared `ensnode.metadata` table. See [Connect](/docs/integrate/unigraph/examples) for setup.
 
 <Tabs syncKey="unigraph-client">

@@ -12,7 +12,7 @@
   --color-surface: #011a25;
   --color-border-light: #e5e5e5;
   --color-border: #c4c7c8;
-  --color-text-primary: #4a5c63;
+  --color-text-primary: #3f4140;
   --color-text-secondary: #c4c7c8;
 
   /* Status Colors */

@@ -192,15 +192,15 @@ a[rel="prev"]:hover {
 .sl-markdown-content h4,
 .sl-markdown-content h5,
 .sl-markdown-content h6 {
-  color: var(--sl-color-accent-high);
+  color: var(--sl-color-white);
 }
 
 .sl-markdown-content a:hover:not(:where(.not-content *)) > span {
   color: var(--sl-color-accent);
 }
 
-.sl-markdown-content > p a:not(:has(code)),
-.sl-markdown-content :is(ul, ol) > li a:not(:has(code)),
+.sl-markdown-content > p a:not(:has(code), [role="tab"]),
+.sl-markdown-content :is(ul, ol) > li a:not(:has(code), [role="tab"]),
 .starlight-aside__content a {
   text-decoration: underline;
   text-underline-offset: 4px;
@@ -372,3 +372,11 @@ ul.top-level details details > summary .group-label span {
 .sidebar-content .social-icons a {
   transform: none !important;
 }
+
+/* Align "tablist" component to the left 
+ * and remove the the default full-witdh underline
+ */
+starlight-tabs ul[role="tablist"] {
+  padding-left: 0;
+  border-bottom: none;
+}