mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 09:36:59 +03:00
Paul BakausandCursor
7648af0095
Restyle the live picker to match the site kinpaku kit, persist pick mode in localStorage, fix DESIGN.md color swatches in the parser, and land the neo-kinpaku site refresh with new tokens, assets, palette script, and detector rules. Co-authored-by: Cursor <cursoragent@cursor.com>
105 lines
3.4 KiB
Plaintext
105 lines
3.4 KiB
Plaintext
---
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
// Site-global CSS: tokens first (defines --ks-*), kit second (consumes them),
|
|
// footer styling third. Every page using Base.astro picks these up — no need
|
|
// to re-import from page-level stylesheets.
|
|
import '../styles/kinpaku-tokens.css';
|
|
import '../styles/kinpaku-kit.css';
|
|
import '../styles/footer.css';
|
|
|
|
interface Props {
|
|
title: string;
|
|
description?: string;
|
|
activeNav?: 'home' | 'designing' | 'docs' | 'slop' | 'live';
|
|
canonicalPath?: string;
|
|
bodyClass?: string;
|
|
noIndex?: boolean;
|
|
mainId?: string;
|
|
mainClass?: string;
|
|
hideHeader?: boolean;
|
|
hideFooter?: boolean;
|
|
ogTitle?: string;
|
|
ogDescription?: string;
|
|
ogImage?: string;
|
|
twitterSite?: string;
|
|
twitterCreator?: string;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
description = 'Design fluency for AI-assisted frontend development.',
|
|
activeNav,
|
|
canonicalPath,
|
|
bodyClass,
|
|
noIndex = false,
|
|
mainId = 'main',
|
|
mainClass,
|
|
hideHeader = false,
|
|
hideFooter = false,
|
|
ogTitle,
|
|
ogDescription,
|
|
ogImage,
|
|
twitterSite,
|
|
twitterCreator,
|
|
} = Astro.props;
|
|
|
|
const canonical = canonicalPath
|
|
? `https://impeccable.style${canonicalPath}`
|
|
: undefined;
|
|
---
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{title}</title>
|
|
<meta name="description" content={description}>
|
|
<meta name="theme-color" content="#fafafa">
|
|
{noIndex && <meta name="robots" content="noindex">}
|
|
{canonical && <link rel="canonical" href={canonical}>}
|
|
|
|
{ogTitle && (
|
|
<>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content={canonical || 'https://impeccable.style'}>
|
|
<meta property="og:title" content={ogTitle}>
|
|
<meta property="og:description" content={ogDescription || description}>
|
|
{ogImage && <meta property="og:image" content={ogImage}>}
|
|
</>
|
|
)}
|
|
|
|
{twitterSite && (
|
|
<>
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content={twitterSite}>
|
|
{twitterCreator && <meta name="twitter:creator" content={twitterCreator}>}
|
|
<meta name="twitter:title" content={ogTitle || title}>
|
|
<meta name="twitter:description" content={ogDescription || description}>
|
|
{ogImage && <meta name="twitter:image" content={ogImage}>}
|
|
</>
|
|
)}
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700&family=Alumni+Sans:wght@500;600;700&family=Alumni+Sans+Pinstripe&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<slot name="head" />
|
|
</head>
|
|
<body class={bodyClass}>
|
|
<a href={`#${mainId}`} class="skip-link">Skip to content</a>
|
|
<slot name="before-header" />
|
|
{!hideHeader && <Header activeNav={activeNav} />}
|
|
<slot name="after-header" />
|
|
<main id={mainId} class={mainClass}>
|
|
<slot />
|
|
</main>
|
|
{!hideFooter && <Footer />}
|
|
<slot name="scripts" />
|
|
<!-- impeccable-live-start -->
|
|
<script src="http://localhost:8402/live.js"></script>
|
|
<!-- impeccable-live-end -->
|
|
</body>
|
|
</html>
|