From 42968b6a30d5ec896c9ce00f32b84a29b441d44b Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Sun, 23 May 2021 22:04:57 +0200 Subject: [PATCH] feat: auto-load custom svg sprites from assets folder (#40) BREAKING CHANGE: The icon gdoc_telescope was removed. If you are using this icon you have to replace it. Build-in icons are prefixed with gdoc_ now. If you use built-in icons in e.g. menus you have to rename these references! --- .dictionary | 1 + .drone.yml | 11 +- .gitignore | 3 +- exampleSite/assets/sprites/regular.svg | 462 +++++++++++++++++++ exampleSite/content/posts/getting-started.md | 43 ++ exampleSite/data/menu/extra.yml | 4 +- exampleSite/layouts/shortcodes/sprites.html | 12 + exampleSite/static/custom.css | 19 + gulpfile.js | 19 +- layouts/404.html | 2 +- layouts/_default/_markup/render-heading.html | 2 +- layouts/_default/list.html | 10 +- layouts/_default/single.html | 4 +- layouts/partials/site-footer.html | 4 +- layouts/partials/site-header.html | 4 +- layouts/partials/svg-icon-symbols.html | 4 + layouts/shortcodes/icon.html | 5 + layouts/shortcodes/img.html | 2 +- package-lock.json | 12 + package.json | 1 + src/sass/_base.scss | 4 +- src/sass/_mobile.scss | 4 +- src/sass/_utils.scss | 7 + 23 files changed, 611 insertions(+), 28 deletions(-) create mode 100644 exampleSite/assets/sprites/regular.svg create mode 100644 exampleSite/layouts/shortcodes/sprites.html create mode 100644 exampleSite/static/custom.css create mode 100644 layouts/partials/svg-icon-symbols.html create mode 100644 layouts/shortcodes/icon.html diff --git a/.dictionary b/.dictionary index 70f38b6..edc8e08 100644 --- a/.dictionary +++ b/.dictionary @@ -17,3 +17,4 @@ pre-build submodule GPL IcoMoon +FontAwesome diff --git a/.drone.yml b/.drone.yml index 8b12321..72eca29 100644 --- a/.drone.yml +++ b/.drone.yml @@ -96,14 +96,14 @@ steps: NPM_CONFIG_LOGLEVEL: error - name: package - image: alpine + image: thegeeklab/alpine-tools commands: - mkdir dist/ - echo "${DRONE_TAG:-latest}" > VERSION - tar -zcvf dist/hugo-geekblog.tar.gz -X .tarignore . - name: checksum - image: alpine + image: thegeeklab/alpine-tools commands: - cd dist/ && sha256sum * > ../sha256sum.txt @@ -165,8 +165,10 @@ steps: NPM_CONFIG_LOGLEVEL: error - name: assets - image: thegeeklab/alpine-tools + image: node:lts commands: + - npm install > /dev/null + - npx gulp svg-sprite-list - mkdir -p exampleSite/themes/hugo-geekblog/ - curl -sSL https://github.com/thegeeklab/hugo-geekblog/releases/latest/download/hugo-geekblog.tar.gz | tar -xz -C exampleSite/themes/hugo-geekblog/ --strip-components=1 when: @@ -179,6 +181,7 @@ steps: commands: - npm install > /dev/null - npx gulp default + - npx gulp svg-sprite-list - mkdir exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekblog environment: FORCE_COLOR: true @@ -270,6 +273,6 @@ depends_on: --- kind: signature -hmac: 773432bb466f3c71566f171918419bf0f34335c4bd3d923a005336d4857aaf4c +hmac: 182b53bf7652696421d5b2780e168f1242e40d9cbf2d6212c212868fa1fb0d07 ... diff --git a/.gitignore b/.gitignore index 8be6a7c..348abf7 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,7 @@ exampleSite/public/ CHANGELOG.md # auto-generated files -layouts/partials/svg-icon-symbols.html +assets/sprites/ static/*.min.css static/*.min.css.map static/js/ @@ -18,6 +18,7 @@ static/favicon/ static/fonts/GeekblogIcons.* resources/ exampleSite/resources/ +exampleSite/data/sprites/ data/assets.json # testing diff --git a/exampleSite/assets/sprites/regular.svg b/exampleSite/assets/sprites/regular.svg new file mode 100644 index 0000000..2edd1f7 --- /dev/null +++ b/exampleSite/assets/sprites/regular.svg @@ -0,0 +1,462 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/exampleSite/content/posts/getting-started.md b/exampleSite/content/posts/getting-started.md index a821ab2..240d99a 100644 --- a/exampleSite/content/posts/getting-started.md +++ b/exampleSite/content/posts/getting-started.md @@ -461,3 +461,46 @@ footer: icon: email ref: "/contact" ``` + +## Custom icons + +The only supported source for custom icons are SVG sprites. Some icon frameworks provides ready to use sprites e.g. FontAwesome. If the framework don't provide sprites, you can create your own from raw SVG icons. There are a lot of tools available to create sprites, please choose one that fits your need. One solution could be [svgsprit.es](https://svgsprit.es/). + +Regardless of which tool (or existing sprite) you choose, there are a few requirements that must be met: + +1. The sprite must be a valid **SVG** file. +2. You have to ensure to **hide the sprite**. Apply the predefined class `svg-sprite` or `hidden` to the root element of your sprite or add a small piece of inline CSS e.g. `style="display: none;"`. +3. Save the sprite to the folder `assets/sprites` right beside your `content` folder. + +The result of a valid minimal SVG sprite file could look like this: + +```XML + + + + + +``` + +**Example:** + +FontAwesome provides three pre-build sprites included in the regular Web download pack, `sprites/brands.svg`, `sprites/regular.svg` and `sprites/solid.svg`. Choose your sprite to use and copy it to your projects root directory into `assets/sprites`, right beside your `content` folder. The result should look like this: + +```Bash +my_projcet/ +├── assets +│ └── sprites +│ └── regular.svg +├── config.yaml +├── content +│ ├── _index.md +│ ├── ... +``` + +That's it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons, you need to lookup the id of the icon. An example would be `thumbs-up` {{< icon "thumbs-up" >}}. + +## Build-in icons + +The theme bundles just a small set of hand crafted icons. + +{{< sprites >}} diff --git a/exampleSite/data/menu/extra.yml b/exampleSite/data/menu/extra.yml index c4b9e8a..326a9b4 100644 --- a/exampleSite/data/menu/extra.yml +++ b/exampleSite/data/menu/extra.yml @@ -1,11 +1,11 @@ --- header: - name: Github Profile - icon: github + icon: gblog_github ref: "https://github.com/xoxys" external: true footer: - name: Contact - icon: email + icon: gblog_email ref: "/contact" diff --git a/exampleSite/layouts/shortcodes/sprites.html b/exampleSite/layouts/shortcodes/sprites.html new file mode 100644 index 0000000..3576a77 --- /dev/null +++ b/exampleSite/layouts/shortcodes/sprites.html @@ -0,0 +1,12 @@ +
+ {{ range .Site.Data.sprites.geekdoc }} +
+
+ +
+
+ #gblog_{{ (replace . "_" "_") | safeHTML }} +
+
+ {{ end }} +
diff --git a/exampleSite/static/custom.css b/exampleSite/static/custom.css new file mode 100644 index 0000000..1cf3314 --- /dev/null +++ b/exampleSite/static/custom.css @@ -0,0 +1,19 @@ +.icon-grid { + width: 8rem; + height: 8rem; + margin: 0.2em; + text-align: center; + padding: 0.3em; +} + +.icon-grid__line { + height: 4rem; +} + +.icon-grid__line .icon { + font-size: 3em; +} + +.icon-grid__line--text { + font-size: 0.8em; +} diff --git a/gulpfile.js b/gulpfile.js index 686d3ee..000d619 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,6 +8,7 @@ const { sass } = require("@mr-hope/gulp-sass"); const cleanCSS = require("gulp-clean-css"); const autoprefixer = require("gulp-autoprefixer"); const iconfont = require("gulp-iconfont"); +const filelist = require("gulp-filelist"); const uglify = require("gulp-uglify"); const sourcemaps = require("gulp-sourcemaps"); const realFavicon = require("gulp-real-favicon"); @@ -128,6 +129,9 @@ gulp.task("favicon-check-update", function (done) { gulp.task("svg-sprite", function () { config = { shape: { + id: { + generator: "gblog_%s", + }, dimension: { maxWidth: 22, maxHeight: 22, @@ -148,8 +152,8 @@ gulp.task("svg-sprite", function () { mode: { inline: true, symbol: { - dest: "layouts/partials/", - sprite: "svg-icon-symbols.html", + dest: "assets/sprites/", + sprite: "geekblog.svg", bust: false, }, }, @@ -161,6 +165,15 @@ gulp.task("svg-sprite", function () { .pipe(gulp.dest(".")); }); +gulp.task("svg-sprite-list", function () { + config = { removeExtensions: true, flatten: true }; + + return gulp + .src("src/icons/*.svg") + .pipe(filelist("exampleSite/data/sprites/geekdoc.json", config)) + .pipe(gulp.dest(".")); +}); + gulp.task("iconfont", function () { var lastUnicode = 0xea01; var files = fs.readdirSync("src/iconfont"); @@ -260,7 +273,7 @@ gulp.task("clean", function () { gulp.task("asset", gulp.series("asset-sync", "asset-rev")); -gulp.task("svg", gulp.series("svg-sprite")); +gulp.task("svg", gulp.series("svg-sprite", devBuild ? "svg-sprite-list" : [])); gulp.task( "default", diff --git a/layouts/404.html b/layouts/404.html index b5ff1e3..743857a 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -18,7 +18,7 @@
- +
Lost?
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html index ec9ca84..66beaf3 100644 --- a/layouts/_default/_markup/render-heading.html +++ b/layouts/_default/_markup/render-heading.html @@ -5,7 +5,7 @@ {{ .Text | safeHTML }} - +
diff --git a/layouts/_default/list.html b/layouts/_default/list.html index d2426b9..7c52bca 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -22,7 +22,7 @@