Re-enable pygments and add copy-code button

2025-08-06 00:33:39 +00:00 · 2023-12-17 18:53:46 -05:00
parent e7fc123bfe
commit bbf6a152e0
89 changed files with 1449 additions and 940 deletions
--- a/themes/archie/assets/css/copy-code-button.css
+++ b/themes/archie/assets/css/copy-code-button.css
@@ -0,0 +1,103 @@
+.highlight-wrapper {
+  display: block;
+}
+
+/* Start: Turn off individual column border, margin, and padding when line numbers are showing */
+.highlight-wrapper .lntd pre {
+  padding: 0;
+}
+
+.chroma .lntd pre {
+  border: 0px solid #ccc;
+}
+
+.chroma .lntd:first-child {
+  padding: 7px 7px 7px 10px;
+  margin: 0;
+}
+
+.chroma .lntd:last-child {
+  padding: 7px 10px 7px 7px;
+  margin: 0;
+}
+/* End: Turn off individual column border, margin, and padding when line numbers are showing */
+
+.highlight {
+  position: relative;
+  z-index: 0;
+  padding: 0;
+  margin: 40px 0 10px 0;
+  border-radius: 4px;
+}
+
+.highlight > .chroma {
+  position: static;
+  z-index: 1;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding: 10px;
+}
+
+.copy-code-button {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: -29px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 14px;
+  letter-spacing: 0.5px;
+  width: 65px;
+  color: #ffffff;
+  background-color: #000000;
+  border: 1.25px solid #232326;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+  white-space: nowrap;
+  padding: 6px 6px 7px 6px;
+  margin: 0 0 0 1px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.copy-code-button:hover,
+.copy-code-button:focus,
+.copy-code-button:active,
+.copy-code-button:active:hover {
+  color: #222225;
+  background-color: #b3b3b3;
+  opacity: 0.8;
+}
+
+.copyable-text-area {
+  position: absolute;
+  height: 0;
+  z-index: -1;
+  opacity: 0.01;
+}
+.chroma [data-lang]:before {
+  position: absolute;
+  z-index: 0;
+  top: -29px;
+  left: 0;
+  content: attr(data-lang);
+  font-size: 13px;
+  font-weight: 700;
+  color: white;
+  background-color: black;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  padding: 6px 6px 7px 6px;
+  line-height: 14px;
+  opacity: 0.6;
+  position: absolute;
+  letter-spacing: 0.5px;
+  border: 1.25px solid #232326;
+  margin: 0 0 0 1px;
+}
--- a/themes/archie/assets/css/dark.css
+++ b/themes/archie/assets/css/dark.css
@@ -111,49 +111,49 @@ a:hover {
  color: var(--darkMaincolor);
  background-color: blue;
 }
-.highlight pre code[class=language-javaScript]::before,
+.highlight pre code[class="language-javaScript"]::before,
 .highlight pre code[class="language-js"]::before {
  content: "js";
  background: #f7df1e;
  color: black;
 }
-.highlight pre code[class*='language-yml']::before,
-.highlight pre code[class*='language-yaml']::before {
-  content: 'yaml';
+.highlight pre code[class*="language-yml"]::before,
+.highlight pre code[class*="language-yaml"]::before {
+  content: "yaml";
  background: #f71e6a;
  color: white;
 }
-.highlight pre code[class*='language-shell']::before,
-.highlight pre code[class*='language-bash']::before,
-.highlight pre code[class*='language-sh']::before {
-  content: 'shell';
+.highlight pre code[class*="language-shell"]::before,
+.highlight pre code[class*="language-bash"]::before,
+.highlight pre code[class*="language-sh"]::before {
+  content: "shell";
  background: rgb(118, 137, 118);
-  color:white
+  color: white;
 }
-.highlight pre code[class*='language-json']::before{
-  content: 'json';
+.highlight pre code[class*="language-json"]::before {
+  content: "json";
  background: dodgerblue;
-   color: #000000 
+  color: #000000;
 }
-.highlight pre code[class*='language-python']::before,
-.highlight pre code[class*='language-py']::before {
-  content: 'py';
+.highlight pre code[class*="language-python"]::before,
+.highlight pre code[class*="language-py"]::before {
+  content: "py";
  background: blue;
-  color: yellow ;
+  color: yellow;
 }
-.highlight pre code[class*='language-css']::before{
-  content: 'css';
+.highlight pre code[class*="language-css"]::before {
+  content: "css";
  background: cyan;
-  color: black ;
+  color: black;
 }
-.highlight pre code[class*='language-go']::before{
-  content: 'Go';
+.highlight pre code[class*="language-go"]::before {
+  content: "Go";
  background: cyan;
-  color: royalblue ;
+  color: royalblue;
 }
-.highlight pre code[class*='language-md']::before,
-.highlight pre code[class*='language-md']::before{
-  content: 'Markdown';
+.highlight pre code[class*="language-md"]::before,
+.highlight pre code[class*="language-md"]::before {
+  content: "Markdown";
  background: royalblue;
-  color: whitesmoke ;
+  color: whitesmoke;
 }
--- a/themes/archie/assets/css/fonts.css
+++ b/themes/archie/assets/css/fonts.css
@@ -1,41 +1,57 @@
 /* fira-sans-regular - latin */
@font-face {
  font-display: swap;
-  font-family: 'Fira Sans';
+  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
-  src: url('../fonts/fira-sans-v10-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
-       url('../fonts/fira-sans-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/fira-sans-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/fira-sans-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/fira-sans-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/fira-sans-v10-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
+  src: url("../fonts/fira-sans-v10-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local("Fira Sans Regular"), local("FiraSans-Regular"),
+    url("../fonts/fira-sans-v10-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/fira-sans-v10-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/fira-sans-v10-latin-regular.woff")
+      format("woff"),
+    /* Modern Browsers */ url("../fonts/fira-sans-v10-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../fonts/fira-sans-v10-latin-regular.svg#FiraSans") format("svg"); /* Legacy iOS */
 }
 /* roboto-mono-regular - latin */
@font-face {
  font-display: swap;
-  font-family: 'Roboto Mono';
+  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
-  src: url('../fonts/roboto-mono-v12-latin-regular.eot'); /* IE9 Compat Modes */
-  src: url('../fonts/roboto-mono-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-mono-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-mono-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-mono-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-mono-v12-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
+  src: url("../fonts/roboto-mono-v12-latin-regular.eot"); /* IE9 Compat Modes */
+  src: url("../fonts/roboto-mono-v12-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/roboto-mono-v12-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../fonts/roboto-mono-v12-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/roboto-mono-v12-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../fonts/roboto-mono-v12-latin-regular.svg#RobotoMono") format("svg"); /* Legacy iOS */
 }
 /* ibm-plex-mono-500italic - latin */
@font-face {
  font-display: swap;
-  font-family: 'IBM Plex Mono';
+  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 500;
-  src: url('../fonts/ibm-plex-mono-v6-latin-500italic.eot'); /* IE9 Compat Modes */
-  src: local('IBM Plex Mono Medium Italic'), local('IBMPlexMono-MediumItalic'),
-       url('../fonts/ibm-plex-mono-v6-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/ibm-plex-mono-v6-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/ibm-plex-mono-v6-latin-500italic.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/ibm-plex-mono-v6-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/ibm-plex-mono-v6-latin-500italic.svg#IBMPlexMono') format('svg'); /* Legacy iOS */
+  src: url("../fonts/ibm-plex-mono-v6-latin-500italic.eot"); /* IE9 Compat Modes */
+  src: local("IBM Plex Mono Medium Italic"), local("IBMPlexMono-MediumItalic"),
+    url("../fonts/ibm-plex-mono-v6-latin-500italic.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/ibm-plex-mono-v6-latin-500italic.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../fonts/ibm-plex-mono-v6-latin-500italic.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/ibm-plex-mono-v6-latin-500italic.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../fonts/ibm-plex-mono-v6-latin-500italic.svg#IBMPlexMono")
+      format("svg"); /* Legacy iOS */
 }
--- a/themes/archie/assets/css/main.css
+++ b/themes/archie/assets/css/main.css
@@ -1,18 +1,18 @@
 /* Markdown */
-:root{
--maincolor: #a15bc2;
--bordercl: #a15bc2;
--callouctcolor:dodgerblue;
--hovercolor: #a15bc2;
--darkMaincolor: #a15bc2;
+:root {
+  --maincolor: #a15bc2;
+  --bordercl: #a15bc2;
+  --callouctcolor: dodgerblue;
+  --hovercolor: #a15bc2;
+  --darkMaincolor: #a15bc2;
 }
 html {
  color: #232333;
-  font-family: 'Roboto Mono', monospace;
+  font-family: "Roboto Mono", monospace;
  font-size: 18px;
  line-height: 1.6em;
 }
-body{
+body {
  display: block;
  background-color: #f8f8f8;
  margin: 8px;
@@ -27,7 +27,7 @@ body{
 }

 p {
-  font-family: 'Roboto Light', sans-serif;
+  font-family: "Roboto Light", sans-serif;
  line-height: 1.5;
 }

@@ -50,8 +50,8 @@ a {
  text-decoration: none;
 }
 a:hover {
-    background-color: var(--hovercolor);
-    color: #fff;
+  background-color: var(--hovercolor);
+  color: #fff;
 }

 ul {
@@ -62,7 +62,7 @@ ul li {
  text-indent: -2ch;
 }
 ul > li::before {
-  content: '* ';
+  content: "* ";
  font-weight: bold;
 }

@@ -95,13 +95,13 @@ figure h4 {
  margin-bottom: 1em;
 }
 figure h4::before {
-  content: '↳ ';
+  content: "↳ ";
 }

 /* Code blocks */
 code {
  background-color: #f1f1f1;
-  padding: 0em .0.1em;
+  padding: 0em 0.1em;
 }

 pre {
@@ -145,17 +145,40 @@ header {
 header .main {
  font-size: 1.5rem;
 }
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  font-size: 1.2rem;
  margin-top: 2em;
 }

-h1::before { color: var(--maincolor); content: '# '; }
-h2::before { color: var(--maincolor); content: '## '; }
-h3::before { color: var(--maincolor); content: '### '; }
-h4::before { color: var(--maincolor); content: '#### '; }
-h5::before { color: var(--maincolor); content: '##### '; }
-h6::before { color: var(--maincolor); content: '###### '; }
+h1::before {
+  color: var(--maincolor);
+  content: "# ";
+}
+h2::before {
+  color: var(--maincolor);
+  content: "## ";
+}
+h3::before {
+  color: var(--maincolor);
+  content: "### ";
+}
+h4::before {
+  color: var(--maincolor);
+  content: "#### ";
+}
+h5::before {
+  color: var(--maincolor);
+  content: "##### ";
+}
+h6::before {
+  color: var(--maincolor);
+  content: "###### ";
+}

 .meta {
  color: #999;
@@ -198,7 +221,6 @@ article .title {
  margin-bottom: 1em;
 }

-
 /* Callout */
 .callout {
  background-color: var(--callouctcolor);
@@ -207,7 +229,7 @@ article .title {
 }

 .callout p {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: "IBM Plex Mono", monospace;
  margin: 0;
 }

@@ -221,32 +243,32 @@ article .title {
 }

 .site-description {
-display: flex;
-justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
-.tags li::before{
+.tags li::before {
  content: "- ";
 }
-.tags a{
-  border-bottom: 3px solid var(--maincolor); 
+.tags a {
+  border-bottom: 3px solid var(--maincolor);
 }
-.tags a:hover{
-  color:white;
-  background-color: var(--hovercolor); 
+.tags a:hover {
+  color: white;
+  background-color: var(--hovercolor);
 }
-svg{
+svg {
  max-height: 15px;
 }
-.soc:hover{
+.soc:hover {
  color: white;
 }
-.draft-label{ 
-    color: var(--bordercl);
-    text-decoration: none;
-    padding: 2px 4px;
-    border-radius: 4px;
-    margin-left: 6px;
-    background-color: #f9f2f4;
+.draft-label {
+  color: var(--bordercl);
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-left: 6px;
+  background-color: #f9f2f4;
 }
 .highlight {
  position: relative;
@@ -269,51 +291,51 @@ svg{
  top: 0;
 }

-.highlight pre code[class=language-javaScript]::before,
+.highlight pre code[class="language-javaScript"]::before,
 .highlight pre code[class="language-js"]::before {
-content: "js";
-background: #f7df1e;
-color: black;
+  content: "js";
+  background: #f7df1e;
+  color: black;
 }
-.highlight pre code[class*='language-yml']::before,
-.highlight pre code[class*='language-yaml']::before {
-content: 'yaml';
-background: #f71e6a;
-color: white;
+.highlight pre code[class*="language-yml"]::before,
+.highlight pre code[class*="language-yaml"]::before {
+  content: "yaml";
+  background: #f71e6a;
+  color: white;
 }
-.highlight pre code[class*='language-shell']::before,
-.highlight pre code[class*='language-bash']::before,
-.highlight pre code[class*='language-sh']::before {
-content: 'shell';
-background: green;
-color:white
+.highlight pre code[class*="language-shell"]::before,
+.highlight pre code[class*="language-bash"]::before,
+.highlight pre code[class*="language-sh"]::before {
+  content: "shell";
+  background: green;
+  color: white;
 }
-.highlight pre code[class*='language-json']::before{
-content: 'json';
-background: dodgerblue;
- color: #000000 
+.highlight pre code[class*="language-json"]::before {
+  content: "json";
+  background: dodgerblue;
+  color: #000000;
 }
-.highlight pre code[class*='language-python']::before,
-.highlight pre code[class*='language-py']::before {
-content: 'py';
-background: blue;
-color: yellow ;
+.highlight pre code[class*="language-python"]::before,
+.highlight pre code[class*="language-py"]::before {
+  content: "py";
+  background: blue;
+  color: yellow;
 }
-.highlight pre code[class*='language-css']::before{
-content: 'css';
-background: cyan;
-color: black ;
+.highlight pre code[class*="language-css"]::before {
+  content: "css";
+  background: cyan;
+  color: black;
 }
-.highlight pre code[class*='language-go']::before{
-content: 'Go';
-background: cyan;
-color: royalblue ;
+.highlight pre code[class*="language-go"]::before {
+  content: "Go";
+  background: cyan;
+  color: royalblue;
 }
-.highlight pre code[class*='language-md']::before,
-.highlight pre code[class*='language-md']::before{
-content: 'Markdown';
-background: royalblue;
-color: whitesmoke ;
+.highlight pre code[class*="language-md"]::before,
+.highlight pre code[class*="language-md"]::before {
+  content: "Markdown";
+  background: royalblue;
+  color: whitesmoke;
 }

 /* table */
@@ -322,13 +344,13 @@ table {
  border-collapse: collapse;
 }

-table th{
+table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
  font-size: large;
 }

-table td{
+table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
 }
--- a/themes/archie/layouts/partials/footer.html
+++ b/themes/archie/layouts/partials/footer.html
@@ -11,6 +11,9 @@
  <div class="footer-info">
    {{ dateFormat "2006" now }} {{ with .Site.Copyright }} {{ . }} {{ end }}
  </div>
+  {{ if (findRE "<pre" .Content 1) }}
+  <script src="/js/copy-code-button.js"></script>
+  {{ end }}
 </footer>
 {{ if not .Site.IsServer }} {{ template "_internal/google_analytics.html" . }}
 {{ end }} {{- if (isset .Site.Params "social") -}}
--- a/themes/archie/layouts/partials/head.html
+++ b/themes/archie/layouts/partials/head.html
@@ -14,4 +14,10 @@
  <span id="dark-mode-toggle" onclick="toggleTheme()"></span>
  <script src="{{ .Site.BaseURL }}js/themetoggle.js"></script>
  {{ end }}
+  {{ if (findRE "<pre" .Content 1) }}
+
+    {{ $copyCss := resources.Get "css/copy-code-button.css" | minify }}
+    <link href="{{ $copyCss.RelPermalink }}" rel="stylesheet">
+{{ end }}
+
 </header>
--- a/themes/archie/static/js/copy-code-button.js
+++ b/themes/archie/static/js/copy-code-button.js
@@ -0,0 +1,58 @@
+function createCopyButton(highlightDiv) {
+  const button = document.createElement("button");
+  button.className = "copy-code-button";
+  button.type = "button";
+  button.innerText = "Copy";
+  button.addEventListener("click", () =>
+    copyCodeToClipboard(button, highlightDiv)
+  );
+  highlightDiv.insertBefore(button, highlightDiv.firstChild);
+
+  const wrapper = document.createElement("div");
+  wrapper.className = "highlight-wrapper";
+  highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
+  wrapper.appendChild(highlightDiv);
+}
+
+document
+  .querySelectorAll(".highlight")
+  .forEach((highlightDiv) => createCopyButton(highlightDiv));
+
+async function copyCodeToClipboard(button, highlightDiv) {
+  const codeToCopy = highlightDiv.querySelector(
+    "pre > code"
+  ).innerText;
+  try {
+    var result = await navigator.permissions.query({ name: "clipboard-write" });
+    if (result.state == "granted" || result.state == "prompt") {
+      await navigator.clipboard.writeText(codeToCopy);
+    } else {
+      copyCodeBlockExecCommand(codeToCopy, highlightDiv);
+    }
+  } catch (_) {
+    copyCodeBlockExecCommand(codeToCopy, highlightDiv);
+  } finally {
+    button.blur();
+    button.innerText = "Copied!";
+    setTimeout(function () {
+      button.innerText = "Copy";
+    }, 2000);
+  }
+}
+
+function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
+  const textArea = document.createElement("textArea");
+  textArea.contentEditable = "true";
+  textArea.readOnly = "false";
+  textArea.className = "copyable-text-area";
+  textArea.value = codeToCopy;
+  highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
+  const range = document.createRange();
+  range.selectNodeContents(textArea);
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+  textArea.setSelectionRange(0, 999999);
+  document.execCommand("copy");
+  highlightDiv.removeChild(textArea);
+}
--- a/themes/archie/static/js/main.js
+++ b/themes/archie/static/js/main.js