🎉 Include sprite inline in a template.

frontend/gulpfile.js

@@ -2,93 +2,31 @@ const fs = require("fs");
 const path = require("path");
 const l = require("lodash");
 
-const CleanCSS = require("clean-css");
 const gulp = require("gulp");
-const gulpif = require("gulp-if");
-const gzip = require("gulp-gzip");
-
-const mustache = require("gulp-mustache");
-const rename = require("gulp-rename");
+const gulpSass = require("gulp-sass");
+const gulpGzip = require("gulp-gzip");
+const gulpMustache = require("gulp-mustache");
+const gulpRename = require("gulp-rename");
 const svgSprite = require("gulp-svg-sprite");
+const gulpPostcss = require("gulp-postcss");
 
 const mkdirp = require("mkdirp");
 const rimraf = require("rimraf");
 const sass = require("sass");
 const autoprefixer = require("autoprefixer")
-const postcss = require("postcss")
+const clean = require("postcss-clean");
 
 const mapStream = require("map-stream");
-
-
 const paths = {};
 paths.resources = "./resources/";
 paths.output = "./resources/public/";
 paths.dist = "./target/dist/";
-paths.scss = "./resources/styles/**/*.scss";
+
 
 /***********************************************
  * Helpers
  ***********************************************/
 
-function isProduction() {
-  return (process.env.NODE_ENV === "production");
-}
-
-function scssPipeline(options) {
-  const write = (_path, data) => {
-    return new Promise((resolve, reject) => {
-      fs.writeFile(_path, data, function(err) {
-        if (err) { reject(err); }
-        else { resolve(); }
-      });
-    });
-  };
-
-  const touch = (_path) => {
-    return new Promise((resolve, reject) => {
-      return fs.utimes(_path, new Date(), new Date(), () => {
-        resolve(_path);
-      });
-    })
-  };
-
-  const render = (input) => {
-    return new Promise((resolve, reject) => {
-      sass.render({file: input}, async function(err, result) {
-        if (err) {
-          console.log(err.formatted);
-          reject(err);
-        } else {
-          resolve(result.css);
-        }
-      });
-    });
-  };
-
-  const postprocess = (data, input, output) => {
-    return postcss([autoprefixer])
-      .process(data, {map: false, from: input, to: output})
-  };
-
-  return function(next) {
-    const input = options.input;
-    const output = options.output;
-
-    return mkdirp(path.dirname(output))
-      .then(() => render(input))
-      .then((res) => postprocess(res, input, output))
-      .then(async (res) => {
-        await write(output, res.css);
-        await touch(output);
-        return res;
-      })
-      .catch((err) => null)
-      .then(() => {
-        next();
-      });
-  };
-}
-
 // Templates
 
 function readLocales() {
@@ -158,7 +96,7 @@ function templatePipeline(options) {
     const locales = readLocales();
     const manifest = readManifest();
 
-    const tmpl = mustache({
+    const tmpl = gulpMustache({
       ts: ts,
       th: th,
       manifest: manifest,
@@ -168,7 +106,7 @@ function templatePipeline(options) {
 
     return gulp.src(input)
       .pipe(tmpl)
-      .pipe(rename("index.html"))
+      .pipe(gulpRename("index.html"))
       .pipe(gulp.dest(output))
       .pipe(touch());
   };
@@ -178,18 +116,23 @@ function templatePipeline(options) {
  * Generic
  ***********************************************/
 
-gulp.task("scss:main-default", scssPipeline({
-  input: paths.resources + "styles/main-default.scss",
-  output: paths.output + "css/main-default.css"
-}));
+gulpSass.compiler = sass;
 
-gulp.task("scss", gulp.parallel("scss:main-default"));
+gulp.task("scss", function() {
+  return gulp.src(paths.resources + "styles/main-default.scss")
+    .pipe(gulpSass().on('error', gulpSass.logError))
+    .pipe(gulpPostcss([
+      autoprefixer,
+      clean({format: "keep-breaks", level: 1})
+    ]))
+    .pipe(gulp.dest(paths.output + "css/"));
+});
 
 gulp.task("svg:sprite", function() {
   return gulp.src(paths.resources + "images/icons/*.svg")
-    .pipe(rename({prefix: "icon-"}))
-    .pipe(svgSprite({mode:{symbol: {inline: false}}}))
-    .pipe(gulp.dest(paths.output + "images/svg-sprite/"));
+    .pipe(gulpRename({prefix: "icon-"}))
+    .pipe(svgSprite({mode:{symbol: {inline: true}}}))
+    .pipe(gulp.dest(paths.output + "images/sprites/"));
 });
 
 gulp.task("template:main", templatePipeline({
@@ -197,7 +140,7 @@ gulp.task("template:main", templatePipeline({
   output: paths.output
 }));
 
-gulp.task("templates", gulp.series("template:main"));
+gulp.task("templates", gulp.series("svg:sprite", "template:main"));
 
 /***********************************************
  * Development
@@ -226,22 +169,16 @@ gulp.task("dev:dirs", async function(next) {
 });
 
 gulp.task("watch:main", function() {
-  gulp.watch(paths.scss, gulp.series("scss"));
-  gulp.watch(paths.resources + "images/**/*",
-             gulp.series("svg:sprite", "copy:assets:images"));
+  gulp.watch(paths.resources + "styles/**/**.scss", gulp.series("scss"));
+  gulp.watch(paths.resources + "images/**/*", gulp.series("copy:assets:images"));
 
   gulp.watch([paths.resources + "templates/*.mustache",
               paths.resources + "locales.json"],
              gulp.series("templates"));
 });
 
-gulp.task("build", gulp.parallel("scss", "svg:sprite", "templates", "copy:assets"));
-
-gulp.task("watch", gulp.series(
-  "dev:dirs",
-  "build",
-  "watch:main"
-));
+gulp.task("build", gulp.parallel("scss", "templates", "copy:assets"));
+gulp.task("watch", gulp.series("dev:dirs", "build", "watch:main"));
 
 /***********************************************
  * Production
@@ -258,6 +195,6 @@ gulp.task("dist:copy", function() {
 
 gulp.task("dist:gzip", function() {
   return gulp.src(`${paths.dist}**/!(*.gz|*.br|*.jpg|*.png)`)
-    .pipe(gzip({gzipOptions: {level: 9}}))
+    .pipe(gulpGzip({gzipOptions: {level: 9}}))
     .pipe(gulp.dest(paths.dist));
 });

frontend/package.json

@@ -14,15 +14,18 @@
   "scripts": {},
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "clean-css": "^4.2.3",
     "gulp": "4.0.2",
     "gulp-gzip": "^1.4.2",
-    "gulp-if": "^3.0.0",
     "gulp-mustache": "^5.0.0",
+    "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-svg-sprite": "^1.5.0",
+    "map-stream": "0.0.7",
     "mkdirp": "^1.0.4",
-    "postcss": "^8.1.2",
+    "postcss": "^8.1.7",
+    "postcss-clean": "^1.1.0",
     "rimraf": "^3.0.0",
     "sass": "^1.26.10",
     "shadow-cljs": "2.11.5"
@@ -31,7 +34,6 @@
     "date-fns": "^2.15.0",
     "highlight.js": "^10.3.1",
     "js-beautify": "^1.13.0",
-    "map-stream": "0.0.7",
     "mousetrap": "^1.6.5",
     "randomcolor": "^0.6.2",
     "react": "17.0.1",

frontend/resources/templates/index.mustache

@@ -9,14 +9,15 @@
     <link rel="icon" href="/images/favicon.png" />
   </head>
   <body>
+    {{>../public/images/sprites/symbol/svg/sprite.symbol.svg}}
     <section id="app" tabindex="1"></section>
     <section id="modal"></section>
     <script>
-     window.appTranslations = JSON.parse({{& translations }});
-     window.appThemes = {{& themes }};
+     window.appTranslations = JSON.parse({{& translations}});
+     window.appThemes = {{& themes}};
     </script>
-    {{# manifest}}
 
+    {{# manifest}}
     <script>window.appWorkerURI="{{& worker}}"</script>
     <script src="{{& config}}"></script>
     <script src="{{& shared}}"></script>

frontend/src/app/main/ui/icons.clj

@@ -10,11 +10,9 @@
 (ns app.main.ui.icons
   (:require [rumext.alpha]))
 
-(def base-uri "/images/svg-sprite/symbol/svg/sprite.symbol.svg#icon-")
-
 (defmacro icon-xref
   [id]
-  (let [href (str base-uri (name id))]
+  (let [href (str "#icon-" (name id))]
     `(rumext.alpha/html
       [:svg {:width 500 :height 500}
        [:use {:xlinkHref ~href}]])))