Codeblock: Add styling to base codeblock

Author: lamATnginx

assets/css/v2/style.css

@@ -25,6 +25,8 @@
   --color-tabs-divider: #00000033;
   --color-codeblock-code-with-comment: #00963926;
 
+  --code-copy-icon-height: 1rem;
+  --code-copy-icon-width: 1rem;
   --sidebar-margin: 24px;
   --sidebar-line-box-side-length: 8px;
   --sidebar-line-box-top: 6px;
@@ -988,140 +990,84 @@ blockquote.side-callout {
 
 /* Codeblocks */
 .highlight {
+  padding: 0 1rem 0 1rem;
+  grid-column: 1 / -1 !important;
   position: relative;
   z-index: -1;
+  flex: 1;
 
   code .cl {
     position: relative;
-    width: 100%;
-    white-space: pre-wrap;
   }
 }
 
-.highlight-mf {
-  grid-column: 1 / -1 !important;
-  position: relative;
-  margin-left: 0;
-  z-index: -1;
-  width: calc(100% + var(--overflow-gutter-extension));
-
-  &:has(.comment) {
-    margin-left: calc(var(--overflow-gutter-extension) / -1);
-  }
-
-  code {
-    font-weight: light;
-    font-family: "JetBrains Mono", monospace;
-    display: flex;
-    flex-direction: column;
-  }
-
-  pre.chroma {
-    overflow-x: auto;
-    box-sizing: border-box;
-  }
+.code-block {
+  grid-column: 1;
+}
 
-  code .line {
-    position: relative;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
-      " code "
-      " comment ";
-  }
+.icon-code-copy {
+  background-color: #f2f2f2;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  color: #000;
+}
 
-  code .line:has(.comment) .code {
-    display: inline-block;
-    height: fit-content;
-    white-space: pre-wrap;
-    width: 100%;
-    background-color: var(--color-codeblock-code-with-comment);
-    margin: var(--codeblock-comment-space-between) 0;
-    position: relative;
-    grid-column: 1 / -1;
-  }
+.highlight-v2 {
+  padding: 0 1rem 0 0;
+  margin: 0 -1rem 1rem -1rem;
+  border-top: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  overflow-x: scroll;
+}
 
-  code .line:not(:has(.comment)) .code {
-    grid-column: 1 / -1;
-    grid-row: 1;
-  }
+.highlight-v2.single-line {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem 0 0;
+  border: 1px solid #cccccc;
+  overflow-x: scroll;
+  width: calc(100% + (2 * var(--overflow-gutter-extension)));
+}
 
-  code:not(:has(.comment)) .code {
-    /* For codeblocks without comments */
-    grid-column: 1 / -1 !important;
-    grid-row: 1;
-    padding-left: 0;
-  }
+.code-header {
+  display: flex;
+  justify-content: space-between;
+}
 
-  code .code {
-    padding-left: var(--codeblock-code-section-padding-left);
-    grid-area: code;
-  }
+.code-header.no-lang {
+  justify-content: right;
+}
 
-  code .comment {
-    display: inline-block;
-    white-space: normal;
-    margin: var(--codeblock-comment-space-between) 0;
-    width: calc(100vw - (var(--codeblock-comment-diff) * 2));
-    border: black var(--codeblock-border-thickness) solid;
-    box-shadow: 3px 3px 0px var(--color-shadow);
-    padding: 8px;
-    grid-column: 1 / -1;
-  }
+.code-type {
+  text-transform: uppercase;
+  border: 1px solid #cccccc;
+  border-bottom: 1px solid white;
+  padding: .25rem 1rem; /* Padding for button content */
+  font-size: 12px; /* Font size */
+  z-index: 9999;
+  margin-bottom: -1px;
+}
 
-  code .line:has(.comment) .code::before {
-    /* Vertical Lines */
-    content: "";
-    position: absolute;
-    border-left: black var(--codeblock-border-thickness) solid;
-    left: calc(var(--codeblock-horizontal-line-overflow) + 1px);
-    top: 10px;
-    height: calc(100% + 0.7rem);
-  }
+.code-copy-button {
+  background-color: #f2f2f2;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  color: #000;
+}
 
-  code .line:has(.comment) .code::after {
-    /* Block */
-    content: "";
-    background-color: black;
-    position: absolute;
-    height: var(--codeblock-line-box-side-length);
-    width: var(--codeblock-line-box-side-length);
-    top: calc(10px - (var(--codeblock-border-thickness) * 1.5));
-    left: var(--codeblock-horizontal-line-overflow);
-  }
+.code-copy-button:hover {
+  background-color: #e0e0e0;
+}
 
-  @media (min-width: 768px) {
-    /* Tablet */
-    code .line:has(.comment) .code {
-      grid-column: 2 / -1;
-    }
-
-    code .comment {
-      grid-column: 1;
-      width: calc(100% - (var(--codeblock-comment-diff)));
-    }
-
-    code .line:not(:has(.comment)) .code {
-      grid-column: 2 / -1;
-    }
-
-    code .line {
-      /* Readjust the areas to be more responsive */
-      grid-template-columns: 40% 60%;
-      grid-template-areas: "comment code";
-    }
-
-    code .line:has(.comment) .code::before {
-      /* Horizontal Lines */
-      border-left: none;
-      border-top: black var(--codeblock-border-thickness) solid;
-      left: calc(var(--codeblock-comment-diff) * -1);
-      width: calc(
-        var(--codeblock-horizontal-line-length) +
-        var(--codeblock-horizontal-line-overflow)
-      );
-    }
-  }
+.code-copy-button:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #a5a5a5;
 }
 
 .next-prev-icon {
@@ -1174,6 +1120,7 @@ figure {
 /* FILTHY HACKS END */
 
 /* Hidden temporarily */
+
 .code-copy {
   display: none;
 }

assets/js/code-copy-v2.js

@@ -0,0 +1,41 @@
+// Tightly coupled to `render-codeblock.html` for element targeting
+const copyToClipBoard = ((clipboard) => async (button) => {
+  const codeBlockId = button.getAttribute('data-id-codeblock');
+  const codeBlock = document
+    .getElementById(codeBlockId)
+    .getElementsByClassName('highlight')[0];
+
+  if (!codeBlock) {
+    console.error('No code block found to copy from.');
+    button.innerHTML = 'Error';
+    return;
+  }
+
+  const cleanCode = codeBlock.textContent
+    .replace(/^\s*\d+\s/gm, '') // Remove line numbers
+    .trim();
+
+  try {
+    await clipboard.writeText(cleanCode);
+
+    updateButtonState(button, 'Copied!', 2000, true);
+  } catch (error) {
+    updateButtonState(button, 'Error');
+    console.error(error);
+  }
+})(navigator.clipboard);
+
+const updateButtonState = (button, message, revertDelay, disable = false) => {
+  button.innerHTML = message;
+
+  if (disable) {
+    button.disabled = true;
+  }
+
+  if (revertDelay) {
+    setTimeout(() => {
+      button.innerHTML = 'Copy';
+      button.disabled = false;
+    }, revertDelay);
+  }
+};

exampleSite/content/nginx/installing-nginx-open-source.md

@@ -45,7 +45,7 @@ http {
     # Proxy settings
     server {
         listen 80;
-        server_name www.example.com;
+        server_name www.exampleklajsdlkajsldkjaslkdjalksdjalksdjalksjdlakjsdlaksjdlkajdlakjsdlakjwodijaosidjaowidjaosidjasldkjldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdasldkjas.com;
 
         root /usr/share/nginx/html;
 
@@ -117,13 +117,6 @@ server {
 
 ```
 
-```js
-function hello() {
-  // this is a comment
-  console.log("Hello world!");
-  const thing = ["a", "string", "array"];
-}
-```
 
 This article explains how to install NGINX Open Source.
 
@@ -191,7 +184,7 @@ The package can be installed from:
 3. Install NGINX Open Source:
 
     ```shell
-    sudo yum install nginx
+    sudo yum install nginx sudo yum install nginx sudo yum install nginx sudo yum install nginx sudo yum install nginx
     ```
 
 4. Verify the installation:
@@ -262,8 +255,8 @@ The package can be installed from:
 
 7. Start NGINX Open Source:
 
-    ```shell
-    sudo nginx
+    ```js
+    console.log("hello")
     ```
 
 8. Verify that NGINX Open Source is up and running:

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,36 @@
+{{ $result := transform.HighlightCodeBlock . }}
+{{ $codeBlockId :=  printf "id-%x" (now.UnixNano) }}
+{{ $lines := split $result.Wrapped "\n" }}
+{{ $isSingleLine := eq (len $lines) 1 }}
+
+{{ if $isSingleLine  }}
+<div class="code-block" data-mf="true" style="display: none;">
+    <div class="code-header no-lang">
+        <button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
+    </div>
+    <div class="highlight-v2 single-line" id="{{ $codeBlockId }}">
+        {{ $result.Wrapped }}
+    </div>
+</div>
+{{ else }}
+
+<div class="code-block" data-mf="true" style="display: none;">
+    {{ if and (ne .Type "") (ne .Type "none") }}
+    <div class="code-header">
+        <span class="code-type">{{ .Type }}</span>
+        <button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
+    </div>
+    {{ else }}
+    <div class="code-header no-lang">
+        <button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
+    </div>
+    {{ end }}
+    <div class="highlight-v2" id="{{ $codeBlockId }}">
+        {{ $result.Wrapped }}
+    </div>
+</div>
+
+{{ end }}
+<div id="code-block-v1" data-mf="false">
+{{ $result.Wrapped }}
+</div>

layouts/_default/baseof.html

@@ -75,6 +75,13 @@
         table.style.display = isNewTheme ? "none" : "";
       });
 
+      const notMfElements = ['[data-mf="false"]'];
+      notMfElements.forEach((elementId) => {
+        document.querySelectorAll(elementId).forEach((element) => {
+          element.style.display = isNewTheme ? "none" : "";
+        });
+      })
+
       const mfElements = ['[data-mf="true"]'];
       mfElements.forEach((elementId) => {
         document.querySelectorAll(elementId).forEach((element) => {

layouts/partials/scripts.html

@@ -13,6 +13,10 @@
 {{ $codecopy := resources.Get "/js/code-copy.js" | fingerprint "sha512" }}
 <script src="{{ $codecopy.RelPermalink }}" type="text/javascript"></script>
 
+<!-- load code copy v2 js -->
+{{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }}
+<script src="{{ $codecopyv2.RelPermalink }}" type="text/javascript"></script>
+
 <!-- load mermaid.js -->
 {{ if .Page.Store.Get "hasMermaid" }}
 {{ $mermaid := resources.Get "js/mermaid.min.js" | fingerprint "sha512" }}