Skip to content

Commit 1455ac2

Browse files
yzuyryzuyr
committed
fix(website): adjust website to the rawhtml api
1 parent 6427824 commit 1455ac2

File tree

2 files changed

+217
-243
lines changed

2 files changed

+217
-243
lines changed

‎apps/website/src/routes/index.ts‎

Lines changed: 66 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -159,19 +159,17 @@ const footerSections = [
159159
type FooterSection = Exclude<(typeof footerSections)[number], null>;
160160

161161
function lucideIcon(iconNode: IconNode) {
162-
const children = iconNode
163-
.map(([tag, attrs]) => {
164-
const attrString = Object.entries(attrs)
165-
.filter(([, value]) => value !== undefined)
166-
.map(([key, value]) => `${key}="${String(value)}"`)
167-
.join(" ");
168-
169-
return `<${tag} ${attrString}></${tag}>`;
170-
})
171-
.join("");
172-
173-
return `
174-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" aria-hidden="true">
162+
const children = iconNode.map(([tag, attrs]) => {
163+
const attrString = Object.entries(attrs)
164+
.filter(([, value]) => value !== undefined)
165+
.map(([key, value]) => `${key}="${String(value)}"`)
166+
.join(" ");
167+
168+
return html`<${tag} ${raw(attrString)}></${tag}>`;
169+
});
170+
171+
return html`
172+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
175173
${children}
176174
</svg>
177175
`;
@@ -188,22 +186,22 @@ function BlueprintTile(item: (typeof blueprintItems)[number], index: number) {
188186
></div>
189187
</div>
190188
`;
191-
}).join("");
189+
});
192190

193191
return html`
194192
<article
195193
data-blueprint-tile
196194
data-tile-index="${index}"
197195
class="group relative flex flex-col bg-white/5 p-7 backdrop-blur transition-colors duration-200 hover:bg-white/6"
198196
>
199-
<div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
197+
<div class="pointer-events-none absolute inset-0 overflow-hidden">
200198
<div class="grid w-full grid-cols-10 place-items-stretch">
201-
${raw(grid)}
199+
${grid}
202200
</div>
203201
</div>
204-
<div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-br from-white/5 via-transparent to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
205-
<div aria-hidden="true" class="relative mb-5 flex h-10 w-10 items-center justify-center border border-white/10 bg-white/5 text-slate-300">
206-
${raw(item.icon)}
202+
<div class="pointer-events-none absolute inset-0 bg-linear-to-br from-white/5 via-transparent to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
203+
<div class="relative mb-5 flex h-10 w-10 items-center justify-center border border-white/10 bg-white/5 text-slate-300">
204+
${item.icon}
207205
</div>
208206
<h2 class="relative text-xl font-semibold text-white">${item.title}</h2>
209207
<p class="relative mt-3 text-sm leading-7 text-slate-300">${item.copy}</p>
@@ -339,28 +337,30 @@ const Home = ilha
339337
return html`
340338
<main class="min-h-screen overflow-hidden bg-slate-950 font-sans text-slate-100 antialiased" id="main-content">
341339
<div class="relative isolate">
342-
<div aria-hidden="true" class="absolute inset-0 -z-10 bg-linear-to-b from-slate-950 via-slate-950 to-slate-900"></div>
343-
<div aria-hidden="true" class="absolute inset-0 -z-10 overflow-hidden opacity-20">
340+
<div class="absolute inset-0 -z-10 bg-linear-to-b from-slate-950 via-slate-950 to-slate-900"></div>
341+
<div class="absolute inset-0 -z-10 overflow-hidden opacity-20">
344342
<div class="grid h-full w-full grid-cols-6 md:grid-cols-10 lg:grid-cols-12">
345-
${raw(
346-
Array.from(
347-
{ length: 12 },
348-
() => '<div class="border-l border-white/10 last:border-r"></div>',
349-
).join(""),
343+
${Array.from(
344+
{ length: 12 },
345+
() =>
346+
html`
347+
<div class="border-l border-white/10 last:border-r"></div>
348+
`,
350349
)}
351350
</div>
352351
<div class="absolute inset-0 grid grid-rows-6 md:grid-rows-8 lg:grid-rows-10">
353-
${raw(
354-
Array.from(
355-
{ length: 10 },
356-
() => '<div class="border-t border-white/10 last:border-b"></div>',
357-
).join(""),
352+
${Array.from(
353+
{ length: 10 },
354+
() =>
355+
html`
356+
<div class="border-t border-white/10 last:border-b"></div>
357+
`,
358358
)}
359359
</div>
360360
</div>
361-
<div aria-hidden="true" class="absolute inset-x-0 top-0 -z-10 h-96 bg-linear-to-b from-blue-500/20 via-cyan-400/10 to-transparent"></div>
362-
<div aria-hidden="true" class="absolute left-0 top-24 -z-10 h-72 w-72 rotate-12 bg-blue-500/10 blur-3xl"></div>
363-
<div aria-hidden="true" class="absolute right-0 top-40 -z-10 h-80 w-80 -rotate-6 bg-cyan-400/10 blur-3xl"></div>
361+
<div class="absolute inset-x-0 top-0 -z-10 h-96 bg-linear-to-b from-blue-500/20 via-cyan-400/10 to-transparent"></div>
362+
<div class="absolute left-0 top-24 -z-10 h-72 w-72 rotate-12 bg-blue-500/10 blur-3xl"></div>
363+
<div class="absolute right-0 top-40 -z-10 h-80 w-80 -rotate-6 bg-cyan-400/10 blur-3xl"></div>
364364
365365
<div class="mx-auto flex min-h-screen w-full max-w-7xl flex-col px-6 py-6 sm:px-8 lg:px-10">
366366
<header class="flex items-center justify-between pb-5">
@@ -370,16 +370,12 @@ const Home = ilha
370370
</a>
371371
372372
<nav class="hidden items-center gap-3 md:flex" aria-label="Primary">
373-
${raw(
374-
primaryLinks
375-
.map(
376-
(link) => html`
377-
<a href="${link.href}" class="${link.className}">
378-
${link.label}
379-
</a>
380-
`,
381-
)
382-
.join(""),
373+
${primaryLinks.map(
374+
(link) => html`
375+
<a href="${link.href}" class="${link.className}">
376+
${link.label}
377+
</a>
378+
`,
383379
)}
384380
</nav>
385381
</header>
@@ -396,16 +392,12 @@ const Home = ilha
396392
</p>
397393
398394
<div class="mt-8 flex max-w-xl flex-col gap-3 sm:max-w-none sm:flex-row sm:flex-wrap">
399-
${raw(
400-
heroLinks
401-
.map(
402-
(link) => html`
403-
<a href="${link.href}" class="${link.className}">
404-
${link.label}
405-
</a>
406-
`,
407-
)
408-
.join(""),
395+
${heroLinks.map(
396+
(link) => html`
397+
<a href="${link.href}" class="${link.className}">
398+
${link.label}
399+
</a>
400+
`,
409401
)}
410402
</div>
411403
</div>
@@ -414,10 +406,10 @@ const Home = ilha
414406
<h2 id="example-heading" class="sr-only">
415407
Code example
416408
</h2>
417-
<div aria-hidden="true" class="absolute inset-0 rounded-3xl bg-cyan-400/10 blur-2xl"></div>
409+
<div class="absolute inset-0 rounded-3xl bg-cyan-400/10 blur-2xl"></div>
418410
<div class="relative overflow-hidden border border-white/10 bg-slate-900/80 shadow-2xl backdrop-blur">
419411
<div class="flex items-center justify-between border-b border-white/10 px-5 py-4">
420-
<div aria-hidden="true" class="flex items-center gap-2">
412+
<div class="flex items-center gap-2">
421413
<span class="h-2.5 w-2.5 rounded-full bg-rose-400"></span>
422414
<span class="h-2.5 w-2.5 rounded-full bg-amber-300"></span>
423415
<span class="h-2.5 w-2.5 rounded-full bg-emerald-400"></span>
@@ -439,39 +431,31 @@ const Home = ilha
439431
</h2>
440432
<div class="relative overflow-hidden border border-white/10">
441433
<div class="grid divide-y divide-white/10 md:grid-cols-2 md:divide-x md:divide-y">
442-
${raw(blueprintItems.map((item, index) => BlueprintTile(item, index)).join(""))}
434+
${blueprintItems.map((item, index) => BlueprintTile(item, index))}
443435
</div>
444436
</div>
445437
</section>
446438
447439
<footer class="mt-8 py-10">
448440
<h2 class="sr-only">Footer</h2>
449441
<div class="grid gap-10 text-sm text-slate-400 md:grid-cols-4 md:items-start">
450-
${raw(
451-
footerSections
452-
.map((section, index) =>
453-
section
454-
? html`
455-
<nav aria-label="${(section as FooterSection).ariaLabel}" class="${"className" in section ? section.className : ""}">
456-
<h3 class="font-mono text-xs uppercase tracking-widest text-slate-500">
457-
${(section as FooterSection).title}
458-
</h3>
459-
<div class="mt-4 grid gap-3 justify-items-start">
460-
${raw(
461-
(section as FooterSection).links
462-
.map(
463-
(link) => html`
464-
<a href="${link.href}" class="${footerLinkClass}">${link.label}</a>
465-
`,
466-
)
467-
.join(""),
468-
)}
469-
</div>
470-
</nav>
471-
`
472-
: `<div class="hidden md:block" data-spacer="${index}"></div>`,
473-
)
474-
.join(""),
442+
${footerSections.map((section, index) =>
443+
section
444+
? html`
445+
<nav aria-label="${(section as FooterSection).ariaLabel}" class="${"className" in section ? section.className : ""}">
446+
<h3 class="font-mono text-xs uppercase tracking-widest text-slate-500">
447+
${(section as FooterSection).title}
448+
</h3>
449+
<div class="mt-4 grid gap-3 justify-items-start">
450+
${(section as FooterSection).links.map(
451+
(link) => html`
452+
<a href="${link.href}" class="${footerLinkClass}">${link.label}</a>
453+
`,
454+
)}
455+
</div>
456+
</nav>
457+
`
458+
: html`<div class="hidden md:block" data-spacer="${index}"></div>`,
475459
)}
476460
</div>
477461

0 commit comments

Comments
 (0)