Use prettier-plugin-svelte and prettier-plugin-tailwindcss

This commit is contained in:
dtonon 2026-05-27 15:30:11 +01:00
parent 2f6ea767d1
commit b3e6533748
23 changed files with 109 additions and 98 deletions

View file

@ -104,7 +104,7 @@
>
<Navbar onMenuToggle={() => (menuOpen = true)} />
<div
class="relative md:flex md:flex-1 md:overflow-hidden md:gap-5 {mobileView ===
class="relative md:flex md:flex-1 md:gap-5 md:overflow-hidden {mobileView ===
'chat'
? 'flex flex-1 overflow-hidden'
: ''}"
@ -120,7 +120,7 @@
it first and it reappears once the top is reached. Desktop only. -->
<div class="hidden md:block md:h-6" aria-hidden="true"></div>
<div
class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-4 md:pt-8 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-10 md:pt-6"
class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-4 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-10 md:pt-6 md:pt-8"
>
{@render children()}
</div>
@ -136,7 +136,7 @@
<!-- Own panel (40%) so the gray gutter matches the main↔chat gap.
Hidden on mobile — it's supplementary to the main column. -->
<div
class="no-scrollbar hidden min-w-0 md:block md:flex-[2] md:min-h-0 md:overflow-y-auto"
class="no-scrollbar hidden min-w-0 md:block md:min-h-0 md:flex-[2] md:overflow-y-auto"
>
<div class="hidden md:block md:h-6" aria-hidden="true"></div>
<div

View file

@ -62,7 +62,7 @@
{#if partial}
<hr class="text-neutral-300" />
{:else}
<h1 class="py-2 text-[1.65rem] text-brand">Forum rooms</h1>
<h1 class="text-brand py-2 text-[1.65rem]">Forum rooms</h1>
{/if}
{#if groupsStore.list.length === 0}
@ -82,11 +82,11 @@
class="group flex items-start justify-between gap-4 py-5"
>
<div class="min-w-0">
<h2 class="text-2xl text-neutral-800 group-hover:text-brand">
<h2 class="group-hover:text-brand text-2xl text-neutral-800">
{room.name}
</h2>
{#if room.about}
<p class="mt-1 text-neutral-600 leading-5">{room.about}</p>
<p class="mt-1 leading-5 text-neutral-600">{room.about}</p>
{/if}
{#if admin}
<div class="mt-2 flex items-center gap-2 text-sm text-neutral-500">

View file

@ -72,7 +72,7 @@
</svelte:head>
<div class="mx-auto max-w-6xl">
<h1 class="py-2 text-[1.65rem] text-brand">Contacts</h1>
<h1 class="text-brand py-2 text-[1.65rem]">Contacts</h1>
{#if partial}
<div class="mb-8">
@ -120,7 +120,7 @@
href="https://njump.me/{c.npub}"
target="_blank"
rel="noopener noreferrer"
class="shrink-0 text-sm text-brand hover:underline"
class="text-brand shrink-0 text-sm hover:underline"
>
View profile ↗
</a>
@ -139,7 +139,7 @@
href={websiteHref(c.entry.website)}
target="_blank"
rel="noopener noreferrer"
class="truncate text-brand hover:underline"
class="text-brand truncate hover:underline"
>
{websiteLabel(c.entry.website)}
</a>

View file

@ -1,6 +1,6 @@
@import "tailwindcss";
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
html {
font-size: 16px;

View file

@ -31,7 +31,7 @@
<div class="mx-auto max-w-6xl">
<a
href="/"
class="mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 hover:text-brand"
class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"

View file

@ -264,11 +264,11 @@
<img
src={author.picture}
alt=""
class="w-12 h-12 rounded-full object-cover"
class="h-12 w-12 rounded-full object-cover"
/>
{:else}
<span
class="w-12 h-12 flex items-center justify-center rounded-full bg-neutral-200 text-lg font-semibold text-neutral-500"
class="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-200 text-lg font-semibold text-neutral-500"
>
{author.name[0].toUpperCase()}
</span>
@ -281,11 +281,11 @@
bindEl: (el: HTMLElement | null) => void,
)}
{@const author = resolveAuthor(p.pubkey, profiles)}
<div use:bindEl class="md:flex md:gap-6 md:items-start">
<div use:bindEl class="md:flex md:items-start md:gap-6">
<div class="hidden flex-shrink-0 md:block">
{@render avatar(author)}
</div>
<div class="flex-1 min-w-0">
<div class="min-w-0 flex-1">
<div
class="mb-4 flex items-center justify-between md:mb-3 md:items-baseline"
>
@ -321,7 +321,7 @@
{#if openMenuId === p.id}
<div
role="menu"
class="absolute right-0 top-7 z-20 w-36 rounded-lg border border-neutral-100 bg-white py-1 text-sm shadow-lg"
class="absolute top-7 right-0 z-20 w-36 rounded-lg border border-neutral-100 bg-white py-1 text-sm shadow-lg"
>
<button
role="menuitem"
@ -344,11 +344,11 @@
<PostContent content={p.content} {profiles} {threadEventAuthors} />
</div>
{#if auth.user}
<div class="flex items-center justify-start mt-6">
<div class="mt-6 flex items-center justify-start">
<button
onclick={() => quotePost(p)}
disabled={!auth.user}
class="flex items-center gap-1.5 text-neutral-300 cursor-pointer hover:text-brand transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
class="hover:text-brand flex cursor-pointer items-center gap-1.5 text-neutral-300 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
>
<span>Quote post</span>
<svg
@ -372,14 +372,14 @@
{/snippet}
{#if detail}
<div class="flex gap-6 items-start">
<div class="flex-1 min-w-0 {!scrubberVisible ? 'md:pr-18' : ''}">
<div class="flex items-start gap-6">
<div class="min-w-0 flex-1 {!scrubberVisible ? 'md:pr-18' : ''}">
<div
class="relative z-10 bg-white pb-1 md:sticky md:-top-6 md:-mx-10 md:px-10 md:pt-6 md:-mt-6"
class="relative z-10 bg-white pb-1 md:sticky md:-top-6 md:-mx-10 md:-mt-6 md:px-10 md:pt-6"
>
<a
href={MODE === "full" ? `/room/${detail.groupId}` : "/"}
class="mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 hover:text-brand"
class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -398,10 +398,10 @@
</svg>
Discussions
</a>
<h1 class="text-[1.65rem] text-brand leading-7">{detail.title}</h1>
<h1 class="text-brand text-[1.65rem] leading-7">{detail.title}</h1>
{#if isScrolled}
<div
class="absolute left-0 right-0 h-8 pointer-events-none transition-opacity duration-200"
class="pointer-events-none absolute right-0 left-0 h-8 transition-opacity duration-200"
style="top: 100%; background: linear-gradient(to bottom, white, transparent);"
></div>
{/if}
@ -433,7 +433,7 @@
{#if auth.user}
{#if replyError}
<div
class="mb-4 rounded bg-red-50 px-4 py-3 text-sm text-red-700 border border-red-200"
class="mb-4 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
>
{replyError}
</div>
@ -452,13 +452,13 @@
<button
onclick={submitReply}
disabled={replying || !replyContent.trim()}
class="rounded bg-brand px-6 py-1.5 font-medium text-white hover:bg-brand-hover disabled:opacity-50 disabled:cursor-not-allowed"
class="bg-brand hover:bg-brand-hover rounded px-6 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
>
{replying ? "Posting…" : "post reply"}
</button>
</div>
{:else}
<p class=" text-neutral-500 text-center">
<p class=" text-center text-neutral-500">
To participate and reply, please
<button onclick={openLogin} class="text-brand hover:underline"
>login now</button
@ -485,7 +485,7 @@
onmousedown={(e) => e.preventDefault()}
onclick={quoteFromSelection}
style="top: {selectionTarget.top}px; left: {selectionTarget.left}px;"
class="fixed -translate-x-1/2 -translate-y-full z-50 rounded bg-neutral-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-neutral-700"
class="fixed z-50 -translate-x-1/2 -translate-y-full rounded bg-neutral-900 px-3 py-1 text-xs font-medium text-white shadow-md hover:bg-neutral-700"
>
Quote
</button>