diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 95aefff..0000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,35 +0,0 @@ -/* eslint-env node */ -require('@rushstack/eslint-patch/modern-module-resolution') - -module.exports = { - root: true, - extends: [ - 'plugin:vue/vue3-essential', - 'eslint:recommended', - '@vue/eslint-config-typescript', - '@vue/eslint-config-prettier/skip-formatting' - ], - overrides: [ - { - files: [ - '**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}', - 'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', - 'cypress/support/**/*.{js,ts,jsx,tsx}' - ], - extends: ['plugin:cypress/recommended'] - } - ], - parserOptions: { - ecmaVersion: 'latest' - }, - rules: { - indent: ['error', 2, { SwitchCase: 1 }], - 'prettier/prettier': [ - 'error', - { - endOfLine: 'auto' - } - ], - 'vue/multi-word-component-names': 'off' - } -} diff --git a/.gitignore b/.gitignore index 8ee54e8..6575dcc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,30 +1,28 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + # Logs logs *.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* -node_modules +# Misc .DS_Store -dist -dist-ssr -coverage -*.local - -/cypress/videos/ -/cypress/screenshots/ - -# Editor directories and files -.vscode/* -!.vscode/extensions.json +.fleet .idea -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? -*.tsbuildinfo +# Local env files +.env +.env.* +!.env.example + +# Supabase +.branches +.temp diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..5bee2d4 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +# https://pnpm.io/npmrc#shamefully-hoist +# Fixes: WARN Failed to resolve dependency: @supabase/gotrue-js, present in 'optimizeDeps.include' +shamefully-hoist=true diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index 93ea3e7..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "recommendations": [ - "Vue.volar", - "dbaeumer.vscode-eslint", - "esbenp.prettier-vscode" - ] -} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d259bb4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "eslint.experimental.useFlatConfig": true, + "editor.indentSize": "tabSize", + "editor.tabSize": 2, +} \ No newline at end of file diff --git a/README.md b/README.md index 1d3a6b8..f5db2a2 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,75 @@ -# Leim Tools -A congregate of tools used to visualize TTRPG elements and help content creators (mostly me for now tbh) build their worlds. +# Nuxt 3 Minimal Starter -## Timeline -Visual helper for time-related data, such as events, eras and characters. Helpful to know how old a character is while something is happening in the world, or how far two events are separated in the timeline. +Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install the dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/app.vue b/app.vue new file mode 100644 index 0000000..a8e9e84 --- /dev/null +++ b/app.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/assets/main.css b/assets/main.css new file mode 100644 index 0000000..2cbcd24 --- /dev/null +++ b/assets/main.css @@ -0,0 +1,294 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 245 58% 51%; + --primary-foreground: 0 0% 100%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --success: 156 72% 67%; + --success-muted: 156 72% 90%; + --success-foreground: 222.2 84% 4.9%; + + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 180 0 4.9%; + --foreground: 210 40% 98%; + + --muted: 244 47% 20%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 180 0 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 180 0 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217 0 10%; + --input: 244 47% 20%; + + --primary: 245 58% 51%; + --primary-foreground: 0 0% 100%; + + --secondary: 244 47% 20%; + --secondary-foreground: 210 40% 98%; + + --accent: 244 47% 20%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --success: 142 72% 29%; + --success-muted: 142 72% 10%; + --success-foreground: 210 40% 98%; + + --ring: 212.7 26.8% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + +/* Colors */ +.event-red { + @apply text-slate-900 bg-red-500 hover:bg-red-600 +} +.event-orange { + @apply text-slate-900 bg-orange-500 hover:bg-orange-600 +} +.event-amber { + @apply text-slate-900 bg-amber-500 hover:bg-amber-600 +} +.event-yellow { + @apply text-slate-900 bg-yellow-600 hover:bg-yellow-700 +} +.event-lime { + @apply text-slate-900 bg-lime-500 hover:bg-lime-600 +} +.event-green { + @apply text-white bg-green-600 hover:bg-green-700 +} +.event-emerald { + @apply text-white bg-emerald-600 hover:bg-emerald-700 +} +.event-teal { + @apply text-white bg-teal-600 hover:bg-teal-700 +} +.event-cyan { + @apply text-white bg-cyan-600 hover:bg-cyan-700 +} +.event-sky { + @apply text-white bg-sky-600 hover:bg-sky-700 +} +.event-blue { + @apply text-white bg-blue-600 hover:bg-blue-700 +} +.event-indigo { + @apply text-white bg-indigo-600 hover:bg-indigo-700 +} +.event-violet { + @apply text-white bg-violet-600 hover:bg-violet-700 +} +.event-purple { + @apply text-white bg-purple-600 hover:bg-purple-700 +} +.event-fuchsia { + @apply text-white bg-fuchsia-600 hover:bg-fuchsia-700 +} +.event-pink { + @apply text-white bg-pink-700 hover:bg-pink-800 +} +.event-rose { + @apply text-white bg-rose-700 hover:bg-rose-800 +} +.event-black { + @apply text-white bg-stone-500 hover:bg-stone-700 +} +.event-white { + @apply text-slate-900 bg-white hover:bg-yellow-200 border-[1px] border-slate-300 +} + +.dark .event-details-red { + --base-color: var(--color-red-800); +} +.dark .event-details-orange { + --base-color: var(--color-orange-800); +} +.dark .event-details-amber { + --base-color: var(--color-amber-800); +} +.dark .event-details-yellow { + --base-color: var(--color-yellow-800); +} +.dark .event-details-lime { + --base-color: var(--color-lime-800); +} +.dark .event-details-green { + --base-color: var(--color-green-800); +} +.dark .event-details-emerald { + --base-color: var(--color-emerald-800); +} +.dark .event-details-teal { + --base-color: var(--color-teal-800); +} +.dark .event-details-cyan { + --base-color: var(--color-cyan-800); +} +.dark .event-details-sky { + --base-color: var(--color-sky-800); +} +.dark .event-details-blue { + --base-color: var(--color-blue-800); +} +.dark .event-details-indigo { + --base-color: var(--color-indigo-800); +} +.dark .event-details-violet { + --base-color: var(--color-violet-800); +} +.dark .event-details-purple { + --base-color: var(--color-purple-800); +} +.dark .event-details-fuchsia { + --base-color: var(--color-fuchsia-800); +} +.dark .event-details-pink { + --base-color: var(--color-pink-800); +} +.dark .event-details-rose { + --base-color: var(--color-rose-800); +} +.dark .event-details-black { + --base-color: var(--color-stone-800); +} +.dark .event-details-white { + --base-color: var(--color-white); +} + +.event-details-red { + --base-color: var(--color-red-300); +} +.event-details-orange { + --base-color: var(--color-orange-300); +} +.event-details-amber { + --base-color: var(--color-amber-300); +} +.event-details-yellow { + --base-color: var(--color-yellow-300); +} +.event-details-lime { + --base-color: var(--color-lime-300); +} +.event-details-green { + --base-color: var(--color-green-300); +} +.event-details-emerald { + --base-color: var(--color-emerald-300); +} +.event-details-teal { + --base-color: var(--color-teal-300); +} +.event-details-cyan { + --base-color: var(--color-cyan-300); +} +.event-details-sky { + --base-color: var(--color-sky-300); +} +.event-details-blue { + --base-color: var(--color-blue-300); +} +.event-details-indigo { + --base-color: var(--color-indigo-300); +} +.event-details-violet { + --base-color: var(--color-violet-300); +} +.event-details-purple { + --base-color: var(--color-purple-300); +} +.event-details-fuchsia { + --base-color: var(--color-fuchsia-300); +} +.event-details-pink { + --base-color: var(--color-pink-300); +} +.event-details-rose { + --base-color: var(--color-rose-300); +} +.event-details-black { + --base-color: var(--color-stone-300); +} +.event-details-white { + --base-color: var(--color-white); +} + +.event-details { + --bg-color: color-mix(in srgb, var(--base-color), var(--color-white) 80%); + --border-color: color-mix(in srgb, var(--base-color), var(--color-white) 50%); + background-color: var(--bg-color); + border-color: var(--border-color); + + hr { + border-color: var(--border-color); + } +} + +.dark .event-details { + --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%); + --border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%); +} + +.fade-enter-active, +.fade-leave-active { + transition: all .5s ease; +} +.fade-delay-enter-active, +.fade-delay-leave-active { + transition: all .5s ease 1s; +} + +.fade-enter-from, +.fade-leave-to, +.fade-delay-enter-from, +.fade-delay-leave-to { + opacity: 0; + visibility: hidden; +} diff --git a/components.json b/components.json index 9c826ef..3dc3dc9 100644 --- a/components.json +++ b/components.json @@ -2,13 +2,14 @@ "$schema": "https://shadcn-vue.com/schema.json", "style": "default", "typescript": true, + "tsConfigPath": ".nuxt/tsconfig.json", "tailwind": { "config": "tailwind.config.js", - "css": "src/assets/main.css", + "css": "assets/main.css", "baseColor": "slate", "cssVariables": true }, - "framework": "vite", + "framework": "nuxt", "aliases": { "components": "@/components", "utils": "@/lib/utils" diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue new file mode 100644 index 0000000..2dd6b7f --- /dev/null +++ b/components/calendar/Calendar.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/components/calendar/CalendarCurrentDate.vue b/components/calendar/CalendarCurrentDate.vue new file mode 100644 index 0000000..279e514 --- /dev/null +++ b/components/calendar/CalendarCurrentDate.vue @@ -0,0 +1,32 @@ + + + diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue new file mode 100644 index 0000000..31d9a4d --- /dev/null +++ b/components/calendar/CalendarEvent.vue @@ -0,0 +1,86 @@ + + + diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue new file mode 100644 index 0000000..cbbc47f --- /dev/null +++ b/components/calendar/CalendarEventDetails.vue @@ -0,0 +1,207 @@ + + + diff --git a/src/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue similarity index 52% rename from src/components/calendar/CalendarMenu.vue rename to components/calendar/CalendarMenu.vue index d44762b..ce2b3da 100644 --- a/src/components/calendar/CalendarMenu.vue +++ b/components/calendar/CalendarMenu.vue @@ -1,19 +1,13 @@