adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

initial grid-based navbar working

Browse source
This commit is contained in:
Adam Piontek 2021-07-26 13:07:57 -04:00
parent 5e3c175ec0
commit df1f2a31f6
13 changed files with 311 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

193
assets/css/_nav-bar-help.scss
View file

@ -1,81 +1,142 @@
// navbar-brand coloring /*
.navbar-dark { * top navbar css grid layout
a { */
&.navbar-brand { nav#top-navbar-grid-outer {
@extend .container-fluid;
@extend .mt-4;
@extend .mt-md-5;
@extend .mb-4;
@extend .px-3;
@extend .px-sm-4;
@extend .px-md-5;
@extend .d-grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto;
@include media-breakpoint-up(md) {
grid-template-rows: calc(5.3rem / 2) calc(5.3rem / 2) auto;
}
// grid-auto-rows: calc(4.3rem / 2);
div#top-navbar-grid-brand-outer {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
a#top-navbar-grid-brand-link {
color: $gray-300; color: $gray-300;
&:hover { svg.header-logo {
color: $gray-300; height: 4.3rem;
@include media-breakpoint-up(md) {
height: 5.3rem;
}
} }
} }
} }
} div#top-navbar-grid-toggle-button-outer {
grid-column-start: 2;
// navbar widget social icon coloring grid-column-end: 3;
// #block-7 > ul > li.wp-social-link.wp-block-social-link > a grid-row-start: 1;
.navbar-dark { grid-row-end: 2;
.widget_block { display: grid;
ul { justify-items: end;
&.wp-block-social-links { @extend .d-lg-none;
&.is-style-logos-only { }
li { div#top-navbar-grid-socialicon-widget-outer {
&.wp-social-link { grid-column-start: 2;
&.wp-block-social-link { grid-column-end: 3;
a { grid-row-start: 2;
&.wp-block-social-link-anchor { grid-row-end: 3;
color: $gray-300; display: grid;
} justify-items: end;
} align-items: end;
@include media-breakpoint-up(lg) {
grid-row-start: 1;
grid-row-end: 2;
align-items: start;
}
section.widget_block {
ul.wp-block-social-links {
@extend .mb-0;
li.wp-social-link {
@extend .mx-0;
@extend .my-0;
@extend .px-0;
@extend .py-0;
a.wp-block-social-link-anchor {
@extend .px-1;
@extend .px-md-2;
@extend .py-0;
color: $gray-300;
&:hover {
color: $primary;
}
svg {
height: 1.1em;
width: 1.1em;
@include media-breakpoint-up(md) {
height: 1.25em;
width: 1.25em;
} }
} }
} }
&:first-child {
a.wp-block-social-link-anchor {
@extend .ps-0;
}
}
&:last-child {
a.wp-block-social-link-anchor {
@extend .pe-0;
}
}
} }
} }
} }
} }
} div#top-navbar-grid-main-menu-outer {
@extend .d-none;
// navbar menu layout &.show, &.collapsing {
.navbar-expand-lg { @extend .d-grid;
.nav-item { grid-column-start: 1;
// margin-left: 2px; grid-column-end: 3;
a { grid-row-start: 3;
&.nav-link { grid-row-end: 4;
// padding: 0 0 0 6px; justify-items: center;
// margin: 8px 0 8px 0;
// border-left: 6px transparent solid;
&.active {
// border-left: 6px $secondary solid;
// border-bottom: none;
}
&:hover, &:active {
// color: $primary !important;
// border-left: 6px $secondary solid;
// border-bottom: none;
}
}
} }
} @extend .d-lg-grid;
} @include media-breakpoint-up(lg) {
grid-column-start: 2;
@include media-breakpoint-up(lg) { grid-column-end: 3;
.navbar-expand-lg { grid-row-start: 2;
.nav-item { grid-row-end: 3;
// margin-left: 0; justify-items: end;
a { align-items: end;
&.nav-link { }
// padding: 0 0 2px 0; ul#menu-navbar-main-menu {
// margin: 0 12px 0 12px; @extend .d-grid;
// border-left: none; grid-template-columns: 1fr;
// border-top: 6px transparent solid; list-style-type: none;
// border-bottom: 6px transparent solid; padding: 0;
&.active { margin: 1em 0 0 0;
// border-left: none; @extend .d-lg-inline;
// border-bottom: 6px $secondary solid; @include media-breakpoint-up(lg) {
} margin: 0;
&:hover, &:active { }
// color: $primary !important; li.menu-item {
// border-left: none; @extend .text-center;
// border-bottom: 6px $secondary solid; @extend .py-2;
@extend .d-lg-inline;
@include media-breakpoint-up(lg) {
padding: 0 0 0 1.5em !important;
}
a.top-navbar-grid-main-menu-item-link {
@extend .fw-bold;
@extend .text-uppercase;
@extend .text-decoration-none;
color: $gray-300;
&:hover {
@extend .text-decoration-underline;
text-decoration-color: $primary !important;
color: $gray-300;
} }
} }
} }

106
assets/css/_nav-burger.scss
View file

@ -1,56 +1,58 @@
/* Hamburger settings overrides */ // /* Hamburger settings overrides */
$hamburger-padding-x: 0.95rem !default; // $hamburger-padding-x: 0.95rem !default;
$hamburger-padding-y: 0.625rem !default; // $hamburger-padding-y: 0.625rem !default;
$hamburger-layer-width: 1.5rem !default; $hamburger-padding-x: 0 !default;
$hamburger-layer-height: 2px !default; $hamburger-padding-y: 0 !default;
$hamburger-layer-spacing: 6px !default; // $hamburger-layer-width: 1.5rem !default;
// * skipping default color, using color from bootstrap instead, below // $hamburger-layer-height: 2px !default;
// $hamburger-layer-color: rgba(0, 0, 0, 0.55) !default; // $hamburger-layer-spacing: 6px !default;
$hamburger-layer-border-radius: 0.25rem !default; // // * skipping default color, using color from bootstrap instead, below
$hamburger-hover-opacity: 0.7 !default; $hamburger-layer-color: $primary !default;
// * skipping default color, using color from bootstrap instead, below // $hamburger-layer-border-radius: 0.25rem !default;
// $hamburger-active-layer-color: $hamburger-layer-color !default; // $hamburger-hover-opacity: 0.7 !default;
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default; // // * skipping default color, using color from bootstrap instead, below
// // $hamburger-active-layer-color: $hamburger-layer-color !default;
// $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
/* import hamburgers sass */ /* import hamburgers sass */
@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss"; @import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
/* correct colors to match bootstrap defaults */ // /* correct colors to match bootstrap defaults */
.navbar-light { // .navbar-light {
.hamburger { // .hamburger {
&.navbar-toggler { // &.navbar-toggler {
border: 1px $navbar-light-toggler-border-color solid !important; // border: 1px $navbar-light-toggler-border-color solid !important;
.hamburger-inner { // .hamburger-inner {
&, // &,
&::before, // &::before,
&::after { // &::after {
background-color: $navbar-light-color; // background-color: $primary;
} // }
} // }
&.is-active { // &.is-active {
.hamburger-inner::after { // .hamburger-inner::after {
background-color: $navbar-light-color; // background-color: $primary;
} // }
} // }
} // }
} // }
} // }
.navbar-dark { // .navbar-dark {
.hamburger { // .hamburger {
&.navbar-toggler { // &.navbar-toggler {
border: 1px $navbar-dark-toggler-border-color solid !important; // border: 1px $navbar-dark-toggler-border-color solid !important;
.hamburger-inner { // .hamburger-inner {
&, // &,
&::before, // &::before,
&::after { // &::after {
background-color: $navbar-dark-color; // background-color: $primary;
} // }
} // }
&.is-active { // &.is-active {
.hamburger-inner::after { // .hamburger-inner::after {
background-color: $navbar-dark-color; // background-color: $primary;
} // }
} // }
} // }
} // }
} // }

6
assets/css/_svg-icons.scss
View file

@ -20,12 +20,8 @@
position: relative; position: relative;
} }
svg { svg {
&.img { &.img {
fill: currentColor; fill: currentColor;
&.header-logo {
height: 5.3rem;
}
} }
} }

4
assets/js/_hamburger-helper.js
View file

@ -1,5 +1,5 @@
const togglerBtn = document.getElementById("navbarSupportedContentToggler"); const togglerBtn = document.getElementById("top-navbar-grid-toggle-button");
const navbarContent = document.getElementById("navbarSupportedContent"); const navbarContent = document.getElementById("top-navbar-grid-main-menu-outer");
navbarContent.addEventListener("show.bs.collapse", () => { navbarContent.addEventListener("show.bs.collapse", () => {
console.log("opening navbar content"); console.log("opening navbar content");

21
assets/js/main.js
View file

@ -1,37 +1,20 @@
// Import SCSS // Import SCSS
import '../css/app.scss' import '../css/app.scss'
// Import icons for sprite-loader // Import svg files for webpack handling
// // navbar brand icon
// import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
import "../raw/rdnyc-logo.svg"; // rdnyc logo import "../raw/rdnyc-logo.svg"; // rdnyc logo
// other: // other:
// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon // import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
// import "../../node_modules/@mdi/svg/svg/home.svg"; // import "../../node_modules/@mdi/svg/svg/home.svg";
// import "../../node_modules/@mdi/svg/svg/information.svg"; // import "../../node_modules/@mdi/svg/svg/information.svg";
// import "../../node_modules/@mdi/svg/svg/account.svg"; // import "../../node_modules/@mdi/svg/svg/account.svg";
// import "../../node_modules/@mdi/svg/svg/briefcase-account.svg";
// import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
// import "../../node_modules/@mdi/svg/svg/typewriter.svg";
// import "../../node_modules/@mdi/svg/svg/calendar-clock.svg"; // import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg"; // import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
// import "../../node_modules/@mdi/svg/svg/rss.svg"; // import "../../node_modules/@mdi/svg/svg/rss.svg";
// import "../../node_modules/@mdi/svg/svg/account-hard-hat.svg";
// import "../../node_modules/@mdi/svg/svg/open-in-new.svg";
// social
// import "../../node_modules/@mdi/svg/svg/linkedin.svg";
// import "../../node_modules/@mdi/svg/svg/github.svg";
// import "../../node_modules/@mdi/svg/svg/key-variant.svg";
// import "../../node_modules/@mdi/svg/svg/goodreads.svg";
// import "../../node_modules/@mdi/svg/svg/twitter.svg";
// import "../../node_modules/@mdi/svg/svg/facebook.svg";
// import "../../node_modules/@mdi/svg/svg/instagram.svg";
// import "../../node_modules/@mdi/svg/svg/steam.svg";
// import "../../node_modules/@mdi/svg/svg/discord.svg";
// Import Bootstrap JS // Import Bootstrap JS
import 'bootstrap/js/dist/collapse'; import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/alert'; // import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button'; import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/dropdown'; import 'bootstrap/js/dist/dropdown';

18
custom-functions.php
View file

@ -1,7 +1,7 @@
<?php <?php
/** /**
* example inline SVG function args array supported keys * example inline SVG function atts array supported keys
*/ */
// array( // array(
// 'div_class' => 'icon baseline', // or 'img logo' or something // 'div_class' => 'icon baseline', // or 'img logo' or something
@ -16,13 +16,15 @@
* desired SVG must exist in ./dist/images, * desired SVG must exist in ./dist/images,
* preferably by import in main.js and processing by webpack * preferably by import in main.js and processing by webpack
*/ */
function inline_svg( $svg_name, $args = array() ) { function inline_svg( $svg_name, $atts = array() ) {
// load args or defaults // load atts or set defaults
$div_class = array_key_exists( 'div_class', $args ) ? $args['div_class'] : ''; extract(shortcode_atts(array(
$svg_class = array_key_exists( 'svg_class', $args ) ? $args['svg_class'] : ''; 'div_class' => '',
$svg_title = array_key_exists( 'svg_title', $args ) ? $args['svg_title'] : ''; 'svg_class' => '',
$svg_role_img = array_key_exists( 'svg_role_img', $args ) ? $args['svg_role_img'] : false; 'svg_title' => '',
$svg_aria_hidden = array_key_exists( 'svg_aria_hidden', $args ) ? $args['svg_aria_hidden'] : true; 'svg_role_img' => false,
'svg_aria_hidden' => true,
), $atts));
// load initial svg content // load initial svg content
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' ); $svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );

2
front-page.php
View file

@ -9,7 +9,7 @@
namespace WP_RDNYC; namespace WP_RDNYC;
get_header(); ?> get_header(); ?>
<main class="container d-flex justify-content-center"> <main class="container-fluid">
<div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-sm-3 mt-md-4 pt-md-4 mt-lg-5 pt-lg-5 pb-5" id="tek-front-page"> <div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-sm-3 mt-md-4 pt-md-4 mt-lg-5 pt-lg-5 pb-5" id="tek-front-page">
<?php <?php

146
header.php
View file

@ -39,60 +39,132 @@ namespace WP_RDNYC;
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage"> <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
<nav class="navbar navbar-expand-lg navbar-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 pt-5 pb-3 "> <nav id="top-navbar-grid-outer">
<div class="container-fluid">
<h1 class="my-0 py-0 lh-base"> <div id="top-navbar-grid-brand-outer">
<?php <h1>
printf( '<a class="navbar-brand" href="%1$s" rel="home">', <!-- my-0 py-0 -->
esc_url( home_url( '/' ) ) <?php
); printf( '<a id="top-navbar-grid-brand-link" href="%1$s" rel="home">',
esc_url( home_url( '/' ) )
echo inline_svg( 'svg-rdnyc-logo',
array(
'svg_class' => 'img header-logo',
'svg_title' => 'Recovery Dharma New York City',
'svg_role_img' => true,
'svg_aria_hidden' => false
)
); );
echo "</a>"; echo inline_svg( 'svg-rdnyc-logo',
?> array(
</h1> 'svg_class' => 'img header-logo',
'svg_title' => 'Recovery Dharma New York City',
'svg_role_img' => true,
'svg_aria_hidden' => false
)
);
<button class="hamburger hamburger--vortex collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> echo "</a>";
<span class="hamburger-box d-flex"> ?>
<span class="hamburger-inner"></span> </h1>
</span> </div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
dynamic_sidebar( 'navbar-socialicon-widget' );
endif;
?>
<div id="top-navbar-grid-toggle-button-outer">
<button class="hamburger hamburger--squeeze" id="top-navbar-grid-toggle-button"
type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar-grid-main-menu-outer"
aria-controls="top-navbar-grid-main-menu-outer" aria-expanded="false" aria-label="Toggle navigation"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div id="top-navbar-grid-socialicon-widget-outer">
<?php <?php
// using widget to include social icons, so they can be edited by wordpress users
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
dynamic_sidebar( 'navbar-socialicon-widget' );
endif;
?>
</div>
<?php
// main navigation menu
if ( has_nav_menu( 'navbar-main-menu' ) ) { if ( has_nav_menu( 'navbar-main-menu' ) ) {
// echo '<section>';
wp_nav_menu([ wp_nav_menu([
'theme_location' => 'navbar-main-menu', 'theme_location' => 'navbar-main-menu',
'depth' => 1, 'depth' => 1,
'menu' => 'navbar-main-menu', 'menu' => 'navbar-main-menu',
'container' => '', 'container' => 'div',
'container_class' => '', 'container_id' => 'top-navbar-grid-main-menu-outer',
'menu_class' => 'top-navbar-grid-main-menu',
'menu_item_class' => 'top-navbar-grid-main-menu-item',
'link_class' => 'top-navbar-grid-main-menu-item-link'
]);
// echo '</section>';
}
?>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark d-none">
<div id="navbarInnerContainer">
<h1>
<!-- my-0 py-0 -->
<?php
printf( '<a class="navbar-brand" href="%1$s" rel="home">',
esc_url( home_url( '/' ) )
);
echo inline_svg( 'svg-rdnyc-logo',
array(
'svg_class' => 'img header-logo',
'svg_title' => 'Recovery Dharma New York City',
'svg_role_img' => true,
'svg_aria_hidden' => false
)
);
echo "</a>";
?>
</h1>
<!-- collapsed navbar-toggler -->
<!-- <button class="hamburger hamburger--squeeze" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button> -->
<?php
// using widget to include social icons, so they can be edited by wordpress users
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
dynamic_sidebar( 'navbar-socialicon-widget' );
endif;
?>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
// main navigation menu
if ( has_nav_menu( 'navbar-main-menu' ) ) {
// echo '<section>';
wp_nav_menu([
'theme_location' => 'navbar-main-menu',
'depth' => 1,
'menu' => 'navbar-main-menu',
// 'container' => 'div',
// 'container_id' => 'section-navbar-main-menu',
'menu_class' => 'navbar-nav', 'menu_class' => 'navbar-nav',
'menu_item_class' => 'nav-item', 'menu_item_class' => 'nav-item',
'link_class' => 'nav-link font-monospace fs-6' 'link_class' => 'nav-link'
]); ]);
// echo '</section>';
} }
?> ?>
</div> </div>
</div> </nav>
</nav>

2
index.php
View file

@ -9,7 +9,7 @@
namespace WP_RDNYC; namespace WP_RDNYC;
get_header(); ?> get_header(); ?>
<main class="container d-flex justify-content-center"> <main class="container-fluid">
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3"> <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
<?php if (is_archive()) : ?> <?php if (is_archive()) : ?>

2
page.php
View file

@ -9,7 +9,7 @@
namespace WP_RDNYC; namespace WP_RDNYC;
get_header(); ?> get_header(); ?>
<main class="container d-flex justify-content-center"> <main class="container-fluid d-flex">
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 border-bottom border-gray pb-4 mb-3"> <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 border-bottom border-gray pb-4 mb-3">
<?php <?php

2
searchform.php
View file

@ -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> <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;" /> <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"> <button type="submit" class="btn btn-outline-light" title="Search">
<?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ) ?> <?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ); ?>
</button> </button>
</div> </div>
</form> </form>

4
svgo.config.js
View file

@ -17,7 +17,7 @@ module.exports = {
'removeHiddenElems', 'removeHiddenElems',
'removeEmptyText', 'removeEmptyText',
'removeEmptyContainers', 'removeEmptyContainers',
'removeViewBox', // 'removeViewBox',
'cleanupEnableBackground', 'cleanupEnableBackground',
'minifyStyles', 'minifyStyles',
// 'convertStyleToAttrs', // 'convertStyleToAttrs',
@ -41,7 +41,7 @@ module.exports = {
'convertEllipseToCircle', 'convertEllipseToCircle',
'sortAttrs', 'sortAttrs',
'sortDefsChildren', 'sortDefsChildren',
// 'removeDimensions', 'removeDimensions',
// 'removeAttrs', // 'removeAttrs',
{ {
name: 'removeAttrs', name: 'removeAttrs',

26
webpack.config.js
View file

@ -3,7 +3,6 @@ const glob = require("glob-all");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
// const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin"); const PurgecssPlugin = require("purgecss-webpack-plugin");
@ -77,30 +76,6 @@ const config = {
} }
], ],
}, },
// {
// test: /\.svg$/,
// loader: "svg-sprite-loader",
// options: {
// extract: true,
// spriteFilename: "icon-sprites.svg",
// publicPath: "./images/",
// symbolId: (filePath) => {
// if (filePath.includes("bootstrap-icons")) {
// return `bi-${path.basename(filePath).slice(0, -4)}`;
// } else if (filePath.includes("@mdi")) {
// return `mdi-${path.basename(filePath).slice(0, -4)}`;
// } else if (filePath.includes("heroicons")) {
// if (filePath.includes("outline")) {
// return `hio-${path.basename(filePath).slice(0, -4)}`;
// } else {
// return `his-${path.basename(filePath).slice(0, -4)}`;
// }
// } else {
// return `${path.basename(filePath).slice(0, -4)}`;
// }
// },
// },
// },
] ]
}, },
optimization: { optimization: {
@ -115,7 +90,6 @@ const config = {
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }), new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
// new SpriteLoaderPlugin({ plainSprite: true }),
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [{ patterns: [{
from: './assets/images/', from: './assets/images/',