From 3ef1ecfe4ec9d868e3b5a53788a36727f52e2e69 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Sun, 11 Jul 2021 14:24:13 -0400 Subject: [PATCH] fixing svg icon use function to always include icon class; also updated README and removed TODO --- README.md | 24 +++++++++--------------- TODO.md | 5 ----- content-templates/content-article.php | 6 +++--- custom-functions.php | 3 ++- custom-shortcodes.php | 2 +- header.php | 2 +- page-resume.php | 2 +- searchform.php | 2 +- socials.php | 2 +- src/classes.php | 2 +- 10 files changed, 20 insertions(+), 30 deletions(-) delete mode 100644 TODO.md diff --git a/README.md b/README.md index b4753b9..33eab54 100644 --- a/README.md +++ b/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--` 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.** diff --git a/TODO.md b/TODO.md deleted file mode 100644 index 773897e..0000000 --- a/TODO.md +++ /dev/null @@ -1,5 +0,0 @@ -# TODO - -- [ ] comments handling? -- [ ] indieweb stuff? -- [ ] Portfolio: just a blog category view of project blog posts? diff --git a/content-templates/content-article.php b/content-templates/content-article.php index c8196c4..8e9f722 100644 --- a/content-templates/content-article.php +++ b/content-templates/content-article.php @@ -25,15 +25,15 @@ namespace WP_73k;
'; - 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 '#' . $tag->name . ''; diff --git a/custom-functions.php b/custom-functions.php index 314046b..fe89e27 100644 --- a/custom-functions.php +++ b/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 = "
"; $output .= ""; return $output . "
"; diff --git a/custom-shortcodes.php b/custom-shortcodes.php index 9562bd2..e7ac91b 100644 --- a/custom-shortcodes.php +++ b/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') { diff --git a/header.php b/header.php index 9e96590..790c8d5 100644 --- a/header.php +++ b/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( '\\\\%1$s', esc_html( get_bloginfo( 'name' ) ) diff --git a/page-resume.php b/page-resume.php index 2eb3e67..8e2792f 100644 --- a/page-resume.php +++ b/page-resume.php @@ -22,7 +22,7 @@ get_header(); ?>

diff --git a/searchform.php b/searchform.php index 7a78f98..7fee12f 100644 --- a/searchform.php +++ b/searchform.php @@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es diff --git a/socials.php b/socials.php index aad7ae9..bb49daa 100644 --- a/socials.php +++ b/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 .= ''; - $out_str .= svg_icon_use($social['icon'], "icon baseline") . ""; + $out_str .= svg_icon_use($social['icon'], "baseline") . ""; } return $out_str . ''; } diff --git a/src/classes.php b/src/classes.php index 9d3fb16..8ad78bc 100644 --- a/src/classes.php +++ b/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; } } }