Update to node20

- updates many dependencies
- removes @nuxtjs/tailwindcss and postcss8
- pkg targets are using node18 until node20 targets are available

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=16
+ARG VARIANT=20
 FROM mcr.microsoft.com/devcontainers/javascript-node:0-${VARIANT} as base
 
 # Setup the node environment

.devcontainer/devcontainer.json

@@ -8,7 +8,7 @@
 		// Append -bullseye or -buster to pin to an OS version.
 		// Use -bullseye variants on local arm64/Apple Silicon.
 		"args": {
-			"VARIANT": "16"
+			"VARIANT": "20"
 		}
 	},
 	"mounts": [

Dockerfile

@@ -1,5 +1,5 @@
 ### STAGE 0: Build client ###
-FROM node:16-alpine AS build
+FROM node:20-alpine AS build
 WORKDIR /client
 COPY /client /client
 RUN npm ci && npm cache clean --force
@@ -7,7 +7,7 @@ RUN npm run generate
 
 ### STAGE 1: Build server ###
 FROM sandreas/tone:v0.1.5 AS tone
-FROM node:16-alpine
+FROM node:20-alpine
 
 ENV NODE_ENV=production
 

build/linuxpackager

@@ -48,7 +48,7 @@ Description: $DESCRIPTION"
 echo "$controlfile" > dist/debian/DEBIAN/control;
 
 # Package debian
-pkg -t node16-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
+pkg -t node18-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
 
 fakeroot dpkg-deb --build dist/debian
 

client/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/components/cards/LazyBookCard.vue

@@ -8,7 +8,7 @@
     <!-- Alternative bookshelf title/author/sort -->
     <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
       <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
-        <ui-tooltip :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
           <p ref="displayTitle" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator :explicit="isExplicit" />
         </ui-tooltip>

client/nuxt.config.js

@@ -39,6 +39,7 @@ module.exports = {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
+    '@/assets/tailwind.css',
     '@/assets/app.css'
   ],
 
@@ -58,9 +59,7 @@ module.exports = {
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/tailwindcss
-    '@nuxtjs/tailwindcss',
+    '@nuxtjs/pwa'
-    '@nuxtjs/pwa',
-    '@nuxt/postcss8'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules

client/package.json

@@ -23,7 +23,7 @@
     "epubjs": "^0.3.88",
     "hls.js": "^1.0.7",
     "libarchive.js": "^1.3.0",
-    "nuxt": "^2.15.8",
+    "nuxt": "^2.17.3",
     "nuxt-socket-io": "^1.1.18",
     "trix": "^1.3.1",
     "v-click-outside": "^3.1.2",
@@ -31,11 +31,9 @@
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@nuxt/postcss8": "^1.1.3",
     "@nuxtjs/pwa": "^3.3.5",
-    "@nuxtjs/tailwindcss": "^4.2.1",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.3.6",
-    "tailwindcss": "^3.1.4"
+    "tailwindcss": "^3.4.1"
   }
 }

client/tailwind.config.js

@@ -1,29 +1,18 @@
 module.exports = {
-  purge: {
+  content: [
-    content: [
+    'components/**/*.vue',
-      'components/**/*.vue',
+    'layouts/**/*.vue',
-      'layouts/**/*.vue',
+    'pages/**/*.vue',
-      'pages/**/*.vue',
+    'templates/**/*.vue',
-      'templates/**/*.vue',
+    'plugins/**/*.js',
-      'plugins/**/*.js',
+    'nuxt.config.js'
-      'nuxt.config.js'
+  ],
-    ],
+  safelist: [
-    safelist: [
+    'bg-red-600',
-      'bg-success',
+    'px-1.5',
-      'bg-red-600',
+    'min-w-5',
-      'bg-yellow-400',
+    'border-warning'
-      'text-green-500',
+  ],
-      'py-1.5',
-      'bg-info',
-      'px-1.5',
-      'min-w-5',
-      'w-3.5',
-      'h-3.5',
-      'border-warning',
-      'mb-px',
-      'text-1.5xl'
-    ],
-  },
   theme: {
     extend: {
       height: {

package.json

@@ -9,7 +9,7 @@
     "start": "node index.js",
     "client": "cd client && npm ci && npm run generate",
     "prod": "npm run client && npm ci && node prod.js",
-    "build-win": "npm run client && pkg -t node16-win-x64 -o ./dist/win/audiobookshelf -C GZip .",
+    "build-win": "npm run client && pkg -t node18-win-x64 -o ./dist/win/audiobookshelf -C GZip .",
     "build-linux": "build/linuxpackager",
     "docker": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 --push .  -t advplyr/audiobookshelf",
     "docker-amd64-local": "docker buildx build --platform linux/amd64 --load .  -t advplyr/audiobookshelf-amd64-local",
@@ -48,7 +48,7 @@
     "openid-client": "^5.6.1",
     "passport": "^0.6.0",
     "passport-jwt": "^4.0.1",
-    "sequelize": "^6.32.1",
+    "sequelize": "^6.35.2",
     "socket.io": "^4.5.4",
     "sqlite3": "^5.1.6",
     "ssrf-req-filter": "^1.1.0",

readme.md

@@ -309,7 +309,7 @@ You are now ready to start development!
 
 ### Manual Environment Setup
 
-If you don't want to use the dev container, you can still develop this project. First, you will need to install [NodeJs](https://nodejs.org/) (version 16) and [FFmpeg](https://ffmpeg.org/).
+If you don't want to use the dev container, you can still develop this project. First, you will need to install [NodeJs](https://nodejs.org/) (version 20) and [FFmpeg](https://ffmpeg.org/).
 
 Next you will need to create a `dev.js` file in the project's root directory. This contains configuration information and paths unique to your development environment. You can find an example of this file in `.devcontainer/dev.js`.