diff --git a/cspell.json b/cspell.json index 247d844..61daf8c 100644 --- a/cspell.json +++ b/cspell.json @@ -159,6 +159,7 @@ "testnet", "testnets", "thirdweb", + "topbar", "touchpoints", "tunnelmole", "tute", diff --git a/docs.json b/docs.json index 8e3bfc9..bc71589 100644 --- a/docs.json +++ b/docs.json @@ -379,27 +379,50 @@ ] } ] + }, + { + "tab": "Resources", + "menu": [ + { + "item": "Developer Portal", + "href": "https://developer.worldcoin.org" + }, + { + "item": "World Tech Blog", + "href": "https://world.org/blog?blog_type=world-tech" + }, + { + "item": "Open Source", + "href": "https://github.com/worldcoin" + }, + { + "item": "Whitepaper", + "href": "https://whitepaper.world.org" + }, + { + "item": "Ecosystem", + "href": "https://world.org/ecosystem" + } + ] + }, + { + "tab": "Support", + "menu": [ + { + "item": "Telegram Support Channel", + "href": "https://t.me/worlddevelopersupport" + }, + { + "item": "Email Support", + "href": "mailto:developers@toolsforhumanity.com" + }, + { + "item": "Mini Apps FAQ", + "href": "/mini-apps/more/faq" + } + ] } - ], - "global": { - "anchors": [ - { - "anchor": "Telegram Support Channel", - "href": "https://t.me/worlddevelopersupport", - "icon": "telegram" - }, - { - "anchor": "Email Support", - "href": "mailto:developers@toolsforhumanity.com", - "icon": "envelope" - }, - { - "anchor": "GitHub", - "href": "https://github.com/worldcoin", - "icon": "github" - } - ] - } + ] }, "logo": { "light": "/logo/world-developers.svg", @@ -423,7 +446,37 @@ "x": "https://x.com/worldnetwork", "github": "https://github.com/worldcoin", "discord": "https://world.org/discord" - } + }, + "links": [ + { + "items": [ + { + "label": "About World", + "href": "https://world.org" + }, + { + "label": "Developers", + "href": "https://world.org/developers" + }, + { + "label": "Whitepaper", + "href": "https://whitepaper.world.org" + }, + { + "label": "Open Source", + "href": "https://github.com/worldcoin" + }, + { + "label": "Ecosystem", + "href": "https://world.org/ecosystem" + }, + { + "label": "Careers", + "href": "https://world.org/careers" + } + ] + } + ] }, "contextual": { "options": [ diff --git a/index.mdx b/index.mdx index 3d7b152..0bb3dd2 100644 --- a/index.mdx +++ b/index.mdx @@ -9,6 +9,7 @@ description: "Build Mini Apps, integrate World ID, and deploy on World Chain wit --- import { DeveloperStories } from "/snippets/developer-stories.jsx"; +import { NewsletterForm } from "/snippets/newsletter-form.jsx"; {/* cspell:ignore worldcoin Estevez Jangwon Toktokhan Hyrax gigagas flashblock prismic */} @@ -26,7 +27,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
-
+

World Developer Docs

Integrate World ID and deploy on World Chain with official developer documentation. @@ -37,7 +38,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
Integrate World ID
@@ -47,7 +48,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
Create a Mini App
@@ -57,7 +58,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
AgentKit
@@ -67,7 +68,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
World Chain
@@ -77,7 +78,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
-
+
-
-
World Tech Updates
+ @@ -134,35 +135,10 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- {/* Newsletter — uncomment when a subscribe endpoint exists. - Why it is disabled: world.org's form submits through a Next.js server - action (company-website src/actions/subscribe.ts) that calls Braze with - the server-side NEXT_SERVER_BRAZE_TOKEN. A static Mintlify site cannot - hold that secret, so this form needs either a public subscribe endpoint - from the web team or a Braze public-key integration before it can ship. - Endpoint proposed as https://github.com/worldcoin/company-website/pull/4481 — - once merged (plus its Cloudflare rate rule), point this form at - POST https://world.org/api/subscribe with body {email} and uncomment. - -
-
-
- Subscribe to World Developers Newsletter -
-
-
- - -
-
- By entering your email address and clicking “Subscribe,” you consent to receive newsletters, marketing communications and ecosystem updates. For details on how we process your personal data, including your rights and how to exercise them, please review our Privacy Notice. -
-
-
-
- */} + {/* Newsletter — submits to world.org's public subscribe endpoint + (worldcoin/company-website#4481). If that endpoint is not live yet, + the form shows an explicit error instead of failing silently. */} + {/* Footer links — single row per Docs 3.0: trademark left, links right */}
@@ -200,5 +176,5 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx"; - [World Chain launches full block access lists](https://world.org/blog/engineering/world-chain-full-block-access-lists) — World Chain now streams full EIP-7928 block access lists in every flashblock, enabling parallel block verification, faster validation, and a path toward gigagas-per-second throughput without increasing validator hardware requirements. - [Remainder: World's GKR prover for ML and more](https://world.org/blog/engineering/world-zkgpu-for-ml-and-more) — Remainder (Reasonable Machine Learning Doubly-Efficient Prover) is Tools for Humanity's open-sourced in-house GKR + Hyrax proof system. It enables World's users to run ML models locally over private data and prove that they executed them correctly. - [Introducing World ID 4.0 - Request for Comments](https://world.org/blog/engineering/introducing-world-id-4.0) — World ID 4.0 introduces account abstraction with multi-key support, transforming a World ID from a single secret into an abstract record in a public registry, improving resilience, portability, recovery and privacy. - - More at [World Tech](https://world.org/blog/engineering). + - More at [World Tech](https://world.org/blog?blog_type=world-tech). diff --git a/logo/world-developers-white.svg b/logo/world-developers-white.svg index 059655e..ab6231b 100644 --- a/logo/world-developers-white.svg +++ b/logo/world-developers-white.svg @@ -1,4 +1,4 @@ - + @@ -7,6 +7,7 @@ + @@ -19,4 +20,5 @@ + diff --git a/logo/world-developers.svg b/logo/world-developers.svg index e8b36be..443a9dd 100644 --- a/logo/world-developers.svg +++ b/logo/world-developers.svg @@ -1,4 +1,4 @@ - + @@ -7,6 +7,7 @@ + @@ -19,4 +20,5 @@ + diff --git a/snippets/newsletter-form.jsx b/snippets/newsletter-form.jsx new file mode 100644 index 0000000..7c8f302 --- /dev/null +++ b/snippets/newsletter-form.jsx @@ -0,0 +1,90 @@ +/** + * "Subscribe to World Developers Newsletter" block for the landing footer, + * per the Docs 3.0 design. Submits to world.org's public subscribe endpoint + * (worldcoin/company-website#4481). Single attempt with a bounded timeout and + * explicit success/error states — no silent failures, no retries (subscribing + * twice on a retry would double-fire the marketing pipeline). + * Mintlify-safe: single exported component, no top-level helpers, no refs. + */ +import { useState } from "react"; + +export const NewsletterForm = ({ endpoint = "https://world.org/api/subscribe" }) => { + const [status, setStatus] = useState("idle"); // idle | loading | ok | error + + const onSubmit = async (event) => { + event.preventDefault(); + if (status === "loading") return; + const input = event.currentTarget.querySelector("input[type=email]"); + const email = (input && input.value ? input.value : "").trim(); + if (!email || !input.checkValidity()) { + setStatus("error"); + return; + } + setStatus("loading"); + const abort = new AbortController(); + const timer = setTimeout(() => abort.abort(), 10000); + try { + const res = await fetch(endpoint, { + method: "POST", + headers: { "content-type": "application/json" }, + body: JSON.stringify({ email }), + signal: abort.signal, + }); + setStatus(res.ok ? "ok" : "error"); + } catch (_) { + setStatus("error"); + } finally { + clearTimeout(timer); + } + }; + + return ( +
+
+
+ Subscribe to World Developers Newsletter +
+
+ {status === "ok" ? ( +
+ Thanks — you’re subscribed. +
+ ) : ( +
+ + +
+ )} + {status === "error" ? ( +
+ Something went wrong — check the address and try again. +
+ ) : null} + {status !== "ok" ? ( +
+ By entering your email address and clicking “Subscribe,” you consent to receive newsletters, marketing communications and ecosystem updates. For details on how we process your personal data, including your rights and how to exercise them, please review our Privacy Notice. +
+ ) : null} +
+
+
+ ); +}; + +export default NewsletterForm; diff --git a/tailwind.css b/tailwind.css index d3bd1ae..60af92e 100644 --- a/tailwind.css +++ b/tailwind.css @@ -21,11 +21,18 @@ } @layer components { - /* Tint the custom Proof of Human badge when its sidebar page is selected. */ - #sidebar-content - li[data-active] - img[src$="/images/docs/human-badge-gray.svg"] { - content: url("/images/docs/human-badge-blue.svg"); + /* Sidebar — selected item is a neutral pill per Docs 3.0 (bg gray/a9, ink text), + replacing the theme-default blue tint. The Proof of Human badge keeps its + gray artwork in both states for the same reason. */ + #sidebar-content li[data-active="true"] > a { + background-color: #F3F2F0 !important; + color: #181818 !important; + border-radius: 6px !important; + text-shadow: none !important; + } + .dark #sidebar-content li[data-active="true"] > a { + background-color: rgba(255, 255, 255, 0.08) !important; + color: #F3F2F0 !important; } /* Page content text links only (anchors without custom classes) */ @@ -150,15 +157,23 @@ } /* Landing page — developer stories carousel. - Cards are 4:3 (756x567 in the mock); two fill the content column with the - third peeking past the edge, matching the design's resting composition. - Kept as a CSS class on purpose: an arbitrary utility like - w-[min(760px,85%)] is silently dropped by Mintlify's Tailwind compiler - (values with a comma + %), which renders the cards at zero size. */ + Cards are 4:3 (756x567 in the mock); two fill the content column exactly + (24px gap) and the track bleeds into the right page gutter so the third + card peeks past the content edge, matching the design's resting + composition. Card width is derived from the bled track width (content + width + 96px gutter). Kept as a CSS class on purpose: an arbitrary + utility like w-[min(760px,85%)] is silently dropped by Mintlify's + Tailwind compiler (values with a comma + %), which renders the cards at + zero size. */ .landing-story-card { - width: calc(50% - 44px); + width: calc((100% - 96px) / 2 - 12px); aspect-ratio: 4 / 3; } + @media (min-width: 901px) { + .landing-stories-track { + margin-right: -96px; + } + } @media (max-width: 900px) { .landing-story-card { width: 85%; @@ -188,12 +203,20 @@ background-color: rgb(32, 33, 36); } - /* Landing page — World Tech updates list (no divider rules, per design) */ + /* Landing page — World Tech updates list; rows separated by hairline rules + (above each row and below the last) per the Docs 3.0 QA design. */ .landing-update { display: block; - padding: 32px 0; + padding: 40px 0; + border-top: 1px solid #E1DFDA; text-decoration: none; } + .landing-update:last-child { + border-bottom: 1px solid #E1DFDA; + } + .dark .landing-update { + border-color: rgba(255, 255, 255, 0.12); + } .landing-update-title { font-size: 24px; line-height: 1.3; @@ -210,7 +233,7 @@ } .landing-update-desc { margin: 12px 0 0; - max-width: 1100px; + max-width: 886px; font-size: 16px; line-height: 1.5; font-weight: 300; @@ -286,6 +309,13 @@ .dark .landing-email-input::placeholder { color: #75726F; } + @media (max-width: 900px) { + /* Newsletter stacks on small screens (the grid is inline-styled). */ + .landing-newsletter > div { + grid-template-columns: 1fr !important; + gap: 32px !important; + } + } .landing-privacy-link { color: #2D2C2C !important; } @@ -354,8 +384,8 @@ color: #F3F2F0; } .landing-hero-sub { - margin-top: 20px; - max-width: 640px; + margin-top: 24px; + max-width: 487px; font-size: 24px; line-height: 1.35; letter-spacing: -0.24px; @@ -380,7 +410,7 @@ display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - row-gap: 104px; + row-gap: 113px; } @media (max-width: 900px) { .landing-card-grid { @@ -413,4 +443,309 @@ } } + /* ------------------------------------------------------------------ */ + /* Header (Docs 3.0 QA) — align the navbar container with the page */ + /* content (1728px max, 96px gutters at desktop) and restyle tabs to */ + /* the design language: ink pill for the active tab, ink labels, no */ + /* underline indicator. */ + /* ------------------------------------------------------------------ */ + @media (min-width: 1024px) { + /* Both the navbar container and the docs-page body use Mintlify's + max-w-8xl (the body via a peer-variant class), so match them to the + 1728px design frame. */ + [class*="max-w-8xl"] { + max-width: 1728px !important; + } + /* Navbar top row (logo/search/CTA) and tab row: 48px → 96px gutters, + aligning the logo and tabs with the hero and content below. */ + #navbar .lg\:px-12, + #navbar .px-12 { + padding-left: 96px !important; + padding-right: 96px !important; + } + /* Docs pages: pull the sidebar/content wrapper out to the same frame + so the sidebar lines up under the logo (group headers and link text + both carry a 16px inset, so 80px padding lands them at 96px). + Scoped to non-custom pages; the homepage manages its own gutters. */ + body:has(#navbar.is-not-custom) div[class*="is-not-custom]:px-4"] { + padding-left: 80px !important; + padding-right: 80px !important; + } + } + + /* Tab bar — pill tabs per Docs 3.0 header design */ + #navbar .nav-tabs { + align-items: center; + gap: 0 !important; + } + #navbar .nav-tabs-item { + height: 32px !important; + padding: 6px 10px; + border-radius: 42px; + color: #181818 !important; + transition: background-color 0.15s ease; + } + #navbar .nav-tabs-item:hover { + color: #181818 !important; + background-color: #F3F2F0; + } + #navbar .nav-tabs-item[data-active="true"] { + padding: 6px 14px; + background-color: #181818; + color: #F9F9F8 !important; + text-shadow: none; + } + #navbar .nav-tabs-item[data-active="true"]:hover { + color: #F9F9F8 !important; + background-color: #181818; + } + /* The theme's active-tab underline indicator */ + #navbar .nav-tabs-item > div.absolute { + display: none; + } + /* Hairline divider between the page tabs and the Resources/Support + menus (the menu tabs render as