Repository navigation
Radiance gradient, 404 redesign and left-nav fixes - #558
Conversation
The nested version site always runs in embedded mode, which hides the radiance blobs and uses the flat in-product banner. VersionIframe now passes _public=1 when the wrapper is the public docs site, and the nested site keeps the public hero for _iframe=1&_public=1. In-product help is unchanged. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Design confirmed the radiance gradient should show everywhere, so remove the .embedded-mode overrides that hid it and forced the flat #232F43 banner. This supersedes the _public=1 approach from 4bbf689, so that plumbing (VersionIframe flag, embedded-public-hero class) is reverted. The walkthroughs hero keeps its navy override. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The hero used hand-written CSS blobs with keyframe loops, so light and dark looked like different gradients and did not match the product home page. Use the product's Radiance 'home' pattern instead: the unmodified v2.0.0 renderer and home recipe CSS (vendored, byte-identical to the Radiance language repo), with the site theme mapped to data-radiance-appearance. The renderer is loaded lazily, only on pages that contain a surface. The walkthroughs hero keeps its existing CSS blobs. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
| @@ -0,0 +1,2514 @@ | |||
| (() => { | |||
There was a problem hiding this comment.
what is this file used for?
There was a problem hiding this comment.
This was added to apply the animated gradient used on the TS product home page to the dev docs home and the 404 pages, to keep the look and feel consistent with the product UI. It’s copied from the radiance-language repo that Simran shared.
There was a problem hiding this comment.
ok, Can you please share the before and after i am confuse this much code is required or not?
There was a problem hiding this comment.
@ShashiSubramanya Can you please check this above comment rest all code
| @@ -0,0 +1,64 @@ | |||
| import { useEffect } from 'react'; | |||
There was a problem hiding this comment.
what is this file used for?
There was a problem hiding this comment.
This file was also included for the animated gradient on the dev docs home page. This is a short helper to load the animated gradient on the home page and switch it between light and dark mode.
There was a problem hiding this comment.
ok, Can you please share the before and after i am confuse this much code is required or not?
There was a problem hiding this comment.
@ShashiSubramanya Can you please check this above comment rest all code
shivam-kumar-ts
left a comment
There was a problem hiding this comment.
LGTM
the files/code for the homepage gradient and the 404 pages were copied from the repo that Simran shared (https://github.com/vinayakr-cpu/radiance-language).
static/radiance/radiance-renderer.js: the Radiance gradient painter
src/assets/styles/radiance-home.css: the CSS recipe for the home pattern
The 404 now follows the site theme (isDarkMode param, stored choice, OS preference on the public site) in both layouts, with a dark illustration and the docs' dark colours. The gradient moves from the generic top-wash template to the Radiance 'home' product pattern with its recipe, the same as the docs home hero. The template moved much more in dark than light and read grainier on the near-empty page. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The quickstarts page was the last place using the hand-made CSS blob gradient. It now uses the same Radiance home pattern and recipe as the docs home hero and the 404, which also removes the blob, keyframe and dark-theme rules. The flat navy in-product hero is dropped: it coloured the whole page, so the cards' dark text was unreadable on it. In-product now shows the gradient, as the home hero does. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The nested version site always runs in embedded mode, which hides the radiance bg and uses the flat in-product banner. This PR includes fixes for this. Other changes include: