From c55ca8b94068c6920baa28a6eba7ac14fe36dc9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Georger?= Date: Wed, 15 Jul 2026 20:33:16 -0400 Subject: [PATCH 1/2] feat: update prism-window styles for better code display and add tocbot styles - Enhanced prism-window.css to improve code block styling with auto overflow handling and increased font size. - Introduced tocbot.css for table of contents styling. - Updated main.js to include mobile menu functionality and auto-inject line numbers for code blocks. - Modified default templates to use local tocbot styles instead of CDN. - Improved sidebar with translatable text for "Table of Contents" and "Share this post". - Updated social share links for better accessibility and usability. - Bumped package versions and updated dependencies in package.json and yarn.lock. --- .github/workflows/deploy-theme.yaml | 2 +- README.md | 21 +-- assets/built/main.js | 2 +- assets/built/prism-window.css | 2 +- assets/built/tocbot.css | 1 + assets/css/prism-window.css | 5 +- assets/css/tocbot.css | 60 +++++++++ assets/js/main.js | 200 ++++++++++++++++++++-------- default-es.hbs | 43 +----- default.hbs | 41 +----- package.json | 6 +- partials/sidebar.hbs | 9 +- partials/social-share.hbs | 7 +- yarn.lock | 86 ++++++------ 14 files changed, 278 insertions(+), 207 deletions(-) create mode 100644 assets/built/tocbot.css create mode 100644 assets/css/tocbot.css diff --git a/.github/workflows/deploy-theme.yaml b/.github/workflows/deploy-theme.yaml index 6b24861..0009769 100644 --- a/.github/workflows/deploy-theme.yaml +++ b/.github/workflows/deploy-theme.yaml @@ -11,7 +11,7 @@ jobs: if: ${{ github.event_name == 'push' && github.actor == 'ngeorger' || github.event_name == 'workflow_dispatch' && github.actor == 'ngeorger' }} runs-on: ubuntu-latest steps: - - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v5.0.1 + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7 name: Checkout Repository - name: Deploy Ghost Theme to website diff --git a/README.md b/README.md index 328d9b8..ea91810 100644 --- a/README.md +++ b/README.md @@ -7,22 +7,11 @@ [![Node Engine](https://img.shields.io/badge/Node-%3E%3D22-green)](https://nodejs.org) --- -# v2 To Do: - -- Improvements into Homepage content blocks/sections [X] -- Display improvements and fixes for HTML elements to be displayed responsively in posts/pages, like tables [X] -- Fix primary navigation breaking in mobile views [ ] -— featured-post hero added to `home.hbs`, `home-es.hbs`, `home-en.hbs`, `home-br.hbs` via `{{#get}}` [X] -- Update and migrate templates to the new design: - - `page.hbs` [X] - - `page-recommendations.hbs` [X] - - `page-tags.hbs` [X] - - `tag.hbs` [X] - - `custom-notocbot.hbs` [X] - - `author.hbs` [X] - - `home-en.hbs` [X] - - `home-br.hbs` [X] -- Cleanup unused code [X] — removed orphaned `posts-list.hbs`, `tags-nav.hbs`, `icons.hbs`, `navigation.hbs` partials + +## v2 To Do + +- Fix primary menu navigation, breaking in mobile views and small screens [] +- Improve responsive design for secondary navigation elements [] ### Known issues (tracked separately, not prioritized) - `home-br.hbs` inherits `default.hbs` (English shell, `lang="en"`) — there's no `default-br.hbs` yet, so `/br/` pages don't get proper `lang="pt"`/OG-locale metadata despite `locales/pt.json` existing. Needs a dedicated Portuguese layout shell per the multi-locale pattern documented above. diff --git a/assets/built/main.js b/assets/built/main.js index 5a1a694..81b1c20 100644 --- a/assets/built/main.js +++ b/assets/built/main.js @@ -1 +1 @@ -function openModal(){document.getElementById("searchModal").style.display="block"}function closeModal(){document.getElementById("searchModal").style.display="none"}window.onclick=function(e){var t=document.getElementById("searchModal");e.target==t&&(t.style.display="none")},document.querySelectorAll("section > table").forEach(function(e){var t=document.createElement("div");t.className="table-responsive",e.parentNode.insertBefore(t,e),t.appendChild(e)});let domain=window.location.host.replace(/^www\./i,""),links=document.querySelectorAll("a[href]");links.forEach(e=>{try{var t=e.href.toLowerCase();!t||/^javascript:/i.test(t)||t.includes(domain)&&!t.includes("ref="+domain)||(e.setAttribute("target","_blank"),e.setAttribute("rel","noopener"))}catch(e){console.warn("Error processing link:",e)}}),document.addEventListener("keydown",function(e){"/"!==e.key||["INPUT","TEXTAREA"].includes(document.activeElement.tagName)||(e.preventDefault(),document.querySelector("[data-ghost-search]").click())}),((e,t)=>{"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).reframe=t()})(this,function(){function t(){for(var e=0,t=0,o=arguments.length;t{let e=document.getElementById("back-to-top");window.onscroll=function(){20 table").forEach(function(e){var t=document.createElement("div");t.className="table-responsive",e.parentNode.insertBefore(t,e),t.appendChild(e)});let domain=window.location.host.replace(/^www\./i,""),links=document.querySelectorAll("a[href]");links.forEach(e=>{try{var t=e.href.toLowerCase();!t||/^javascript:/i.test(t)||t.includes(domain)&&!t.includes("ref="+domain)||(e.setAttribute("target","_blank"),e.setAttribute("rel","noopener"))}catch(e){console.warn("Error processing link:",e)}}),document.addEventListener("keydown",function(e){"/"!==e.key||["INPUT","TEXTAREA"].includes(document.activeElement.tagName)||(e.preventDefault(),document.querySelector("[data-ghost-search]").click())}),((e,t)=>{"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).reframe=t()})(this,function(){function t(){for(var e=0,t=0,n=arguments.length;tspan:before{color:#858585!important}.line-highlight{margin-top:48px!important;background:#2d4b3899!important;pointer-events:none!important;z-index:5!important}code,kbd,pre,samp{font-size:.8rem!important} \ No newline at end of file +.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e8e8e}.token.punctuation{color:#ccc}.token.boolean,.token.number{color:#f08d49}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#98c379}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#56b6c2}.token.atrule,.token.attr-value,.token.keyword{color:#c678dd}.token.class-name,.token.function,.token.namespace,.token.tag{color:#e06c75}.token.important,.token.regex,.token.variable{color:#f08d49}pre[class*=language-]{background:#1e1e1e!important;border-radius:8px!important;border:1px solid #2a2c35!important;position:relative!important;padding:48px 16px 16px!important;overflow-y:hidden!important;overflow-x:auto!important;margin-bottom:2rem!important;box-shadow:0 4px 6px -1px #0000004d!important}pre[class*=language-]:before{content:""!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:40px!important;background:#2d2f34!important;border-bottom:1px solid #3a3c42!important;border-radius:8px 8px 0 0!important;background-image:radial-gradient(circle,#ff5f57 6px,#0000 0),radial-gradient(circle,#ffbd2e 6px,#0000 0),radial-gradient(circle,#28ca41 6px,#0000 0)!important;background-size:12px 12px,12px 12px,12px 12px!important;background-repeat:no-repeat!important;background-position:16px 14px,36px 14px,56px 14px!important;z-index:10!important}.toolbar{display:none!important}pre.line-numbers{padding-left:4.2em!important}pre.line-numbers .line-numbers-rows{border-right:1px solid #36393f!important;left:-4.2em!important;top:48px!important;padding-right:8px!important}.line-numbers-rows>span:before{color:#858585!important}.line-highlight{margin-top:48px!important;background:#2d4b3899!important;pointer-events:none!important;z-index:5!important}code,kbd,pre,samp{font-size:1rem!important} \ No newline at end of file diff --git a/assets/built/tocbot.css b/assets/built/tocbot.css new file mode 100644 index 0000000..39b18aa --- /dev/null +++ b/assets/built/tocbot.css @@ -0,0 +1 @@ +.toc{overflow-y:auto}.toc>.toc-list{overflow:hidden;position:relative}.toc>.toc-list li{list-style:none}.toc-list{margin:0;padding-left:10px}a.toc-link{color:currentColor;height:100%}.is-collapsible{max-height:1000px;overflow:hidden;transition:all .3s ease-in-out}.is-collapsed{max-height:0}.is-collapsed:has(:focus){max-height:1000px}.is-position-fixed{position:fixed!important;top:0}.is-active-link{font-weight:700}.toc-link:before{background-color:#eee;content:" ";display:inline-block;height:inherit;left:0;margin-top:-1px;position:absolute;width:2px}.is-active-link:before{background-color:#54bc4b} \ No newline at end of file diff --git a/assets/css/prism-window.css b/assets/css/prism-window.css index 619fbba..2c4380a 100644 --- a/assets/css/prism-window.css +++ b/assets/css/prism-window.css @@ -15,7 +15,8 @@ pre[class*="language-"] { border: 1px solid #2a2c35 !important; position: relative !important; padding: 48px 16px 16px 16px !important; - overflow: hidden !important; + overflow-y: hidden !important; + overflow-x: auto !important; margin-bottom: 2rem !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important; } @@ -66,5 +67,5 @@ pre.line-numbers .line-numbers-rows { } code,kbd,pre,samp { - font-size: 0.8rem !important; + font-size: 1rem !important; } \ No newline at end of file diff --git a/assets/css/tocbot.css b/assets/css/tocbot.css new file mode 100644 index 0000000..52db36c --- /dev/null +++ b/assets/css/tocbot.css @@ -0,0 +1,60 @@ +.toc { + overflow-y: auto +} + +.toc>.toc-list { + overflow: hidden; + position: relative +} + +.toc>.toc-list li { + list-style: none +} + +.toc-list { + margin: 0; + padding-left: 10px +} + +a.toc-link { + color: currentColor; + height: 100% +} + +.is-collapsible { + max-height: 1000px; + overflow: hidden; + transition: all 300ms ease-in-out +} + +.is-collapsed { + max-height: 0 +} + +.is-collapsed:has(:focus) { + max-height: 1000px +} + +.is-position-fixed { + position: fixed !important; + top: 0 +} + +.is-active-link { + font-weight: 700 +} + +.toc-link::before { + background-color: #eee; + content: " "; + display: inline-block; + height: inherit; + left: 0; + margin-top: -1px; + position: absolute; + width: 2px +} + +.is-active-link::before { + background-color: #54bc4b +} diff --git a/assets/js/main.js b/assets/js/main.js index 48c095b..208c9f1 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,3 +1,46 @@ +// Mobile menu +document.addEventListener("DOMContentLoaded", function () { + const toggle = document.getElementById("mobile-toggle"); + const menu = document.getElementById("mobile-menu"); + + if (toggle && menu) { + toggle.addEventListener("click", function (e) { + e.stopPropagation(); + menu.classList.toggle("hidden"); + menu.classList.toggle("flex"); + }); + + // Close menu when clicking outside + document.addEventListener("click", function (e) { + if ( + !menu.classList.contains("hidden") && + !menu.contains(e.target) && + e.target !== toggle + ) { + menu.classList.add("hidden"); + menu.classList.remove("flex"); + } + }); + } +}); + +// Auto-Inject Line Numbers & Highlight Syntax on all Code Blocks + document.addEventListener('DOMContentLoaded', function () { + // Add line-numbers to all pre code blocks automatically + document.querySelectorAll('pre[class*="language-"]').forEach(function (pre) { + if (!pre.classList.contains('line-numbers')) { + pre.classList.add('line-numbers'); + } + }); + // Re-run Prism highlighting (if needed) + if (typeof Prism !== 'undefined') { + Prism.highlightAll(); + } + }); + + +// Search modal + function openModal() { document.getElementById("searchModal").style.display = "block"; } @@ -14,37 +57,36 @@ window.onclick = function (event) { } }; - /* Responsive HTML table */ (function () { - const tables = document.querySelectorAll('section > table'); - - tables.forEach(function (table) { - const wrapper = document.createElement('div'); - wrapper.className = 'table-responsive'; - table.parentNode.insertBefore(wrapper, table); - wrapper.appendChild(table); - }); + const tables = document.querySelectorAll("section > table"); + + tables.forEach(function (table) { + const wrapper = document.createElement("div"); + wrapper.className = "table-responsive"; + table.parentNode.insertBefore(wrapper, table); + wrapper.appendChild(table); + }); })(); /* Open external links in new tab */ -const domain = window.location.host.replace(/^www\./i, ''); -const links = document.querySelectorAll('a[href]'); +const domain = window.location.host.replace(/^www\./i, ""); +const links = document.querySelectorAll("a[href]"); links.forEach((link) => { - try { - const href = link.href.toLowerCase(); - // Skip empty links or potentially malicious javascript: URLs - if (!href || /^javascript:/i.test(href)) return; - - // Check if link is external - if (!href.includes(domain) || href.includes(`ref=${domain}`)) { - link.setAttribute('target', '_blank'); - link.setAttribute('rel', 'noopener'); - } - } catch (error) { - console.warn('Error processing link:', error); + try { + const href = link.href.toLowerCase(); + // Skip empty links or potentially malicious javascript: URLs + if (!href || /^javascript:/i.test(href)) return; + + // Check if link is external + if (!href.includes(domain) || href.includes(`ref=${domain}`)) { + link.setAttribute("target", "_blank"); + link.setAttribute("rel", "noopener"); } + } catch (error) { + console.warn("Error processing link:", error); + } }); /* Ghost search */ @@ -61,43 +103,93 @@ document.addEventListener("keydown", function (e) { }); /* Reframe */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).reframe=t()}(this,function(){"use strict";function t(){for(var e=0,t=0,n=arguments.length;t 20 || document.documentElement.scrollTop > 20) { - backToTopButton.classList.remove('hidden'); - } else { - backToTopButton.classList.add('hidden'); - } - } +// function scrollFunction() { +// if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { +// backToTopButton.classList.remove('hidden'); +// } else { +// backToTopButton.classList.add('hidden'); +// } +// } - window.onscroll = function () { - scrollFunction(); - }; +// window.onscroll = function () { +// scrollFunction(); +// }; - backToTopButton.onclick = function () { - window.scrollTo({ - top: 0, - behavior: "smooth" - }); - }; - })(); \ No newline at end of file +// backToTopButton.onclick = function () { +// window.scrollTo({ +// top: 0, +// behavior: "smooth" +// }); +// }; +// })(); diff --git a/default-es.hbs b/default-es.hbs index 8325555..7e990cb 100644 --- a/default-es.hbs +++ b/default-es.hbs @@ -21,7 +21,7 @@ {{!-- Compiled Tailwind CSS --}} - + {{ghost_head}} @@ -35,30 +35,6 @@ {{> "footer"}} {{ghost_foot}} - - {{!-- Mobile Menu Script --}} - {{!-- Tocbot JS --}} @@ -69,22 +45,7 @@ {{!-- Load main.js built file --}} - {{!-- Auto-Inject Line Numbers & Highlight Syntax on all Code Blocks --}} - + \ No newline at end of file diff --git a/default.hbs b/default.hbs index 99bf80b..26690e3 100644 --- a/default.hbs +++ b/default.hbs @@ -21,7 +21,7 @@ {{!-- Compiled Tailwind CSS --}} - + {{ghost_head}} @@ -36,29 +36,6 @@ {{ghost_foot}} - {{!-- Mobile Menu Script --}} - {{!-- Tocbot JS --}} @@ -69,22 +46,6 @@ {{!-- Load main.js built file --}} - {{!-- Auto-Inject Line Numbers & Highlight Syntax on all Code Blocks --}} - \ No newline at end of file diff --git a/package.json b/package.json index bec5db8..3ebbf11 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "sredevopsorg-ghost-theme", "description": "Ghost v6 Theme for SREDevOps.org (https://www.sredevops.org) — Multi-locale, Tailwind CSS v3, responsive, dark-mode first and tag-based language filtering.", "demo": "https://www.sredevops.org", - "version": "2.0.5", + "version": "2.0.6", "engines": { "ghost": ">=6.0.0" }, @@ -42,14 +42,14 @@ "devDependencies": { "@tailwindcss/forms": "^0.5.11", "@tailwindcss/typography": "^0.5.20", - "autoprefixer": "^10.5.2", + "autoprefixer": "^10.5.3", "cssnano": "8.0.2", "gulp": "^5.0.1", "gulp-concat": "2.6.1", "gulp-livereload": "4.0.2", "gulp-postcss": "10.0.0", "gulp-uglify": "3.0.2", - "postcss": "^8.5.16", + "postcss": "^8.5.19", "postcss-import": "^16.1.1", "pump": "3.0.4", "tailwindcss": "^3.4.19" diff --git a/partials/sidebar.hbs b/partials/sidebar.hbs index a3154b0..64c4bc8 100644 --- a/partials/sidebar.hbs +++ b/partials/sidebar.hbs @@ -1,6 +1,6 @@ {{#is "post"}}
-

Table of Contents +

{{t "Table of Contents"}}

@@ -31,6 +31,9 @@ {{/is}}
+

+ {{t "Share this post:"}} +

{{> "social-share"}}
@@ -43,7 +46,9 @@
- +
{{!-- Skip for now --}} diff --git a/partials/social-share.hbs b/partials/social-share.hbs index badff73..04bd86b 100644 --- a/partials/social-share.hbs +++ b/partials/social-share.hbs @@ -1,10 +1,11 @@ - - -{{!-- Social Share Links --}}