added tailwind prettier plugin

pull/3/head
TZGyn 2 years ago
parent 1c44bfb2a8
commit 1701dda000
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A

@ -4,7 +4,6 @@
"semi": false, "semi": false,
"trailingComma": "all", "trailingComma": "all",
"printWidth": 80, "printWidth": 80,
"plugins": ["prettier-plugin-svelte"], "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
} }

Binary file not shown.

@ -1,5 +1,5 @@
// drizzle.config.ts // drizzle.config.ts
import type { Config } from 'drizzle-kit'; import type { Config } from 'drizzle-kit'
export default { export default {
schema: './src/lib/db/schema.ts', schema: './src/lib/db/schema.ts',
@ -12,4 +12,4 @@ export default {
port: 5432, port: 5432,
database: 'link-shortener', database: 'link-shortener',
}, },
} satisfies Config; } satisfies Config

@ -117,9 +117,7 @@
"user_email_unique": { "user_email_unique": {
"name": "user_email_unique", "name": "user_email_unique",
"nullsNotDistinct": false, "nullsNotDistinct": false,
"columns": [ "columns": ["email"]
"email"
]
} }
} }
}, },

@ -9,7 +9,7 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check .", "lint": "prettier --plugin-search-dir . --check .",
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/kit": "^1.20.4", "@sveltejs/kit": "^1.20.4",
@ -18,8 +18,9 @@
"drizzle-kit": "^0.20.1", "drizzle-kit": "^0.20.1",
"postcss": "^8.4.24", "postcss": "^8.4.24",
"postcss-load-config": "^4.0.1", "postcss-load-config": "^4.0.1",
"prettier": "^2.8.0", "prettier": "^3.1.0",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^3.1.0",
"prettier-plugin-tailwindcss": "^0.5.7",
"svelte": "^4.0.5", "svelte": "^4.0.5",
"svelte-adapter-bun": "^0.5.1", "svelte-adapter-bun": "^0.5.1",
"svelte-check": "^3.4.3", "svelte-check": "^3.4.3",

@ -1,13 +1,13 @@
const tailwindcss = require('tailwindcss'); const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer')
const config = { const config = {
plugins: [ plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind, //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(), tailwindcss(),
//But others, like autoprefixer, need to run after, //But others, like autoprefixer, need to run after,
autoprefixer autoprefixer,
] ],
}; }
module.exports = config; module.exports = config

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

@ -9,9 +9,9 @@
import { goto } from '$app/navigation' import { goto } from '$app/navigation'
</script> </script>
<div class="min-w-[350px] p-4 border-r h-full flex flex-col justify-between"> <div class="flex h-full min-w-[350px] flex-col justify-between border-r p-4">
<div> <div>
<div class="flex justify-between pb-16 items-center"> <div class="flex items-center justify-between pb-16">
<div class="text-xl font-bold">Shortener</div> <div class="text-xl font-bold">Shortener</div>
<ThemeToggle /> <ThemeToggle />
</div> </div>
@ -19,11 +19,11 @@
<div class="pb-4">Projects</div> <div class="pb-4">Projects</div>
<Separator /> <Separator />
</div> </div>
<div class="flex justify-between items-center"> <div class="flex items-center justify-between">
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Avatar.Root> <Avatar.Root>
<Avatar.Image src="github.com/shadcn.png" alt="@shadcn" /> <Avatar.Image src="" alt="@shadcn" />
<Avatar.Fallback><User /></Avatar.Fallback> <Avatar.Fallback><User /></Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui"; import { Avatar as AvatarPrimitive } from 'bits-ui'
import { cn } from "$lib/utils"; import { cn } from '$lib/utils'
type $$Props = AvatarPrimitive.FallbackProps; type $$Props = AvatarPrimitive.FallbackProps
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AvatarPrimitive.Fallback <AvatarPrimitive.Fallback
class={cn( class={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted", 'flex h-full w-full items-center justify-center rounded-full bg-muted',
className className,
)} )}
{...$$restProps} {...$$restProps}
> >

@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui"; import { Avatar as AvatarPrimitive } from 'bits-ui'
import { cn } from "$lib/utils"; import { cn } from '$lib/utils'
type $$Props = AvatarPrimitive.ImageProps; type $$Props = AvatarPrimitive.ImageProps
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined
export let src: $$Props["src"] = undefined; export let src: $$Props['src'] = undefined
export let alt: $$Props["alt"] = undefined; export let alt: $$Props['alt'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AvatarPrimitive.Image <AvatarPrimitive.Image
{src} {src}
{alt} {alt}
class={cn("aspect-square h-full w-full", className)} class={cn('aspect-square h-full w-full', className)}
{...$$restProps} {...$$restProps}
/> />

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui"; import { Avatar as AvatarPrimitive } from 'bits-ui'
import { cn } from "$lib/utils"; import { cn } from '$lib/utils'
type $$Props = AvatarPrimitive.Props; type $$Props = AvatarPrimitive.Props
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined
export let delayMs: $$Props["delayMs"] = undefined; export let delayMs: $$Props['delayMs'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AvatarPrimitive.Root <AvatarPrimitive.Root
{delayMs} {delayMs}
class={cn( class={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className className,
)} )}
{...$$restProps} {...$$restProps}
> >

@ -1,6 +1,6 @@
import Root from "./avatar.svelte"; import Root from './avatar.svelte'
import Image from "./avatar-image.svelte"; import Image from './avatar-image.svelte'
import Fallback from "./avatar-fallback.svelte"; import Fallback from './avatar-fallback.svelte'
export { export {
Root, Root,
@ -9,5 +9,5 @@ export {
// //
Root as Avatar, Root as Avatar,
Image as AvatarImage, Image as AvatarImage,
Fallback as AvatarFallback Fallback as AvatarFallback,
}; }

@ -13,7 +13,7 @@
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
class={cn( class={cn(
'box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50', 'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
className, className,
)} )}
bind:checked bind:checked
@ -21,7 +21,7 @@
on:click on:click
> >
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
class={cn('flex items-center justify-center text-current h-4 w-4')} class={cn('flex h-4 w-4 items-center justify-center text-current')}
let:isChecked let:isChecked
let:isIndeterminate let:isIndeterminate
> >

@ -14,7 +14,7 @@
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
bind:checked bind:checked
class={cn( class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className, className,
)} )}
{...$$restProps} {...$$restProps}

@ -14,7 +14,7 @@
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
class={cn( class={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
inset && 'pl-8', inset && 'pl-8',
className, className,
)} )}

@ -13,7 +13,7 @@
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
class={cn( class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className, className,
)} )}
{value} {value}

@ -13,7 +13,7 @@
<input <input
class={cn( class={cn(
'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className, className,
)} )}
bind:value bind:value

@ -18,7 +18,7 @@
{disabled} {disabled}
{label} {label}
class={cn( class={cn(
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className, className,
)} )}
{...$$restProps} {...$$restProps}

@ -1,7 +1,7 @@
import Root from "./separator.svelte"; import Root from './separator.svelte'
export { export {
Root, Root,
// //
Root as Separator Root as Separator,
}; }

@ -1,20 +1,20 @@
<script lang="ts"> <script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui"; import { Separator as SeparatorPrimitive } from 'bits-ui'
import { cn } from "$lib/utils"; import { cn } from '$lib/utils'
type $$Props = SeparatorPrimitive.Props; type $$Props = SeparatorPrimitive.Props
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined
export let orientation: $$Props["orientation"] = "horizontal"; export let orientation: $$Props['orientation'] = 'horizontal'
export let decorative: $$Props["decorative"] = undefined; export let decorative: $$Props['decorative'] = undefined
export { className as class }; export { className as class }
</script> </script>
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
class={cn( class={cn(
"shrink-0 bg-border", 'shrink-0 bg-border',
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className className,
)} )}
{orientation} {orientation}
{decorative} {decorative}

@ -2,7 +2,7 @@
import Sidebar from '$lib/components/sidebar.svelte' import Sidebar from '$lib/components/sidebar.svelte'
</script> </script>
<div class="w-full flex h-screen"> <div class="flex h-screen w-full">
<Sidebar /> <Sidebar />
<div class="w-full p-4"> <div class="w-full p-4">
<slot /> <slot />

@ -3,9 +3,9 @@
import Button from '$lib/components/ui/button/button.svelte' import Button from '$lib/components/ui/button/button.svelte'
</script> </script>
<div class="w-full h-full flex justify-center items-center"> <div class="flex h-full w-full items-center justify-center">
<div class="flex flex-col gap-12 items-center"> <div class="flex flex-col items-center gap-12">
<div class="flex flex-col gap-4 items-center"> <div class="flex flex-col items-center gap-4">
<div class="text-4xl font-bold">404</div> <div class="text-4xl font-bold">404</div>
<div class="text-4xl font-bold">Page Not Found</div> <div class="text-4xl font-bold">Page Not Found</div>
</div> </div>

@ -16,7 +16,7 @@
class="relative hidden h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex" class="relative hidden h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex"
> >
<div <div
class="relative z-20 text-primary flex items-center text-lg font-medium" class="relative z-20 flex items-center text-lg font-medium text-primary"
> >
Shortener Shortener
</div> </div>

@ -13,10 +13,10 @@
<ThemeToggle /> <ThemeToggle />
</div> </div>
<div <div
class="hidden relative h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex" class="relative hidden h-full flex-col bg-primary-foreground p-10 text-white dark:border-r lg:flex"
> >
<div <div
class="relative z-20 text-primary flex items-center text-lg font-medium" class="relative z-20 flex items-center text-lg font-medium text-primary"
> >
Shortener Shortener
</div> </div>

@ -1,5 +1,5 @@
import adapter from 'svelte-adapter-bun'; import adapter from 'svelte-adapter-bun'
import { vitePreprocess } from '@sveltejs/kit/vite'; import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
@ -11,8 +11,8 @@ const config = {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter. // If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters. // See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter() adapter: adapter(),
},
} }
};
export default config; export default config

@ -1,4 +1,4 @@
import { fontFamily } from 'tailwindcss/defaultTheme'; import { fontFamily } from 'tailwindcss/defaultTheme'
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const config = { const config = {
@ -59,6 +59,6 @@ const config = {
}, },
}, },
}, },
}; }
export default config; export default config

@ -1,6 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'; import { defineConfig } from 'vite'
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()] plugins: [sveltekit()],
}); })

Loading…
Cancel
Save