25 lines
10 KiB
JavaScript
25 lines
10 KiB
JavaScript
export function siteCss() {
|
|
return `
|
|
:root{--bg:#fbfaf7;--paper:#fffdfa;--ink:#161412;--text:#38332f;--muted:#766d66;--line:#e6ddd2;--soft:#f3ede5;--brand:#ff5a36;--brand-2:#0f766e;--code:#15120f;--code-text:#f5efe8;--shadow:0 18px 60px rgba(32,24,18,.09);color-scheme:light}
|
|
:root[data-theme="dark"]{--bg:#11100f;--paper:#191715;--ink:#fff8ef;--text:#ded3c8;--muted:#a3978b;--line:#34302b;--soft:#211e1a;--brand:#ff7a59;--brand-2:#5eead4;--code:#090807;--code-text:#fff4e8;--shadow:0 18px 60px rgba(0,0,0,.35);color-scheme:dark}
|
|
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:.18em}img{max-width:100%;height:auto}button,input,select{font:inherit}
|
|
.shell{display:grid;grid-template-columns:304px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:22px 18px;background:var(--paper);border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;margin-bottom:18px}.brand img{width:34px;height:34px}.brand strong{display:block;line-height:1.1}.brand small{display:block;color:var(--muted);font-size:12px}.tools{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:14px}.tools select,.tools button,.search-button{border:1px solid var(--line);background:var(--paper);color:var(--text);border-radius:8px;padding:8px 10px}.tools button,.search-button{cursor:pointer}.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 15px}.tab-link{border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:var(--muted);font-size:12px}.tab-link.active{background:var(--ink);border-color:var(--ink);color:var(--paper);text-decoration:none}.nav-section{margin:0 0 15px}.nav-section h2{font-size:11px;line-height:1.2;color:var(--muted);text-transform:uppercase;letter-spacing:0;margin:0 0 6px}.nav-link{display:block;color:var(--text);border-radius:7px;padding:5px 9px;font-size:13px;line-height:1.35}.nav-link:hover{background:var(--soft);text-decoration:none}.nav-link.active{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-weight:700}.nav-nested{padding-left:10px;border-left:1px solid var(--line);margin-left:6px}
|
|
.main{min-width:0;display:grid;grid-template-columns:minmax(0,76ch) 220px;gap:46px;width:100%;max-width:1240px;margin:0 auto;padding:34px clamp(22px,4vw,58px) 82px}.topbar{display:none}.article{min-width:0}.article-header{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:28px}.article-kicker{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0;margin:0 0 8px}.article h1{font:800 clamp(34px,5vw,58px)/.96 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;color:var(--ink);margin:0 0 12px}.summary{font-size:18px;color:var(--muted);margin:0;max-width:62ch}.doc>h1:first-child{display:none}.doc h2{font:750 26px/1.2 ui-sans-serif,system-ui,sans-serif;color:var(--ink);margin:2.1em 0 .55em}.doc h3{font:720 19px/1.25 ui-sans-serif,system-ui,sans-serif;color:var(--ink);margin:1.6em 0 .4em}.doc h4{color:var(--ink);margin:1.3em 0 .35em}.doc p,.doc ul,.doc ol,.doc blockquote,.doc table{margin-top:0;margin-bottom:1.1em}.doc ul,.doc ol{padding-left:1.35rem}.doc li{margin:.22em 0}.doc code{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:.08em .32em;font-size:.88em;color:var(--ink)}.doc pre{position:relative;overflow:auto;background:var(--code);color:var(--code-text);border-radius:9px;padding:16px 18px;border:1px solid var(--line);box-shadow:var(--shadow)}.doc pre code{background:transparent;border:0;color:inherit;padding:0}.doc table{width:100%;border-collapse:collapse;font-size:14px}.doc th,.doc td{border-bottom:1px solid var(--line);padding:9px;text-align:left;vertical-align:top}.doc th{color:var(--ink);background:var(--soft)}.anchor{color:var(--muted);padding-right:.35em;text-decoration:none;opacity:.5}.anchor:hover{opacity:1;text-decoration:none}.toc{position:sticky;top:28px;align-self:start;border-left:1px solid var(--line);padding-left:14px;max-height:calc(100vh - 56px);overflow:auto}.toc h2{font-size:11px;text-transform:uppercase;letter-spacing:0;color:var(--muted);margin:0 0 9px}.toc a{display:block;color:var(--muted);font-size:12px;line-height:1.35;padding:4px 0}.toc a:hover{color:var(--brand);text-decoration:none}.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line);margin-top:44px;padding-top:18px}.page-nav a{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:13px;color:var(--text)}.page-nav small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}.next{text-align:right}
|
|
.oc-card-grid,.oc-card-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0}.oc-card{display:flex;gap:10px;min-height:92px;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:14px;color:var(--text);box-shadow:0 1px 0 rgba(0,0,0,.02)}.oc-card:hover{border-color:var(--brand);text-decoration:none}.oc-card strong{display:block;color:var(--ink);margin-bottom:4px}.oc-card-icon{color:var(--brand);font-size:12px;text-transform:uppercase}.oc-steps{counter-reset:step;list-style:none;padding-left:0!important}.oc-step{counter-increment:step;border-left:2px solid var(--line);padding:0 0 12px 22px;position:relative}.oc-step:before{content:counter(step);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}.oc-step h3{margin-top:0}.oc-callout{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--paper);border-radius:8px;padding:12px 14px;margin:16px 0}.oc-callout-warning{border-left-color:#d97706}.oc-callout-tip,.oc-callout-check{border-left-color:var(--brand-2)}.oc-tabs{display:grid;gap:10px;margin:16px 0}.oc-tab,.oc-param,.oc-frame,.oc-code-group{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:12px 14px;margin:12px 0}.oc-tab h3{margin-top:0}.oc-accordion{border:1px solid var(--line);background:var(--paper);border-radius:8px;margin:10px 0;padding:0 13px}.oc-accordion summary{cursor:pointer;color:var(--ink);font-weight:700;padding:12px 0}.oc-param header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.oc-param-type,.oc-param-required{border:1px solid var(--line);border-radius:999px;padding:1px 7px;font-size:12px;color:var(--muted)}.oc-param-required{color:var(--brand)}
|
|
.search-modal{position:fixed;inset:0;background:rgba(0,0,0,.46);display:none;z-index:40;padding:7vh 18px}.search-modal.open{display:block}.search-panel{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.search-head{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.search-head input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--bg);color:var(--text)}.search-results{max-height:62vh;overflow:auto;padding:8px 12px 14px}.search-result{display:block;border-bottom:1px solid var(--line);padding:12px;color:var(--text)}.search-result strong{display:block;color:var(--ink)}.search-result p{margin:.35em 0 0;color:var(--muted);font-size:13px}
|
|
@media(max-width:1040px){.main{grid-template-columns:minmax(0,1fr)}.toc{display:none}}@media(max-width:860px){.shell{display:block}.sidebar{position:fixed;inset:0 18% 0 0;z-index:30;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.topbar{display:flex;position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);align-items:center;justify-content:space-between;padding:10px 14px}.main{padding:24px 18px 60px}.article h1{font-size:38px}.page-nav{grid-template-columns:1fr}.next{text-align:left}}
|
|
`;
|
|
}
|
|
|
|
export function siteJs() {
|
|
return `
|
|
const root=document.documentElement;const saved=localStorage.getItem("theme");if(saved)root.dataset.theme=saved;document.querySelector("[data-theme-toggle]")?.addEventListener("click",()=>{const next=root.dataset.theme==="dark"?"light":"dark";root.dataset.theme=next;localStorage.setItem("theme",next)});
|
|
const sidebar=document.querySelector(".sidebar");document.querySelector("[data-nav-toggle]")?.addEventListener("click",()=>sidebar?.classList.toggle("open"));document.querySelectorAll(".sidebar a").forEach(a=>a.addEventListener("click",()=>sidebar?.classList.remove("open")));
|
|
document.querySelector("[data-locale]")?.addEventListener("change",e=>{const url=e.target.selectedOptions[0]?.dataset.url;if(url)location.href=url});
|
|
const modal=document.querySelector(".search-modal");const input=document.querySelector("[data-search-input]");const results=document.querySelector("[data-search-results]");let pagefindReady;
|
|
function openSearch(){modal?.classList.add("open");setTimeout(()=>input?.focus(),0);pagefindReady ||= import("/pagefind/pagefind.js").then(m=>m.init?.().then?.(()=>m)??m)}
|
|
document.querySelectorAll("[data-search-open]").forEach(b=>b.addEventListener("click",openSearch));document.querySelector("[data-search-close]")?.addEventListener("click",()=>modal?.classList.remove("open"));modal?.addEventListener("click",e=>{if(e.target===modal)modal.classList.remove("open")});addEventListener("keydown",e=>{if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="k"){e.preventDefault();openSearch()}if(e.key==="Escape")modal?.classList.remove("open")});
|
|
let seq=0;input?.addEventListener("input",async e=>{const q=e.target.value.trim();const id=++seq;if(!q){results.innerHTML="";return}results.innerHTML="<p>Searching...</p>";const pf=await pagefindReady;if(id!==seq)return;const search=await pf.search(q);const items=await Promise.all(search.results.slice(0,12).map(r=>r.data()));if(id!==seq)return;results.innerHTML=items.length?items.map(item=>'<a class="search-result" href="'+item.url+'"><strong>'+item.meta.title+'</strong><p>'+item.excerpt+'</p></a>').join(""):"<p>No results.</p>"});
|
|
`;
|
|
}
|