From cb46dec901168a352306f7dd31c8b49f5b102003 Mon Sep 17 00:00:00 2001 From: Jonathan Chue <5141427+jchue@users.noreply.github.com> Date: Mon, 20 Jun 2022 23:18:28 -0700 Subject: [PATCH] Add Font Awesome; split Individual page; resolve absolute paths to fix PostCSS build --- module.php | 7 +++++-- package-lock.json | 17 +++++++++++++++++ package.json | 9 ++++++--- postcss.config.js | 8 +++++++- resources/views/individual-page-images.phtml | 7 +++++++ resources/views/individual-page-tabs.phtml | 7 +++++++ resources/views/individual-page.phtml | 15 --------------- src/scss/theme.scss | 2 +- 8 files changed, 50 insertions(+), 22 deletions(-) create mode 100644 resources/views/individual-page-images.phtml create mode 100644 resources/views/individual-page-tabs.phtml delete mode 100644 resources/views/individual-page.phtml diff --git a/module.php b/module.php index c4a83e5..de144fb 100644 --- a/module.php +++ b/module.php @@ -3,6 +3,7 @@ namespace JChue\WebtreesThemes\Argon; +use Fisharebest\Webtrees\I18N; use Fisharebest\Webtrees\Module\MinimalTheme; use Fisharebest\Webtrees\Module\ModuleCustomInterface; use Fisharebest\Webtrees\Module\ModuleCustomTrait; @@ -19,7 +20,7 @@ */ public function title(): string { - return 'Argon'; + return I18N::translate('Argon'); } /** @@ -78,7 +79,8 @@ public function boot(): void /** * Individual Page */ - View::registerCustomView('::individual-page', $this->name() . '::individual-page'); // Individual page template + View::registerCustomView('::individual-page-images', $this->name() . '::individual-page-images'); // Individual page thumbnails + View::registerCustomView('::individual-page-tabs', $this->name() . '::individual-page-tabs'); // Individual page tabs View::registerCustomView('::modules/relatives/family', $this->name() . '::modules/relatives/family'); // Individual > Families tab View::registerCustomView('::modules/stories/tab', $this->name() . '::modules/stories/tab'); // Individual > Stories tab View::registerCustomView('::modules/lightbox/tab', $this->name() . '::modules/lightbox/tab'); // Individual > Album tab @@ -142,6 +144,7 @@ public function stylesheets(): array // Only files in the /public/ folder will be accessible via the webserver. // Since modules cannot copy their files to the /public/ folder, they need to provide them via a callback. $stylesheets[] = $this->assetUrl('css/theme.css'); + $stylesheets[] = $this->assetUrl('css/fontawesome.css'); return $stylesheets; } diff --git a/package-lock.json b/package-lock.json index 90d29e6..6b412a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "@babel/cli": "^7.17.10", "@babel/core": "^7.17.10", "@babel/preset-env": "^7.17.10", + "@fortawesome/fontawesome-free": "^6.1.1", "autoprefixer": "^10.4.7", "chokidar-cli": "^3.0.0", "concurrently": "^7.1.0", @@ -1684,6 +1685,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", + "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==", + "dev": true, + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -7167,6 +7178,12 @@ } } }, + "@fortawesome/fontawesome-free": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", + "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==", + "dev": true + }, "@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", diff --git a/package.json b/package.json index 00aa717..447c7ea 100644 --- a/package.json +++ b/package.json @@ -3,15 +3,17 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev:clean": "rm -r resources/css/ resources/js/", + "dev:fonts": "cp node_modules/@fortawesome/fontawesome-free/css/all.min.css resources/css/fontawesome.css", "dev:sass": "sass --load-path=node_modules --no-source-map src/scss/theme.scss resources/css/theme.css", "dev:postcss": "postcss -r resources/css/*.css --verbose", - "dev:css": "chokidar \"src/scss/**/*.scss\" --verbose -c \"npm run dev:sass && npm run dev:postcss\"", + "dev:css": "npm run dev:fonts && chokidar \"src/scss/**/*.scss\" --verbose -c \"npm run dev:sass && npm run dev:postcss\"", "dev:js": "babel src/js/ --watch -d resources/js/", - "dev": "npm run dev:clean; concurrently --prefix-colors \"bgBlue.bold,bgMagenta.bold\" \"npm:dev:css\" \"npm:dev:js\"", + "dev": "npm run dev:clean; mkdir resources/css; concurrently --prefix-colors \"bgBlue.bold,bgMagenta.bold\" \"npm:dev:css\" \"npm:dev:js\"", "build:clean": "rm -r dist/", + "build:fonts": "cp node_modules/@fortawesome/fontawesome-free/css/all.min.css dist/resources/css/fontawesome.css", "build:sass": "sass --load-path=node_modules --no-source-map --style=compressed src/scss/theme.scss dist/resources/css/theme.css", "build:postcss": "postcss --env production -r dist/resources/css/*.css", - "build:css": "npm run build:sass && npm run build:postcss", + "build:css": "npm run build:sass && npm run build:fonts && npm run build:postcss", "build:lint": "eslint src/js/", "build:babel": "babel src/js/ -d dist/resources/js/", "build:uglify": "uglifyjs dist/resources/js/script.js --compress --mangle -o dist/resources/js/script.js", @@ -23,6 +25,7 @@ "@babel/cli": "^7.17.10", "@babel/core": "^7.17.10", "@babel/preset-env": "^7.17.10", + "@fortawesome/fontawesome-free": "^6.1.1", "autoprefixer": "^10.4.7", "chokidar-cli": "^3.0.0", "concurrently": "^7.1.0", diff --git a/postcss.config.js b/postcss.config.js index b823e9d..84fc8a2 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,3 +1,5 @@ +const path = require('node:path'); + module.exports = (ctx) => ({ map: false, plugins: { @@ -10,9 +12,13 @@ module.exports = (ctx) => ({ }], } : false, 'postcss-import': { path: ['src/scss'] }, + /** + * TODO: Reconsider inlining font faces and instead defining them on page; + * would need to figure out how to exclude fontawesome.css from PostCSS processing + */ 'postcss-url': { url: 'inline', - basePath: ['../../node_modules/leaflet/dist'], + basePath: [path.resolve('node_modules/leaflet/dist'), path.resolve('node_modules/@fortawesome/fontawesome-free/webfonts')], }, }, }); diff --git a/resources/views/individual-page-images.phtml b/resources/views/individual-page-images.phtml new file mode 100644 index 0000000..ce9cab4 --- /dev/null +++ b/resources/views/individual-page-images.phtml @@ -0,0 +1,7 @@ + -/* Make "Add a media object" smaller */ -.col-sm-3 .text-center { - font-size: 80%; -} - - -(\r\n|\r|\n|\s)+