rearranged social icon handling, implemented shortcodes, front-page now uses page content

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 ?)
+- [X] ~~*MOVE TO MCCOY/DEV1 WORDPRESS (1.5.8 RC1 ?)*~~ [2021-07-08]
-- [ ] syntax highlighting?
+- [ ] create Resume page
-  - [ ] create some posts with code inside (inline and blocks)
+  - [ ] reconfigured social icons to allow filtering to professional icons
-  - [ ] create plugin to use chroma to highlight?
+  - [ ] also allowing 'social_icons' shortcode for inserting social icons from wp editor
-- [ ] remaining pages
+  - [ ] implement resume separator content
-  - [ ] create Resume page and decide on using general or specific template
+  - [ ] implement resume content ... and update?
-  - [ ] create Portfolio placeholder page
+- [ ] re-do Front Page as content from within WP?
-  - [ ] sidebar or footer for blog pages? meta info etc?
+  - [ ] using 'featured image' or some such?
-  - [ ] footer for non-front-page that isn't stuck to bottom right?
+  - [ ] 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?

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>
+
+</main>
 <?php
 get_footer();

assets/css/app.scss

@@ -32,10 +32,10 @@ code.hljs {
   border-radius: .5em;
 //   background-color: #1c1c1c;
 }
-p code {
+p code, li code {
-  background-color: #2d2d2d;;
+  background-color: #1d1f21;
-  color: #e2e4e5;
+  color: #c5c8c6;
-  padding: .1em .4em;
+  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;

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'); ?>
+      <?php 
-      by <?php echo svg_icon_use("mdi-account", "icon baseline me-1") . get_the_author(); ?>
+        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

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>";
+};
+
+?>

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');
+
+
+?>

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">&copy; 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">&copy; Copyright <?php echo date("Y") ?> Adam Piontek</span>

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'; ?>" 
+      <?php echo get_the_post_thumbnail( get_the_ID(), 'large' ); ?>
-          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."
-          />
     </div>
 
+    <!-- the_content(); -->
     <div class="col-auto justify-content-start ms-lg-3">
-
+      <?php the_content(); ?>
-      <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()); ?>
-
     </div>
 
+  <?php }
+      }
+    ?>
+
   </div>
 </main>
 <?php

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
+ * Social icons definition & functions
- */
-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
  */
 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) {
+ * Custom functions
-    $pad = $i == 0 ? 'pe-1' : ($i == (count($socials) - 1) ? 'ps-1' : 'px-1');
+ */
-    $out_str .= '<a href="' . $social['url'] . '" rel="noreferrer" target="' . $social['target'];
+require_once( WP_73k_DIR . '/custom-functions.php' );
-    $out_str .= '" class="fs-3 link-light text-decoration-none ' . $pad . '">';
+
-    $out_str .= svg_icon_use($social['icon'], "icon baseline") . "</a>";
+/**
-  }
+ * Custom shortcodes for use in content
-  return $out_str . '</div>';
+ */
-}
+require_once( WP_73k_DIR . '/custom-shortcodes.php');
 
 /**
  * Autoloader for browersync

index.php

@@ -19,15 +19,14 @@ get_header(); ?>
           the_post();
           echo get_template_part( 'content-templates/content', 'article' );
         }
-    } ?>
+      }
+    ?>
 
-    <?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"> -->
-        <?php // dynamic_sidebar( 'sidebar' ); ?>
+        <!-- ?php // dynamic_sidebar( 'sidebar' ); ? -->
       <!-- </aside> -->
-    <?php
+    <!-- ?php // endif; ? -->
-    // endif; ?>
   </div>
 </main>
 <?php

socials.php

@@ -4,9 +4,7 @@
  */
 
 // definition of social icons:
-
+$social_icons = array(
-function socials() {
-  return array(
   array(
     'icon' => "mdi-typewriter",
     'url' => '/blog',
@@ -60,4 +58,38 @@ function socials() {
     '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());
+}
+
+?>

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(
@@ -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);
+});