Build JS/CSS Theme on release (#3525)

Co-authored-by: Alec Rust <me@alecrust.com>

.drone.yml

@@ -25,16 +25,10 @@ steps:
       - git submodule update --init --recursive
   - name: Build Hestia package and install
     commands:
+      - yarn set version stable
+      - yarn install
+      - yarn build
       - ./src/hst_autocompile.sh --hestia --install '~localsrc'
-  - name: Run system / user tests
-    commands:
-      - bats ./test/test.bats
-  - name: Run restore tests
-    commands:
-      - bats ./test/restore.bats
-  - name: Run config tests
-    commands:
-      - bats ./test/config-tests.bats
 
 trigger:
   event: [pull_request, push]
@@ -73,19 +67,6 @@ steps:
   - name: Build Hestia package install
     commands:
       - ./src/hst_autocompile.sh --hestia --install '~localsrc'
-  - name: Run system / user tests
-    commands:
-      - bats ./test/test.bats
-  - name: Run restore tests
-    commands:
-      - bats ./test/restore.bats
-  - name: Run Letsencrypt test against Staging
-    commands:
-      - cp /root/le-env.sh /tmp/hestia-le-env.sh
-      - bats ./test/letsencrypt.bats
-  - name: Run config tests
-    commands:
-      - bats ./test/config-tests.bats
 
 trigger:
   event: [pull_request, push]
@@ -106,6 +87,12 @@ platform:
   arch: amd64
 
 steps:
+  - name: Build JS/CSS
+    image: node:current-slim
+    commands:
+      - yarn set version stable
+      - yarn install
+      - yarn build
   - name: Build
     image: debian:bullseye
     commands:

.github/dependabot.yml

@@ -7,14 +7,19 @@ updates:
       interval: "weekly"
 
   # Maintain dependencies for npm
-  # TODO: Enable this when we build JS and have no checked-in minified JS/CSS
-  # - package-ecosystem: "npm"
-  #   directory: "/web"
-  #   schedule:
-  #     interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
 
   # Maintain dependencies for Composer
   - package-ecosystem: "composer"
     directory: "/web/inc" # Location of package manifests
     schedule:
       interval: "weekly"
+
+  # Maintain dependencies for Composer
+  - package-ecosystem: "composer"
+    directory: "/web/src" # Location of package manifests
+    schedule:
+      interval: "weekly"

.gitignore

@@ -25,6 +25,12 @@
 
 .env
 
+# Distribution CSS
+web/css/themes/
+
+# Distribution JS
+web/js/dist/
+
 # Composer
 composer.phar
 test/vendor/

bin/v-update-sys-hestia-git

@@ -1,6 +1,6 @@
 #!/bin/bash
 # info: Install update from Git repository
-# options: REPOSITORY BRANCH INSTALL [PACKAGES]
+# options: REPOSITORY BRANCH INSTALL
 #
 # example: v-update-sys-hestia-git hestiacp staging/beta install
 #          # Will download from the hestiacp repository
@@ -24,6 +24,11 @@ source_conf "$HESTIA/conf/hestia.conf"
 # Perform verification if read-only mode is enabled
 check_hestia_demo_mode
 
+if [ -z $(which "yarn") ]; then
+	echo "Unable to locate Yarn and NodeJS  See https://hestiacp.com/docs/contributing/development.html"
+	exit 0
+fi
+
 # Define download function
 download_file() {
 	local url=$1
@@ -294,6 +299,11 @@ mkdir -p $BUILD_DIR_HESTIA/usr/local/hestia
 
 # Move needed directories
 cd $BUILD_DIR/hestiacp-$branch_dash
+
+yarn set version stable
+yarn install
+yarn build
+
 cp -rf bin func install web $BUILD_DIR_HESTIA/usr/local/hestia/
 
 # Set permissions

build.js

@@ -67,6 +67,7 @@ function getOutputPath(pkg) {
 // Process a CSS file
 async function processCSS(inputFile, outputFile) {
 	try {
+		await ensureDir(path.dirname(outputFile));
 		const css = await fs.readFile(inputFile);
 		const result = await postcss(postcssConfig.plugins).process(css, {
 			from: inputFile,
@@ -97,6 +98,17 @@ async function buildCSS() {
 	await Promise.all(cssBuildPromises);
 }
 
+// Ensure a directory exists
+async function ensureDir(dir) {
+	try {
+		await fs.mkdir(dir, { recursive: true });
+	} catch (error) {
+		if (error.code !== 'EEXIST') {
+			throw error;
+		}
+	}
+}
+
 // Build all assets
 async function build() {
 	console.log('🚀 Building JS and CSS...');

docs/docs/contributing/development.md

@@ -51,6 +51,16 @@ multipass mount $HOME/projects/hestiacp hestia-dev:/home/ubuntu/hestiacp
    sudo apt update && sudo apt install -y jq libjq1
    ```
 
+1. Install [Node JS](https://nodejs.org/en) and Yarn `npm install --global yarn`
+
+1. Build the theme files with
+
+   ```bash
+   yarn set version stable
+   yarn install
+   yarn build
+   ```
+
 1. Navigate to `/src` and build Hestia packages
 
    ```bash
@@ -175,6 +185,8 @@ Use if you have Hestia already installed, for your changes to take effect.
 
 The following is useful for testing a Pull Request or a branch on a fork.
 
+Make sure to install [Node JS](https://nodejs.org/en) and Yarn `npm install --global yarn` before.
+
 ```bash
 # Replace with https://github.com/username/hestiacp.git if you want to test a branch that you created yourself
 git clone https://github.com/hestiacp/hestiacp.git
@@ -183,6 +195,13 @@ cd ./hestiacp/
 # Replace main with the branch you want to test
 git checkout main
 
+# Enable Yarn 3.x
+yarn set version stable
+# Install Dependencies
+yarn install
+# Build
+yarn build
+
 cd ./src/
 
 # Compile packages

package.json

@@ -17,7 +17,7 @@
 		"preinstall": "npx only-allow yarn",
 		"postinstall": "husky install"
 	},
-	"packageManager": "yarn@3.5.0",
+	"packageManager": "yarn@3.5.1",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.4.0",
 		"alpinejs": "^3.12.0",

web/css/themes/flat.min.css

@@ -1 +0,0 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:hover,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit:hover,.units .l-unit:hover{box-shadow:none}@media (min-width:1024px){.stats-item:hover{box-shadow:none}}.badge{box-shadow:none}.collapse-header{background:#fafafa;box-shadow:none}.button,.form-control,.form-select{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active{background:#a91200;border-color:#f4301a;color:#fff}.modal{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}

yarn.lock

@@ -6492,11 +6492,11 @@ __metadata:
 
 "typescript@patch:typescript@^5.0.4#~builtin<compat/typescript>":
   version: 5.0.4
-  resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin<compat/typescript>::version=5.0.4&hash=85af82"
+  resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin<compat/typescript>::version=5.0.4&hash=b5f058"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: bb309d320c59a26565fb3793dba550576ab861018ff3fd1b7fccabbe46ae4a35546bc45f342c0a0b6f265c801ccdf64ffd68f548f117ceb7f0eac4b805cd52a9
+  checksum: d26b6ba97b6d163c55dbdffd9bbb4c211667ebebc743accfeb2c8c0154aace7afd097b51165a72a5bad2cf65a4612259344ff60f8e642362aa1695c760d303ac
   languageName: node
   linkType: hard