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(); ?>
<main class="content-wrap">
<section class="container mx-auto relative z-10">
<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>
<?php
get_search_form(); ?>
</section>
<section class="container mx-auto relative z-10">
<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>
<?php
get_search_form(); ?>
</section>
</main>
<?php

View file

@ -9,17 +9,17 @@
namespace WP_73k;
get_header(); ?>
<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex items-start">
<h1><?= get_the_archive_title(); ?></h1>
<div class="lg:w-3/5 pr-10">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
echo get_template_part( 'content-templates/content', 'article' );
}
} ?>
</div>
</div>
<?php
<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex items-start">
<h1><?= get_the_archive_title(); ?></h1>
<div class="lg:w-3/5 pr-10">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
echo get_template_part( 'content-templates/content', 'article' );
}
} ?>
</div>
</div>
<?php
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*/
@import "svg-icons";
/* Navbar toggler icon override */
@import "nav-burger";
/* Navbar custom styling */
@import "nav-bar-help";
/* main */
html,
@ -39,6 +43,11 @@ a {
}
}
}
/* navbar menus */
// nav.navbar ul.navbar-nav li.menu-item
/* more */
.border-gray-900 {
border-color: $gray-900 !important;
}
@ -82,3 +91,4 @@ a {
padding-top: 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:
import "../../node_modules/@mdi/svg/svg/home.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/dist/collapse';
@ -14,8 +34,5 @@ import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/dropdown';
// Import JS Modules
import menu_init from './modules/menu'
// Load Menu Script
document.addEventListener( 'DOMContentLoaded', menu_init );
// import navbar burger code
import "./_hamburger-helper";

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.
*/
if ( post_password_required() ) {
return;
return;
}
?>
<div id="comments" class="comments-area">
<?php
if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
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' ) ),
number_format_i18n( get_comments_number() ),
'<span>' . get_the_title() . '</span>'
);
?>
</h2>
<?php
if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
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' ) ),
number_format_i18n( get_comments_number() ),
'<span>' . get_the_title() . '</span>'
);
?>
</h2>
<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-above" class="navigation comment-navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2>
<div class="nav-links">
<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>
</nav>
<?php
endif; ?>
<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-above" class="navigation comment-navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2>
<div class="nav-links">
<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>
</nav>
<?php
endif; ?>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
) ); ?>
</ol>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
) ); ?>
</ol>
<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-below" class="navigation comment-navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2>
<div class="nav-links">
<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>
</nav>
<?php
endif; ?>
<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-below" class="navigation comment-navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-73k' ); ?></h2>
<div class="nav-links">
<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>
</nav>
<?php
endif; ?>
<?php
endif; ?>
<?php
endif; ?>
<?php
// 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' ) ) :
?>
<p class="no-comments"><?php esc_html( 'Comments are closed.' ); ?></p>
<?php
endif; ?>
<?php
// 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' ) ) :
?>
<p class="no-comments"><?php esc_html( 'Comments are closed.' ); ?></p>
<?php
endif; ?>
<?php
comment_form(); ?>
<?php
comment_form(); ?>
</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">
<header>
<h2 class="m-0">
<?php
<header>
<h2 class="m-0">
<?php
if ( is_archive() || is_home() ) {
printf( '<a href="%s" rel="bookmark">%s</a>',
esc_url( get_the_permalink() ),
esc_html( get_the_title() )
);
} else {
echo get_the_title();
} ?>
</h2>
<p class="text-sm">Published on <?= get_the_date(); ?></p>
</header>
if ( is_archive() || is_home() ) {
printf( '<a href="%s" rel="bookmark">%s</a>',
esc_url( get_the_permalink() ),
esc_html( get_the_title() )
);
} else {
echo get_the_title();
} ?>
</h2>
<p class="text-sm">Published on <?= get_the_date(); ?></p>
</header>
<div class="article">
<?php
if ( has_post_thumbnail() ) {
echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
}
<div class="article">
<?php
if ( has_post_thumbnail() ) {
echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
}
the_content(); ?>
</div>
the_content(); ?>
</div>
<footer>
Categorized under: <?= get_the_category_list( ',' ); ?>
</footer>
<footer>
Categorized under: <?= get_the_category_list( ',' ); ?>
</footer>
</article>

View file

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

View file

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

View file

@ -14,12 +14,12 @@ namespace WP_73k;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
@ -33,7 +33,7 @@ namespace WP_73k;
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>',
esc_html( get_bloginfo( 'name' ) )
@ -43,59 +43,35 @@ namespace WP_73k;
?>
</h1>
<?php
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'
]);
} ?>
<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">
<span class="hamburger-box d-flex">
<span class="hamburger-inner"></span>
</span>
</button>
<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>
</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">
<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>
<main>

View file

@ -9,23 +9,23 @@
namespace WP_73k;
get_header(); ?>
<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">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
echo get_template_part( 'content-templates/content', 'article' );
}
} ?>
</div>
<?php
if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php
endif; ?>
</div>
<?php
<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">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
echo get_template_part( 'content-templates/content', 'article' );
}
} ?>
</div>
<?php
if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php
endif; ?>
</div>
<?php
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",
"version": "1.0.1",
"description": "WP 73k",
"main": "./assets/js/main.js",
"scripts": {
"start": "cross-env NODE_ENV=development SERVER=true webpack --watch",
"watch": "cross-env NODE_ENV=development webpack --watch",
"dev": "cross-env NODE_ENV=development webpack",
"prod": "cross-env NODE_ENV=production webpack",
"build": "concurrently \"npm run prod\" \"npm run dev\""
},
"dependencies": {
"name": "wp-73k-theme",
"version": "1.0.1",
"description": "WP 73k",
"main": "./assets/js/main.js",
"scripts": {
"start": "cross-env NODE_ENV=development SERVER=true webpack --watch",
"watch": "cross-env NODE_ENV=development webpack --watch",
"dev": "cross-env NODE_ENV=development webpack",
"prod": "cross-env NODE_ENV=production webpack",
"build": "concurrently \"npm run prod\" \"npm run dev\""
},
"dependencies": {
"@fontsource/jetbrains-mono": "^4.2.2",
"@fontsource/open-sans": "^4.2.2",
"@fontsource/righteous": "^4.x",
@ -20,26 +20,26 @@
"bootstrap": "^5.x",
"bootstrap-icons": "^1.x",
"hamburgers": "^1.x",
"postcss-custom-properties": "^9.1.1",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3",
"regenerator": "^0.14.7"
},
"devDependencies": {
"postcss-custom-properties": "^9.1.1",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3",
"regenerator": "^0.14.7"
},
"devDependencies": {
"@babel/core": "^7.x",
"@babel/preset-env": "^7.x",
"@fullhuman/postcss-purgecss": "^2.3.0",
"@fullhuman/postcss-purgecss": "^2.3.0",
"autoprefixer": "^10.x",
"babel-loader": "^8.x",
"browser-sync": "^2.26.10",
"browser-sync-webpack-plugin": "^2.2.2",
"concurrently": "^5.2.0",
"browser-sync": "^2.26.10",
"browser-sync-webpack-plugin": "^2.2.2",
"concurrently": "^5.2.0",
"copy-webpack-plugin": "^9.x",
"cross-env": "^7.0.2",
"cross-env": "^7.0.2",
"css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^3.x",
"file-loader": "^6.2.0",
"imagemin-webpack-plugin": "^2.4.2",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^1.x",
"postcss": "^8.2.6",
"postcss-loader": "^5.0.0",
@ -49,17 +49,17 @@
"svg-sprite-loader": "^6.x",
"webpack": "^5.x",
"webpack-cli": "^4.x"
},
"browserslist": [
},
"browserslist": [
"defaults",
"not dead",
"last 3 versions",
"not ie <= 11"
],
"engines": {
"node": ">=14.0.0",
"npm": ">=7.0.1"
},
"author": "Adam Piontek",
"license": "ISC"
],
"engines": {
"node": ">=14.0.0",
"npm": ">=7.0.1"
},
"author": "Adam Piontek",
"license": "ISC"
}

View file

@ -10,56 +10,56 @@
get_header(); ?>
<main class="py-8 lg:py-24" style="min-height: 100vh;">
<section class="container mx-auto relative z-10">
<?php
if ( have_posts() ) :
<section class="container mx-auto relative z-10">
<?php
if ( have_posts() ) :
printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>',
esc_html( get_search_query() )
);
printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>',
esc_html( get_search_query() )
);
echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">';
while ( have_posts() ) {
the_post(); ?>
<div class="lg:w-1/3 lg:px-4 mb-8">
<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() ); ?>">
<header>
<?php
if( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail', [
'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4'
]);
}
?>
<div class="text-left relative z-10">
<h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2>
<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>
</p>
</div>
</header>
<?php
printf( '<div class="article text-sm text-left">%s</div>',
get_the_excerpt()
); ?>
</a>
</article>
</div>
<?php
}
echo '</div>';
echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">';
while ( have_posts() ) {
the_post(); ?>
<div class="lg:w-1/3 lg:px-4 mb-8">
<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() ); ?>">
<header>
<?php
if( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail', [
'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4'
]);
}
?>
<div class="text-left relative z-10">
<h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2>
<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>
</p>
</div>
</header>
<?php
printf( '<div class="article text-sm text-left">%s</div>',
get_the_excerpt()
); ?>
</a>
</article>
</div>
<?php
}
echo '</div>';
the_posts_navigation();
the_posts_navigation();
else :
else :
printf( 'Sorry, no results for %s',
esc_html( get_search_query() )
);
printf( 'Sorry, no results for %s',
esc_html( get_search_query() )
);
endif; ?>
</section>
endif; ?>
</section>
</main>
<?php

View file

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

View file

@ -10,14 +10,58 @@ namespace WP_73k;
add_filter( 'body_class', function( $classes ) {
if ( is_singular( ['post', 'page'] ) ) {
$classes[] = 'singular';
}
if ( is_singular( ['post', 'page'] ) ) {
$classes[] = 'singular';
}
if ( is_front_page() ) {
$classes[] = 'front-page';
}
if ( is_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() {
$min_ext = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
$min_ext = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// JS
wp_enqueue_script(
'wp_73k_js',
WP_73k_URL . "/dist/main{$min_ext}.js",
[],
WP_73k_VERSION,
true
);
// JS
wp_enqueue_script(
'wp_73k_js',
WP_73k_URL . "/dist/main{$min_ext}.js",
[],
WP_73k_VERSION,
true
);
// CSS
wp_enqueue_style(
'wp_73k_css',
WP_73k_URL . "/dist/main{$min_ext}.css",
[],
WP_73k_VERSION,
''
);
// CSS
wp_enqueue_style(
'wp_73k_css',
WP_73k_URL . "/dist/main{$min_ext}.css",
[],
WP_73k_VERSION,
''
);
} );

View file

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

View file

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