Skip to content

style: enhance UI spacing, polish code blocks, and animate splash gra… #8316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sivasanjeevs wants to merge 3 commits into
base: main
Choose a base branch
from
Open

style: enhance UI spacing, polish code blocks, and animate splash gra… #8316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8db3c5e
style: enhance UI spacing, polish code blocks, and animate splash gra…
sivasanjeevs Jul 30, 2026
e2166dc
fix: remove duplicate class attribute causing SVG parse error
sivasanjeevs Jul 30, 2026
287bf34
fix: move SVG tailwind classes to CSS to prevent XML parser errors
sivasanjeevs Jul 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 38 additions & 48 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 15 additions & 4 deletions src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
const preRef = useRef(null);
const resetStatusTimeoutRef = useRef(null);
const [copyStatus, setCopyStatus] = useState("copy");
const [isSingleLine, setIsSingleLine] = useState(false);

const codeClassName =
typeof children?.props?.className === "string"
Expand Down Expand Up @@ -114,17 +115,27 @@
[],
);

useEffect(() => {
if (preRef.current) {
const codeElement = preRef.current.querySelector("code");
if (codeElement) {
const codeText = getCodeText(codeElement);
setIsSingleLine(codeText.trim().split("\n").length <= 1);
}
}
}, [children]);

Check warning on line 126 in src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx

View workflow job for this annotation

GitHub Actions / Lint (ubuntu-latest, lts/*) 

React Hook useEffect has a missing dependency: 'getCodeText'. Either include it or remove the dependency array

return (
<div className="code-block-wrapper relative mb-6 group">
<button
onClick={handleCopy}
className={cn(
"copy-button",
"absolute top-2 right-2 z-10 px-[0.7rem] py-[0.4rem] rounded-[0.35rem] border-none cursor-pointer text-xs font-medium text-slate-200",
"opacity-0 group-hover:opacity-100",
"transition-[background-color,transform,opacity] duration-200",
"absolute right-2 z-10 px-[0.7rem] py-[0.4rem] rounded-xl border-none cursor-pointer text-xs font-medium text-slate-200",
isSingleLine ? "top-1/2 -translate-y-1/2" : "top-2",
"transition-[background-color,transform] duration-200",
"active:scale-95",
"focus-visible:outline-none focus-visible:opacity-100",
"focus-visible:outline-none",
copyStatus === "copied"
? "bg-green-600 hover:bg-green-700"
: copyStatus === "error"
Expand Down
5 changes: 1 addition & 4 deletions src/components/Markdown/Markdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,7 @@
h4,
h5,
h6 {
@apply block font-semibold text-heading-dark leading-[1.4];
font-family:
"Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
serif;
@apply block font-bold text-heading-dark leading-[1.4];
margin: 0 0 0.25em;
word-break: break-word;

Expand Down
4 changes: 2 additions & 2 deletions src/components/Navigation/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
<Logo />
</Link>
<nav
className="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px] md:items-center"
className="hidden md:inline-grid md:grid-flow-col md:gap-x-8 md:items-center"
aria-label="Main navigation"
>
{links.map(({ content, url, isActive, ariaLabel }) => (
Expand Down Expand Up @@ -205,7 +205,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
]}
/>
</nav>
<div className="inline-flex items-center gap-x-[18px] ml-[18px]">
<div className="inline-flex items-center gap-x-6 ml-8">
<HelloDarkness />
{mounted && (
<DocSearch
Expand Down
1 change: 1 addition & 0 deletions src/components/Splash/Splash.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ const Splash = () => {
<input
id="support-type"
type="checkbox"
className="mr-2"
checked={supportType === "monthly"}
onChange={(event) =>
setSupportType(
Expand Down
4 changes: 2 additions & 2 deletions src/components/SplashViz/SplashViz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import HomeSVG from "./SplashVizSVG.mjs";
export default function SplashViz() {
return (
<section className="relative h-[clamp(35rem,calc(100vh-80px),45rem)] bg-blue-800 grid grid-rows-[auto_1fr] overflow-hidden p-4 max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] dark:bg-gray-900!">
<h1 className="flex flex-wrap items-center justify-center text-white text-[33.178px] md:text-[39.813px] text-center font-[200] mt-[80px] md:mt-[90px] row-start-1 row-end-2">
<span> bundle your</span>
<h1 className="flex flex-wrap items-center justify-center text-white text-[33.178px] md:text-[39.813px] text-center font-bold mt-[80px] md:mt-[90px] row-start-1 row-end-2">
<span> Bundle your</span>
<TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
<span> assets </span>
<span> scripts </span>
Expand Down
62 changes: 22 additions & 40 deletions src/components/SplashViz/SplashVizSVG.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ export default {
</text>
</g>
<g transform="translate(342, 225)" stroke="#7E8C94" stroke-width="4">
<path d="M499.558824,86.52 C499.558824,86.52 484.852941,81.02 439.908088,109.436667 C394.963235,137.853333 380.992647,164.436667 380.992647,164.436667" stroke-dasharray="7"></path>
<path d="M499.558824,86.0616667 C499.558824,86.0616667 484.852941,91.5616667 439.908088,63.145 C394.963235,34.7283333 380.992647,8.145 380.992647,8.145" stroke-dasharray="7"></path>
<path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" stroke-dasharray="6"></path>
<path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path>
<path d="M499.558824,86.52 C499.558824,86.52 484.852941,81.02 439.908088,109.436667 C394.963235,137.853333 380.992647,164.436667 380.992647,164.436667" stroke-dasharray="7" class="flowing-dash-reverse"></path>
<path d="M499.558824,86.0616667 C499.558824,86.0616667 484.852941,91.5616667 439.908088,63.145 C394.963235,34.7283333 380.992647,8.145 380.992647,8.145" stroke-dasharray="7" class="flowing-dash-reverse"></path>
<path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" stroke-dasharray="6" class="flowing-dash"></path>
<path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) " class="flowing-dash"></path>
</g>
<text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA">
<tspan x="24.934" y="562">MODULES WITH DEPENDENCIES</tspan>
Expand All @@ -70,10 +70,8 @@ export default {
</text>
</g>
<g transform="translate(302, 414.500000) scale(1, -1) translate(-302, -414.500000) translate(182, 404)">
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
</g>
<g transform="translate(116, 391)">
Expand All @@ -95,21 +93,13 @@ export default {
</text>
</g>
<g transform="translate(182, 201)">
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
<rect fill="#BBDBEC" x="76" y="113" width="2" height="12"></rect>
<rect fill="#BBDBEC" transform="translate(75.304690, 111.704683) rotate(-45) translate(-75.304690, -111.704683) " x="74.3046896" y="108.879683" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="26" y="109" width="48" height="2"></rect>
<rect fill="#BBDBEC" transform="translate(24.704683, 108.304690) rotate(-45) translate(-24.704683, -108.304690) " x="23.7046835" y="105.47969" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="22" y="6" width="2" height="101"></rect>
<rect fill="#BBDBEC" transform="translate(21.304690, 4.704683) rotate(-45) translate(-21.304690, -4.704683) " x="20.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="2" y="2" width="18" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M1,0 L1,3 L21,3 L23,5 L23,107 L25,109 L75,109 L77,111 L77,125"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M1,0 L1,3 L21,3 L23,5 L23,107 L25,109 L75,109 L77,111 L77,125"></path>
<polyline stroke="#BBDBEC" stroke-width="2" points="80 118 77 126.8 74 118"></polyline>
</g>
<g transform="translate(182, 189)">
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
<rect fill="#BBDBEC" x="76" y="6" width="2" height="19"></rect>
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M1,0 L1,3 L75,3 L77,5 L77,25"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M1,0 L1,3 L75,3 L77,5 L77,25"></path>
<polyline stroke="#BBDBEC" stroke-width="2" points="80 18 77 26.8000002 74 18"></polyline>
</g>
<g transform="translate(116, 167)">
Expand All @@ -122,10 +112,8 @@ export default {
</text>
</g>
<g transform="translate(110, 470.500000) scale(1, -1) translate(-190, -470.500000) translate(150, 460)">
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
</g>
<g transform="translate(4, 447)">
Expand All @@ -138,10 +126,8 @@ export default {
</text>
</g>
<g transform="translate(70, 363)">
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
</g>
<g transform="translate(4, 335)">
Expand All @@ -154,22 +140,18 @@ export default {
</text>
</g>
<g transform="translate(38, 307)">
<rect fill="#BBDBEC" x="0" y="22" width="6" height="2"></rect>
<rect fill="#BBDBEC" x="2" y="6" width="2" height="16"></rect>
<rect fill="#BBDBEC" transform="translate(4.704683, 4.704683) rotate(45) translate(-4.704683, -4.704683) " x="3.70468347" y="1.87968342" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="6" y="2" width="62" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M0,23 L3,23 L3,7 L5,3 L68,3"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M0,23 L3,23 L3,7 L5,3 L68,3"></path>
<polyline stroke="#BBDBEC" stroke-width="2" transform="translate(66.400000, 3) rotate(270) translate(-66.400000, -3) " points="69.4000001 -1.4000001 66.4000001 7.4000001 63.4000001 -1.4000001"></polyline>
</g>
<g transform="translate(26, 289)">
<polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline>
<rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect>
<rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M0,1 L3,1 L3,39"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M0,1 L3,1 L3,39"></path>
</g>
<g transform="translate(110, 246.500000) scale(1, -1) translate(-190, -246.500000) translate(150, 236)">
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M1,0 L1,3 L75,3 L77,5 L77,18"></path>
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
</g>
<g transform="translate(4, 223)">
Expand All @@ -183,8 +165,8 @@ export default {
</g>
<g transform="translate(32, 177)">
<polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline>
<rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect>
<rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect>
<path fill="none" stroke="#BBDBEC" stroke-width="2" d="M0,1 L3,1 L3,39"></path>
<path fill="none" class="arrow-dot-flow" stroke-width="3" stroke-linecap="round" d="M0,1 L3,1 L3,39"></path>
</g>
<g transform="translate(4, 111)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Support/Support.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default function Support({ rank, type }) {
observer.disconnect();
}
},
{ threshold: 0.1 },
{ threshold: 0.1, rootMargin: "800px" },
);

if (containerRef.current) {
Expand Down
38 changes: 37 additions & 1 deletion src/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@
@apply lg:text-gray-100!;
}
.DocSearch-Button-Keys {
@apply hidden! lg:flex!;
@apply hidden! lg:flex! opacity-50!;
}

.code-block-wrapper pre {
@apply rounded-xl!;
}
.DocSearch-Button .DocSearch-Search-Icon {
@apply text-white! lg:text-gray-100!;
Expand Down Expand Up @@ -94,3 +98,35 @@
.splash__right p {
@apply text-left;
}

@keyframes flow {
from {
stroke-dashoffset: 100;
}
to {
stroke-dashoffset: 0;
}
}

@keyframes flow-reverse {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 100;
}
}

.flowing-dash {
animation: flow 2s linear infinite;
}

.flowing-dash-reverse {
animation: flow-reverse 2s linear infinite;
}

.arrow-dot-flow {
@apply stroke-blue-800 dark:stroke-gray-900;
stroke-dasharray: 2, 30;
animation: flow 1.5s linear infinite;
}
Loading