Skip to content

chore: minimal homepage for initial deploy #22

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

Merged
dogmar merged 3 commits into from
Apr 11, 2026
Merged

chore: minimal homepage for initial deploy #22

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
f32bf3d
fix: nest @supports inside selector in CodeGenerator output
dogmar Apr 11, 2026
6cf8726
website: strip interactive demos for initial deploy
dogmar Apr 11, 2026
d235de4
Better typography
dogmar Apr 11, 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
47 changes: 19 additions & 28 deletions website/src/components/CodeGenerator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,41 +70,31 @@ export default function CodeGenerator() {
const [radiusText, setRadiusText] = useState("60px");
const [mode, setMode] = useState<CornerMode>("corrected");

const { cssOutput, twOutput, previewStyle } = useMemo(() => {
const { cssOutput, twOutput, previewCss } = useMemo(() => {
const corners = [`${radius}px`, `${radius}px`, `${radius}px`, `${radius}px`];
const rv = radiusShorthand(corners);
const cssK = amount;

let cssOutput = "";
let previewStyle: React.CSSProperties = {};
// CSS output always shows corrected mode
const corrCorners = corners.map((c) => cssCorrectedRadius(c, cssK));
const corrRv = radiusShorthand(corrCorners);
const cssOutput =
`border-radius: ${rv};\n` +
`@supports (corner-shape: superellipse(2)) {\n` +
` border-radius: ${corrRv};\n` +
` corner-shape: superellipse(${cssK});\n` +
`}`;

// Preview CSS varies by mode
let previewDecls: string;
if (mode === "round") {
cssOutput = `.your-selector {\n border-radius: ${rv};\n}`;
previewStyle = { borderRadius: rv };
previewDecls = `border-radius: ${rv};`;
} else if (mode === "superellipse") {
cssOutput = `.your-selector {\n border-radius: ${rv};\n corner-shape: superellipse(${cssK});\n}`;
previewStyle = {
borderRadius: rv,
cornerShape: `superellipse(${cssK})`,
} as React.CSSProperties;
previewDecls = `border-radius: ${rv};\n corner-shape: superellipse(${cssK});`;
} else {
// corrected
const corrCorners = corners.map((c) => cssCorrectedRadius(c, cssK));
const corrRv = radiusShorthand(corrCorners);
cssOutput =
`/* Fallback for browsers without corner-shape */\n` +
`.your-selector {\n border-radius: ${rv};\n}\n\n` +
`@supports (corner-shape: superellipse(2)) {\n` +
` .your-selector {\n` +
` border-radius: ${corrRv};\n` +
` corner-shape: superellipse(${cssK});\n` +
` }\n` +
`}`;
previewStyle = {
borderRadius: corrRv,
cornerShape: `superellipse(${cssK})`,
} as React.CSSProperties;
previewDecls = `border-radius: ${corrRv};\n corner-shape: superellipse(${cssK});`;
}
const previewCss = `#squircle-preview {\n ${previewDecls}\n}`;

// Tailwind classes
const token = closestTwRadius(radius);
Expand All @@ -118,7 +108,7 @@ export default function CodeGenerator() {
}
const twOutput = classes.join(" ");

return { cssOutput, twOutput, previewStyle };
return { cssOutput, twOutput, previewCss };
}, [amount, radius, mode]);

function handleAmountTextCommit(value: string) {
Expand Down Expand Up @@ -246,7 +236,8 @@ export default function CodeGenerator() {
{/* Preview */}
<div className="mb-4">
<p className="mb-2 text-sm text-zinc-500">Preview</p>
<div className="h-40 w-56 bg-indigo-500" style={previewStyle} />
<style dangerouslySetInnerHTML={{ __html: previewCss }} />
<div id="squircle-preview" className="h-40 w-56 bg-indigo-500" />
</div>
</div>

Expand Down
8 changes: 3 additions & 5 deletions website/src/components/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ const { title } = Astro.props;
<title>{title}</title>
</head>
<body class="min-h-screen bg-zinc-950 text-zinc-100">
<div class="mx-auto max-w-5xl px-4 py-12">
<header class="mb-8">
<header class="mx-auto max-w-5xl px-4 py-12">
<div>
<h1 class="text-3xl font-bold">@klinking/squircle</h1>
<div class="mt-1 flex gap-3">
Expand All @@ -39,10 +38,9 @@ const { title } = Astro.props;
There's just one problem... for the same border-radius, the squircle will
look less rounded than the circle. That's where this package comes in.
</p>
</header>
</div>
</header>

<div class="mx-auto max-w-5xl px-4 pt-8">
<div class="mx-auto max-w-5xl px-4">
<slot />

<footer
Expand Down
14 changes: 4 additions & 10 deletions website/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
---
import Layout from "../components/Layout.astro";
import GuidedExplorer from "../components/GuidedExplorer";
import CodeGenerator from "../components/CodeGenerator";
---

<Layout title="@klinking/squircle — Interactive Demo">
<section class="mb-16">
<GuidedExplorer client:load />
</section>

<section class="mb-16">
<CodeGenerator client:visible />
</section>
<Layout title="@klinking/squircle">
<div class="pb-20">
<h2 class="pb-4 text-center text-2xl font-semibold text-zinc-300">More coming soon</h2>
<p class="text-center text-zinc-400">Checkout the <a class="text-indigo-400 hover:underline" href="https://github.com/dogmar/squircle">README</a> for more information.</p></div>
</Layout>
Loading