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)
This commit is contained in:
liushuyu 2023-05-03 07:49:38 +02:00 committed by GitHub
parent b577a4df1b
commit 15704775b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 106 additions and 4411 deletions

View file

@ -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'

View file

@ -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.

View file

@ -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 parallel = require('concurrent-transform');
const browserSync = require('browser-sync').create();
const hugoDefaultArgs = ["-s", "./site/", "-d", "../build", "-v", "--gc"];
// Gulp Run Tasks
gulp.task('scripts:compatdb', function (callback) {
exec('yarn run compatdb', { cwd: './scripts/shared-hugo-scripts/' }, function (err, stdout, stderr) {
callback(err);
});
callback(
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(err);
});
});
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);
callback(
spawnSync("yarn", ["run", "wiki"], { cwd: "./scripts/shared-hugo-scripts/" }).error
);
});
gulp.task('hugo', (callback) => {
import('hugo-bin').then((hugo) => {
exec(hugo.default + ' -s ./site/ -d ../build/ -v --gc', (err, stdout, stderr) => {
console.log(stdout);
callback(err);
const result = spawnSync(hugo.default, hugoDefaultArgs, {
stdio: "inherit",
});
if (result.status !== 0) {
log.error(result.error);
callback(new Error("Hugo build failed"));
return;
}
callback();
});
});
gulp.task('final:serve', (done) => {
browserSync.init({
open: false,
server: {
baseDir: 'build'
import('hugo-bin').then((hugo) => {
let args = hugoDefaultArgs;
args.push("server");
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;
}
});
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);
callback();
});
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('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki'), 'hugo', 'assets:images', finalCommand));
gulp.task('default', gulp.series('hugo', finalCommand));
gulp.task('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki'), 'hugo', finalCommand));
gulp.task('content', gulp.series('hugo', finalCommand));

View file

@ -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",
"gulp-image-resize": "^0.13.1",
"hugo-bin": "0.101.2",
"merge-stream": "^2.0.0",
"hugo-bin": "0.101.4",
"minimist": "^1.2.8"
},
"devDependencies": {
"browser-sync": "^2.29.0",
"xo": "^0.53.1"
},
"devDependencies": {},
"hugo-bin": {
"buildTags": "extended"
}

View file

@ -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" ]

View file

@ -34,18 +34,19 @@
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
{{ $jumbotronFiles := readDir "/static/images/jumbotron/" }}
{{ range $index, $element := $jumbotronFiles }}
{{ $jumbotronImages := resources.Match "/images/jumbotron/*" }}
{{ 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>

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

4401
yarn.lock

File diff suppressed because it is too large Load diff