fixing svg icon use function to always include icon class; also updated README and removed TODO

README.md

@@ -13,24 +13,15 @@ The WordPress theme for 73k.us, based on Bootstrap 5 and PurgeCSS.
 - `wp_73k_`
 3. Run `composer install`
 4. Run `npm install` 
-5. Update the BrowserSyncPlugin configuration in `webpack.config.js` to the domain of your local installation.
+5. Set environment variables for BrowserSyncPlugin to the domain/ports you need (see `webpack.config.js` for variables needed).
 6. Run `npm start` to begin development server.
 
 ## Webpack
-The theme uses Webpack as its bundler with ES6 modules for JavaScript files. It also compresses images found in src automatically, and maps images to the appropriate destination through the `@images` alias. For example, `@images/example.jpg` would be compiled to `../images/example.jpg`.
+The theme uses Webpack as its bundler with ES6 modules for JavaScript files.
 
-## Hamburgers
+### SpriteLoaderPlugin
 
-The sass for the hamburgers package throws warnings unless fixed, so do this before first `npm run` attempts:
-
-```bash
-npm i -g sass-migrator
-HBPATH="./node_modules/hamburgers/_sass/hamburgers/"
-find ${HBPATH} -type f | while read f; do npx sass-migrator division -d ${f}; done
-# if cleaning node_modules & dist:
-rm -rf node_modules && rm -rf dist && npm i && HBPATH="./node_modules/hamburgers/_sass/hamburgers/"
-find ${HBPATH} -type f | while read f; do npx sass-migrator division -d ${f}; done
-```
+SVG icons can be pulled into a sprite file (output to `dist/images/icon-sprites.svg`). For this to work, `@import` them in main.js (see examples). Sprite names are set by the config in `webpack.config.js` with prefixes supported for some icon packs ([@mdi/svg](https://www.npmjs.com/package/@mdi/svg), [bootstrap-icons](https://www.npmjs.com/package/bootstrap-icons), [heroicons](https://www.npmjs.com/package/heroicons)). They can then be used for menus (put `icon-<PREFIX>-<ICON-NAME>` in the class for a menu item), or used in the theme php files with the `svg_icon_use($icon_name, $div_class)` function from `custom-functions.php` to get a div containing the correct svg use tag. `$div_class` should usually include `baseline` for proper layout.
 
 ## Syntax Highlighting
 
@@ -40,10 +31,10 @@ However, the plugin doesn't support highlighting inline code, but I like that op
 
 ## Static Files via nginx
 
-Static files under `assets/_root` should be served by nginx with location config like so:
+Static files under `assets/_root` cal be served by nginx with location config like below - otherwise they (or your versions of whatever you want served from your WordPress site root) should be moved to your WordPress site root.
 
 ```conf
-location ~ /(robots.txt|favicon.ico|F185CEE29A3D443_public_key.asc|android-chrome-192x192.png|android-chrome-512x512.png|browserconfig.xml|keybase.txt|mstile-150x150.png|qpalpha.jpg|thatsjotuncock.gif|vpalpha.jpg) {
+location ~ /(robots.txt|favicon.ico|android-chrome-192x192.png|android-chrome-512x512.png|browserconfig.xml|mstile-150x150.png) {
     root /var/www/dev1/wordpress-5.8-RC2/wp-content/themes/wp-73k/assets/_root/;
     allow all;
     log_not_found off;
@@ -52,13 +43,16 @@ location ~ /(robots.txt|favicon.ico|F185CEE29A3D443_public_key.asc|android-chrom
 ```
 
 ## Deployment 
+
 ```bash
 npm run build
 ```
 This will run both a production and development set of webpack tasks. The enqueue hook will load the correct version of the JS file, based on whether your development/staging server's `SCRIPT_DEBUG` constant is set to `true`.
 
 ## Bootstrap
+
 You can customize Bootstrap SCSS & JavaScript imports in the `assets/css/app.scss` and `assets/js/main.js` files.
 
 ## PurgeCSS
+
 *WP 73k* uses PurgeCSS to remove unused styles from the production build. It scans your project directory for strings that match SCSS declarations. You can modify the directories to search for in the `webpack.config.js` file. **Always check your production build to make sure styles you were developing with compiled correctly.**

TODO.md

@@ -1,5 +0,0 @@
-# TODO
-
-- [ ] comments handling?
-- [ ] indieweb stuff?
-- [ ] Portfolio: just a blog category view of project blog posts?

content-templates/content-article.php

@@ -25,15 +25,15 @@ namespace WP_73k;
 
     <div class="post-date font-monospace text-gray-300 <?php echo (has_tag() ? '' : 'mb-3'); ?>">
       <?php 
-        echo svg_icon_use("mdi-calendar-clock", "icon baseline me-2") . get_the_date('F j, Y');
-        echo ' by ' . svg_icon_use("mdi-account", "icon baseline me-1") . get_the_author();
+        echo svg_icon_use("mdi-calendar-clock", "baseline me-2") . get_the_date('F j, Y');
+        echo ' by ' . svg_icon_use("mdi-account", "baseline me-1") . get_the_author();
       ?>
     </div>
 
     <?php
       if (has_tag()) {
         echo '<div class="post-tags fs-smaller mb-4">';
-        echo svg_icon_use("mdi-tag-multiple", "icon baseline text-gray-300 me-1");
+        echo svg_icon_use("mdi-tag-multiple", "baseline text-gray-300 me-1");
 
         $tag_strings = array_map(function ($tag) {
           return '<span class="text-gray-300">#</span><a href="' . get_tag_link($tag) . '">' . $tag->name . '</a>';

custom-functions.php

@@ -3,7 +3,8 @@
 /**
  * Function to support inline SVG icons by name with div wrapper
  */
-function svg_icon_use($icon_name, $div_class) {
+function svg_icon_use($icon_name, $div_class = '') {
+  $div_class .= ' icon';
   $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
   $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
   return $output . "</svg></div>";

custom-shortcodes.php

@@ -27,7 +27,7 @@ function single_social_icon_function( $atts = array() ) {
   // set up default parameter
   extract(shortcode_atts(array(
     'name' => '0',
-    'class' => 'icon baseline'
+    'class' => 'baseline'
   ), $atts));
 
   if ($name == '0') {

header.php

@@ -68,7 +68,7 @@ namespace WP_73k;
           esc_url( home_url( '/' ) )
         );
 
-        echo svg_icon_use("mdi-desktop-classic", "icon baseline");
+        echo svg_icon_use("mdi-desktop-classic", "baseline");
 
         printf( '<span class="fw-light font-brand">\\\\%1$s</span>',
           esc_html( get_bloginfo( 'name' ) )

page-resume.php

@@ -22,7 +22,7 @@ get_header(); ?>
       <header>
         <h2>
         <?php
-          echo svg_icon_use('mdi-account', 'icon baseline');
+          echo svg_icon_use('mdi-account', 'baseline');
           echo ' ' . get_the_author_meta('display_name');
           ?>
         </h2>

searchform.php

@@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
     <label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
     <input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog&hellip;" />
     <button type="submit" class="btn btn-outline-light" title="Search">
-      <?php echo svg_icon_use('mdi-magnify', 'icon baseline'); ?>
+      <?php echo svg_icon_use('mdi-magnify', 'baseline'); ?>
     </button>
   </div>
 </form>

socials.php

@@ -79,7 +79,7 @@ function social_icons_str($icons_arr) {
     $pad = $i == 0 ? 'pe-1' : ($i == (count($icons_arr) - 1) ? 'ps-1' : 'px-1');
     $out_str .= '<a href="' . $social['url'] . '" rel="noreferrer" target="' . $social['target'];
     $out_str .= '" class="fs-3 link-light text-decoration-none ' . $pad . '">';
-    $out_str .= svg_icon_use($social['icon'], "icon baseline") . "</a>";
+    $out_str .= svg_icon_use($social['icon'], "baseline") . "</a>";
   }
   return $out_str . '</div>';
 }

src/classes.php

@@ -59,7 +59,7 @@ add_filter( 'wp_nav_menu_objects', function($items, $args) {
     foreach ($object->classes as $c) {
       if (substr( $c, 0, strlen( $svgicon_prefix ) ) === $svgicon_prefix) {
         $icon_slug = str_replace($svgicon_prefix, '', $c);
-        $object->title = svg_icon_use($icon_slug, 'icon baseline') . "\\" . $object->title;
+        $object->title = svg_icon_use($icon_slug, 'baseline') . "\\" . $object->title;
       }
     }
   }