feat(docs): ensnode.io -- refinements to LP & docs

docs/ensnode.io/config/integrations/starlight/sidebar-topics/integrate.ts

@@ -108,7 +108,7 @@ export const integrateSidebarTopic = {
               link: "/docs/integrate/integration-options/enskit",
             },
             {
-              label: "⚡ Interactive example",
+              label: "Interactive example ⚡",
               link: "/docs/integrate/integration-options/enskit/example",
             },
           ],
@@ -122,7 +122,7 @@ export const integrateSidebarTopic = {
               link: "/docs/integrate/integration-options/enssdk",
             },
             {
-              label: "⚡ Interactive example",
+              label: "Interactive example ⚡",
               link: "/docs/integrate/integration-options/enssdk/example",
             },
           ],

docs/ensnode.io/src/components/molecules/HeaderButtons.tsx

@@ -24,7 +24,10 @@ export default function HeaderButtons({
       >
         <a
           href="/docs/integrate"
-          className="text-black border-transparent hover:bg-black/5 transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4"
+          className={cc([
+            "text-black border-transparent transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4",
+            isScrollable ? "onScrollContainer" : "hover:bg-black/5",
+          ])}
         >
           <p
             className={cc(["text-sm font-medium leading-6", isScrollable ? "onScrollElement" : ""])}
@@ -37,7 +40,10 @@ export default function HeaderButtons({
           href="https://x.com/NamehashLabs"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-black border-transparent hover:bg-black/5 transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4"
+          className={cc([
+            "text-black border-transparent transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4",
+            isScrollable ? "onScrollContainer" : "hover:bg-black/5",
+          ])}
         >
           <TwitterIcon className={cc({ onScrollElement: isScrollable })} />
         </a>
@@ -46,7 +52,10 @@ export default function HeaderButtons({
           href="https://github.com/namehash/ensnode"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-black border-transparent hover:bg-black/5 transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4"
+          className={cc([
+            "text-black border-transparent transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4",
+            isScrollable ? "onScrollContainer" : "hover:bg-black/5",
+          ])}
         >
           <GithubIcon className={cc({ onScrollElement: isScrollable })} />
         </a>
@@ -55,7 +64,10 @@ export default function HeaderButtons({
           href="https://t.me/ensnode"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-black border-transparent hover:bg-black/5 transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4"
+          className={cc([
+            "text-black border-transparent transition text-base rounded-lg border font-medium inline-flex gap-2 items-center whitespace-nowrap no-underline py-2 px-4",
+            isScrollable ? "onScrollContainer" : "hover:bg-black/5",
+          ])}
         >
           <TelegramIcon className={cc({ onScrollElement: isScrollable })} />
         </a>
@@ -66,7 +78,7 @@ export default function HeaderButtons({
           "items-center justify-center gap-1",
         ])}
       >
-        <HeaderMobileNavigation />
+        <HeaderMobileNavigation isScrollable={isScrollable} />
       </div>
     </>
   );

docs/ensnode.io/src/components/molecules/HeaderMobileNavigation.tsx

@@ -10,7 +10,13 @@ import { Fragment } from "react";
 
 import ENSNode2D from "@assets/dark-logo.svg";
 
-export default function HeaderMobileNavigation() {
+export interface HeaderMobileNavigationProps {
+  isScrollable?: boolean;
+}
+
+export default function HeaderMobileNavigation({
+  isScrollable = false,
+}: HeaderMobileNavigationProps) {
   const MobileNavigationLinks = [
     {
       text: "Docs",
@@ -39,7 +45,12 @@ export default function HeaderMobileNavigation() {
       <Popover className="relative">
         {({ open }) => (
           <>
-            <Popover.Button className="sm:hidden relative z-30 p-1 mt-1 focus:outline-none focus-visible:outline-2 focus-visible:outline-black">
+            <Popover.Button
+              className={cc([
+                "sm:hidden relative z-30 cursor-pointer rounded-lg transition-all duration-200 px-[11px] py-[13px] focus:outline-none focus-visible:outline-2",
+                isScrollable ? "onScrollContainer" : "hover:bg-black/5 focus-visible:outline-black",
+              ])}
+            >
               <span className="sr-only">Open menu</span>
               <MenuIcon className="w-5 stroke-current" aria-hidden="true" />
             </Popover.Button>
@@ -62,7 +73,7 @@ export default function HeaderMobileNavigation() {
                     >
                       <img src={ENSNode2D.src} className="h-8" alt="ENSNode" />
                     </a>
-                    <Popover.Button className="transition rounded-lg border-0 inline-flex items-center whitespace-nowrap underline-none bg-black hover:bg-black/5">
+                    <Popover.Button className="rounded-lg border-0 inline-flex items-center whitespace-nowrap underline-none hover:bg-[#272727] cursor-pointer transition-all duration-200 p-2">
                       {/*NOTE: this results in a browser error (not-breaking) but is directly copied from namekit.io solution*/}
                       <span className="sr-only">Close menu</span>
                       <XMarkIcon className="block h-6 w-6 text-white" aria-hidden="true" />

docs/ensnode.io/src/components/organisms/OmnigraphAPIExample.astro

@@ -1,4 +1,6 @@
 ---
+import { Icon } from "@astrojs/starlight/components";
+
 import OmnigraphAPIExamplePanels from "../molecules/OmnigraphAPIExamplePanels.astro";
 
 import { ENSADMIN_URL } from "astro:env/client";
@@ -44,8 +46,9 @@ const responseJson = example.response ? stringifyJsonForDocs(example.response) :
 
 {
   !hideBackToExamples && (
-    <p>
-      <a href="/docs/integrate/omnigraph/examples">Back to Examples</a>
-    </p>
+    <a class="group w-fit flex flex-row justify-start items-center gap-2" href="/docs/integrate/omnigraph/examples">
+      <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" />
+      <p class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 transition-all duration-200">Back to Examples </p>
+    </a>
   )
 }

docs/ensnode.io/src/components/overrides/Hero.astro

@@ -1,28 +1,32 @@
 ---
 import { Image } from "astro:assets";
 import { Balancer } from "react-wrap-balancer";
-import skies_image from "@assets/hero_skies_image.png";
+import backgroundImage from "@assets/hero_bg_image.png";
+import heroImage from "@assets/hero_image.png";
+import { legacyButtonVariants } from "@namehash/namehash-ui/legacy";
 ---
-<section class="bg-gradient-to-b from-[#4182B8] to-[#FEE7B7] w-full h-screen flex flex-col flex-nowrap justify-center items-center bg-cover bg-center bg-no-repeat">
-    <Image src={skies_image} alt="background skies" class="absolute w-full h-screen z-0 object-center object-cover select-none" quality={100}/>
-    <div class="relative z-10 not-content antialiased flex flex-col flex-nowrap gap-8 justify-center items-center text-center px-5 sm:px-0">
+<section class="w-full h-screen flex flex-col flex-nowrap justify-center items-center bg-black relative">
+    <Image src={backgroundImage} alt="" aria-hidden="true" class="absolute w-full h-screen z-0 object-center object-cover select-none" quality={100}/>
+    <div class="w-full max-w-[1280px] flex flex-col lg:flex-row justify-center sm:justify-between items-center gap-10 px-5 sm:px-8 max-lg:pt-20 max-sm:pb-8">
+            <div class="relative z-10 not-content antialiased flex flex-col flex-nowrap gap-8 justify-center items-center lg:items-start">
         <div class="flex flex-col flex-nowrap justify-center items-start gap-4">
-            <h1 class="max-w-[650px] w-full font-bold leading-10 sm:leading-[68px] text-4xl sm:text-6xl text-white">
+            <h1 class="max-w-[650px] w-full font-bold leading-10 sm:leading-[68px] text-4xl sm:text-[52px] text-white max-lg:text-center">
                 The full-stack<br/>
                 development platform<br/>
                 for ENSv2
             </h1>
-            <Balancer as="p" className="max-w-[650px] w-full text-base text-white leading-6 font-medium">
+            <Balancer as="p" className="max-w-[650px] w-full text-base text-white leading-6 font-medium max-lg:text-center">
                 Achieve full ENSv2 readiness even before ENSv2 launches.
             </Balancer>
         </div>
-        <div class="w-full flex flex-col sm:flex-row flex-nowrap justify-center items-center gap-4 sm:gap-8">
             <a
                     href="/docs/integrate"
-                    class="h-[42px] box-border cursor-pointer transition-all duration-200 bg-black hover:bg-[#272727] button-as-child text-white rounded-lg font-medium inline-flex gap-2 items-center whitespace-nowrap underline-none py-[9px] px-[17px] text-base leading-6"
+                    class={legacyButtonVariants({ variant: "secondary", size: "medium", className: "hover:bg-gray-100" })}
             >
                     Quickstart guide
             </a>
-        </div>
+            <Image src={heroImage} alt="ENSv2 badge" class="sm:hidden w-full max-w-[300px] pt-2 h-auto object-contain" quality={100}/>
+    </div>
+    <Image src={heroImage} alt="ENSv2 badge" class="hidden sm:block w-full max-w-[400px] lg:max-w-[505px] h-auto object-contain relative z-10" quality={100}/>
     </div>
 </section>

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

@@ -132,7 +132,7 @@ export function RenderDomainAndSubdomains({ name }: { name: InterpretedName }) {
 />
 
 <LinkCard
-  title="⚡ Interactive enskit example"
+  title="Interactive enskit example ⚡"
   description="Edit and run the enskit-react-example app in your browser with a live preview."
   href="/docs/integrate/integration-options/enskit/example"
 />
@@ -176,7 +176,7 @@ const result = await client.omnigraph.query({ query: HelloWorldQuery });
 
 
 <LinkCard
-  title="⚡ Interactive enssdk example"
+  title="Interactive enssdk example ⚡"
   description="Edit and run the enssdk-example script in your browser."
   href="/docs/integrate/integration-options/enssdk/example"
 />

docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx

@@ -1,5 +1,5 @@
 ---
-title: ⚡ Interactive enskit example
+title: Interactive enskit example ⚡
 description: Edit and run the enskit-react-example app against a live ENSNode endpoint in your browser.
 tableOfContents: false
 sidebarDocked: true

docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/index.mdx

@@ -395,7 +395,7 @@ Open the printed URL and you should see the `eth` Domain, its owner, and the fir
 - Need data outside React? Use [`enssdk`](/docs/integrate/integration-options/enssdk) directly with the same `graphql(...)` helper.
 
 <LinkCard
-  title="⚡ Interactive Example"
+  title="Interactive Example ⚡"
   description="Edit and run the enskit-react-example app in your browser with a live preview."
   href="/docs/integrate/integration-options/enskit/example"
 />

docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx

@@ -1,5 +1,5 @@
 ---
-title: ⚡ Interactive enssdk example
+title: Interactive enssdk example ⚡
 description: Edit and run the enssdk-example script against a live ENSNode endpoint in your browser.
 tableOfContents: false
 sidebarDocked: true

docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/index.mdx

@@ -301,7 +301,7 @@ You should see the `eth` Domain, followed by its first 20 subdomains and the tot
 - Building a React app? Use [`enskit`](/docs/integrate/integration-options/enskit) — same `graphql(...)` helper, with `useOmnigraphQuery` and a graphcache.
 
 <LinkCard
-  title="⚡ Interactive Example"
+  title="Interactive Example ⚡"
   description="Edit and run the enssdk-example script in your browser."
   href="/docs/integrate/integration-options/enssdk/example"
 />

docs/ensnode.io/src/layouts/Layout.astro

@@ -4,7 +4,7 @@ import { SEO } from "astro-seo";
 
 import "../styles/tailwind.css";
 import "../styles/globals.css";
-import heroImage from "../assets/hero_skies_image.png";
+import heroImage from "../assets/hero_bg_image.png";
 
 import { Footer } from "@namehash/namehash-ui";
 

docs/ensnode.io/src/pages/index.astro

@@ -10,7 +10,7 @@ import JoinTelegram from "../components/molecules/JoinTelegram";
 <Layout data-page="home">
     <Header />
     <Hero ensadminUrl={ENSADMIN_URL} />
-    <section class="relative bottom-20 w-full h-fit box-border flex flex-col flex-nowrap justify-center items-center gap-10 sm:gap-20 px-5 sm:px-28 -my-10">
+    <section class="w-full h-fit box-border flex flex-col flex-nowrap justify-center items-center gap-10 sm:gap-20 p-5 sm:px-28 sm:py-[60px]">
         <JoinTelegram />    
     </section>
 </Layout>

docs/ensnode.io/src/scripts/ScrollHeader.js

@@ -4,6 +4,7 @@ export default function ScrollHeader() {
     const defaultImage = document.getElementsByClassName("defaultImage")[0];
     const onScrollImage = document.getElementsByClassName("onScrollImage")[0];
     const headerButtons = document.getElementsByClassName("onScrollElement");
+    const headerMobileNavigation = document.getElementsByClassName("onScrollContainer");
 
     const scrollWatcher = document.createElement("div");
 
@@ -19,6 +20,10 @@ export default function ScrollHeader() {
         for (const headerButton of headerButtons) {
           headerButton.classList.toggle("scrolled", !entries[0].isIntersecting);
         }
+
+        for (const mobileNav of headerMobileNavigation) {
+          mobileNav.classList.toggle("scrolled", !entries[0].isIntersecting);
+        }
       },
       { rootMargin: "100px 0px 0px 0px" },
     );

docs/ensnode.io/src/styles/onScrollHeader.css

@@ -5,3 +5,23 @@
 .onScrollElement.scrolled {
   color: black;
 }
+
+.onScrollContainer {
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  &:focus-visible {
+    outline-color: var(--color-white);
+  }
+}
+
+.onScrollContainer.scrolled {
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &:focus-visible {
+    outline-color: var(--color-black);
+  }
+}

docs/ensnode.io/src/styles/starlight.css

@@ -332,11 +332,13 @@ a.starlight-sidebar-topics-current .starlight-sidebar-topics-icon {
     box-shadow 0.2s ease-in-out;
 }
 
-/* Make sure that all non-top-level sidebar items are not enlarged */
+/* Make sure that all non-top-level sidebar items are not enlarged and non-bold */
 ul.top-level details details > summary .group-label span {
   @media (min-width: 50rem) {
     font-size: var(--sl-text-sm);
   }
+
+  font-weight: normal;
 }
 
 /* Make sure that social icons in the sidebar do not move on hover */