UI Improvements on Showcase Page

docusaurus.config.js

@@ -231,52 +231,52 @@ const redirectsList = [
 ];
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Envio",
-  tagline: "The fastest most flexible way to get on-chain data.",
-  favicon: "img/favicon.ico",
-  url: "https://docs.envio.dev",
-  baseUrl: "/",
-  organizationName: "enviodev",
-  projectName: "indexer-docs",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
-  },
-  presets: [
-    [
-      "classic",
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: false,
-        blog: {
-          showReadingTime: true,
-          blogTitle: "Blog",
-          postsPerPage: 9,
-          blogSidebarTitle: "All posts",
-          blogSidebarCount: "ALL",
-        },
-        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
-        },
-        gtag: {
-          trackingID: "G-J0WZ32ZV5B",
-          anonymizeIP: true,
-        },
-      }),
+    title: "Envio",
+    tagline: "The fastest most flexible way to get on-chain data.",
+    favicon: "img/favicon.ico",
+    url: "https://docs.envio.dev",
+    baseUrl: "/",
+    organizationName: "enviodev",
+    projectName: "indexer-docs",
+    onBrokenLinks: "throw",
+    onBrokenMarkdownLinks: "warn",
+    i18n: {
+        defaultLocale: "en",
+        locales: ["en"],
+    },
+    presets: [
+        [
+            "classic",
+            /** @type {import('@docusaurus/preset-classic').Options} */
+            ({
+                docs: false,
+                blog: {
+                    showReadingTime: true,
+                    blogTitle: "Blog",
+                    postsPerPage: 9,
+                    blogSidebarTitle: "All posts",
+                    blogSidebarCount: "ALL",
+                },
+                theme: {
+                    customCss: require.resolve("./src/css/custom.css"),
+                },
+                gtag: {
+                    trackingID: "G-J0WZ32ZV5B",
+                    anonymizeIP: true,
+                },
+            }),
+        ],
     ],
-  ],
 
-  stylesheets: [
-    {
-      href: "/custom.css",
-      type: "text/css",
-    },
-  ],
+    stylesheets: [
+        {
+            href: "/custom.css",
+            type: "text/css",
+        },
+    ],
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    themeConfig:
+        /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
 
     ({
       image: "img/preview-banner.png",

package.json

@@ -41,7 +41,8 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.3.2",
-    "@docusaurus/types": "3.0.0"
+    "@docusaurus/types": "3.0.0",
+    "docusaurus-plugin-llms": "^0.2.2"
   },
   "browserslist": {
     "production": [

src/pages/showcase/index.js

@@ -0,0 +1,168 @@
+import Link from "@docusaurus/Link";
+import Layout from "@theme/Layout";
+import Heading from "@theme/Heading";
+
+const TITLE = "Envio Showcase";
+const DESCRIPTION = "Explore live demos built with HyperIndex and HyperSync.";
+
+const tags = {
+    hyperindex: "HyperIndex",
+    hypersync: "HyperSync",
+};
+
+const sites = [
+    {
+        title: "v4.xyz",
+        description: "The hub for Uniswap V4 data, analytics, and insights.",
+        image: "/img/showcase/www.v4.xyz-scroll_original.gif",
+        source: "https://v4.xyz",
+        tags: [tags.hyperindex],
+    },
+    {
+        title: "Stable Volume",
+        description:
+            "A real-time dashboard for monitoring stablecoin transactions across 10+ chains.",
+        image: "/img/showcase/www.stablevolume.com-scroll_original.gif",
+        source: "https://www.stablevolume.com/",
+        tags: [tags.hyperindex],
+    },
+    {
+        title: "Liqo",
+        description:
+            "A multi-chain liquidation tracking platform for DeFi Lending protocols.",
+        image: "/img/showcase/www.liqo.xyz_.png",
+        source: "https://liqo.xyz",
+        tags: [tags.hyperindex],
+    },
+    {
+        title: "Oracle Wars",
+        description:
+            "Visualize and compare real-time oracle price data across multiple oracles.",
+        image: "/img/showcase/www.oraclewars.xyz_.png",
+        source: "https://oraclewars.xyz/",
+        tags: [tags.hyperindex],
+    },
+    {
+        title: "The List",
+        description:
+            "Track addresses banned from using major stablecoins across chains.",
+        image: "/img/showcase/thebannedlist.xyz_.png",
+        source: "https://thebannedlist.xyz/",
+        tags: [tags.hyperindex],
+    },
+    {
+        title: "CryptoKitties Genome Visualiser",
+        description:
+            "Trace and explore the genetic traits of CryptoKitties from parents to offspring.",
+        image: "/img/showcase/crypto-kitties-genome-visualiser.vercel.app_.png",
+        source: "https://crypto-kitties-genome-visualiser.vercel.app/",
+        tags: [tags.hyperindex],
+    },
+    {
+        title: "Chain Density",
+        description:
+            "Analyze and visualize transaction and event density for any address across 70+ chains.",
+        image: "/img/showcase/chaindensity.xyz_.png",
+        source: "https://chaindensity.xyz/",
+        tags: [tags.hyperindex],
+    },
+    {
+        title: "Snubb",
+        description:
+            "A TUI tool for scanning token approvals and tracking exposure.",
+        image: "/img/showcase/snubb.png",
+        source: "https://www.npmjs.com/package/snubb",
+        tags: [tags.hypersync],
+    },
+    {
+        title: "LogTUI",
+        description: "A TUI for monitoring blockchain events in real time.",
+        image: "/img/showcase/logtui.gif",
+        source: "https://www.npmjs.com/package/logtui",
+        tags: [tags.hypersync],
+    },
+
+    {
+        title: "Chain Pulse",
+        description:
+            "A TUI for tracking EVM chain activity and stats in real time.",
+        image: "/img/showcase/chainpulse.png",
+        source: "https://www.npmjs.com/package/chainpulse",
+        tags: [tags.hypersync],
+    },
+];
+
+function ShowcaseCard({ site }) {
+    return (
+        <div
+            className="card margin--md shadow--md"
+            style={{ height: "100%", display: "flex", flexDirection: "column" }}
+        >
+            <div className="card__image">
+                <img src={site.image} alt={site.title} />
+            </div>
+            <div className="card__body" style={{ flexGrow: 1 }}>
+                <h3>{site.title}</h3>
+                <p>{site.description}</p>
+            </div>
+            <div className="card__footer">
+                <div className="button-group button-group--block">
+                    <Link className="button button--primary" to={site.source}>
+                        Check Demo
+                    </Link>
+                </div>
+                <div className="margin-top--sm">
+                    {site.tags.map((tag, i) => (
+                        <span
+                            key={i}
+                            className="badge badge--secondary margin-right--sm"
+                        >
+                            {tag}
+                        </span>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function ShowcaseCards() {
+    return (
+        <div className="container">
+            <div className="row">
+                {sites.map((site, idx) => (
+                    <div
+                        key={idx}
+                        className="col col--6 margin-bottom--lg"
+                        style={{ display: "flex" }}
+                    >
+                        <ShowcaseCard site={site} />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function ShowcaseHeader() {
+    return (
+        <section className="margin-top--lg margin-bottom--lg text--center">
+            <Heading as="h1" style={{ fontSize: "2.5rem" }}>
+                {TITLE}
+            </Heading>
+            <p>{DESCRIPTION}</p>
+        </section>
+    );
+}
+
+export default function Showcase() {
+    return (
+        <Layout title={TITLE} description={DESCRIPTION}>
+            <main className="margin-vert--lg">
+                <ShowcaseHeader />
+
+                <ShowcaseCards />
+            </main>
+        </Layout>
+    );
+}

yarn.lock

@@ -5092,6 +5092,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7"
+  integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -6804,6 +6811,15 @@ docusaurus-json-schema-plugin@^1.12.2:
     monaco-editor-webpack-plugin "^7.0.1"
     react-monaco-editor "^0.55.0"
 
+docusaurus-plugin-llms@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/docusaurus-plugin-llms/-/docusaurus-plugin-llms-0.2.2.tgz#3461e8295d18d4057cf0fbcf5e3feac561ea6fd1"
+  integrity sha512-DZlZ6cv9p5poFE00Qg78aurBNWhLa4o0VhH4kI33DUT0y4ydlFEJJbf8Bks9BuuGPFbY/Guebn+hRc2QymMImg==
+  dependencies:
+    gray-matter "^4.0.3"
+    minimatch "^9.0.3"
+    yaml "^2.8.1"
+
 docusaurus@^1.14.7:
   version "1.14.7"
   resolved "https://registry.yarnpkg.com/docusaurus/-/docusaurus-1.14.7.tgz#f51858ab643b29ec52264d6dd85e0d629e5b3a4a"
@@ -11405,6 +11421,13 @@ minimatch@3.1.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.3:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@~3.0.2:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
@@ -16359,6 +16382,11 @@ yaml@^1.7.2:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
+  integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==
+
 yamljs@^0.2.1:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/yamljs/-/yamljs-0.2.10.tgz#481cc7c25ca73af59f591f0c96e3ce56c757a40f"