navbar working

This commit is contained in:
Adam Piontek 2021-07-04 18:16:33 -04:00
parent b99281d42a
commit a81c43a655
22 changed files with 25452 additions and 25318 deletions

12
404.php
View file

@ -10,12 +10,12 @@
get_header(); ?> get_header(); ?>
<main class="content-wrap"> <main class="content-wrap">
<section class="container mx-auto relative z-10"> <section class="container mx-auto relative z-10">
<h1>Oops! That page can't be found.</h1> <h1>Oops! That page can't be found.</h1>
<p>It looks like nothing was found at this location. Maybe try one of the links below or a search?</p> <p>It looks like nothing was found at this location. Maybe try one of the links below or a search?</p>
<?php <?php
get_search_form(); ?> get_search_form(); ?>
</section> </section>
</main> </main>
<?php <?php

View file

@ -9,17 +9,17 @@
namespace WP_73k; namespace WP_73k;
get_header(); ?> get_header(); ?>
<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex items-start"> <div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex items-start">
<h1><?= get_the_archive_title(); ?></h1> <h1><?= get_the_archive_title(); ?></h1>
<div class="lg:w-3/5 pr-10"> <div class="lg:w-3/5 pr-10">
<?php <?php
if ( have_posts() ) { if ( have_posts() ) {
while ( have_posts() ) { while ( have_posts() ) {
the_post(); the_post();
echo get_template_part( 'content-templates/content', 'article' ); echo get_template_part( 'content-templates/content', 'article' );
} }
} ?> } ?>
</div> </div>
</div> </div>
<?php <?php
get_footer(); get_footer();

View file

@ -0,0 +1,47 @@
.navbar-expand-lg {
.nav-item {
margin-left: 2px;
a {
&.nav-link {
padding: 0 0 0 6px;
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;
}
}
}
}
}
@include media-breakpoint-up(lg) {
.navbar-expand-lg {
.nav-item {
margin-left: 0;
a {
&.nav-link {
padding: 0 0 6px 0;
margin: 0 12px 0 12px;
border-left: none;
border-top: 6px transparent solid;
border-bottom: 6px transparent solid;
&.active {
border-left: none;
border-bottom: 6px $secondary solid;
}
&:hover, &:active {
color: $primary !important;
border-left: none;
border-bottom: 6px $secondary solid;
}
}
}
}
}
}

View file

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

View file

@ -7,7 +7,11 @@
/*SVG ICON SYSTEM*/ /*SVG ICON SYSTEM*/
@import "svg-icons"; @import "svg-icons";
/* Navbar toggler icon override */
@import "nav-burger";
/* Navbar custom styling */
@import "nav-bar-help";
/* main */ /* main */
html, html,
@ -39,6 +43,11 @@ a {
} }
} }
} }
/* navbar menus */
// nav.navbar ul.navbar-nav li.menu-item
/* more */
.border-gray-900 { .border-gray-900 {
border-color: $gray-900 !important; border-color: $gray-900 !important;
} }
@ -82,3 +91,4 @@ a {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
} }

View file

@ -0,0 +1,12 @@
const togglerBtn = document.getElementById("navbarSupportedContentToggler");
const navbarContent = document.getElementById("navbarSupportedContent");
navbarContent.addEventListener("show.bs.collapse", () => {
console.log("opening navbar content");
togglerBtn.classList.toggle("is-active");
});
navbarContent.addEventListener("hide.bs.collapse", () => {
console.log("closing navbar content");
togglerBtn.classList.toggle("is-active");
});

View file

@ -7,6 +7,26 @@ import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
// other: // other:
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/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/tag-multiple.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 "../raw/gitea.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';
@ -14,8 +34,5 @@ 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';
// Import JS Modules // import navbar burger code
import menu_init from './modules/menu' import "./_hamburger-helper";
// Load Menu Script
document.addEventListener( 'DOMContentLoaded', menu_init );

View file

@ -1,30 +0,0 @@
export default () => {
const toggles = document.querySelectorAll('.toggle')
const menu = document.querySelector('.nav-mobile')
if ( ! toggles || ! menu ) {
return;
}
let active = false
toggles.forEach(toggle => {
toggle.addEventListener( 'click', () => {
if ( active ) {
open();
} else {
close();
}
})
})
function open() {
menu.classList.remove('active')
active = false
}
function close() {
menu.classList.add('active')
active = true
}
}

View file

@ -16,67 +16,67 @@
* return early without loading the comments. * return early without loading the comments.
*/ */
if ( post_password_required() ) { if ( post_password_required() ) {
return; return;
} }
?> ?>
<div id="comments" class="comments-area"> <div id="comments" class="comments-area">
<?php <?php
if ( have_comments() ) : ?> if ( have_comments() ) : ?>
<h2 class="comments-title"> <h2 class="comments-title">
<?php <?php
printf( printf(
esc_html( _nx( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', 'wp-73k' ) ), esc_html( _nx( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', 'wp-73k' ) ),
number_format_i18n( get_comments_number() ), number_format_i18n( get_comments_number() ),
'<span>' . get_the_title() . '</span>' '<span>' . get_the_title() . '</span>'
); );
?> ?>
</h2> </h2>
<?php <?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?> if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-above" class="navigation comment-navigation"> <nav id="comment-nav-above" class="navigation comment-navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2> <h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2>
<div class="nav-links"> <div class="nav-links">
<div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div> <div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div> <div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div>
</div> </div>
</nav> </nav>
<?php <?php
endif; ?> endif; ?>
<ol class="comment-list"> <ol class="comment-list">
<?php <?php
wp_list_comments( array( wp_list_comments( array(
'style' => 'ol', 'style' => 'ol',
'short_ping' => true, 'short_ping' => true,
) ); ?> ) ); ?>
</ol> </ol>
<?php <?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?> if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-below" class="navigation comment-navigation"> <nav id="comment-nav-below" class="navigation comment-navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2> <h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2>
<div class="nav-links"> <div class="nav-links">
<div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div> <div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div> <div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div>
</div> </div>
</nav> </nav>
<?php <?php
endif; ?> endif; ?>
<?php <?php
endif; ?> endif; ?>
<?php <?php
// If comments are closed and there are comments, let's leave a little note, shall we? // If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
?> ?>
<p class="no-comments"><?php esc_html( 'Comments are closed.' ); ?></p> <p class="no-comments"><?php esc_html( 'Comments are closed.' ); ?></p>
<?php <?php
endif; ?> endif; ?>
<?php <?php
comment_form(); ?> comment_form(); ?>
</div> </div>

View file

@ -10,32 +10,32 @@ namespace WP_73k;
?> ?>
<article <?php post_class( 'bg-white border-2 border-gray-400 p-8' ); ?> itemscope itemtype="https://schema.org/CreativeWork"> <article <?php post_class( 'bg-white border-2 border-gray-400 p-8' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
<header> <header>
<h2 class="m-0"> <h2 class="m-0">
<?php <?php
if ( is_archive() || is_home() ) { if ( is_archive() || is_home() ) {
printf( '<a href="%s" rel="bookmark">%s</a>', printf( '<a href="%s" rel="bookmark">%s</a>',
esc_url( get_the_permalink() ), esc_url( get_the_permalink() ),
esc_html( get_the_title() ) esc_html( get_the_title() )
); );
} else { } else {
echo get_the_title(); echo get_the_title();
} ?> } ?>
</h2> </h2>
<p class="text-sm">Published on <?= get_the_date(); ?></p> <p class="text-sm">Published on <?= get_the_date(); ?></p>
</header> </header>
<div class="article"> <div class="article">
<?php <?php
if ( has_post_thumbnail() ) { if ( has_post_thumbnail() ) {
echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] ); echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
} }
the_content(); ?> the_content(); ?>
</div> </div>
<footer> <footer>
Categorized under: <?= get_the_category_list( ',' ); ?> Categorized under: <?= get_the_category_list( ',' ); ?>
</footer> </footer>
</article> </article>

View file

@ -12,20 +12,20 @@
namespace WP_73k; namespace WP_73k;
?> ?>
</main> </main>
<footer class="footer relative bg-dark-1 text-light-2 pt-8 pb-16"> <footer class="footer relative bg-dark-1 text-light-2 pt-8 pb-16">
<div class="relative z-10"> <div class="relative z-10">
<div class="container mx-auto"> <div class="container mx-auto">
<div class="lg:flex lg:justify-between"> <div class="lg:flex lg:justify-between">
<div class="lg:w-1/4 text-center lg:text-left"> <div class="lg:w-1/4 text-center lg:text-left">
<div class="text-xl"> <div class="text-xl">
<p class="text-sm">73k.us is &copy; 2021 by Adam Piontek</p> <p class="text-sm">73k.us is &copy; 2021 by Adam Piontek</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</footer> </footer>
<?php wp_footer(); ?> <?php wp_footer(); ?>
</body> </body>
</html> </html>

View file

@ -9,16 +9,18 @@ define( 'WP_73k_VERSION', wp_get_theme()->version );
define( 'WP_73k_DIR', __DIR__ ); define( 'WP_73k_DIR', __DIR__ );
define( 'WP_73k_URL', get_template_directory_uri() ); define( 'WP_73k_URL', get_template_directory_uri() );
/**
* 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) {
echo "<div class=\"$div_class $icon_name\">"; $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
echo "<svg class=\"$icon_name\" aria-hidden=\"true\">"; $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icons.svg#$icon_name\"></use>";
return $output . "</svg></div>";
echo "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icons.svg#$icon_name\"></use>";
echo "</svg>";
echo "</div>";
}; };
/**
* Autoloader for browersync
*/
require_once( WP_73k_DIR . '/vendor/autoload.php' ); require_once( WP_73k_DIR . '/vendor/autoload.php' );
\A7\autoload( __DIR__ . '/src' ); \A7\autoload( __DIR__ . '/src' );

View file

@ -14,12 +14,12 @@ namespace WP_73k;
?><!DOCTYPE html> ?><!DOCTYPE html>
<html <?php language_attributes(); ?>> <html <?php language_attributes(); ?>>
<head> <head>
<meta charset="<?php bloginfo( 'charset' ); ?>"> <meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="icon" type="image/png" href="<?= get_stylesheet_directory_uri() . '/assets/images/favicon.png'; ?>"> <link rel="icon" type="image/png" href="<?= get_stylesheet_directory_uri() . '/assets/images/favicon.png'; ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?> <?php wp_head(); ?>
</head> </head>
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage"> <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
@ -33,7 +33,7 @@ namespace WP_73k;
esc_url( home_url( '/' ) ) esc_url( home_url( '/' ) )
); );
svg_icon_use("mdi-desktop-classic", "icon baseline"); echo svg_icon_use("mdi-desktop-classic", "icon baseline");
printf( ' <span class="fw-light font-brand">\\\\%1$s</span>', printf( ' <span class="fw-light font-brand">\\\\%1$s</span>',
esc_html( get_bloginfo( 'name' ) ) esc_html( get_bloginfo( 'name' ) )
@ -43,59 +43,35 @@ namespace WP_73k;
?> ?>
</h1> </h1>
<?php <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">
if ( has_nav_menu( 'primary' ) ) { <span class="hamburger-box d-flex">
wp_nav_menu([ <span class="hamburger-inner"></span>
'theme_location' => 'primary', </span>
'container' => 'nav', </button>
'container_class' => 'nav-primary ml-auto',
'menu_class' => 'list-reset m-0 md:flex md:justify-end md:items-center' <div class="collapse navbar-collapse" id="navbarSupportedContent">
]);
} ?> <?php
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu([
'theme_location' => 'primary',
'depth' => 1,
'menu' => 'primary',
'container' => '',
'container_class' => '',
'menu_class' => 'navbar-nav ms-auto',
'menu_item_class' => 'nav-item',
'link_class' => 'nav-link font-monospace fs-6'
// 'link_before' => '<span>',
// 'link_after' => '</span>'
]);
}
?>
</div>
</div> </div>
</nav> </nav>
<?php
// if ( has_nav_menu( 'primary' ) ) {
// wp_nav_menu( [
// 'items_wrap' => '<button class="toggle absolute pin-t pin-r mt-4 mr-4 button button-sm">Close</button><ul id="%1$s" class="%2$s">%3$s</ul>',
// 'theme_location' => 'primary',
// 'container' => 'nav',
// 'container_class' => 'nav-mobile',
// 'container_id' => 'mobile-menu',
// 'menu_class' => 'list-reset m-12'
// ] );
// }
?>
<header class="header"> <main>
<div class="container mx-auto">
<?php
// $tag = 'p';
// if ( is_front_page() || is_home() ) {
// $tag = 'h1';
// }
// printf( '<%1$s class="h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
// $tag,
// esc_url( home_url( '/' ) ),
// esc_html( get_bloginfo( 'name' ) )
// );
// if ( has_nav_menu( 'primary' ) ) {
// wp_nav_menu([
// 'theme_location' => 'primary',
// 'container' => 'nav',
// 'container_class' => 'nav-primary ml-auto',
// 'menu_class' => 'list-reset m-0 md:flex md:justify-end md:items-center'
// ]);
// }
?>
<div class="menu-item">
<button class="toggle highlight">Menu</button>
</div>
</div>
</header>
<main>

View file

@ -9,23 +9,23 @@
namespace WP_73k; namespace WP_73k;
get_header(); ?> get_header(); ?>
<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex flex-wrap items-start"> <div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex flex-wrap items-start">
<div class="w-full lg:w-4/6 lg:pr-10 mb-8"> <div class="w-full lg:w-4/6 lg:pr-10 mb-8">
<?php <?php
if ( have_posts() ) { if ( have_posts() ) {
while ( have_posts() ) { while ( have_posts() ) {
the_post(); the_post();
echo get_template_part( 'content-templates/content', 'article' ); echo get_template_part( 'content-templates/content', 'article' );
} }
} ?> } ?>
</div> </div>
<?php <?php
if ( is_active_sidebar( 'sidebar' ) ) : ?> if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8"> <aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8">
<?php dynamic_sidebar( 'sidebar' ); ?> <?php dynamic_sidebar( 'sidebar' ); ?>
</aside> </aside>
<?php <?php
endif; ?> endif; ?>
</div> </div>
<?php <?php
get_footer(); get_footer();

49720
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,16 +1,16 @@
{ {
"name": "wp-73k-theme", "name": "wp-73k-theme",
"version": "1.0.1", "version": "1.0.1",
"description": "WP 73k", "description": "WP 73k",
"main": "./assets/js/main.js", "main": "./assets/js/main.js",
"scripts": { "scripts": {
"start": "cross-env NODE_ENV=development SERVER=true webpack --watch", "start": "cross-env NODE_ENV=development SERVER=true webpack --watch",
"watch": "cross-env NODE_ENV=development webpack --watch", "watch": "cross-env NODE_ENV=development webpack --watch",
"dev": "cross-env NODE_ENV=development webpack", "dev": "cross-env NODE_ENV=development webpack",
"prod": "cross-env NODE_ENV=production webpack", "prod": "cross-env NODE_ENV=production webpack",
"build": "concurrently \"npm run prod\" \"npm run dev\"" "build": "concurrently \"npm run prod\" \"npm run dev\""
}, },
"dependencies": { "dependencies": {
"@fontsource/jetbrains-mono": "^4.2.2", "@fontsource/jetbrains-mono": "^4.2.2",
"@fontsource/open-sans": "^4.2.2", "@fontsource/open-sans": "^4.2.2",
"@fontsource/righteous": "^4.x", "@fontsource/righteous": "^4.x",
@ -20,26 +20,26 @@
"bootstrap": "^5.x", "bootstrap": "^5.x",
"bootstrap-icons": "^1.x", "bootstrap-icons": "^1.x",
"hamburgers": "^1.x", "hamburgers": "^1.x",
"postcss-custom-properties": "^9.1.1", "postcss-custom-properties": "^9.1.1",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3", "postcss-nested": "^4.2.3",
"regenerator": "^0.14.7" "regenerator": "^0.14.7"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.x", "@babel/core": "^7.x",
"@babel/preset-env": "^7.x", "@babel/preset-env": "^7.x",
"@fullhuman/postcss-purgecss": "^2.3.0", "@fullhuman/postcss-purgecss": "^2.3.0",
"autoprefixer": "^10.x", "autoprefixer": "^10.x",
"babel-loader": "^8.x", "babel-loader": "^8.x",
"browser-sync": "^2.26.10", "browser-sync": "^2.26.10",
"browser-sync-webpack-plugin": "^2.2.2", "browser-sync-webpack-plugin": "^2.2.2",
"concurrently": "^5.2.0", "concurrently": "^5.2.0",
"copy-webpack-plugin": "^9.x", "copy-webpack-plugin": "^9.x",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"css-loader": "^5.x", "css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^3.x", "css-minimizer-webpack-plugin": "^3.x",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"imagemin-webpack-plugin": "^2.4.2", "imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^1.x", "mini-css-extract-plugin": "^1.x",
"postcss": "^8.2.6", "postcss": "^8.2.6",
"postcss-loader": "^5.0.0", "postcss-loader": "^5.0.0",
@ -49,17 +49,17 @@
"svg-sprite-loader": "^6.x", "svg-sprite-loader": "^6.x",
"webpack": "^5.x", "webpack": "^5.x",
"webpack-cli": "^4.x" "webpack-cli": "^4.x"
}, },
"browserslist": [ "browserslist": [
"defaults", "defaults",
"not dead", "not dead",
"last 3 versions", "last 3 versions",
"not ie <= 11" "not ie <= 11"
], ],
"engines": { "engines": {
"node": ">=14.0.0", "node": ">=14.0.0",
"npm": ">=7.0.1" "npm": ">=7.0.1"
}, },
"author": "Adam Piontek", "author": "Adam Piontek",
"license": "ISC" "license": "ISC"
} }

View file

@ -10,56 +10,56 @@
get_header(); ?> get_header(); ?>
<main class="py-8 lg:py-24" style="min-height: 100vh;"> <main class="py-8 lg:py-24" style="min-height: 100vh;">
<section class="container mx-auto relative z-10"> <section class="container mx-auto relative z-10">
<?php <?php
if ( have_posts() ) : if ( have_posts() ) :
printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>', printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>',
esc_html( get_search_query() ) esc_html( get_search_query() )
); );
echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">'; echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">';
while ( have_posts() ) { while ( have_posts() ) {
the_post(); ?> the_post(); ?>
<div class="lg:w-1/3 lg:px-4 mb-8"> <div class="lg:w-1/3 lg:px-4 mb-8">
<article <?php post_class( 'h-full' ); ?> itemscope itemtype="https://schema.org/CreativeWork"> <article <?php post_class( 'h-full' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
<a class="card-link h-full bg-light-2" rel="bookmark" href="<?= esc_url( get_the_permalink() ); ?>"> <a class="card-link h-full bg-light-2" rel="bookmark" href="<?= esc_url( get_the_permalink() ); ?>">
<header> <header>
<?php <?php
if( has_post_thumbnail() ) { if( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail', [ the_post_thumbnail( 'thumbnail', [
'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4' 'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4'
]); ]);
} }
?> ?>
<div class="text-left relative z-10"> <div class="text-left relative z-10">
<h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2> <h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2>
<p class="text-sm italic mt-2"> <p class="text-sm italic mt-2">
<time class="<?= is_singular('page') ? 'hidden' : ''; ?>" itemprop="datePublished" datetime="<?= get_the_date( 'c' ); ?>">Published on <?= get_the_date( 'F j, Y'); ?></time> <time class="<?= is_singular('page') ? 'hidden' : ''; ?>" itemprop="datePublished" datetime="<?= get_the_date( 'c' ); ?>">Published on <?= get_the_date( 'F j, Y'); ?></time>
</p> </p>
</div> </div>
</header> </header>
<?php <?php
printf( '<div class="article text-sm text-left">%s</div>', printf( '<div class="article text-sm text-left">%s</div>',
get_the_excerpt() get_the_excerpt()
); ?> ); ?>
</a> </a>
</article> </article>
</div> </div>
<?php <?php
} }
echo '</div>'; echo '</div>';
the_posts_navigation(); the_posts_navigation();
else : else :
printf( 'Sorry, no results for %s', printf( 'Sorry, no results for %s',
esc_html( get_search_query() ) esc_html( get_search_query() )
); );
endif; ?> endif; ?>
</section> </section>
</main> </main>
<?php <?php

View file

@ -8,9 +8,9 @@
*/ */
if ( ! is_active_sidebar( 'sidebar-1' ) ) { if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return; return;
} ?> } ?>
<div class="widget-area" role="complementary"> <div class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?> <?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary --> </div><!-- #secondary -->

View file

@ -10,14 +10,58 @@ namespace WP_73k;
add_filter( 'body_class', function( $classes ) { add_filter( 'body_class', function( $classes ) {
if ( is_singular( ['post', 'page'] ) ) { if ( is_singular( ['post', 'page'] ) ) {
$classes[] = 'singular'; $classes[] = 'singular';
} }
if ( is_front_page() ) { if ( is_front_page() ) {
$classes[] = 'front-page'; $classes[] = 'front-page';
} }
return $classes; return $classes;
}); });
/*
* Filter to add CSS class to navbar menu <li> items
*/
add_filter( 'nav_menu_css_class' , function( $classes, $item, $args, $depth ) {
if ( 'primary' === $args->theme_location ) {
if (property_exists($args, 'menu_item_class')) {
array_push($classes, $args->menu_item_class);
}
}
return $classes;
}, 3, 4 );
/*
* Filter to add CSS class to navbar menu item <a> links
*/
add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
if ( 'primary' === $args->theme_location ) {
$atts['class'] = (empty($atts['class'])) ? '' : $atts['class'];
if ( in_array('current_page_item', $item->classes) ) {
$atts['class'] .= ' active';
}
if (property_exists($args, 'link_class')) {
$atts['class'] .= ' ' . $args->link_class;
}
}
return $atts;
}, 2, 3 );
/*
* Filter to add icons to navbar menu items
*/
add_filter( 'wp_nav_menu_objects', function($items, $args) {
$svgicon_prefix = 'icon-';
foreach ( $items as $k => $object ) {
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;
}
}
}
return $items;
}, 1, 2 );

View file

@ -7,24 +7,24 @@ namespace WP_73k;
*/ */
add_action( 'wp_enqueue_scripts', function() { add_action( 'wp_enqueue_scripts', function() {
$min_ext = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min'; $min_ext = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// JS // JS
wp_enqueue_script( wp_enqueue_script(
'wp_73k_js', 'wp_73k_js',
WP_73k_URL . "/dist/main{$min_ext}.js", WP_73k_URL . "/dist/main{$min_ext}.js",
[], [],
WP_73k_VERSION, WP_73k_VERSION,
true true
); );
// CSS // CSS
wp_enqueue_style( wp_enqueue_style(
'wp_73k_css', 'wp_73k_css',
WP_73k_URL . "/dist/main{$min_ext}.css", WP_73k_URL . "/dist/main{$min_ext}.css",
[], [],
WP_73k_VERSION, WP_73k_VERSION,
'' ''
); );
} ); } );

View file

@ -7,14 +7,14 @@ namespace WP_73k;
*/ */
add_action( 'widgets_init', function () { add_action( 'widgets_init', function () {
register_sidebar( [ register_sidebar( [
'name' => esc_html( 'Sidebar' ), 'name' => esc_html( 'Sidebar' ),
'id' => 'sidebar', 'id' => 'sidebar',
'description' => '', 'description' => '',
'before_widget' => '<section id="%1$s" class="widget %2$s">', 'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>', 'after_widget' => '</section>',
'before_title' => '<h4 class="widget-title">', 'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>', 'after_title' => '</h4>',
] ); ] );
} ); } );

View file

@ -16,59 +16,59 @@ let prefix = isProduction ? '.min' : '';
// Set the PostCSS Plugins. // Set the PostCSS Plugins.
const post_css_plugins = [ const post_css_plugins = [
require('postcss-import'), require('postcss-import'),
require('postcss-nested'), require('postcss-nested'),
require('postcss-custom-properties'), require('postcss-custom-properties'),
require('autoprefixer') require('autoprefixer')
] ]
// Add PurgeCSS for production builds. // Add PurgeCSS for production builds.
if ( isProduction ) { if ( isProduction ) {
post_css_plugins.push( post_css_plugins.push(
PurgeCSS({ PurgeCSS({
content: [ content: [
'./*.php', './*.php',
'./src/**/*.php', './src/**/*.php',
'./page-templates/*.php', './page-templates/*.php',
'./assets/images/**/*.svg', './assets/images/**/*.svg',
'./../../mu-plugins/app/src/components/**/*.php', './../../mu-plugins/app/src/components/**/*.php',
], ],
// Use Extractor configuration from Tailwind Docs // Use Extractor configuration from Tailwind Docs
// https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually // https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually
defaultExtractor: content => { defaultExtractor: content => {
// Capture as liberally as possible, including things like `h-(screen-1.5)` // Capture as liberally as possible, including things like `h-(screen-1.5)`
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [] const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
// Capture classes within other delimiters like .block(class="w-1/2") in Pug // Capture classes within other delimiters like .block(class="w-1/2") in Pug
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [] const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
return broadMatches.concat(innerMatches) return broadMatches.concat(innerMatches)
}, },
whitelistPatterns: getCSSWhitelistPatterns() whitelistPatterns: getCSSWhitelistPatterns()
}) })
) )
} }
const config = { const config = {
entry: './assets/js/main.js', entry: './assets/js/main.js',
output: { output: {
filename: `[name]${prefix}.js`, filename: `[name]${prefix}.js`,
path: path.resolve(__dirname, 'dist') path: path.resolve(__dirname, 'dist')
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.js$/, test: /\.js$/,
exclude: /node_modules/, exclude: /node_modules/,
loader: 'babel-loader', loader: 'babel-loader',
options: { options: {
presets: [ presets: [
[ [
"@babel/preset-env" "@babel/preset-env"
] ]
] ]
} }
}, },
{ {
test: /\.[s]?css$/, test: /\.[s]?css$/,
use: [ use: [
@ -77,7 +77,7 @@ const config = {
"sass-loader", "sass-loader",
"postcss-loader", "postcss-loader",
], ],
}, },
{ {
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/, test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [ use: [
@ -116,50 +116,50 @@ const config = {
}, },
}, },
] ]
}, },
optimization: { optimization: {
minimizer: ["...", new CssMinimizerPlugin()], minimizer: ["...", new CssMinimizerPlugin()],
}, },
mode: process.env.NODE_ENV, mode: process.env.NODE_ENV,
resolve: { resolve: {
alias: { alias: {
'@' : path.resolve('assets'), '@' : path.resolve('assets'),
'@images': path.resolve('../images') '@images': path.resolve('../images')
} }
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }), new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
new SpriteLoaderPlugin({ plainSprite: true }), new SpriteLoaderPlugin({ plainSprite: true }),
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [{ patterns: [{
from: './assets/images/', from: './assets/images/',
to: 'images', to: 'images',
globOptions: { globOptions: {
ignore: [ ignore: [
'**/.DS_Store' '**/.DS_Store'
] ]
} }
}] }]
}), }),
new ImageminPlugin({ test: /\.(jpe?g|png|gif)$/i }) new ImageminPlugin({ test: /\.(jpe?g|png|gif)$/i })
] ]
} }
// Fire up a local server if requested // Fire up a local server if requested
if (process.env.SERVER) { if (process.env.SERVER) {
config.plugins.push( config.plugins.push(
new BrowserSyncPlugin( new BrowserSyncPlugin(
{ {
proxy: 'http://127.0.0.1:9764', proxy: 'http://127.0.0.1:9764',
files: [ files: [
'**/*.php', '**/*.php',
'**/*.scss' '**/*.scss'
], ],
port: 9765, port: 9765,
notify: false, notify: false,
} }
) )
) )
} }
/** /**
@ -167,38 +167,38 @@ if (process.env.SERVER) {
* @returns {RegExp[]} * @returns {RegExp[]}
*/ */
function getCSSWhitelistPatterns() { function getCSSWhitelistPatterns() {
return [ return [
/^home(-.*)?$/, /^home(-.*)?$/,
/^blog(-.*)?$/, /^blog(-.*)?$/,
/^archive(-.*)?$/, /^archive(-.*)?$/,
/^date(-.*)?$/, /^date(-.*)?$/,
/^error404(-.*)?$/, /^error404(-.*)?$/,
/^admin-bar(-.*)?$/, /^admin-bar(-.*)?$/,
/^search(-.*)?$/, /^search(-.*)?$/,
/^nav(-.*)?$/, /^nav(-.*)?$/,
/^wp(-.*)?$/, /^wp(-.*)?$/,
/^screen(-.*)?$/, /^screen(-.*)?$/,
/^navigation(-.*)?$/, /^navigation(-.*)?$/,
/^(.*)-template(-.*)?$/, /^(.*)-template(-.*)?$/,
/^(.*)?-?single(-.*)?$/, /^(.*)?-?single(-.*)?$/,
/^postid-(.*)?$/, /^postid-(.*)?$/,
/^post-(.*)?$/, /^post-(.*)?$/,
/^attachmentid-(.*)?$/, /^attachmentid-(.*)?$/,
/^attachment(-.*)?$/, /^attachment(-.*)?$/,
/^page(-.*)?$/, /^page(-.*)?$/,
/^(post-type-)?archive(-.*)?$/, /^(post-type-)?archive(-.*)?$/,
/^author(-.*)?$/, /^author(-.*)?$/,
/^category(-.*)?$/, /^category(-.*)?$/,
/^tag(-.*)?$/, /^tag(-.*)?$/,
/^menu(-.*)?$/, /^menu(-.*)?$/,
/^tags(-.*)?$/, /^tags(-.*)?$/,
/^tax-(.*)?$/, /^tax-(.*)?$/,
/^term-(.*)?$/, /^term-(.*)?$/,
/^date-(.*)?$/, /^date-(.*)?$/,
/^(.*)?-?paged(-.*)?$/, /^(.*)?-?paged(-.*)?$/,
/^depth(-.*)?$/, /^depth(-.*)?$/,
/^children(-.*)?$/, /^children(-.*)?$/,
]; ];
} }
module.exports = config module.exports = config