rearranged social icon handling, implemented shortcodes, front-page now uses page content
This commit is contained in:
parent
573dcbf799
commit
d29641d700
12 changed files with 250 additions and 147 deletions
28
TODO.md
28
TODO.md
|
|
@ -10,7 +10,7 @@
|
|||
- [X] ~~*svg theme function?*~~ [2021-07-06]
|
||||
- [X] ~~*navbar menu*~~ [2021-07-06]
|
||||
- [X] ~~*navbar hamburger mobile toggler*~~ [2021-07-06]
|
||||
- [ ] pore through template files to update theming
|
||||
- [X] ~~*pore through template files to update theming*~~ [2021-07-08]
|
||||
- [X] ~~*initial front-page.php*~~ [2021-07-06]
|
||||
- [X] ~~*create social-icons working for front page*~~ [2021-07-06]
|
||||
- [X] ~~*create About page and suitable page.php for it & other generic pages*~~ [2021-07-06]
|
||||
|
|
@ -22,22 +22,28 @@
|
|||
- [X] ~~*continue blog work*~~ [2021-07-08]
|
||||
- [X] ~~*confirm content-article.php ok for multi-post blog page index listing*~~ [2021-07-08]
|
||||
- [X] ~~*single-post blog post view?*~~ [2021-07-08]
|
||||
- [ ] MOVE TO MCCOY/DEV1 WORDPRESS (1.5.8 RC1 ?)
|
||||
- [ ] syntax highlighting?
|
||||
- [ ] create some posts with code inside (inline and blocks)
|
||||
- [ ] create plugin to use chroma to highlight?
|
||||
- [ ] remaining pages
|
||||
- [ ] create Resume page and decide on using general or specific template
|
||||
- [ ] create Portfolio placeholder page
|
||||
- [ ] sidebar or footer for blog pages? meta info etc?
|
||||
- [ ] footer for non-front-page that isn't stuck to bottom right?
|
||||
- [X] ~~*MOVE TO MCCOY/DEV1 WORDPRESS (1.5.8 RC1 ?)*~~ [2021-07-08]
|
||||
- [ ] create Resume page
|
||||
- [ ] reconfigured social icons to allow filtering to professional icons
|
||||
- [ ] also allowing 'social_icons' shortcode for inserting social icons from wp editor
|
||||
- [ ] implement resume separator content
|
||||
- [ ] implement resume content ... and update?
|
||||
- [ ] re-do Front Page as content from within WP?
|
||||
- [ ] using 'featured image' or some such?
|
||||
- [ ] using shortcode for social icons?
|
||||
- [ ] figure out Search
|
||||
- [ ] Recipes & trip logs w/images? Videos?
|
||||
- [ ] double-check npm run build output to ensure it's all working
|
||||
- [ ] ...
|
||||
- [ ] profit!
|
||||
- [ ] TRANSFER TO PRODUCTION
|
||||
- [ ] content/settings (db export?)
|
||||
- [ ] contents of assets/cp-to-root folder: copy to root of wordpress install
|
||||
- [ ] nginx config w/special root files
|
||||
- [ ] use wordpress for filebrowser login auth?
|
||||
- [ ] Plugins for security and optimization
|
||||
- [ ] jetpack? markdown from that one?
|
||||
- [ ] indieweb stuff?
|
||||
- [ ] Portfolio: just a blog category view of project blog posts?
|
||||
- [ ] add recipe posts
|
||||
- [ ] add some code/notes posts of things I've learned?
|
||||
- [ ] other ideas?
|
||||
|
|
|
|||
16
archive.php
16
archive.php
|
|
@ -9,17 +9,23 @@
|
|||
namespace WP_73k;
|
||||
|
||||
get_header(); ?>
|
||||
<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex items-start">
|
||||
<main class="container d-flex justify-content-center">
|
||||
|
||||
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
|
||||
|
||||
<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
|
||||
|
||||
</main>
|
||||
<?php
|
||||
get_footer();
|
||||
|
|
@ -32,10 +32,10 @@ code.hljs {
|
|||
border-radius: .5em;
|
||||
// background-color: #1c1c1c;
|
||||
}
|
||||
p code {
|
||||
background-color: #2d2d2d;;
|
||||
color: #e2e4e5;
|
||||
padding: .1em .4em;
|
||||
p code, li code {
|
||||
background-color: #1d1f21;
|
||||
color: #c5c8c6;
|
||||
padding: .2em .4em .1em;
|
||||
border-radius: .25em;
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -126,10 +126,26 @@ a {
|
|||
@extend .fs-5;
|
||||
@extend .font-monospace;
|
||||
@extend .text-gray-300;
|
||||
@extend .mb-3;
|
||||
@extend .mb-0;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
/* front page styles */
|
||||
#front-page img.wp-post-image {
|
||||
@extend .img-fluid;
|
||||
@extend .border;
|
||||
// @extend .border-20;
|
||||
@extend .border-gray-900;
|
||||
@extend .rounded-2;
|
||||
border-width: 18px !important;
|
||||
width: 100%;
|
||||
}
|
||||
#front-page h2 {
|
||||
@extend .fs-2;
|
||||
@extend .fw-600;
|
||||
@extend .mb-0;
|
||||
}
|
||||
|
||||
/* social icons */
|
||||
#social-icons .link-light {
|
||||
border-bottom: none;
|
||||
|
|
|
|||
|
|
@ -24,8 +24,10 @@ namespace WP_73k;
|
|||
</h2>
|
||||
|
||||
<div class="post-date font-monospace text-gray-300 <?php echo (has_tag() ? '' : 'mb-3'); ?>">
|
||||
<?php echo svg_icon_use("mdi-calendar-clock", "icon baseline me-2") . get_the_date('F j, Y'); ?>
|
||||
by <?php echo svg_icon_use("mdi-account", "icon baseline me-1") . get_the_author(); ?>
|
||||
<?php
|
||||
echo svg_icon_use("mdi-calendar-clock", "icon baseline me-2") . get_the_date('F j, Y');
|
||||
echo ' by ' . svg_icon_use("mdi-account", "icon baseline me-1") . get_the_author();
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
|
|
|
|||
12
custom-functions.php
Normal file
12
custom-functions.php
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Function to support inline SVG icons by name with div wrapper
|
||||
*/
|
||||
function svg_icon_use($icon_name, $div_class) {
|
||||
$output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
|
||||
$output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
return $output . "</svg></div>";
|
||||
};
|
||||
|
||||
?>
|
||||
42
custom-shortcodes.php
Normal file
42
custom-shortcodes.php
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<?php
|
||||
|
||||
require_once( WP_73k_DIR . '/socials.php' );
|
||||
|
||||
/**
|
||||
* Shortcode to insert line of social icons
|
||||
*/
|
||||
function social_icons_function( $atts = array() ) {
|
||||
// set up default parameter
|
||||
extract(shortcode_atts(array(
|
||||
'prof' => '0'
|
||||
), $atts));
|
||||
|
||||
if ($prof == '1') {
|
||||
return get_social_icons_prof_str();
|
||||
} else {
|
||||
return get_social_icons_str();
|
||||
}
|
||||
}
|
||||
add_shortcode('social_icons', 'social_icons_function');
|
||||
|
||||
/**
|
||||
* Shortcode to insert single social icon by name
|
||||
* However, social icon MUST be imported in main.js !
|
||||
*/
|
||||
function single_social_icon_function( $atts = array() ) {
|
||||
// set up default parameter
|
||||
extract(shortcode_atts(array(
|
||||
'name' => '0',
|
||||
'class' => 'icon baseline'
|
||||
), $atts));
|
||||
|
||||
if ($name == '0') {
|
||||
return 'social_icon shortcode requires "name" parameter, like "name=mdi-account"';
|
||||
} else {
|
||||
return svg_icon_use($name, $class);
|
||||
}
|
||||
}
|
||||
add_shortcode('social_icon', 'single_social_icon_function');
|
||||
|
||||
|
||||
?>
|
||||
14
footer.php
14
footer.php
|
|
@ -12,19 +12,7 @@
|
|||
namespace WP_73k;
|
||||
|
||||
?>
|
||||
<!-- <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">© 2021 by Adam Piontek</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer> -->
|
||||
|
||||
<footer class="footer73k footer bottom-0 end-0 bg-dark">
|
||||
<div class="px-2 px-sm-3">
|
||||
<span class="text-gray-300">© Copyright <?php echo date("Y") ?> Adam Piontek</span>
|
||||
|
|
|
|||
|
|
@ -10,29 +10,26 @@ namespace WP_73k;
|
|||
|
||||
get_header('', array('fixednav'=>true)); ?>
|
||||
<main class="container-fluid h-100 d-flex justify-content-center align-items-center">
|
||||
<div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-5">
|
||||
<div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-5" id="front-page">
|
||||
|
||||
<?php
|
||||
if ( have_posts() ) {
|
||||
while ( have_posts() ) {
|
||||
the_post(); ?>
|
||||
|
||||
<div class="col-auto mt-3 mt-lg-0">
|
||||
<img src="<?php echo get_stylesheet_directory_uri() . '/dist/images/cat-roof_portrait.webp'; ?>"
|
||||
class="img-fluid border border-20 border-gray-900 rounded-2"
|
||||
alt="My cat Babka, stuck on a roof when she was still just a stray."
|
||||
title="My cat Babka, stuck on a roof when she was still just a stray."
|
||||
/>
|
||||
<?php echo get_the_post_thumbnail( get_the_ID(), 'large' ); ?>
|
||||
</div>
|
||||
|
||||
<!-- the_content(); -->
|
||||
<div class="col-auto justify-content-start ms-lg-3">
|
||||
|
||||
<h2 class="fs-2 fw-600 mb-0">
|
||||
<?php echo svg_icon_use("mdi-account", "icon baseline") . ' <span>Adam Piontek</span>'; ?>
|
||||
</h2>
|
||||
|
||||
<div class="font-monospace text-gray-300 fs-5">Desktop Systems Engineer. Human.</div>
|
||||
|
||||
<?php echo socials_str(socials()); ?>
|
||||
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
|
||||
<?php }
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<?php
|
||||
|
|
|
|||
|
|
@ -10,28 +10,19 @@ 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) {
|
||||
$output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
|
||||
$output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
return $output . "</svg></div>";
|
||||
};
|
||||
|
||||
/**
|
||||
* Social helpers
|
||||
* Social icons definition & functions
|
||||
*/
|
||||
require_once( WP_73k_DIR . '/socials.php' );
|
||||
function socials_str($socials) {
|
||||
$out_str = '<div id="social-icons" class="mt-1">';
|
||||
foreach ($socials as $i=>$social) {
|
||||
$pad = $i == 0 ? 'pe-1' : ($i == (count($socials) - 1) ? 'ps-1' : 'px-1');
|
||||
$out_str .= '<a href="' . $social['url'] . '" rel="noreferrer" target="' . $social['target'];
|
||||
$out_str .= '" class="fs-3 link-light text-decoration-none ' . $pad . '">';
|
||||
$out_str .= svg_icon_use($social['icon'], "icon baseline") . "</a>";
|
||||
}
|
||||
return $out_str . '</div>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom functions
|
||||
*/
|
||||
require_once( WP_73k_DIR . '/custom-functions.php' );
|
||||
|
||||
/**
|
||||
* Custom shortcodes for use in content
|
||||
*/
|
||||
require_once( WP_73k_DIR . '/custom-shortcodes.php');
|
||||
|
||||
/**
|
||||
* Autoloader for browersync
|
||||
|
|
|
|||
11
index.php
11
index.php
|
|
@ -19,15 +19,14 @@ get_header(); ?>
|
|||
the_post();
|
||||
echo get_template_part( 'content-templates/content', 'article' );
|
||||
}
|
||||
} ?>
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
// if ( !is_active_sidebar( 'sidebar' ) ) : ?>
|
||||
<!-- ?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' ); ?>
|
||||
<!-- ?php // dynamic_sidebar( 'sidebar' ); ? -->
|
||||
<!-- </aside> -->
|
||||
<?php
|
||||
// endif; ?>
|
||||
<!-- ?php // endif; ? -->
|
||||
</div>
|
||||
</main>
|
||||
<?php
|
||||
|
|
|
|||
40
socials.php
40
socials.php
|
|
@ -4,9 +4,7 @@
|
|||
*/
|
||||
|
||||
// definition of social icons:
|
||||
|
||||
function socials() {
|
||||
return array(
|
||||
$social_icons = array(
|
||||
array(
|
||||
'icon' => "mdi-typewriter",
|
||||
'url' => '/blog',
|
||||
|
|
@ -59,5 +57,39 @@ function socials() {
|
|||
'prof' => false,
|
||||
'target' => "_blank"
|
||||
)
|
||||
);
|
||||
);
|
||||
|
||||
function social_icon_is_prof($icon) {
|
||||
return $icon['prof'];
|
||||
}
|
||||
|
||||
function get_social_icons() {
|
||||
global $social_icons;
|
||||
return $social_icons;
|
||||
}
|
||||
|
||||
function get_social_icons_prof() {
|
||||
global $social_icons;
|
||||
return array_values(array_filter($social_icons, 'social_icon_is_prof'));
|
||||
}
|
||||
|
||||
function social_icons_str($icons_arr) {
|
||||
$out_str = '<div id="social-icons" class="mt-1">';
|
||||
foreach ($icons_arr as $i=>$social) {
|
||||
$pad = $i == 0 ? 'pe-1' : ($i == (count($icons_arr) - 1) ? 'ps-1' : 'px-1');
|
||||
$out_str .= '<a href="' . $social['url'] . '" rel="noreferrer" target="' . $social['target'];
|
||||
$out_str .= '" class="fs-3 link-light text-decoration-none ' . $pad . '">';
|
||||
$out_str .= svg_icon_use($social['icon'], "icon baseline") . "</a>";
|
||||
}
|
||||
return $out_str . '</div>';
|
||||
}
|
||||
|
||||
function get_social_icons_str() {
|
||||
return social_icons_str(get_social_icons());
|
||||
}
|
||||
|
||||
function get_social_icons_prof_str() {
|
||||
return social_icons_str(get_social_icons_prof());
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -22,7 +22,7 @@ add_filter( 'body_class', function( $classes ) {
|
|||
|
||||
});
|
||||
|
||||
/*
|
||||
/**
|
||||
* Filter to add CSS class to navbar menu <li> items
|
||||
*/
|
||||
add_filter( 'nav_menu_css_class' , function( $classes, $item, $args, $depth ) {
|
||||
|
|
@ -34,7 +34,7 @@ add_filter( 'nav_menu_css_class' , function( $classes, $item, $args, $depth ) {
|
|||
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 ) {
|
||||
|
|
@ -50,7 +50,7 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
|
|||
return $atts;
|
||||
}, 2, 3 );
|
||||
|
||||
/*
|
||||
/**
|
||||
* Filter to add icons to navbar menu items
|
||||
*/
|
||||
add_filter( 'wp_nav_menu_objects', function($items, $args) {
|
||||
|
|
@ -66,7 +66,7 @@ add_filter( 'wp_nav_menu_objects', function($items, $args) {
|
|||
return $items;
|
||||
}, 1, 2 );
|
||||
|
||||
/*
|
||||
/**
|
||||
* Filter for syntax-highlighting-code-block plugin style theme
|
||||
*/
|
||||
add_filter(
|
||||
|
|
@ -76,3 +76,15 @@ add_filter(
|
|||
return 'tomorrow-night';
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
/**
|
||||
* Set document title (in html head) to be reversed with '\' separator
|
||||
*/
|
||||
add_filter( 'document_title_separator', function ( $separator ) {
|
||||
return '\\';
|
||||
} );
|
||||
|
||||
add_filter('document_title_parts', function ($title) {
|
||||
return (is_home() || is_front_page()) ? $title : array_reverse($title);
|
||||
});
|
||||
Loading…
Reference in a new issue