mirror of
https://github.com/penpot/penpot.git
synced 2025-03-09 06:11:23 -05:00
🎉 Include sprite inline in a template.
This commit is contained in:
Andrey Antukh
Alonso Torres
parent
4ad08a7449
commit
e5ea8bf302
5 changed files with 846 additions and 226 deletions
|
|
@ -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));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}]])))
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue