claude
4fc86ebd3d
Build and Deploy Verso / deploy (push) Successful in 9m48s
- Add a Typst language (stream highlighting + completions) for .typ, and Quarto completions (code chunks, callouts, cross-refs) for .qmd/markdown. - Project dashboard: new Format column (Quarto/Typst/LaTeX) from the cheap project compiler field, surfaced through the projects list API. - Compiler dropdown: grey out engines that don't match the root file's extension (.qmd->Quarto, .typ->Typst, .tex->LaTeX engines). - Replace the Overleaf fill loader with an animated Verso logo: the four quadrant circles drift on their own orbits while colour warms up with load progress; reused on the token-access screen too. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
import { CSSProperties } from 'react'
|
|
|
|
type LoadingBrandedTypes = {
|
|
loadProgress: number // Percentage
|
|
label?: string
|
|
hasError?: boolean
|
|
}
|
|
|
|
export default function LoadingBranded({
|
|
loadProgress,
|
|
label,
|
|
hasError = false,
|
|
}: LoadingBrandedTypes) {
|
|
// Drive the colour reveal from the load progress: the four circles start
|
|
// de-saturated and "warm up" to full colour as the project loads, while
|
|
// each circle keeps drifting on its own little orbit (see the CSS).
|
|
const saturation = Math.max(0, Math.min(1, loadProgress / 100))
|
|
|
|
return (
|
|
<>
|
|
<div className="loading-screen-brand-container">
|
|
<svg
|
|
className="verso-loader"
|
|
viewBox="0 0 200 200"
|
|
role="img"
|
|
aria-label="Verso"
|
|
style={
|
|
{
|
|
'--verso-loader-saturation': saturation,
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
<defs>
|
|
<clipPath id="verso-loader-clip">
|
|
<rect x="0" y="0" width="200" height="200" rx="44" />
|
|
</clipPath>
|
|
</defs>
|
|
<g clipPath="url(#verso-loader-clip)">
|
|
<rect x="0" y="0" width="200" height="200" fill="#0a0a0a" />
|
|
<g className="verso-loader-circles">
|
|
<circle
|
|
className="verso-loader-c1"
|
|
cx="72"
|
|
cy="72"
|
|
r="68"
|
|
fill="#447099"
|
|
fillOpacity="0.82"
|
|
/>
|
|
<circle
|
|
className="verso-loader-c2"
|
|
cx="128"
|
|
cy="72"
|
|
r="68"
|
|
fill="#72994E"
|
|
fillOpacity="0.82"
|
|
/>
|
|
<circle
|
|
className="verso-loader-c3"
|
|
cx="72"
|
|
cy="128"
|
|
r="68"
|
|
fill="#EE6331"
|
|
fillOpacity="0.75"
|
|
/>
|
|
<circle
|
|
className="verso-loader-c4"
|
|
cx="128"
|
|
cy="128"
|
|
r="68"
|
|
fill="#4a6fa5"
|
|
fillOpacity="0.80"
|
|
/>
|
|
</g>
|
|
<text
|
|
className="verso-loader-v"
|
|
x="100"
|
|
y="164"
|
|
fontFamily="'EB Garamond', Georgia, serif"
|
|
fontSize="170"
|
|
fontWeight="400"
|
|
textAnchor="middle"
|
|
fill="white"
|
|
fillOpacity="0.97"
|
|
>
|
|
V
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
{!hasError && (
|
|
<div className="h3 loading-screen-label" aria-live="polite">
|
|
{label}
|
|
<span className="loading-screen-ellip" aria-hidden="true">
|
|
.
|
|
</span>
|
|
<span className="loading-screen-ellip" aria-hidden="true">
|
|
.
|
|
</span>
|
|
<span className="loading-screen-ellip" aria-hidden="true">
|
|
.
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|