Copy to clipboard feature for code block (#152)

Geoffrey Garrett

2022-07-03 f54df35767dcda9bc4853decff86d57323593685

 layouts/partials/head.html

@@ -36,7 +36,11 @@
  {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify  }}
  <link href="{{$finalCss.Permalink}}" rel="stylesheet" />

  {{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | resources.Minify }}
  {{$lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify  }}
  <link href="{{$lightSyntax.Permalink}}" rel="stylesheet" id="theme-link">

   <!-- Base scripts -->
  {{ $darkMode := resources.Get "js/darkmode.js" | resources.ExecuteAsTemplate "js/darkmode.js" . | resources.Fingerprint "md5" | resources.Minify }}
  <script src="{{$darkMode.Permalink}}"></script>
  {{partial "katex.html" .}}

@@ -44,6 +48,19 @@
  resources.Minify }}
  <script src="{{$popover.Permalink}}"></script>

  <!-- Optional scripts -->
  {{ if $.Site.Data.config.enableCodeBlockTitle }}
  {{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
  <script src="{{$codeTitle.Permalink}}"></script>
  {{end}}

  {{ if $.Site.Data.config.enableCodeBlockCopy }}
  {{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
  {{ if (findRE "<pre" .Content 1) }}
    <script src="{{$clipboard.Permalink}}"></script>
  {{ end }}
  {{ end }}

  <!--  Preload page vars  -->
  {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
  "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@@ -75,6 +92,14 @@
      const pathWindow = window.location.pathname;
      const isHome = pathBase == pathWindow;

      {{if $.Site.Data.config.enableCodeBlockCopy -}}
      addCopyButtons();
      {{ end }}

      {{if $.Site.Data.config.enableSPA -}}
      addTitleToCodeBlocks();
      {{ end }}

      {{if $.Site.Data.config.enableFooter}}
      const container = document.getElementById("graph-container")
      // retry if the graph is not ready
@@ -92,6 +117,7 @@

      {{end}}


      {{if $.Site.Data.config.enableLinkPreview}}
      initPopover(
        {{strings.TrimRight "/" .Site.BaseURL }},
@@ -103,6 +129,13 @@

    const init = (doc = document) => {
      // NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
      {{if $.Site.Data.config.enableCodeBlockCopy -}}
      addCopyButtons();
      {{ end }}

      {{if $.Site.Data.config.enableCodeBlockTitle -}}
      addTitleToCodeBlocks();
      {{- end -}}
      {{if $.Site.Data.config.enableLatex}}
      renderMathInElement(doc.body, {
        delimiters: [