diff --git a/TODO.md b/TODO.md index 98627d9..64d6bc0 100644 --- a/TODO.md +++ b/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? diff --git a/archive.php b/archive.php index 336e45a..74f544d 100644 --- a/archive.php +++ b/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 + + <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); echo get_template_part( 'content-templates/content', 'article' ); } - } ?> - </div> + } + ?> + </div> - <?php + +</main> +<?php get_footer(); \ No newline at end of file diff --git a/assets/css/app.scss b/assets/css/app.scss index fb69fc3..b3009af 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -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; diff --git a/content-templates/content-article.php b/content-templates/content-article.php index a221c05..570c70a 100644 --- a/content-templates/content-article.php +++ b/content-templates/content-article.php @@ -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 diff --git a/custom-functions.php b/custom-functions.php new file mode 100644 index 0000000..314046b --- /dev/null +++ b/custom-functions.php @@ -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>"; +}; + +?> \ No newline at end of file diff --git a/custom-shortcodes.php b/custom-shortcodes.php new file mode 100644 index 0000000..9562bd2 --- /dev/null +++ b/custom-shortcodes.php @@ -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'); + + +?> \ No newline at end of file diff --git a/footer.php b/footer.php index 62adcba..5a03105 100644 --- a/footer.php +++ b/footer.php @@ -12,24 +12,12 @@ 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> - </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> + </div> + </footer> <?php wp_footer(); ?> </body> diff --git a/front-page.php b/front-page.php index 53f788b..01e5898 100644 --- a/front-page.php +++ b/front-page.php @@ -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 diff --git a/functions.php b/functions.php index a006821..d8d10b1 100644 --- a/functions.php +++ b/functions.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 diff --git a/index.php b/index.php index fe6378f..6a7469a 100644 --- a/index.php +++ b/index.php @@ -14,20 +14,19 @@ get_header(); ?> <div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3"> <?php - if ( have_posts() ) { - while ( have_posts() ) { - the_post(); - echo get_template_part( 'content-templates/content', 'article' ); + if ( have_posts() ) { + while ( have_posts() ) { + 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 diff --git a/socials.php b/socials.php index 9d5a5bf..f205e3b 100644 --- a/socials.php +++ b/socials.php @@ -4,60 +4,92 @@ */ // definition of social icons: +$social_icons = array( + array( + 'icon' => "mdi-typewriter", + 'url' => '/blog', + 'prof' => false, + 'target' => "_self" + ), + array('icon' => "mdi-rss", 'url' => '/feed', 'prof' => false, 'target' => "_blank"), + array( + 'icon' => "mdi-linkedin", + 'url' => "https://www.linkedin.com/in/adampiontek/", + 'prof' => true, + 'target' => "_blank" + ), + array('icon' => "mdi-github", 'url' => "https://github.com/apiontek", 'prof' => true, 'target' => "_blank"), + array('icon' => "gitea", 'url' => "https://73k.us/git/adam", 'prof' => true, 'target' => "_blank"), + array( + 'icon' => "mdi-key-variant", + 'url' => '/DF185CEE29A3D443_public_key.asc', + 'prof' => true, + 'target' => "_blank" + ), + array( + 'icon' => "mdi-goodreads", + 'url' => "https://www.goodreads.com/user/show/2450014-adam-piontek", + 'prof' => false, + 'target' => "_blank" + ), + array( + 'icon' => "mdi-twitter", + 'url' => "https://twitter.com/adampiontek", + 'prof' => false, + 'target' => "_blank" + ), + array('icon' => "mdi-facebook", 'url' => "https://facebook.com/damek", 'prof' => false, 'target' => "_blank"), + array( + 'icon' => "mdi-instagram", + 'url' => "https://www.instagram.com/adampiontek/", + 'prof' => false, + 'target' => "_blank" + ), + array( + 'icon' => "mdi-steam", + 'url' => "https://steamcommunity.com/id/apiontek/", + 'prof' => false, + 'target' => "_blank" + ), + array( + 'icon' => "mdi-discord", + 'url' => "https://discordapp.com/users/328583977629646848", + 'prof' => false, + 'target' => "_blank" + ) +); -function socials() { - return array( - array( - 'icon' => "mdi-typewriter", - 'url' => '/blog', - 'prof' => false, - 'target' => "_self" - ), - array('icon' => "mdi-rss", 'url' => '/feed', 'prof' => false, 'target' => "_blank"), - array( - 'icon' => "mdi-linkedin", - 'url' => "https://www.linkedin.com/in/adampiontek/", - 'prof' => true, - 'target' => "_blank" - ), - array('icon' => "mdi-github", 'url' => "https://github.com/apiontek", 'prof' => true, 'target' => "_blank"), - array('icon' => "gitea", 'url' => "https://73k.us/git/adam", 'prof' => true, 'target' => "_blank"), - array( - 'icon' => "mdi-key-variant", - 'url' => '/DF185CEE29A3D443_public_key.asc', - 'prof' => true, - 'target' => "_blank" - ), - array( - 'icon' => "mdi-goodreads", - 'url' => "https://www.goodreads.com/user/show/2450014-adam-piontek", - 'prof' => false, - 'target' => "_blank" - ), - array( - 'icon' => "mdi-twitter", - 'url' => "https://twitter.com/adampiontek", - 'prof' => false, - 'target' => "_blank" - ), - array('icon' => "mdi-facebook", 'url' => "https://facebook.com/damek", 'prof' => false, 'target' => "_blank"), - array( - 'icon' => "mdi-instagram", - 'url' => "https://www.instagram.com/adampiontek/", - 'prof' => false, - 'target' => "_blank" - ), - array( - 'icon' => "mdi-steam", - 'url' => "https://steamcommunity.com/id/apiontek/", - 'prof' => false, - 'target' => "_blank" - ), - array( - 'icon' => "mdi-discord", - 'url' => "https://discordapp.com/users/328583977629646848", - '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()); +} + +?> \ No newline at end of file diff --git a/src/classes.php b/src/classes.php index 0a35c63..0bb57b6 100644 --- a/src/classes.php +++ b/src/classes.php @@ -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( @@ -75,4 +75,16 @@ add_filter( // return 'tomorrow-night-eighties'; return 'tomorrow-night'; } -); \ No newline at end of file +); + + +/** + * 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); +}); \ No newline at end of file