diff --git a/docs/ensnode.io/config/integrations/starlight/sidebar-topics/integrate.ts b/docs/ensnode.io/config/integrations/starlight/sidebar-topics/integrate.ts index cdfb0044e2..857247c07b 100644 --- a/docs/ensnode.io/config/integrations/starlight/sidebar-topics/integrate.ts +++ b/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", }, ], diff --git a/docs/ensnode.io/public/OG_image.png b/docs/ensnode.io/public/OG_image.png index b34ad8b298..d526c2335f 100644 Binary files a/docs/ensnode.io/public/OG_image.png and b/docs/ensnode.io/public/OG_image.png differ diff --git a/docs/ensnode.io/public/Twitter_OG_image.png b/docs/ensnode.io/public/Twitter_OG_image.png index 0007358aef..d8f4f38001 100644 Binary files a/docs/ensnode.io/public/Twitter_OG_image.png and b/docs/ensnode.io/public/Twitter_OG_image.png differ diff --git a/docs/ensnode.io/src/assets/hero_bg_image.png b/docs/ensnode.io/src/assets/hero_bg_image.png new file mode 100644 index 0000000000..2cb4524f27 Binary files /dev/null and b/docs/ensnode.io/src/assets/hero_bg_image.png differ diff --git a/docs/ensnode.io/src/assets/hero_image.png b/docs/ensnode.io/src/assets/hero_image.png new file mode 100644 index 0000000000..7cfdab6e59 Binary files /dev/null and b/docs/ensnode.io/src/assets/hero_image.png differ diff --git a/docs/ensnode.io/src/assets/hero_skies_image.png b/docs/ensnode.io/src/assets/hero_skies_image.png deleted file mode 100644 index 7d3fd6027c..0000000000 Binary files a/docs/ensnode.io/src/assets/hero_skies_image.png and /dev/null differ diff --git a/docs/ensnode.io/src/components/molecules/HeaderButtons.tsx b/docs/ensnode.io/src/components/molecules/HeaderButtons.tsx index af186ea56d..85dd9b3aed 100644 --- a/docs/ensnode.io/src/components/molecules/HeaderButtons.tsx +++ b/docs/ensnode.io/src/components/molecules/HeaderButtons.tsx @@ -24,7 +24,10 @@ export default function HeaderButtons({ >

@@ -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", + ])} > @@ -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", + ])} > @@ -66,7 +78,7 @@ export default function HeaderButtons({ "items-center justify-center gap-1", ])} > - + ); diff --git a/docs/ensnode.io/src/components/molecules/HeaderMobileNavigation.tsx b/docs/ensnode.io/src/components/molecules/HeaderMobileNavigation.tsx index 4dece9a81f..ebdaece716 100644 --- a/docs/ensnode.io/src/components/molecules/HeaderMobileNavigation.tsx +++ b/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() { {({ open }) => ( <> - + Open menu @@ -62,7 +73,7 @@ export default function HeaderMobileNavigation() { > ENSNode - + {/*NOTE: this results in a browser error (not-breaking) but is directly copied from namekit.io solution*/} Close menu

- Back to Examples -

+ + +

Back to Examples

+ ) } diff --git a/docs/ensnode.io/src/components/overrides/Hero.astro b/docs/ensnode.io/src/components/overrides/Hero.astro index da265f8225..95d6623b46 100644 --- a/docs/ensnode.io/src/components/overrides/Hero.astro +++ b/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"; --- -
- background skies -
+
+ +
+
-

+

The full-stack
development platform
for ENSv2

- + Achieve full ENSv2 readiness even before ENSv2 launches.
-
Quickstart guide -
+ ENSv2 badge +
+
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/index.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/index.mdx index f683f81417..fe587e22d0 100644 --- a/docs/ensnode.io/src/content/docs/docs/integrate/index.mdx +++ b/docs/ensnode.io/src/content/docs/docs/integrate/index.mdx @@ -132,7 +132,7 @@ export function RenderDomainAndSubdomains({ name }: { name: InterpretedName }) { /> @@ -176,7 +176,7 @@ const result = await client.omnigraph.query({ query: HelloWorldQuery }); diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx index a1d681abe1..3ff146694a 100644 --- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx +++ b/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 diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/index.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/index.mdx index 251b972037..60140297c9 100644 --- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/index.mdx +++ b/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. diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx index 44612e5b00..3f9940c0f3 100644 --- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx +++ b/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 diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/index.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/index.mdx index f109a44538..090c2a749d 100644 --- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/index.mdx +++ b/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. diff --git a/docs/ensnode.io/src/layouts/Layout.astro b/docs/ensnode.io/src/layouts/Layout.astro index 7322d923e3..3b1d0adecb 100644 --- a/docs/ensnode.io/src/layouts/Layout.astro +++ b/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"; diff --git a/docs/ensnode.io/src/pages/index.astro b/docs/ensnode.io/src/pages/index.astro index 3df0e00be2..9ddbbca20b 100644 --- a/docs/ensnode.io/src/pages/index.astro +++ b/docs/ensnode.io/src/pages/index.astro @@ -10,7 +10,7 @@ import JoinTelegram from "../components/molecules/JoinTelegram";
-
+
diff --git a/docs/ensnode.io/src/scripts/ScrollHeader.js b/docs/ensnode.io/src/scripts/ScrollHeader.js index f9929a84fb..949e07c50f 100644 --- a/docs/ensnode.io/src/scripts/ScrollHeader.js +++ b/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" }, ); diff --git a/docs/ensnode.io/src/styles/onScrollHeader.css b/docs/ensnode.io/src/styles/onScrollHeader.css index 66f819bce6..f961b626ca 100644 --- a/docs/ensnode.io/src/styles/onScrollHeader.css +++ b/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); + } +} diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css index 7c7d35ada2..584e8e0c6b 100644 --- a/docs/ensnode.io/src/styles/starlight.css +++ b/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 */