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,
"trailingComma": "all",
"printWidth": 80,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

Binary file not shown.

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

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

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

@ -1,13 +1,13 @@
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')
const config = {
plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(),
//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">
<head>
<meta charset="utf-8" />

@ -9,9 +9,9 @@
import { goto } from '$app/navigation'
</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 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>
<ThemeToggle />
</div>
@ -19,11 +19,11 @@
<div class="pb-4">Projects</div>
<Separator />
</div>
<div class="flex justify-between items-center">
<div class="flex items-center justify-between">
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Avatar.Root>
<Avatar.Image src="github.com/shadcn.png" alt="@shadcn" />
<Avatar.Image src="" alt="@shadcn" />
<Avatar.Fallback><User /></Avatar.Fallback>
</Avatar.Root>
</DropdownMenu.Trigger>

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

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

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

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

@ -13,7 +13,7 @@
<CheckboxPrimitive.Root
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,
)}
bind:checked
@ -21,7 +21,7 @@
on:click
>
<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:isIndeterminate
>

@ -14,7 +14,7 @@
<DropdownMenuPrimitive.CheckboxItem
bind:checked
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,
)}
{...$$restProps}

@ -14,7 +14,7 @@
<DropdownMenuPrimitive.Item
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',
className,
)}

@ -13,7 +13,7 @@
<DropdownMenuPrimitive.RadioItem
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,
)}
{value}

@ -13,7 +13,7 @@
<input
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,
)}
bind:value

@ -18,7 +18,7 @@
{disabled}
{label}
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,
)}
{...$$restProps}

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

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

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

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

@ -13,10 +13,10 @@
<ThemeToggle />
</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
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
</div>

@ -1,5 +1,5 @@
import adapter from 'svelte-adapter-bun';
import { vitePreprocess } from '@sveltejs/kit/vite';
import adapter from 'svelte-adapter-bun'
import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').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.
// 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.
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} */
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 { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [sveltekit()]
});
plugins: [sveltekit()],
})

Loading…
Cancel
Save