jekyll-theme-centos 2.52.0.beta.101 → 2.52.0.beta.103

data/assets/js/base/backtotop.js

@@ -15,8 +15,8 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   const config = {
-    diameter: parseInt(scriptTag.dataset.diameter || '56', 10),
-    backgroundColor: scriptTag.dataset.backgroundColor || '#A54C93',
+    diameter: parseInt(scriptTag.dataset.diameter || '44', 10),
+    backgroundColor: scriptTag.dataset.backgroundColor || '#A14F8C',
     textColor: scriptTag.dataset.textColor || '#ffffff'
   }
 

data/assets/js/base/copyvalue.js

@@ -126,6 +126,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
   const handlers = new WeakMap()
 
+  // .copy-btn is a real <button>, so the browser already turns Enter and
+  // Space into a native click — one listener covers mouse, keyboard, and
+  // assistive-tech activation.
   document.addEventListener('click', function (e) {
     const button = e.target.closest('.copy-btn')
     if (!button) return

data/assets/js/base/datatable.js

@@ -1,12 +1,10 @@
-// DataTables Initialization
-// Reads configuration from data attributes on this script tag
-// Applied via datatable.html.liquid template with data attributes
-
-// Waits for DOMContentLoaded (like highlight.js) rather than running
-// synchronously at defer time, so highlight.js's 'code' class-adding pass
-// (also on DOMContentLoaded, registered first since its script tag comes
-// first in the document) always runs before DataTables prunes off-page
-// rows from the DOM — otherwise their <code> elements never get 'hljs'.
+// Reads its configuration from data attributes datatable.html.liquid sets
+// on this script tag.
+
+// Waits for DOMContentLoaded, same as highlight.js, whose script tag comes
+// first in the document and so runs first: this ordering makes sure every
+// <code> element gets its 'hljs' class before DataTables prunes off-page
+// rows from the DOM.
 document.addEventListener('DOMContentLoaded', () => {
   if (typeof DataTable === 'undefined') {
     console.warn('datatable: DataTable not available')
@@ -55,6 +53,14 @@ document.addEventListener('DOMContentLoaded', () => {
           next: '<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>',
           last: '<i class="fa-solid fa-angles-right" aria-hidden="true"></i>'
         }
+      },
+      // DataTables puts the keyboard-focusable sort trigger on a nested
+      // `.dt-column-order` span, not the `<th>` itself, so focus-ring has to
+      // go there. initComplete runs once the header row exists, which is
+      // the earliest point that span can be selected.
+      initComplete: function () {
+        this.api().table().header().querySelectorAll('.dt-column-order')
+          .forEach(handle => handle.classList.add('focus-ring'))
       }
     })
   })

data/assets/js/base/highlight.js

@@ -1,17 +1,91 @@
-// Highlight.js Initialization
-// Initializes syntax highlighting on all code blocks with 'hljs' class
-// Enables copy-to-clipboard functionality via highlightjs-copy plugin
-
-// This script tag lives in <head>, before <body> exists. defer normally
-// delays execution until after parsing, but consumers that inline this
-// file (e.g. monolith bundling) drop the src that defer depends on, so the
-// wait for DOMContentLoaded is done explicitly instead of relying on it.
+// Colorizes every <pre><code> block, then gives any block not already
+// inside a preview component the same toolbar (language label + copy
+// button) preview.html.liquid renders for its own code row. This way
+// every code sample looks and behaves the same, whether it's a plain
+// fenced Markdown block or built with the preview component. A wrapped
+// block has no demo row, since a plain fenced block has no demo to show.
+
+// Waits for DOMContentLoaded explicitly instead of relying on `defer`:
+// this script tag lives in <head>, and a consumer that inlines the file
+// (e.g. monolith bundling) drops the `src` that `defer` depends on.
 document.addEventListener('DOMContentLoaded', () => {
-  if (typeof hljs === 'undefined' || typeof CopyButtonPlugin === 'undefined') {
-    console.warn('highlight: hljs or CopyButtonPlugin not available')
+  if (typeof hljs === 'undefined') {
+    console.warn('highlight: hljs not available')
     return
   }
-  document.querySelectorAll('code').forEach(el => el.classList.add('hljs'))
-  hljs.addPlugin(new CopyButtonPlugin())
+
+  // Records each block's declared language (a ```language fence becomes a
+  // language-<x> class) before hljs.highlightAll() runs. highlightAll()
+  // guesses a language for any block missing one, and that guess is often
+  // wrong (a short Liquid snippet can easily read as Bash) — only a
+  // language the author actually wrote should show as the toolbar label.
+  //
+  // Scoped to `pre code`: an inline `code` span getting the `.hljs` class
+  // would pull in _highlight-theme.scss's block-code color reset, stomping
+  // the separate inline-code chip style in _customization.scss.
+  const declaredLanguages = new WeakMap()
+  document.querySelectorAll('pre code').forEach(el => {
+    el.classList.add('hljs')
+    const languageClass = [...el.classList].find(c => c.startsWith('language-'))
+    if (languageClass) declaredLanguages.set(el, languageClass.replace('language-', ''))
+  })
+
   hljs.highlightAll()
+
+  document.querySelectorAll('pre code.hljs').forEach(codeEl => {
+    const preEl = codeEl.parentElement
+    if (!preEl || preEl.closest('.preview-code')) return
+
+    const language = declaredLanguages.get(codeEl) || ''
+
+    const wrapper = document.createElement('div')
+    wrapper.className = 'preview mb-3 border rounded overflow-hidden'
+
+    // No border-top: the toolbar is always the first row here (a wrapped
+    // block has no demo row above it), so a top border would double up
+    // against the outer .preview border.
+    const toolbar = document.createElement('div')
+    toolbar.className = 'preview-toolbar m-0 p-2 border-bottom border-centos-purple-100'
+
+    if (language) {
+      const languageEl = document.createElement('span')
+      languageEl.className = 'preview-language small font-monospace text-body-secondary text-uppercase'
+      languageEl.textContent = language
+      toolbar.appendChild(languageEl)
+    }
+
+    const actions = document.createElement('div')
+    actions.className = 'preview-actions'
+
+    const copyBtn = document.createElement('button')
+    copyBtn.setAttribute('type', 'button')
+    copyBtn.className = 'copy-btn focus-ring preview-copy'
+    copyBtn.setAttribute('data-bs-toggle', 'tooltip')
+    copyBtn.setAttribute('data-bs-title', 'Copy code')
+    copyBtn.setAttribute('data-copy-value', codeEl.textContent)
+    copyBtn.setAttribute('aria-label', 'Copy code')
+    copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>'
+    actions.appendChild(copyBtn)
+    toolbar.appendChild(actions)
+
+    const codeRow = document.createElement('div')
+    codeRow.className = 'preview-code p-0 m-0'
+
+    // Matches the p-2 preview.html.liquid puts on its own <pre> — same
+    // padding for a code block whether it came from a plain fenced
+    // Markdown block or the preview component.
+    preEl.classList.add('p-2')
+
+    preEl.replaceWith(wrapper)
+    wrapper.appendChild(toolbar)
+    codeRow.appendChild(preEl)
+    wrapper.appendChild(codeRow)
+
+    // init-tooltips.js already made its one-time pass before this button
+    // existed, so its tooltip has to be initialized here instead — the
+    // same thing preview.html.liquid's server-rendered copy buttons need.
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+      new bootstrap.Tooltip(copyBtn)
+    }
+  })
 })

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 2.52.0.beta.101
+  version: 2.52.0.beta.103
 platform: ruby
 authors:
 - Alain Reguera Delgado
@@ -317,6 +317,7 @@ files:
 - _data/base/navindex_schema.yml
 - _data/base/ogp.yml
 - _data/base/ogp_schema.yml
+- _data/base/preview_schema.yml
 - _data/base/project.yml
 - _data/base/project_schema.yml
 - _data/base/script_schema.yml
@@ -365,6 +366,7 @@ files:
 - _includes/base/navbar.html.liquid
 - _includes/base/navindex.html.liquid
 - _includes/base/ogp.html.liquid
+- _includes/base/preview.html.liquid
 - _includes/base/project.html.liquid
 - _includes/base/shortcut.html.liquid
 - _includes/base/social.html.liquid
@@ -379,8 +381,10 @@ files:
 - _sass/base/_customization.scss
 - _sass/base/_datatable.scss
 - _sass/base/_download.scss
+- _sass/base/_highlight-theme.scss
 - _sass/base/_light-dark.scss
 - _sass/base/_maps.scss
+- _sass/base/_preview.scss
 - _sass/base/_theme-colors.scss
 - _sass/base/_variables.scss
 - _sass/bootstrap/_accordion.scss