Add server side CSS building and preprocessing

Signed-off-by: Ari Archer <ari.web.xyz@gmail.com>

.gitignore

@@ -1,3 +1,4 @@
 _*.css
 node_modules/
+*.min.css
 

Makefile

@@ -1,5 +1,10 @@
+netlify: build clean
+
+build:
+	npm run build
+
 clean:
-	rm -rfv requirements.txt \
+	[ -z "$CI" ] || rm -rfv requirements.txt \
 		README.md \
 		LICENSE \
 		git.sh \

content/styles/404/main.css

@@ -1 +0,0 @@
-body,html{padding:2.5em;height:100%}.title404{text-align:center;font-size:3em}.content404{text-align:center;font-size:2.5em}.c404img{display:flex;justify-content:center}.c404img img{filter:opacity(25%) blur(10px);width:30em}footer{position:absolute;bottom:0;margin:2.5em}

content/styles/boot/main.css

@@ -1 +0,0 @@
-.boot{margin:1em 0em 1em 1em;font-size:1.5em}.boot #bootver{color:#9acd32;margin-left:1.12em}.boot #bootver::before{content:"WebRC version " "1.0"}.boot .bmsg[bmsg_type="ok"]::after{content:"[OK]";float:right;color:#0fd30f}.boot .bmsg[bmsg_type="ok"]::before{content:" * ";color:#0fd30f}.boot .bmsg[bmsg_type="warn"]::after{content:"[WARNING]";float:right;color:#ff0}.boot .bmsg[bmsg_type="warn"]::before{content:" * ";color:#ff0}.boot .bmsg[bmsg_type="error"]::after{content:"[ERROR]";float:right;color:red}.boot .bmsg[bmsg_type="error"]::before{content:" * ";color:red}.boot .bmsg::first-letter{text-transform:uppercase}.boot .bmsg{word-wrap:break-word;word-break:break-all}

content/styles/generic/main.css

@@ -1 +0,0 @@
-:root{color-scheme:dark}*{box-sizing:border-box;padding:0;margin:0;font-family:monospace;color:#fff;-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}::-webkit-scrollbar{display:none}html,body{background-color:#070707;margin-bottom:2em}.iframe{width:50%;min-width:300px;max-width:1000px}

content/styles/novpn/index.css

@@ -1 +0,0 @@
-*{box-sizing:border-box;margin:0;padding:0;color:#fff;font-family:sans;scroll-behavior:smooth}html,body{width:100%;height:100%;margin:0}#matrix{position:fixed;display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:#000;background-color:#000;z-index:-1;overflow:hidden}.content{position:sticky;display:block;height:100%}.page-intro{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}

content/styles/shell/main.css

@@ -1 +0,0 @@
-.shell{margin:2em}.shell .prompt{color:#0fd30f;background-color:#070707;border:none;font-size:1.7em;width:90%;padding:0 0 1.2em 0}.shell .prompt:focus{border:none;outline:none}.shell .output{font-size:1.41667em}.shell::before{content:"$ ";font-size:1.7em;color:#fff}.shell[prompt="root"]::before{content:"# ";font-size:1.7em;color:#fff}

index.html

@@ -17,9 +17,9 @@
         <meta name="color-scheme" content="dark" />
         <meta name="theme-color" content="black" />
 
-        <link rel="stylesheet" href="/content/styles/generic/main.css" />
+        <link rel="stylesheet" href="/content/styles/generic/main.min.css" />
-        <link rel="stylesheet" href="/content/styles/boot/main.css" />
+        <link rel="stylesheet" href="/content/styles/boot/main.min.css" />
-        <link rel="stylesheet" href="/content/styles/shell/main.css" />
+        <link rel="stylesheet" href="/content/styles/shell/main.min.css" />
 
         <link rel="manifest" href="/manifest.json" />
 

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-    command = "make clean"
+    command = "make netlify"
 
 [[redirects]]
     from = "/404.html"

package.json

@@ -3,7 +3,8 @@
     "version": "1.0.0",
     "description": "My website's source code",
     "scripts": {
-        "s": "live-server"
+        "serve": "live-server",
+        "build": "./scripts/build.sh"
     },
     "repository": {
         "type": "git",
@@ -24,10 +25,11 @@
     "bugs": {
         "url": "https://ari-web.xyz/gh/issues"
     },
-    "homepage": "https://ari-web.xyz/gh/website#readme",
+    "homepage": "https://ari-web.xyz/git#readme",
     "devDependencies": {
         "eslint": "^8.14.0",
         "live-server": "^1.2.2",
-        "node-sass": "^7.0.1"
+        "node-sass": "^7.0.1",
+        "autoprefixer-cli": "^1.0.0"
     }
 }

page/404/index.html

@@ -16,8 +16,8 @@
         <meta property="og:type" content="website" />
         <meta name="color-scheme" content="dark" />
 
-        <link rel="stylesheet" href="/content/styles/generic/main.css" />
+        <link rel="stylesheet" href="/content/styles/generic/main.min.css" />
-        <link rel="stylesheet" href="/content/styles/404/main.css" />
+        <link rel="stylesheet" href="/content/styles/404/main.min.css" />
     </head>
 
     <body>

page/novpn/index.html

@@ -14,8 +14,8 @@
 
     <title>Ari::web -&gt; NoVPN</title>
 
-    <link rel="stylesheet" href="/content/styles/clean/index.css">
+    <link rel="stylesheet" href="/content/styles/clean/index.min.css" />
-    <link rel="stylesheet" href="/content/styles/novpn/index.css">
+    <link rel="stylesheet" href="/content/styles/novpn/index.min.css" />
 
     <script src="/content/js/novpn/matrix.js" defer></script>
     <script src="/content/js/novpn/index.js" defer></script>

page/reset/index.html

@@ -16,7 +16,7 @@
         />
         <meta name="robots" content="follow" />
 
-        <link rel="stylesheet" href="/content/styles/generic/main.css" />
+        <link rel="stylesheet" href="/content/styles/generic/main.min.css" />
     </head>
 
     <body>

page/ttytheme/index.html

@@ -23,13 +23,16 @@
         ></script>
         <script type="module" src="/content/js/ttytheme/menu.js" defer></script>
 
-        <link rel="stylesheet" href="/content/styles/clean/index.css" />
+        <link rel="stylesheet" href="/content/styles/clean/index.min.css" />
-        <link rel="stylesheet" href="/content/styles/ttytheme/styles.css" />
+        <link rel="stylesheet" href="/content/styles/ttytheme/styles.min.css" />
     </head>
 
     <body>
         <h1>Linux TTY theme generator by Ari::web</h1>
-        <h2>For faster theming see <a href="/page/ttytheme/settings">settings</a></h2>
+        <h2>
+            For faster theming see
+            <a href="/page/ttytheme/settings">settings</a>
+        </h2>
         <h2>
             All themes generated here are under
             <a href="https://unlicense.org/" target="_blank">unlicense</a>, but
@@ -52,7 +55,6 @@
             </div>
         </noscript>
 
-
         <div class="buttons">
             <button id="clear-states">Clear saved slider states</button>
             <button id="generate-theme">Generate (refresh) theme</button>

page/ttytheme/settings/index.html

@@ -25,9 +25,9 @@
             defer
         ></script>
 
-        <link rel="stylesheet" href="/content/styles/clean/index.css" />
+        <link rel="stylesheet" href="/content/styles/clean/index.min.css" />
-        <link rel="stylesheet" href="/content/styles/ttytheme/styles.css" />
+        <link rel="stylesheet" href="/content/styles/ttytheme/styles.min.css" />
-        <link rel="stylesheet" href="/content/styles/ttytheme/settings.css" />
+        <link rel="stylesheet" href="/content/styles/ttytheme/settings.min.css" />
     </head>
 
     <body>

scripts/build.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+
+set -e
+
+S='./scripts'
+SCRIPTS=(sass apis)
+
+main() {
+    for script in "${SCRIPTS[@]}"; do
+        _s="$S/$script.sh"
+
+        chmod +x -- "$_s"
+        "$_s" &
+    done
+
+    wait
+}
+
+main "$@"

scripts/cleancss.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env sh
+
+set -e
+
+main() {
+    echo '>> Removing all .min.css files'
+    find content/ -name '*.min.css' -type f -exec rm -rfv {} \;
+}
+
+main "$@"

scripts/git.sh

@@ -2,21 +2,7 @@
 
 set -e
 
-S='./scripts'
-SCRIPTS=(sass apis)
-
 main() {
-    for script in "${SCRIPTS[@]}"; do
-        _s="$S/$script.sh"
-
-        echo
-        echo " ** Script: $_s **"
-        echo
-
-        chmod +x -- "$_s"
-        "$_s"
-    done
-
     git add -A
     git commit -sa
     git push -u origin "$(git rev-parse --abbrev-ref HEAD)"

scripts/sass.sh

@@ -3,20 +3,24 @@
 set -e
 
 main() {
-    for file in $(find . -name node_modules -prune -o -name '*.scss' -type f); do
+    for file in $(find content/ -name '*.scss' -type f); do
-        [ -d "$file" ] && continue
+        bnam="${file##*/}"
+        out="${file%/*}/${bnam%.*}.min.css"
 
-        bnam="$(basename "$file")"
+        {
-        out="$(dirname "$file")/${bnam%.*}.css"
-
-        echo " >> Generating $out"
             node-sass "$file" --output-style compressed >"$out"
+            autoprefixer-cli "$out" -o "$out.tmp"
+            mv "$out.tmp" "$out"
+
+            echo " >> Generated $out"
+        } &
     done
 
-    echo " >> Removing residuals"
+    wait
-    find . -name '_*.css' -or \
-        -name '*.sass.css' -type f -exec rm -rfv {} \;
 
+    echo " >> Removing residuals"
+    find content/ -name '_*.min.css' -or \
+        -name '*.sass.css' -type f -exec rm -rfv {} \;
 }
 
 main "$@"