Full Hugo Image Processing (#346)

* deps: update dependencies

* site: use Hugo to process thumbnails for jumbotron, boxart and screenshots

* gulpfile: use Hugo to process all the images

* deps: remove unused dependencies (image processing related)

* deps: remove xo from the dependency (unused)

.github/workflows/deploy.yml

@@ -24,7 +24,7 @@ jobs:
         key: ${{ runner.os }}-rendered-${{ github.sha }}
         restore-keys: ${{ runner.os }}-rendered-
     - name: Install dependencies
-      run: sudo apt-get update && sudo apt-get install graphicsmagick
+      run: sudo apt-get update
     - name: Build
       env:
         GITHUB_WIKI_URL: 'https://github.com/yuzu-emu/yuzu.wiki.git'

README.md

@@ -17,4 +17,4 @@ Steps to run:
     export GITHUB_WIKI_URL=https://github.com/yuzu-emu/yuzu.wiki.git
     export TENANT=yuzu
     ```
-3. Run `yarn serve` to watch files and serve on http://localhost:3000 or `yarn build` to compile a static version.
+3. Run `yarn serve` to watch files and serve on http://localhost:1313 or `yarn build` to compile a static version.

gulpfile.js

@@ -1,74 +1,52 @@
 const fs = require('fs');
-const exec = require('child_process').exec;
+const { spawnSync } = require("child_process");
 
 const gulp = require('gulp');
 const log = require('fancy-log');
 const parseArgs = require('minimist');
-const concat = require('gulp-concat');
+
-const imageResize = require('gulp-image-resize');
+const hugoDefaultArgs = ["-s", "./site/", "-d", "../build", "-v", "--gc"];
-const parallel = require('concurrent-transform');
-const browserSync = require('browser-sync').create();
 
 // Gulp Run Tasks
 gulp.task('scripts:compatdb', function (callback) {
-    exec('yarn run compatdb', { cwd: './scripts/shared-hugo-scripts/' }, function (err, stdout, stderr) {
+    callback(
-        callback(err);
+        spawnSync("yarn", ["run", "compatdb"], { cwd: "./scripts/shared-hugo-scripts/" }).error
-    });
+    );
 });
 
 gulp.task('scripts:wiki', function (callback) {
-    exec('yarn run wiki', { cwd: './scripts/shared-hugo-scripts/' }, function (err, stdout, stderr) {
+    callback(
-        callback(err);
+        spawnSync("yarn", ["run", "wiki"], { cwd: "./scripts/shared-hugo-scripts/" }).error
-    });
+    );
-});
-
-gulp.task('assets:images', () => {
-    const baseImages = gulp.src('build/images/*', {base: './'})
-        .pipe(gulp.dest('./'));
-    const jumbotronImages = gulp.src('build/images/jumbotron/*', {base: './'})
-        .pipe(imageResize({width: 426, height: 240, crop: true}))
-        .pipe(gulp.dest('./'));
-    const bannerImages = gulp.src('build/images/banners/*', {base: './'})
-        .pipe(imageResize({width: 824, height: 306, crop: false}))
-        .pipe(gulp.dest('./'));
-    const boxartImages = gulp.src('build/images/game/boxart/*', {base: './'})
-        .pipe(imageResize({width: 328, height: 300, crop: true}))
-        .pipe(gulp.dest('./'));
-    const iconImages = gulp.src('build/images/game/icons/*', {base: './'})
-        .pipe(imageResize({width: 48, height: 48, crop: true}))
-        .pipe(gulp.dest('./'));
-    const screenshotImages = gulp.src('build/images/screenshots/*')
-        .pipe(imageResize({width: 640, height: 360, crop: false}))
-        .pipe(gulp.dest('build/images/screenshots/thumbs'));
-
-    return parallel(baseImages, jumbotronImages, bannerImages, boxartImages, iconImages, screenshotImages);
 });
 
 gulp.task('hugo', (callback) => {
     import('hugo-bin').then((hugo) => {
-        exec(hugo.default + ' -s ./site/ -d ../build/ -v --gc', (err, stdout, stderr) => {
+        const result = spawnSync(hugo.default, hugoDefaultArgs, {
-            console.log(stdout);
+            stdio: "inherit",
-            callback(err);
         });
+        if (result.status !== 0) {
+            log.error(result.error);
+            callback(new Error("Hugo build failed"));
+            return;
+        }
+        callback();
     });
 });
 
 gulp.task('final:serve', (done) => {
-    browserSync.init({
+    import('hugo-bin').then((hugo) => {
-        open: false,
+        let args = hugoDefaultArgs;
-        server: {
+        args.push("server");
-            baseDir: 'build'
+        const result = spawnSync(hugo.default, args, {
+            stdio: "inherit",
+        });
+        if (result.status !== 0) {
+            log.error(result.error);
+            callback(new Error("Failed to start Hugo preview server"));
+            return;
         }
-    });
+        callback();
-
-    gulp.watch('site/assets/js/**/*', gulp.series('hugo'));
-    gulp.watch('src/scss/**/*', gulp.series('hugo'));
-    gulp.watch('site/**/*.html', gulp.series('hugo'));
-    gulp.watch('site/**/*.md', gulp.series('hugo'));
-    gulp.watch('site/**/*.png', gulp.series('hugo'));
-
-    gulp.watch('build/**/*.html').on('change', (x) => {
-        browserSync.reload(x);
     });
 
     done();
@@ -103,6 +81,6 @@ if (parseArgs(process.argv).production) {
 log.info(`process.env.HUGO_ENV = '${process.env.HUGO_ENV}'`);
 log.info(`process.env.HUGO_BASEURL = '${process.env.HUGO_BASEURL}'`);
 
-gulp.task('default', gulp.series('hugo', 'assets:images', finalCommand));
+gulp.task('default', gulp.series('hugo', finalCommand));
-gulp.task('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki'), 'hugo', 'assets:images', finalCommand));
+gulp.task('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki'), 'hugo', finalCommand));
 gulp.task('content', gulp.series('hugo', finalCommand));

package.json

@@ -19,19 +19,12 @@
   "homepage": "https://github.com/yuzu-emu/yuzu-emu.github.io#readme",
   "dependencies": {
     "bulma": "0.9.4",
-    "concurrent-transform": "^1.0.0",
     "fancy-log": "^2.0.0",
     "gulp": "^4.0.2",
-    "gulp-concat": "^2.6.1",
+    "hugo-bin": "0.101.4",
-    "gulp-image-resize": "^0.13.1",
-    "hugo-bin": "0.101.2",
-    "merge-stream": "^2.0.0",
     "minimist": "^1.2.8"
   },
-  "devDependencies": {
+  "devDependencies": {},
-    "browser-sync": "^2.29.0",
-    "xo": "^0.53.1"
-  },
   "hugo-bin": {
     "buildTags": "extended"
   }

site/config.toml

@@ -71,6 +71,14 @@ timeout = 300000
     description = "yuzu is a highly experimental open-source emulator for the Nintendo Switch."
     weight = 1
 
+[module]
+  [[module.mounts]]
+  source = "static/images"
+  target = "assets/images"
+  [[module.mounts]]
+  source = 'assets'
+  target = 'assets'
+
 [outputs]
 home = [ "HTML", "RSS" ]
 section = [ "HTML" ]

site/layouts/partials/homepage/heroContents.html

@@ -34,18 +34,19 @@
                 <div class="glide">
                     <div class="glide__track" data-glide-el="track">
                         <ul class="glide__slides">
-                            {{ $jumbotronFiles := readDir "/static/images/jumbotron/" }}
+                            {{ $jumbotronImages := resources.Match "/images/jumbotron/*" }}
-                            {{ range $index, $element := $jumbotronFiles }}
+                            {{ range $index, $element := $jumbotronImages }}
+                            {{ $jumbotronThumb := $element.Fill "426x240 jpg q95" }}
                             {{ $fileTitle := (index (split .Name "-") 1) }}
                             {{ $fileTitle := (index (split $fileTitle ".") 0) }}
                             <li class="glide__slide">
                                 <div class="image is-16by9">
                                     <div class="carousel-caption">{{ $fileTitle }}</div>
                                     <img {{if eq $index 0}}
-                                         src="/images/jumbotron{{ $element.Name | relURL }}"
+                                         src="{{ $jumbotronThumb.Permalink }}"
                                          {{else}}
                                          class="lazy-load"
-                                         data-src="/images/jumbotron{{ $element.Name | relURL }}"
+                                         data-src="{{ $jumbotronThumb.Permalink }}"
                                          {{end}}
                                          alt="{{ $fileTitle }}">
                                 </div>

site/themes/shared-bulma-theme

@@ -1 +1 @@
-Subproject commit e625f3336e2c77542e7c6490f94befb14a5a8c67
+Subproject commit c49783585937bc005b561cdd072cc9f71472cfaf