Add Font Awesome; split Individual page; resolve absolute paths to fi…

…x PostCSS build

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;
     }

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",

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')],
     },
   },
 });

resources/views/individual-page-images.phtml

@@ -0,0 +1,7 @@
+<?php
+
+$view = view('::individual-page-images', get_defined_vars());
+
+$view = preg_replace('/text-center/', 'text-center small"><a', $view); // Make "Add a media object" smaller
+
+echo $view;

resources/views/individual-page-tabs.phtml

@@ -0,0 +1,7 @@
+<?php
+
+$view = view('::individual-page-tabs', get_defined_vars());
+
+$view = preg_replace('/nav-tabs/', 'nav-pills', $view); // Change tabs to pills
+
+echo $view;

src/scss/theme.scss

@@ -830,7 +830,7 @@ table.tv_tree {
 
   td,
   tbody td {
-    border: none;
+    border: none !important; /* Override tr:first-child border-top */
     padding: 0;
   }