Skip to content

Commit

Permalink
Add tailwind prettier (huggingface#123)
Browse files Browse the repository at this point in the history 
* add tailwind-prettier plugin

* lint all project files
  • Loading branch information
@Grsmto
Grsmto authored Apr 26, 2023
1 parent ffa4f55 commit b2387f6
Show file tree
Hide file tree
Showing 22 changed files with 151 additions and 75 deletions.
2 changes: 1 addition & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"useTabs": true,
"trailingComma": "es5",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
75 changes: 75 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.7",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"tslib": "^2.4.1",
Expand Down
2 changes: 1 addition & 1 deletion src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900 h-full">
<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
<div class="contents h-full">%sveltekit.body%</div>
</body>
</html>
4 changes: 2 additions & 2 deletions src/lib/components/CodeBlock.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
});
</script>

<div class="group relative rounded-lg my-4">
<div class="group relative my-4 rounded-lg">
<pre
class="overflow-auto scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 px-5"><code
class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><code
class="language-{lang}">{@html highlightedCode || code.replaceAll("<", "&lt;")}</code
></pre>
<CopyToClipBoardBtn
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/CopyToClipBoardBtn.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</script>

<button
class="btn text-sm rounded-lg border py-2 px-2 shadow-sm border-gray-200 active:shadow-inner dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-400 transition-all {classNames}
class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-600 dark:hover:border-gray-400 {classNames}
{!isSuccess && 'text-gray-200 dark:text-gray-200'}
{isSuccess && 'text-green-500'}
"
Expand Down
14 changes: 7 additions & 7 deletions src/lib/components/MobileNav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,29 @@
</script>

<nav
class="md:hidden flex items-center h-12 border-b px-4 justify-between dark:border-gray-800 bg-gray-50 dark:bg-gray-800/70"
class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-gray-800 dark:bg-gray-800/70 md:hidden"
>
<button
type="button"
class="flex items-center justify-center w-9 h-9 -ml-3 shrink-0"
class="-ml-3 flex h-9 w-9 shrink-0 items-center justify-center"
on:click={() => dispatch("toggle", true)}
aria-label="Open menu"
bind:this={openEl}><CarbonTextAlignJustify /></button
>
<span class="px-4 truncate">{title}</span>
<a href={base || "/"} class="flex items-center justify-center w-9 h-9 -mr-3 shrink-0"
<span class="truncate px-4">{title}</span>
<a href={base || "/"} class="-mr-3 flex h-9 w-9 shrink-0 items-center justify-center"
><CarbonAdd /></a
>
</nav>
<nav
class="fixed inset-0 z-50 grid grid-rows-[auto,auto,1fr,auto] grid-cols-1 max-h-screen bg-white dark:bg-gray-900 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 {isOpen
class="fixed inset-0 z-50 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
? 'block'
: 'hidden'}"
>
<div class="flex items-center px-4 h-12">
<div class="flex h-12 items-center px-4">
<button
type="button"
class="flex items-center justify-center ml-auto w-9 h-9 -mr-3"
class="-mr-3 ml-auto flex h-9 w-9 items-center justify-center"
on:click={() => dispatch("toggle", false)}
aria-label="Close menu"
bind:this={closeEl}><CarbonClose /></button
Expand Down
26 changes: 13 additions & 13 deletions src/lib/components/NavMenu.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,26 @@
}> = [];
</script>

<div class="flex-none max-sm:pt-0 sticky top-0 px-3 py-3.5 flex items-center justify-between">
<a class="rounded-xl font-semibold text-lg flex items-center" href="{PUBLIC_ORIGIN}{base}/">
<div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
<a class="flex items-center rounded-xl text-lg font-semibold" href="{PUBLIC_ORIGIN}{base}/">
<Logo classNames="mr-1 text-3xl" />
HuggingChat
</a>
<a
href={base || "/"}
class="flex border py-0.5 px-2 rounded-lg shadow-sm hover:shadow-none bg-white dark:bg-gray-700 dark:border-gray-600 text-center"
class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700"
>
New Chat
</a>
</div>
<div
class="flex flex-col overflow-y-auto scrollbar-custom px-3 pb-3 pt-2 gap-1 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30"
>
{#each conversations as conv}
<a
data-sveltekit-noscroll
href="{base}/conversation/{conv.id}"
class="group pl-3 pr-2 h-11 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1.5 {conv.id ===
class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
$page.params.id
? 'bg-gray-100 dark:bg-gray-700'
: ''}"
Expand All @@ -49,48 +49,48 @@

<button
type="button"
class="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center rounded"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Share conversation"
on:click|preventDefault={() =>
dispatch("shareConversation", { id: conv.id, title: conv.title })}
>
<CarbonExport class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 text-xs" />
<CarbonExport class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
</button>

<button
type="button"
class="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center rounded"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Delete conversation"
on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
>
<CarbonTrashCan
class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 text-xs"
class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
/>
</button>
</a>
{/each}
</div>
<div
class="flex flex-col p-3 gap-2 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl mt-0.5 text-sm"
class="mt-0.5 flex flex-col gap-2 rounded-r-xl bg-gradient-to-l from-gray-50 p-3 text-sm dark:from-gray-800/30"
>
<button
on:click={switchTheme}
type="button"
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
>
Theme
</button>
<a
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
target="_blank"
rel="noreferrer"
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
>
Feedback
</a>
<a
href="{base}/privacy"
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
>
About & Privacy
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/ScrollToBottomBtn.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<button
transition:fade={{ duration: 150 }}
on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
class="btn absolute flex rounded-full border w-[41px] h-[41px] shadow-md dark:shadow-gray-950 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all {className}"
class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
><IconChevron classNames="mt-[2px]" /></button
>
{/if}
6 changes: 3 additions & 3 deletions src/lib/components/StopGeneratingBtn.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
<button
type="button"
on:click
class="absolute btn flex rounded-lg border py-1 px-3 shadow-sm bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all
class="btn absolute flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600
{className}
{visible ? 'opacity-100 visible' : 'opacity-0 invisible'}
{visible ? 'visible opacity-100' : 'invisible opacity-0'}
"
>
<CarbonPause class="mr-1 -ml-1 w-[1.1875rem] h-[1.25rem] text-gray-400" /> Stop generating
<CarbonPause class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-400" /> Stop generating
</button>
4 changes: 2 additions & 2 deletions src/lib/components/Toast.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@

<div
transition:fade={{ duration: 300 }}
class="fixed right-0 top-12 md:top-0 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pt-2 md:pt-5 pr-2 md:pr-8 pl-36 pb-36 z-20 pointer-events-none"
class="pointer-events-none fixed right-0 top-12 z-20 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
>
<div
class="flex items-center bg-white/90 dark:bg-gray-900/80 rounded-full py-1 px-3 shadow-sm pointer-events-auto"
class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
>
<IconDazzled classNames="text-2xl mr-2" />
<h2 class="font-semibold">{message}</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Tooltip.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<div
class="
pointer-events-none absolute rounded bg-black py-1 px-2 font-normal leading-tight text-white shadow transition-opacity
pointer-events-none absolute rounded bg-black px-2 py-1 font-normal leading-tight text-white shadow transition-opacity
{position}
{classNames}
"
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/chat/ChatInput.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
export let disabled = false;
export let autofocus = false;
const dispatch = createEventDispatcher<{submit: void}>();
const dispatch = createEventDispatcher<{ submit: void }>();
$: minHeight = `${1 + minRows * 1.5}em`;
$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
Expand All @@ -24,7 +24,7 @@
let textareaElement: HTMLTextAreaElement;
</script>

<div class="relative flex-1 min-w-0">
<div class="relative min-w-0 flex-1">
<pre
class="invisible py-3"
aria-hidden="true"
Expand All @@ -34,7 +34,7 @@
enterkeyhint="send"
tabindex="0"
rows="1"
class="absolute m-0 w-full h-full top-0 resize-none border-0 bg-transparent p-3 focus:ring-0 focus-visible:ring-0 dark:bg-transparent outline-none scrollbar-custom overflow-x-hidden overflow-y-scroll"
class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent"
bind:value
bind:this={textareaElement}
{disabled}
Expand Down
Loading

0 comments on commit b2387f6

Please sign in to comment.