Optimise docs for Unigraph examples

docs/ensnode.io/src/components/molecules/EnsDbReaderIntro.astro

@@ -0,0 +1,11 @@
+---
+import { Aside } from "@astrojs/starlight/components";
+---
+
+<Aside type="note" title="Using ENSDb Reader">
+  See how to connect to ENSDb and get access to the <code>ensDb</code> query builder and <code
+    >ensIndexerSchema</code
+  >
+  schema definition in the <a href="/docs/integrate/unigraph/examples">Connect</a> section if you haven't
+  already.
+</Aside>

docs/ensnode.io/src/components/molecules/EnsIndexerSchemaIntro.astro

@@ -0,0 +1,22 @@
+---
+import { Aside } from "@astrojs/starlight/components";
+
+const { ensIndexerSchemaName = "ensindexer_0" } = Astro.props;
+---
+
+<Aside type="note" title="What is ENSIndexer Schema?">
+  <p>
+    The <a href="/docs/services/ensdb/concepts/glossary#ensindexer-schema">ENSIndexer Schema</a> is a
+    database schema within an <a href="/docs/services/ensdb/concepts/glossary#ensdb-instance"
+      >ENSDb instance</a
+    >, used to store indexed ENS data from a given <a
+      href="/docs/services/ensdb/concepts/glossary#ensindexer-instance">ENSIndexer instance</a
+    >. We use <code>{ensIndexerSchemaName}</code> as the <a
+      href="/docs/services/ensdb/concepts/glossary#ensindexer-schema-name">ENSIndexer Schema Name</a
+    > in examples on this page, but your <a
+      href="/docs/services/ensdb/concepts/glossary#ensindexer-instance">ENSIndexer instance</a
+    > may be configured to use a different schema name. Make sure to replace <code
+      >{ensIndexerSchemaName}</code
+    > with the actual schema name used by your ENSIndexer instance when querying the ENSDb instance directly.
+  </p>
+</Aside>

docs/ensnode.io/src/components/molecules/EnsNodeSchemaIntro.astro

@@ -0,0 +1,14 @@
+---
+import { Aside } from "@astrojs/starlight/components";
+
+const ensNodeSchemaName = "ensnode";
+---
+
+<Aside type="note" title="What is ENSNode Schema?">
+  The <a href="/docs/services/ensdb/concepts/glossary#ensnode-schema">ENSNode Schema</a> is a database
+  schema within an <a href="/docs/services/ensdb/concepts/glossary#ensdb-instance">ENSDb instance</a
+  >, used to store metadata about <a
+    href="/docs/services/ensdb/concepts/glossary#ensindexer-instance">ENSIndexer instances</a
+  > that have ever connected to the ENSDb instance. There can be only one ENSNode Schema per ENSDb instance,
+  and its name is always <code>{ensNodeSchemaName}</code>.
+</Aside>

docs/ensnode.io/src/components/molecules/ResultDetails.astro

@@ -0,0 +1,8 @@
+---
+const { value, title = "Result" } = Astro.props;
+---
+
+<details>
+  <summary>{title}</summary>
+  <pre class="overflow-x-auto"><code>{JSON.stringify(value, null, 2)}</code></pre>
+</details>

docs/ensnode.io/src/content/docs/docs/integrate/integration-options/ensdb-cli.mdx

@@ -4,7 +4,7 @@ description: Coming soon - publish, download, and diff snapshots of the live ENS
 ---
 
 import { LinkCard, Aside } from "@astrojs/starlight/components";
-import EnsDbSnapshotsTeaser from "../../../../../components/molecules/EnsDbSnapshotsTeaser.astro";
+import EnsDbSnapshotsTeaser from "@components/molecules/EnsDbSnapshotsTeaser.astro";
 
 <Aside type="caution" title="Coming soon">
   **`ensdb-cli`** and **ENSDb snapshots** are planned capabilities that are coming soon.

docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdx

@@ -6,6 +6,16 @@ sidebar:
 ---
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
+import ResultDetails from "@components/molecules/ResultDetails.astro";
+import EnsIndexerSchemaIntro from "@components/molecules/EnsIndexerSchemaIntro.astro";
+import EnsDbReaderIntro from "@components/molecules/EnsDbReaderIntro.astro";
+
+export const resultJson = [
+  {
+    type: "ENSv1Domain",
+    count: 454,
+  },
+];
 
 :::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)
@@ -15,24 +25,32 @@ Count the Domains owned by an address, grouped by Domain `type` (`ENSv1Domain` v
 
 <Tabs syncKey="unigraph-client">
   <TabItem label="SQL">
-    ```sql
-    SELECT type, count(*) FROM ensindexer_0.domains
-    WHERE owner_id = '0xd8da6bf26964af9d7eed9e03e53415d37aa96045'
-    GROUP BY type;
-    ```
+    <EnsIndexerSchemaIntro ensIndexerSchemaName="ensindexer_0" />
+
+```sql
+SELECT type, count(*) FROM ensindexer_0.domains
+WHERE owner_id = '0xd8da6bf26964af9d7eed9e03e53415d37aa96045'
+GROUP BY type;
+```
+
+    <ResultDetails value={resultJson} />
+
   </TabItem>
 
   <TabItem label="ensdb-sdk (TypeScript)">
-    ```typescript
-    import { count, eq } from 'drizzle-orm';
+    <EnsDbReaderIntro />
+
+```typescript
+import { count, eq } from "drizzle-orm";
 
-    const counts = await ensDb
-      .select({ type: ensIndexerSchema.domain.type, count: count() })
-      .from(ensIndexerSchema.domain)
-      .where(eq(ensIndexerSchema.domain.ownerId, "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"))
-      .groupBy(ensIndexerSchema.domain.type);
+const counts = await ensDb
+  .select({ type: ensIndexerSchema.domain.type, count: count() })
+  .from(ensIndexerSchema.domain)
+  .where(eq(ensIndexerSchema.domain.ownerId, "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"))
+  .groupBy(ensIndexerSchema.domain.type);
+```
 
-    ```
+    <ResultDetails value={resultJson} />
 
   </TabItem>
 </Tabs>

docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdx

@@ -6,31 +6,104 @@ sidebar:
 ---
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
+import ResultDetails from "@components/molecules/ResultDetails.astro";
+import EnsIndexerSchemaIntro from "@components/molecules/EnsIndexerSchemaIntro.astro";
+import EnsDbReaderIntro from "@components/molecules/EnsDbReaderIntro.astro";
+
+export const unigraphSqlResultJson = [
+  {
+    id: "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    type: "ENSv1Domain",
+    registry_id:
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
+    subregistry_id:
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    token_id: null,
+    node: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    label_hash: "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
+    owner_id: "0x220866b1a2219f40e72f5c628b65d54268ca3a9d",
+    root_registry_owner_id: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
+    canonical: true,
+    canonical_name: "vitalik.eth",
+    canonical_label_hash_path: [
+      "0x4f5b812789fc606be1b3b16908db13fc7a9adf7ca72641f84d75b47069d3d7f0",
+      "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
+    ],
+    canonical_path: [
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    ],
+    canonical_depth: 2,
+    canonical_node: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+  },
+];
+
+export const ensDbSdkResultJson = [
+  {
+    id: "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    type: "ENSv1Domain",
+    registryId:
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
+    subregistryId:
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    tokenId: null,
+    node: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    labelHash: "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
+    ownerId: "0x220866b1a2219f40e72f5c628b65d54268ca3a9d",
+    rootRegistryOwnerId: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
+    canonical: true,
+    canonicalName: "vitalik.eth",
+    canonicalLabelHashPath: [
+      "0x4f5b812789fc606be1b3b16908db13fc7a9adf7ca72641f84d75b47069d3d7f0",
+      "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
+    ],
+    canonicalPath: [
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
+      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    ],
+    canonicalDepth: 2,
+    canonicalNode: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+  },
+];
 
 :::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.
 
+:::note[Canonical fields]
+Canonical fields are populated on every Domain reachable from the canonical root, across both ENSv1 and ENSv2 — query them uniformly without branching by `type`. In SQL, these columns are `canonical_name`, `canonical_path`, `canonical_node`, and `canonical_depth`; in `ensdb-sdk`, the corresponding fields are `canonicalName`, `canonicalPath`, `canonicalNode`, and `canonicalDepth`.
+:::
+
 <Tabs syncKey="unigraph-client">
   <TabItem label="SQL">
-    ```sql
-    SELECT * FROM ensindexer_0.domains
-    WHERE canonical_name = 'vitalik.eth';
-    ```
+    <EnsIndexerSchemaIntro ensIndexerSchemaName="ensindexer_0" />
+
+```sql
+SELECT * FROM ensindexer_0.domains
+WHERE canonical_name = 'vitalik.eth';
+```
+
+    <ResultDetails value={unigraphSqlResultJson} />
+
   </TabItem>
 
   <TabItem label="ensdb-sdk (TypeScript)">
-    ```typescript
-    import { eq } from 'drizzle-orm';
+    <EnsDbReaderIntro />
+
+```typescript
+import { eq } from "drizzle-orm";
+
+const [vitalik] = await ensDb
+  .select()
+  .from(ensIndexerSchema.domain)
+  .where(eq(ensIndexerSchema.domain.canonicalName, "vitalik.eth"));
 
-    const [vitalik] = await ensDb
-      .select()
-      .from(ensIndexerSchema.domain)
-      .where(eq(ensIndexerSchema.domain.canonicalName, "vitalik.eth"));
+console.log(vitalik);
+```
 
-    ```
+    <ResultDetails value={ensDbSdkResultJson} />
 
   </TabItem>
 </Tabs>

docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/index.mdx

@@ -38,6 +38,10 @@ FROM ensnode.metadata;
 npm install @ensnode/ensdb-sdk
 ```
 
+:::note[ENSDb Reader]
+The `EnsDbReader` object enables you to build custom queries against the Unigraph data model in ENSDb. Use the `ensDb` field to build queries with the Drizzle ORM, and the `ensIndexerSchema` field to reference database objects (i.e. the Unigraph tables) within the [ENSIndexer Schema](/docs/services/ensdb/concepts/glossary#ensindexer-schema) in a type-safe way.
+:::
+
 ```typescript
 import { EnsDbReader } from "@ensnode/ensdb-sdk";
 
@@ -49,10 +53,6 @@ const { ensDb, ensIndexerSchema } = ensDbReader;
   </TabItem>
 </Tabs>
 
-:::note[Canonical fields]
-Canonical fields (`canonical_name`, `canonical_path`, `canonical_node`, `canonical_depth`) are populated on every Domain reachable from the canonical root, across both ENSv1 and ENSv2 — query them uniformly without branching by `type`.
-:::
-
 ## Examples
 
 <LinkCard title="Domain by Name" href="/docs/integrate/unigraph/examples/domain-by-name" />