mirror of
https://github.com/unraid/api.git
synced 2026-05-18 06:29:40 -05:00
Eli Bosley
2c62e0ad09
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Streamlined Tailwind CSS integration using Vite plugin, eliminating the need for separate Tailwind config files. * Updated theme and color variables for improved consistency and maintainability. * **Style** * Standardized spacing, sizing, and font classes across all components using Tailwind’s default scale. * Reduced excessive gaps, padding, and font sizes for a more compact and cohesive UI. * Updated gradient, border, and shadow classes to match Tailwind v4 conventions. * Replaced custom pixel-based classes with Tailwind’s bracketed arbitrary value syntax where needed. * Replaced focus outline styles from `outline-none` to `outline-hidden` for consistent focus handling. * Updated flex shrink/grow utility classes to use newer shorthand forms. * Converted several component templates to use self-closing tags for cleaner markup. * Adjusted icon sizes and spacing for improved visual balance. * **Chores** * Removed legacy Tailwind/PostCSS configuration files and related scripts. * Updated and cleaned up package dependencies for Tailwind v4 and related plugins. * Removed unused or redundant build scripts and configuration exports. * Updated documentation to reflect new Tailwind v4 usage. * Removed Prettier Tailwind plugin from formatting configurations. * Removed Nuxt Tailwind module in favor of direct Vite plugin integration. * Cleaned up ESLint config by removing Prettier integration. * **Bug Fixes** * Corrected invalid or outdated Tailwind class names and syntax. * Fixed issues with max-width and other utility classes for improved layout consistency. * **Tests** * Updated test assertions to match new class names and styling conventions. * **Documentation** * Revised README and internal notes to clarify Tailwind v4 adoption and configuration changes. * Added new development notes emphasizing Tailwind v4 usage and documentation references. * **UI Components** * Enhanced BrandButton stories with detailed variant, size, and padding showcases for better visual testing. * Improved theme store to apply dark mode class on both `<html>` and `<body>` elements for compatibility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
connect-components via Nuxt 3
Install dependencies
npm i
Dev testing and builds with .env setup
There's 3 version required for various types of development, testing builds in the Unraid webgui, and creating a prod build for the Unraid webgui.
.envfornpm run devlocal development.env.stagingfornpm run build:devwhich tests builds in the Unraid webgui.env.productionfornpm run build:webguiwhich does a production build for the Unraid webgui
For the URL values, you can use what you'd like. So if you're testing locally, you can use http://localhost:5555 for the account app if you have a local version running. Alternatively you're free to use the staging or production URLs.
For productions URLs you could ultimately not provide any value and the URL helpers will default to the production URLs. But for local dev and testing, it's usually easiest to keep the .env key value pairs so you don't forget about them.
.env for npm run dev local development
VITE_ACCOUNT=http://localhost:5555
VITE_CONNECT=https://connect.myunraid.net
VITE_UNRAID_NET=https://preview.unraid.net
VITE_OS_RELEASES="https://releases.unraid.net/os"
VITE_CALLBACK_KEY="FIND_IN_1PASSWORD"
VITE_ALLOW_CONSOLE_LOGS=true
VITE_TAILWIND_BASE_FONT_SIZE=16
.env.staging for npm run build:dev which tests builds in the Unraid webgui
Please take a look at the prebuild:dev & postbuild:dev scripts in package.json to see how the .env.staging file is used.
VITE_ACCOUNT=https://staging.account.unraid.net
VITE_CONNECT=https://connect.myunraid.net
VITE_UNRAID_NET=https://staging.unraid.net
VITE_OS_RELEASES="https://releases.unraid.net/os"
VITE_CALLBACK_KEY="FIND_IN_1PASSWORD"
VITE_ALLOW_CONSOLE_LOGS=TRUE
Notice how VITE_TAILWIND_BASE_FONT_SIZE is not set in the .env.staging file.
This is because the Unraid webgui uses the font-size: 62.5% "trick".
.env.production for npm run build:webgui which does a production build for the Unraid webgui
Please take a look at the prebuild:webgui & postbuild:webgui scripts in package.json to see how the .env.production file is used.
VITE_ACCOUNT=https://account.unraid.net
VITE_CONNECT=https://connect.myunraid.net
VITE_UNRAID_NET=https://unraid.net
VITE_OS_RELEASES="https://releases.unraid.net/os"
VITE_CALLBACK_KEY="FIND_IN_1PASSWORD"
Both VITE_ALLOW_CONSOLE_LOGS and VITE_TAILWIND_BASE_FONT_SIZE should never be set here.