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,13 +1,13 @@
 ### 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
 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',
-    '@nuxt/postcss8'
+    '@nuxtjs/pwa'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules