improvements including syntax highlighting by server-side plugin

README.md

@@ -38,6 +38,19 @@ NODE_ENV=development node --trace-deprecation node_modules/webpack/bin/webpack.j
 NODE_ENV=production node --trace-deprecation node_modules/webpack/bin/webpack.js
 ```
 
+## Static Files via nginx
+
+Static files under `assets/_root` should be served by nginx with location config like so:
+
+```conf
+location ~ /(robots.txt|favicon.ico|F185CEE29A3D443_public_key.asc|android-chrome-192x192.png|android-chrome-512x512.png|browserconfig.xml|keybase.txt|mstile-150x150.png|qpalpha.jpg|thatsjotuncock.gif|vpalpha.jpg) {
+    root /var/www/dev1/wordpress-5.8-RC2/wp-content/themes/wp-73k/assets/_root/;
+    allow all;
+    log_not_found off;
+    access_log off;
+}
+```
+
 ## Deployment 
 ```bash
 npm run build

assets/css/_bs-colors.scss

@@ -13,6 +13,7 @@ $gray-400: #9c9c9c;
 $gray-500: #828282;
 $gray-600: #696969;
 $gray-700: #4f4f4f;
+$gray-750: #404040;
 $gray-800: #363636;
 $gray-900: #242424;
 $black: #000;

assets/css/app.scss

@@ -13,17 +13,31 @@
 /* Navbar custom styling */
 @import "nav-bar-help";
 
-
+/*
-/* code & syntax highlighting */
+ * Code syntax highlighting
+ * Actual highlighting is done by plugin
+ * "Syntax-highlighting Code Block (with Server-side Rendering)"
+ * url: https://wordpress.org/plugins/syntax-highlighting-code-block/
+ *
+ * highlighting style is set in classes.php by adding filter to
+ * 'syntax_highlighting_code_block_style'
+ */
 pre, code, .font-monospace {
   font-family: $font-family-monospace;
   font-weight: 300;
   font-size: 15px;
 }
 code.hljs {
-  padding: 0.75rem 1rem;
+  padding: 0.4rem 0.75rem;
   border-radius: .5em;
-  background-color: #1c1c1c;
+//   background-color: #1c1c1c;
+}
+p code {
+  background-color: #2d2d2d;;
+  color: #e2e4e5;
+  padding: .1em .4em;
+  border-radius: .25em;
+  display: inline;
 }
 
 /* main */
@@ -108,7 +122,11 @@ a {
   padding-top: 2px;
   padding-bottom: 2px;
 }
-.mt--05r {
+.tek-subtitle {
+  @extend .fs-5;
+  @extend .font-monospace;
+  @extend .text-gray-300;
+  @extend .mb-3;
   margin-top: -0.5rem;
 }
 
@@ -130,19 +148,32 @@ blockquote {
     @extend .ms-0;
     @extend .my-4;
     @extend .ps-3;
+    @extend .py-2;
+    background-color: $gray-750;
+    &.tek-bq-lg {
+      p {
+        font-size: 1.375rem;
+      }
+    }
     p {
       @extend .blockquote;
+      font-size: 1em;
       &:last-of-type {
-        margin-bottom: -0.25rem !important;
+        @extend .my-0;
+        @extend .py-0;
       }
     }
     cite {
       @extend .blockquote-footer;
       @extend .text-gray-300;
-      @extend .mb-0;
+      @extend .my-0;
+      @extend .py-0;
       font-size: 0.85em;
       font-style: normal;
     }
+    :last-child {
+      @extend .py-1;
+    }
   }
 }
 

src/classes.php

@@ -72,6 +72,7 @@ add_filter( 'wp_nav_menu_objects', function($items, $args) {
 add_filter(
 	'syntax_highlighting_code_block_style',
 	function() {
-		return 'tomorrow-night-eighties';
+		// return 'tomorrow-night-eighties';
+		return 'tomorrow-night';
 	}
 );

webpack.config.js

@@ -180,7 +180,7 @@ function getCSSWhitelistPatterns() {
     /^(.*)?-?paged(-.*)?$/,
     /^depth(-.*)?$/,
     /^children(-.*)?$/,
-    /^mt--(.*)?$/,
+    /^tek(-.*)?$/,
   ];
 }