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..a34a537 100644 --- a/docs.json +++ b/docs.json @@ -379,27 +379,46 @@ ] } ] + }, + { + "tab": "Resources", + "menu": [ + { + "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 +442,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..7d2a0f0 100644 --- a/index.mdx +++ b/index.mdx @@ -26,7 +26,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 +37,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
Integrate World ID
@@ -47,7 +47,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
Create a Mini App
@@ -57,7 +57,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
AgentKit
@@ -67,7 +67,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
World Chain
@@ -77,7 +77,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
-
+
-
-
World Tech Updates
+ @@ -200,5 +200,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/tailwind.css b/tailwind.css index d3bd1ae..4d0a41f 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; @@ -354,8 +377,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 +403,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 +436,181 @@ } } + /* ------------------------------------------------------------------ */ + /* 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: 4px; + } + #navbar .nav-tabs-item { + height: 32px !important; + padding: 6px 14px; + 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"] { + 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