Merge pull request #2 from finsweet/code-blocks-titles

Code blocks titles

Author: erikmejias

_code-blocks/helpers.ts

@@ -31,3 +31,15 @@ export const createCopyButton = (id: string) => {
 
   return copyButton;
 };
+
+/**
+ *
+ * @param title
+ * @returns
+ */
+export const createTitleElement = (title: string): HTMLDivElement => {
+  const titleElement = document.createElement('div');
+  titleElement.classList.add('codeTitle');
+  titleElement.textContent = title;
+  return titleElement;
+};

_code-blocks/webflow-theme.css

@@ -186,3 +186,20 @@ pre {
   transform: scale(0.98);
   background: #2b2b2b;
 }
+
+/* Code Title */
+.codeTitle {
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  right: auto;
+  bottom: auto;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: monospace;
+  font-size: 25px;
+  font-weight: bold;
+  color: #ff7f27;
+  line-height: 1.25;
+}

_code-blocks/webflow/embed-code.js

@@ -1,15 +1,18 @@
+import { createCopyButton, createTitleElement, populateCodeElement } from '../helpers';
 import initCopyClipboard from '@finsweet/webflow-addons/copy-clipboard';
-import { createCopyButton, populateCodeElement } from '../helpers';
 import highlightJS from '../hljs';
 
 document.addEventListener('DOMContentLoaded', async () => {
   // Get all the embed elements
   const embedElements = document.querySelectorAll<HTMLDivElement>('.w-embed');
 
   for (const [index, embedElement] of embedElements.entries()) {
-    // Get the script source
-    const src = embedElement.textContent;
-    if (!src || !src.startsWith('http')) continue;
+    // Get the script source and the title if exist
+    let src = embedElement.textContent;
+
+    const titleRegex = /\[(.*)\]/;
+
+    if (!src || (!src.startsWith('http') && !titleRegex.test(src))) continue;
 
     // Clear element's content
     embedElement.innerHTML = '';
@@ -21,6 +24,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     codeElement.id = codeElementId;
     preElement.appendChild(codeElement);
 
+    // Get the title
+    const titleMatch = titleRegex.exec(src);
+
+    if (titleMatch) {
+      // Retrieve the title and sanitize the source URL
+      const [brackedTitle, title] = titleMatch;
+      src = src.replace(brackedTitle, '');
+
+      const titleElement = createTitleElement(title);
+      preElement.appendChild(titleElement);
+    }
+
     // Populate the code element
     await populateCodeElement(src, codeElement);
 

_code-blocks/webflow/embed-code.ts

@@ -1,5 +1,5 @@
+import { createCopyButton, createTitleElement, populateCodeElement } from '../helpers';
 import initCopyClipboard from '@finsweet/webflow-addons/copy-clipboard';
-import { createCopyButton, populateCodeElement } from '../helpers';
 import highlightJS from '../hljs';
 
 document.addEventListener('DOMContentLoaded', async () => {
@@ -8,8 +8,10 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   for (const [index, preElement] of preElements.entries()) {
     // Get the script source
-    const src = preElement.textContent;
-    if (!src || !src.startsWith('http')) continue;
+    let src = preElement.textContent;
+    const titleRegex = /\[(.*)\]/;
+
+    if (!src || (!src.startsWith('http') && !titleRegex.test(src))) continue;
 
     // Clear element's content
     preElement.innerHTML = '';
@@ -20,6 +22,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     codeElement.id = codeElementId;
     preElement.appendChild(codeElement);
 
+    // Get the title
+    const titleMatch = titleRegex.exec(src);
+
+    if (titleMatch) {
+      // Retrieve the title and sanitize the source URL
+      const [brackedTitle, title] = titleMatch;
+      src = src.replace(brackedTitle, '');
+
+      const titleElement = createTitleElement(title);
+      preElement.appendChild(titleElement);
+    }
+
     // Populate the code element
     await populateCodeElement(src, codeElement);