Add SCSS build system with automated CSS minification

.github/workflows/ci.yml

@@ -17,6 +17,33 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v4
 
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+
+    - name: Install Node dependencies
+      run: npm ci
+
+    - name: Build CSS
+      run: npm run build:css
+
+    - name: Verify CSS is up to date
+      run: |
+        # Check if the built CSS matches what's committed
+        if ! git diff --quiet css/main.min.css; then
+          echo "❌ Error: css/main.min.css is out of date!"
+          echo "The committed minified CSS doesn't match the SCSS source."
+          echo ""
+          echo "Please run 'npm run build:css' and commit the updated CSS file."
+          echo ""
+          echo "Differences found:"
+          git diff css/main.min.css
+          exit 1
+        fi
+        echo "✅ CSS is up to date with SCSS source"
+
     - name: Set up Ruby
       uses: ruby/setup-ruby@v1
       with:

.gitignore

@@ -1,5 +1,5 @@
 # =========================
-# Cmder.net Home page
+# Cmder.app Home page
 # =========================
 
 # Reserved hidden directory
@@ -16,6 +16,13 @@ vendor/
 .bundle/
 Gemfile.lock
 
+# Node.js
+node_modules/
+package-lock.json
+
+# Generated CSS source maps (keep the minified CSS for GitHub Pages)
+css/*.map
+
 # =========================
 # Operating System Files
 # =========================

README.md

@@ -1,4 +1,31 @@
 # cmderdev.github.io
-The cmder.net page.
+The cmder.app page.
 
 [![CI](https://github.com/cmderdev/cmderdev.github.io/actions/workflows/ci.yml/badge.svg)](https://github.com/cmderdev/cmderdev.github.io/actions/workflows/ci.yml)
+
+## Development
+
+### Building CSS
+
+This project uses SCSS for styling. The source files are in `scss/` and the compiled CSS is generated in `css/`.
+
+To build the CSS:
+```bash
+npm install
+npm run build:css
+```
+
+To watch for changes and rebuild automatically:
+```bash
+npm run watch:css
+```
+
+### Building the Site
+
+The site uses Jekyll for static site generation:
+```bash
+bundle install
+bundle exec jekyll build
+```
+
+The built site will be in the `_site/` directory.

index.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic' type="text/css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/main.css" type="text/css">
+    <link rel="stylesheet" href="css/main.min.css" type="text/css">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "cmderdev.github.io",
+  "version": "1.0.0",
+  "description": "The cmder.app page.",
+  "main": "index.js",
+  "scripts": {
+    "build:css": "sass scss/main.scss css/main.min.css --style=compressed",
+    "watch:css": "sass scss/main.scss css/main.min.css --watch --style=compressed",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "sass": "^1.94.0"
+  }
+}