first commit

.eslintignore

@@ -0,0 +1 @@
+.nuxt

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "@antfu",
+    "@unocss"
+  ]
+}

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

nuxt.config.ts

@@ -0,0 +1,30 @@
+export default defineNuxtConfig({
+  srcDir: 'src',
+
+  build: {
+    transpile: ['trpc-nuxt'],
+  },
+
+  modules: [
+    '@pinia/nuxt',
+    '@pinia-plugin-persistedstate/nuxt',
+    '@unocss/nuxt',
+    '@nuxt/devtools',
+    '@nuxtjs/color-mode',
+    '@nuxtjs/fontaine',
+    '@vueuse/nuxt',
+    '@nuxt/content',
+    'nuxt-icon',
+  ],
+
+  devtools: {
+    enabled: true,
+    vscode: {
+      enabled: true,
+      startOnBoot: true,
+      port: 3001,
+      reuseExistingServer: true,
+      mode: 'tunnel',
+    },
+  },
+})

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "prisma generate || true && nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@nuxt/content": "^2.6.0",
+    "@nuxt/image": "^0.7.1",
+    "@nuxtjs/color-mode": "^3.2.0",
+    "@pinia/nuxt": "^0.4.9",
+    "@prisma/client": "^4.13.0",
+    "@trpc/client": "^10.21.2",
+    "@trpc/server": "^10.21.2",
+    "@vueuse/motion": "^2.0.0-beta.12",
+    "nuxt-icon": "^0.4.0",
+    "pinia": "^2.0.35",
+    "sass": "^1.62.1",
+    "superjson": "^1.12.3",
+    "trpc-nuxt": "^0.9.0",
+    "unocss": "^0.51.8",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "0.26.3",
+    "@nuxt/devtools": "^0.4.2",
+    "@nuxtjs/fontaine": "^0.2.5",
+    "@pinia-plugin-persistedstate/nuxt": "^1.1.1",
+    "@types/node": "^18",
+    "@unocss/eslint-config": "^0.51.8",
+    "@unocss/nuxt": "^0.51.8",
+    "@vueuse/core": "^10.1.0",
+    "@vueuse/nuxt": "^10.1.0",
+    "eslint": "^8.39.0",
+    "nuxt": "^3.4.2",
+    "prisma": "^4.13.0",
+    "typescript": "^5.0.4",
+    "unocss-preset-scrollbar": "^0.2.1"
+  }
+}

prisma/schema.prisma

@@ -0,0 +1,60 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mysql"
+  url      = env("DATABASE_URL")
+}
+
+model Maintenance {
+  id        Int      @id @default(autoincrement())
+  reason    String
+  beginAt   DateTime @default(now())
+  endAt     DateTime @default(now())
+  createdAt DateTime @default(now())
+}
+
+model Announcement {
+  id        Int      @id @default(autoincrement())
+  createdAt DateTime @default(now())
+  content   String
+}
+
+model Category {
+  id        Int                   @id @default(autoincrement())
+  createdAt DateTime              @default(now())
+  slug      String
+  name      String
+  talents   CategoriesOnTalents[]
+}
+
+model Talent {
+  id         Int                   @id @default(autoincrement())
+  createdAt  DateTime              @default(now())
+  logo       String
+  name       String                @unique
+  website    String
+  work       String
+  favorite   Boolean               @default(false)
+  categories CategoriesOnTalents[]
+}
+
+model CategoriesOnTalents {
+  talent     Talent   @relation(fields: [talentId], references: [id])
+  talentId   Int
+  category   Category @relation(fields: [categoryId], references: [id])
+  categoryId Int
+
+  @@id([talentId, categoryId])
+  @@index([talentId])
+  @@index([categoryId])
+}
+
+model Post {
+  id        Int      @id @default(autoincrement())
+  slug      String   @unique
+  createdAt DateTime @default(now())
+  views     Int      @default(0)
+  title     String
+}

src/composables/useTheme.ts

@@ -0,0 +1,61 @@
+import { useThemeStore } from '~/store/theme'
+import { ColorsTheme } from '~~/types'
+
+export const useTheme = () => {
+  const { getColor } = useThemeStore()
+
+  const getThemeTextColor = computed(() => {
+    switch (getColor.value) {
+      case ColorsTheme.BLUE:
+        return 'text-blue-500'
+      case ColorsTheme.ROSE:
+        return 'text-rose-500'
+      case ColorsTheme.ORANGE:
+        return 'text-orange-500'
+      case ColorsTheme.CYAN:
+        return 'text-cyan-500'
+      case ColorsTheme.GREEN:
+        return 'text-green-500'
+      case ColorsTheme.PURPLE:
+        return 'text-purple-500'
+      case ColorsTheme.RED:
+        return 'text-red-500'
+      case ColorsTheme.YELLOW:
+        return 'text-yellow-500'
+      case ColorsTheme.BLACK:
+        return 'text-black dark:text-white'
+      case ColorsTheme.WHITE:
+        return 'text-black dark:text-white'
+    }
+  })
+
+  const getThemeBackgroundColor = computed(() => {
+    switch (getColor.value) {
+      case ColorsTheme.BLUE:
+        return 'bg-blue-500'
+      case ColorsTheme.ROSE:
+        return 'bg-rose-500'
+      case ColorsTheme.ORANGE:
+        return 'bg-orange-500'
+      case ColorsTheme.CYAN:
+        return 'bg-cyan-500'
+      case ColorsTheme.GREEN:
+        return 'bg-green-500'
+      case ColorsTheme.PURPLE:
+        return 'bg-purple-500'
+      case ColorsTheme.RED:
+        return 'bg-red-500'
+      case ColorsTheme.YELLOW:
+        return 'bg-yellow-500'
+      case ColorsTheme.BLACK:
+        return 'bg-black dark:(bg-white text-black) text-white'
+      case ColorsTheme.WHITE:
+        return 'bg-black dark:(bg-white text-black) text-white'
+    }
+  })
+
+  return {
+    getThemeBackgroundColor,
+    getThemeTextColor,
+  }
+}

src/pages/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useThemeStore } from '~/store/theme'
+import { ColorsTheme } from '~~/types'
+
+const { getColor, getTheme, nextColor, nextTheme } = useThemeStore()
+const { getThemeTextColor, getThemeBackgroundColor } = useTheme()
+</script>
+
+<template>
+  <section>
+    <h1 :class="`text-sm ${getThemeTextColor}`">
+      Main page
+    </h1>
+    <h1 :class="`${getThemeBackgroundColor}`">
+      Main Page
+    </h1>
+    <div>
+      Current color : {{ getColor }}
+    </div>
+    <div>
+      Theme Name : {{ getTheme.name }}
+    </div>
+    <div>
+      Theme colors : {{ getTheme.colors.map((color) => color.charAt(0).toUpperCase() + color.slice(1)).join(', ') }}
+    </div>
+    <div @click="nextColor()">
+      setNextColor()
+    </div>
+    <div @click="nextTheme()">
+      setNextTheme()
+    </div>
+  </section>
+</template>

src/plugins/trpc.ts

@@ -0,0 +1,20 @@
+import SuperJSON from 'superjson'
+import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
+import type { AppRouter } from '~/server/trpc/routers'
+
+export default defineNuxtPlugin(() => {
+  const trpc = createTRPCNuxtClient<AppRouter>({
+    transformer: SuperJSON,
+    links: [
+      httpBatchLink({
+        url: '/api/trpc',
+      }),
+    ],
+  })
+
+  return {
+    provide: {
+      trpc,
+    },
+  }
+})

src/server/api/trpc/[trpc].ts

@@ -0,0 +1,8 @@
+import { createNuxtApiHandler } from 'trpc-nuxt'
+import { createContext } from '~/server/trpc/context'
+import { appRouter } from '~/server/trpc/routers'
+
+export default createNuxtApiHandler({
+  createContext,
+  router: appRouter,
+})

src/server/prisma.ts

@@ -0,0 +1,11 @@
+import { PrismaClient } from '@prisma/client'
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
+
+export const prisma = globalForPrisma.prisma
+ || new PrismaClient({
+   log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
+ })
+
+if (process.env.NODE_ENV !== 'production')
+  globalForPrisma.prisma = prisma

src/server/trpc/context.ts

@@ -0,0 +1,11 @@
+import type { inferAsyncReturnType } from '@trpc/server'
+import type { H3Event } from 'h3'
+import { prisma } from '~/server/prisma'
+
+export function createContext(_event: H3Event) {
+  return {
+    prisma,
+  }
+}
+
+export type Context = inferAsyncReturnType<typeof createContext>

src/server/trpc/routers/index.ts

@@ -0,0 +1,7 @@
+import { router } from '~/server/trpc/trpc'
+
+export const appRouter = router({
+
+})
+
+export type AppRouter = typeof appRouter

src/server/trpc/trpc.ts

@@ -0,0 +1,12 @@
+import { initTRPC } from '@trpc/server'
+import SuperJSON from 'superjson'
+import type { Context } from '~/server/trpc/context'
+
+const trpc = initTRPC.context<Context>().create({
+  transformer: SuperJSON,
+})
+
+export const publicProcedure = trpc.procedure
+export const router = trpc.router
+export const middleware = trpc.middleware
+export const mergeRouters = trpc.mergeRouters

src/store/theme.ts

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+import type { ColorsTheme, Theme } from '~~/types'
+import { THEMES, Themes } from '~~/types'
+
+export const useThemeStore = defineStore(
+  'theme',
+  () => {
+    const currentTheme = ref<Theme>(Themes[THEMES.RainbowTheme])
+    const currentColor = ref<ColorsTheme>(currentTheme.value.colors[0])
+
+    const nextTheme = () => {
+      const themes = Object.values(Themes)
+      const currentIndex = themes.findIndex(theme => theme.name === currentTheme.value.name)
+      const nextIndex = (currentIndex + 1) % themes.length
+      currentTheme.value = themes[nextIndex]
+      currentColor.value = currentTheme.value.colors[0]
+    }
+
+    const nextColor = () => {
+      const colors = currentTheme.value.colors
+      const currentIndex = colors.indexOf(currentColor.value)
+      const nextIndex = (currentIndex + 1) % colors.length
+      currentColor.value = colors[nextIndex]
+    }
+
+    const getTheme = computed(() => currentTheme)
+    const getColor = computed(() => currentColor)
+
+    return {
+      getTheme,
+      getColor,
+      nextTheme,
+      nextColor,
+    }
+  },
+  {
+    persist: true,
+  },
+)

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

types.ts

@@ -0,0 +1,59 @@
+export enum ColorsTheme {
+  ORANGE = 'orange',
+  YELLOW = 'yellow',
+  GREEN = 'green',
+  BLUE = 'blue',
+  PURPLE = 'purple',
+  ROSE = 'rose',
+  RED = 'red',
+  CYAN = 'cyan',
+  BLACK = 'black',
+  WHITE = 'white',
+}
+
+export interface Theme {
+  name: String
+  colors: ColorsTheme[]
+}
+
+const RainbowTheme: Theme = {
+  name: 'Rainbow',
+  colors: [
+    ColorsTheme.ORANGE,
+    ColorsTheme.YELLOW,
+    ColorsTheme.GREEN,
+    ColorsTheme.BLUE,
+    ColorsTheme.PURPLE,
+    ColorsTheme.ROSE,
+    ColorsTheme.RED,
+  ],
+}
+
+const XMasTheme: Theme = {
+  name: 'Xmas',
+  colors: [ColorsTheme.RED, ColorsTheme.GREEN],
+}
+
+const EasterTheme: Theme = {
+  name: 'Easter',
+  colors: [ColorsTheme.ROSE, ColorsTheme.YELLOW, ColorsTheme.CYAN],
+}
+
+const BlackAndWhiteTheme: Theme = {
+  name: 'B & W',
+  colors: [ColorsTheme.BLACK, ColorsTheme.WHITE],
+}
+
+export enum THEMES {
+  RainbowTheme,
+  EasterTheme,
+  XMasTheme,
+  BlackAndWhiteTheme,
+}
+
+export const Themes = {
+  [THEMES.RainbowTheme]: RainbowTheme,
+  [THEMES.EasterTheme]: EasterTheme,
+  [THEMES.XMasTheme]: XMasTheme,
+  [THEMES.BlackAndWhiteTheme]: BlackAndWhiteTheme,
+}

uno.config.ts

@@ -0,0 +1,28 @@
+import {
+  defineConfig, presetAttributify, presetIcons,
+  presetTypography, presetUno, presetWind,
+  transformerDirectives, transformerVariantGroup,
+} from 'unocss'
+import { presetScrollbar } from 'unocss-preset-scrollbar'
+import { ColorsTheme } from './types'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+    presetScrollbar(),
+    presetWind(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+  safelist: [
+    ...Object.values(ColorsTheme).map(color => `text-${color}-500`),
+    'text-white', 'text-black',
+    ...Object.values(ColorsTheme).map(color => `bg-${color}-500`),
+    'bg-white', 'bg-black',
+  ],
+})