Переписывание стилей на tailwind, обновление всех возможных зависимос…

…тей и исправление огромного количества проблем (#69)
wokalek · Feb 26, 2024 · aff4bfc · aff4bfc
1 parent 63b47ee
commit aff4bfc
Show file tree

Hide file tree

Showing 87 changed files with 4,793 additions and 5,169 deletions.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -10,9 +10,6 @@ services:
     depends_on:
       fonts:
         condition: service_completed_successfully
-    ports:
-      - 4000:4000 # Для работы HMR
-      - 24678:24678 # Для работы HMR
     volumes:
       - nuxt-devfolder:/nuxt/.nuxt
       - ./nuxt/nuxt.config.ts:/nuxt/nuxt.config.ts
@@ -28,6 +25,8 @@ services:
       - nuxt
     ports:
       - 80:80
+      - 4000:4000 # Для работы HMR
+      - 24678:24678 # Для работы HMR
     volumes:
       - ./nginx/conf/dev.conf:/etc/nginx/nginx.conf
       - ./nginx/snippets:/etc/nginx/snippets

diff --git a/docker-compose.prod-test.yml b/docker-compose.prod-test.yml
@@ -0,0 +1,40 @@
+version: "3.8"
+
+services:
+  nuxt:
+    container_name: wokalek-nuxt
+    build:
+      context: .
+      dockerfile: docker/nuxt/prod.Dockerfile
+    env_file: env/nuxt/.env
+    depends_on:
+      fonts:
+        condition: service_completed_successfully
+    volumes:
+      - nuxt-devfolder:/nuxt/.nuxt
+      - ./nuxt/src:/nuxt/src
+      - ./static:/nuxt/.output/public/static
+
+  nginx:
+    container_name: wokalek-nginx
+    user: root
+    image: wokalek/nginx-brotli:1.25.2
+    depends_on:
+      - nuxt
+    ports:
+      - 80:80
+    volumes:
+      - ./nginx/conf/dev.conf:/etc/nginx/nginx.conf
+      - ./nginx/snippets:/etc/nginx/snippets
+      - ./static:/usr/share/nginx/html/static
+
+  fonts:
+    container_name: wokalek-fonts
+    image: wokalek/glyphhanger:latest
+    entrypoint: ["bash", "/build.sh"]
+    volumes:
+      - ./fonts/build.sh:/build.sh
+      - ./nuxt/src/assets/fonts:/app
+
+volumes:
+  nuxt-devfolder:
diff --git a/docker/nuxt/dev.Dockerfile b/docker/nuxt/dev.Dockerfile
@@ -1,4 +1,4 @@
-FROM node:21.4.0-alpine
+FROM node:20.11.1-alpine
 
 WORKDIR /nuxt
 
@@ -8,5 +8,6 @@ RUN npm i -g pnpm
 
 COPY ./nuxt/package.json ./nuxt/pnpm-lock.yaml ./nuxt/.npmrc ./
 RUN pnpm install --frozen-lockfile
+COPY ./nuxt/.eslintrc ./nuxt/tailwind.config.ts ./
 
-ENTRYPOINT [ "pnpm", "run", "dev", "--host" ]
+ENTRYPOINT [ "pnpm", "run", "dev" ]
diff --git a/docker/nuxt/prod.Dockerfile b/docker/nuxt/prod.Dockerfile
@@ -1,12 +1,12 @@
-FROM node:21.4.0-alpine
+FROM node:20.11.1-alpine
 
 WORKDIR /nuxt
 
 RUN apk update && apk upgrade
 
 RUN npm i -g pnpm
 
-COPY ./nuxt/package.json ./nuxt/pnpm-lock.yaml ./nuxt/.npmrc ./
+COPY ./nuxt/package.json ./nuxt/pnpm-lock.yaml ./nuxt/.npmrc ./nuxt/.eslintrc ./nuxt/tailwind.config.ts ./
 RUN pnpm install --prod --frozen-lockfile
 
 COPY ./nuxt/nuxt.config.ts ./nuxt/tsconfig.json ./env/nuxt/.env ./

diff --git a/env/nuxt/example.env b/env/nuxt/example.env
@@ -1,3 +1,5 @@
+TZ = Europe/Moscow
+
 DOMAIN = wokalek.ru
 
 NUXT_PUBLIC_UMAMI_HOST = https://statistic.wokalek.ru

diff --git a/nginx/conf/dev.conf b/nginx/conf/dev.conf
@@ -4,11 +4,14 @@ events {
 }
 
 http {
+  include snippets/upgrade_conn.conf;
   include snippets/expires.conf;
   include snippets/compression.conf;
 
   server {
-    include snippets/http.conf;
+    listen 80;
+    listen 4000;
+    listen 24678;
 
     location ~ ^/static {
       root /usr/share/nginx/html;

diff --git a/nginx/conf/prod.conf b/nginx/conf/prod.conf
@@ -6,6 +6,7 @@ events {
 http {
   server_tokens off;
 
+  include snippets/upgrade_conn.conf;
   include snippets/expires.conf;
   include snippets/compression.conf;
   include snippets/log_format_unescape.conf;

diff --git a/nginx/snippets/proxy_headers.conf b/nginx/snippets/proxy_headers.conf
@@ -1,4 +1,7 @@
 proxy_redirect off;
+proxy_http_version 1.1;
+proxy_set_header Upgrade $http_upgrade;
+proxy_set_header Connection "upgrade";
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

diff --git a/nginx/snippets/upgrade_conn.conf b/nginx/snippets/upgrade_conn.conf
@@ -0,0 +1,4 @@
+map $http_upgrade $connection_upgrade {
+  default upgrade;
+  '' close;
+}
diff --git a/nuxt/.eslintrc b/nuxt/.eslintrc
@@ -1,14 +1,13 @@
 {
   "root": true,
   "extends": [
-    "@nuxtjs",
     "@nuxtjs/eslint-config-typescript"
   ],
   "rules": {
     "comma-dangle": ["error", "always-multiline"],
-    "func-call-spacing": 0,
     "vue/multi-word-component-names": 0,
     "vue/no-multiple-template-root": 0,
-    "vue/singleline-html-element-content-newline": 0
+    "vue/singleline-html-element-content-newline": 0,
+    "vue/no-v-html": 0
   }
 }
diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
@@ -1,19 +1,20 @@
-import remarkMath from 'remark-math'
-import rehypeKatex from 'rehype-katex'
-
 import manifest from './src/manifest'
 
 const config: ReturnType<typeof defineNuxtConfig> = {
   telemetry: false,
+  devtools: { enabled: true },
   srcDir: 'src',
   app: {
-    rootId: 'app',
+    rootId: 'nuxt',
   },
   extends: [
     'nuxt-umami',
   ],
   modules: [
+    '@nuxtjs/eslint-module',
+    '@nuxtjs/tailwindcss',
     '@nuxtjs/robots',
+    '@nuxtjs/sitemap',
     '@nuxtjs/color-mode',
     '@nuxtjs/fontaine',
     '@nuxtjs/device',
@@ -23,10 +24,21 @@ const config: ReturnType<typeof defineNuxtConfig> = {
     '@vite-pwa/nuxt',
     'nuxt-typed-router',
     'nuxt-svgo',
-    'nuxt-simple-sitemap',
     'nuxt-schema-org',
     'nuxt-lodash',
   ],
+  vite: {
+    build: {
+      target: 'esnext',
+      cssMinify: 'lightningcss',
+    },
+    optimizeDeps: {
+      include: [
+        // https://github.com/cipami/nuxt-lodash/issues/53#issuecomment-1870583442
+        'lodash-es',
+      ],
+    },
+  },
   appConfig: {
     umami: {
       ignoreLocalhost: true,
@@ -47,22 +59,15 @@ const config: ReturnType<typeof defineNuxtConfig> = {
       },
     },
   },
-  vite: {
-    build: {
-      target: 'esnext',
-      cssMinify: 'lightningcss',
-    },
-    css: {
-      preprocessorOptions: {
-        sass: {
-          additionalData: '@use "@/assets/sass/resources/index.sass" as *\n',
-        },
-      },
-    },
+  eslint: {
+    lintOnStart: false,
   },
   css: [
-    '@/assets/sass/global/index.sass',
+    '@/assets/sass/index.sass',
   ],
+  tailwindcss: {
+    cssPath: '~/assets/sass/vendors/tailwind.sass',
+  },
   postcss: {
     plugins: {
       'postcss-easings': {},
@@ -74,32 +79,31 @@ const config: ReturnType<typeof defineNuxtConfig> = {
   device: {
     refreshOnResize: true,
   },
-  image: {
-    densities: [1, 2, 3],
-  },
   content: {
     highlight: {
+      langs: ['css', 'sass', 'bash'],
       theme: {
-        default: 'min-light',
-        'dark-mode': 'min-dark',
+        default: 'github-light',
+        'dark-mode': 'tokyo-night',
       },
     },
     markdown: {
       anchorLinks: {
         exclude: [1, 2, 3, 4, 5, 6],
       },
-      tags: {
-        // remark-math и rehype-katex фикс варнинга «Failed to resolve component»
-        mo: 'empty', mi: 'empty', mn: 'empty', mrow: 'empty', msub: 'empty', mtext: 'empty', frac: 'empty', mfrac: 'empty', semantics: 'empty', annotation: 'empty',
-      },
       remarkPlugins: {
-        'remark-math': { instance: remarkMath },
+        'remark-math': {},
       },
       rehypePlugins: {
-        'rehype-katex': { instance: rehypeKatex },
+        'rehype-katex': {
+          output: 'html',
+        },
       },
     },
   },
+  image: {
+    format: ['avif'],
+  },
   pwa: {
     manifest,
   },

diff --git a/nuxt/package.json b/nuxt/package.json
@@ -11,44 +11,45 @@
     "fix": "eslint --ext .ts --ext .vue . --fix"
   },
   "dependencies": {
-    "@nuxt/content": "2.8.2",
-    "@nuxt/image": "^1.1.0",
-    "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/device": "^3.1.1",
-    "@nuxtjs/fontaine": "^0.4.1",
-    "@nuxtjs/robots": "^3.0.0",
-    "@sass-collective/strip-unit": "^3.1.2",
-    "@vite-pwa/nuxt": "^0.3.6",
-    "@vueuse/core": "^10.7.0",
-    "@vueuse/nuxt": "^10.7.0",
-    "dayjs": "^1.11.10",
-    "image-size": "^1.0.2",
-    "kaokun": "^1.1.10",
-    "lightningcss": "^1.22.1",
-    "nanoid": "^5.0.4",
-    "normalize.css": "^8.0.1",
-    "nuxt": "^3.9.0",
-    "nuxt-lodash": "^2.5.3",
-    "nuxt-schema-org": "^3.3.0",
-    "nuxt-simple-sitemap": "^4.2.0",
-    "nuxt-svgo": "^3.7.0",
-    "nuxt-typed-router": "^3.5.0",
-    "nuxt-umami": "^2.5.6",
+    "@nuxt/content": "2.12.0",
+    "@nuxt/image": "1.3.0",
+    "@nuxtjs/color-mode": "3.3.2",
+    "@nuxtjs/device": "3.1.1",
+    "@nuxtjs/eslint-module": "4.1.0",
+    "@nuxtjs/fontaine": "0.4.1",
+    "@nuxtjs/robots": "3.0.0",
+    "@nuxtjs/sitemap": "5.1.0",
+    "@nuxtjs/tailwindcss": "6.11.4",
+    "@vite-pwa/nuxt": "0.5.0",
+    "@vueuse/core": "10.8.0",
+    "@vueuse/nuxt": "10.8.0",
+    "dayjs": "1.11.10",
+    "hyphen": "1.10.4",
+    "image-size": "1.1.1",
+    "kaokun": "1.1.10",
+    "lightningcss": "1.24.0",
+    "nuxt": "3.10.3",
+    "nuxt-lodash": "2.5.3",
+    "nuxt-schema-org": "3.3.4",
+    "nuxt-svgo": "4.0.0",
+    "nuxt-typed-router": "3.6.1",
+    "nuxt-umami": "2.5.7",
     "oh-vue-icons": "1.0.0-rc3",
-    "photoswipe": "^5.4.3",
-    "postcss": "^8.4.32",
-    "postcss-easings": "^4.0.0",
-    "rehype-katex": "^6.0.3",
-    "remark-math": "^5.1.1",
-    "sass": "^1.69.5",
-    "timeago.js": "^4.0.2",
-    "vanilla-lazyload": "^17.8.5",
-    "vue": "^3.3.13",
-    "vue-router": "^4.2.5"
+    "photoswipe": "5.4.3",
+    "postcss": "8.4.35",
+    "postcss-easings": "4.0.0",
+    "rehype-katex": "7.0.0",
+    "remark-math": "6.0.0",
+    "sass": "1.71.1",
+    "timeago.js": "4.0.2",
+    "vue": "3.4.20",
+    "vue-router": "4.3.0"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@types/node": "^20.10.5",
-    "eslint": "^8.56.0"
+    "@nuxt/devtools": "1.0.8",
+    "@nuxtjs/eslint-config-typescript": "12.1.0",
+    "@types/hyphen": "1.6.7",
+    "@types/node": "20.11.20",
+    "eslint": "8.57.0"
   }
 }