Merge branch 'main' into deployment

functions.php

@@ -79,9 +79,11 @@ function pg_enqueue_site_files() {
 			// wp_enqueue_script( 'firebird-scripts', '//localhost:5173/js/main.js', array(), false, false);
 			wp_enqueue_script( 'site-scripts', get_template_directory_uri() . '/src/js/scripts.js', array('firebird-scripts'), filemtime( get_template_directory() . '/src/js/scripts.js' ), TRUE );
 			wp_enqueue_script( 'cookie-scripts', get_template_directory_uri() . '/src/js/cookies.js', array('firebird-scripts'), filemtime( get_template_directory() . '/src/js/cookies.js' ), TRUE );
+			wp_enqueue_script( 'highlight-scripts', get_template_directory_uri() . '/src/js/highlight.js', array('firebird-scripts'), filemtime( get_template_directory() . '/src/js/highlight.js' ), TRUE );
 		} else {
 			wp_enqueue_script( 'site-scripts', get_template_directory_uri() . '/dist/js/scripts.min.js', array('firebird-scripts'), filemtime( get_template_directory() . '/dist/js/scripts.min.js' ), TRUE );
 			wp_enqueue_script( 'cookie-scripts', get_template_directory_uri() . '/dist/js/cookies.min.js', array('firebird-scripts'), filemtime( get_template_directory() . '/dist/js/cookies.min.js' ), TRUE );
+			wp_enqueue_script( 'highlight-scripts', get_template_directory_uri() . '/dist/js/highlight.min.js', array('firebird-scripts'), filemtime( get_template_directory() . '/dist/js/highlight.min.js' ), TRUE );
 			// hotjar script is added through firebird-common + ping
 		}
 
@@ -241,7 +243,7 @@ function pg_tinymce2( $buttons ) {
 	function pg_editor_styles( $settings ) {
 
 		// updates the block formats dropdown
-		$settings['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3';
+		$settings['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6';
 
 		// populates formats dropdown with theme-specific values
 		$style_formats = array(

inc/block-code_block.php

@@ -0,0 +1,11 @@
+<figure class="codeblock">
+    <figcaption class="codeblock-toolbar">
+        <span class="codeblock-lang"><?= wp_kses_post( get_sub_field( 'code_language' ) ); ?></span>
+        <button type="button" class="copycode" title="Copy to clipboard">
+            <svg xmlns="http://www.w3.org/2000/svg" class="copy-icon" viewBox="0 0 448 512"><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/></svg>
+            <tool-tip role="tooltip">Copy</tool-tip>
+        </button>
+    </figcaption>
+   <pre tabindex="-1"><code class="language-<?= wp_kses_post( get_sub_field('code_language') ); ?>"><?= esc_html( get_sub_field( 'code_content' ) ); ?></code></pre>
+</figure>
+

inc/block-copy_snippet.php

@@ -0,0 +1,16 @@
+<?php $description = get_sub_field( 'snippet_description' ); ?>
+
+<figure class="snippet">
+    <?php if ($description) { ?> 
+    <figcaption class="snippet-description mb-3">
+        <?= wp_kses_post( get_sub_field( 'snippet_description' ) ); ?>
+    </figcaption>
+    <?php } ?>
+    <div class="d-flex">
+        <pre tabindex="-1"><code><?=  esc_html( get_sub_field( 'snippet_content' ) ); ?></code></pre>
+        <button type="button" class="copycode" title="Copy to clipboard">
+                <svg xmlns="http://www.w3.org/2000/svg" class="copy-icon" viewBox="0 0 448 512"><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/></svg>
+                <tool-tip role="tooltip">Copy<span class="sr-only">code</span></tool-tip>
+        </button>
+    </div>
+</figure>

inc/block-table.php

@@ -65,7 +65,7 @@
 							}
 
 ?>
-				<<?= $el; ?>><?= esc_html( $td['c'] ); ?></<?= $el; ?>>
+				<<?= $el; ?>><?= wp_kses_post( $td['c'] ); ?></<?= $el; ?>>
 <?php
 
 						}

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "watch": "node watch_build.js",
-    "build": "esbuild src/js/scripts.js --minify --outfile=dist/js/scripts.min.js && esbuild src/js/cookies.js --minify --outfile=dist/js/cookies.min.js && esbuild src/css/style.css --minify --outfile=dist/css/style.min.css && esbuild src/css/home.css --minify --outfile=dist/css/home.min.css"
+    "build": "esbuild src/js/scripts.js --minify --outfile=dist/js/scripts.min.js && esbuild src/js/cookies.js --minify --outfile=dist/js/cookies.min.js && esbuild src/css/style.css --minify --outfile=dist/css/style.min.css && esbuild src/css/home.css --minify --outfile=dist/css/home.min.css && esbuild src/js/highlight.js --minify --outfile=dist/js/highlight.min.js"
   },
   "repository": {
     "type": "git",

src/css/editor-style.css

@@ -54,7 +54,7 @@ h2,
 h3,
 .h3 {
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 1.125rem;
   line-height: 1.31;
 }
 .allcaps {

src/css/style.css

@@ -135,7 +135,7 @@ h2,
 h3,
 .h3 {
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 1.125rem;
   line-height: 1.31;
 }
 .allcaps {
@@ -929,6 +929,187 @@ hathi-website-footer {
   align-self: flex-end;
 }
 
+/* custom tool-tip element */
+
+tool-tip {
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1;
+
+  transform: translateX(var(-50%, 0)) translateY(3px, 0));
+  transition: opacity 0.2s ease, transform 0.2s ease;
+
+  background: var(--black);
+  font-family: 'Mulish', sans-serif;
+  font-size:0.75rem;
+  text-wrap: nowrap;
+  padding: 0.75rem;
+  margin-block-end: 6px;
+  border-radius: 0.5rem;
+
+  position:absolute;
+
+
+
+
+}
+tool-tip::after {
+  content:'';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -7px;
+  border-width: 7px;
+  border-style: solid;
+  border-color: var(--black) transparent transparent transparent;
+  z-index: -1;
+}
+
+.codeblock tool-tip {
+  inset-block-end: 135%;
+}
+.snippet tool-tip {
+  inset-block-end: 105%;
+}
+
+button.copycode {
+position: relative;
+color: var(--white);
+}
+
+button.copycode:is(:hover, :focus-visible, :active) tool-tip {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 200ms;
+}
+
+button.copycode svg.copy-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+		fill: var(--white);
+}
+
+
+/* hidden message alerting screenreaders that the user has selected an element with a tooltip attached */
+tool-tip::before {
+  content: '; Has tooltip: ';
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+
+
+/* code block and copy-to-clipboard */
+
+figure.codeblock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  font-family: 'Roboto Mono', monospace;
+}
+
+figure.codeblock .codeblock-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem 0.5rem 0rem 0rem;
+  border: 0.75px solid var(--neutral700);
+  background: var(--neutral700);
+
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.codeblock-toolbar button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 6px;
+}
+
+.codeblock-lang {
+  color: var(--white);
+}
+
+button.copycode {
+  color: var(--white);
+  anchor-name: --copycode-button;
+}
+
+figure.codeblock pre {
+  display: flex;
+  padding: 0.5rem 1rem;
+  /* justify-content: center; */
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+
+  border-radius: 0rem 0rem 0.5rem 0.5rem;
+  border-right: 0.75px solid var(--neutral300);
+  border-bottom: 0.75px solid var(--neutral300);
+  border-left: 0.75px solid var(--neutral300);
+  background: var(--neutral50);
+}
+
+/* single-line code snippet/link */
+figure.snippet {
+  display: flex;
+  flex-direction: column;
+  /* border-radius: 0.25rem; */
+}
+
+.snippet pre {
+  display: flex;
+  align-items: center;
+  gap: 0.9375rem;
+  flex: 1 0 0;
+
+  border-radius: 0.25rem 0rem 0rem 0.25rem;
+  border-top: 0.75px solid var(--neutral300);
+  border-bottom: 0.75px solid var(--neutral300);
+  border-left: 0.75px solid var(--neutral300);
+  background: var(--neutral50);
+
+  margin-block: 0;
+}
+
+.snippet pre code {
+  padding: 0.625rem;
+  color: var(--neutral800);
+  font-family: 'Roboto Mono', monospace;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: normal;
+  width:100%;
+}
+
+.snippet button.copycode {
+  display: flex;
+  width: 2.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+
+  border-radius: 0rem 0.25rem 0.25rem 0rem;
+  border-top: 0.75px solid var(--neutral700);
+  border-right: 0.75px solid var(--neutral700);
+  border-bottom: 0.75px solid var(--neutral700);
+  background: var(--neutral700);
+}
 @media (min-width: 40em) {
   /* 640px */
   .strategic-vision-banner {