From 56ccb672fffddb556b5e531fdda8884587cb8bb0 Mon Sep 17 00:00:00 2001 From: Ayo Date: Fri, 17 Nov 2023 15:24:50 +0100 Subject: [PATCH] feat(templates): code-block support for inline; unique title --- templates/basic/src/components/code-block.js | 45 +++++++++----------- templates/basic/src/components/my-head.html | 3 +- templates/basic/src/pages/index.html | 1 + 3 files changed, 23 insertions(+), 26 deletions(-) diff --git a/templates/basic/src/components/code-block.js b/templates/basic/src/components/code-block.js index 5a1243d..a518d5a 100644 --- a/templates/basic/src/components/code-block.js +++ b/templates/basic/src/components/code-block.js @@ -1,22 +1,22 @@ -// @ts-check -/** - * Custom element using a minimal Web Component Base class - * @see https://ayco.io/n/web-component-base - */ -class CodeBlockComponent extends WebComponent { - // initialize props - language; +class CodeBlockComponent extends HTMLElement { + connectedCallback() { + const trimmed = this.innerHTML.trim(); + const lang = this.getAttribute("language"); + const inline = this.getAttribute("inline") !== null; - // tell browser which props to cause render - static properties = ["language"]; + this.innerHTML = ` + 
${trimmed}
+ `; - // Triggered after view is initialized - afterViewInit() { /** - * Provides autocompletion on IDEs when @ts-check is enabled on first line - * @type {HTMLPreElement} */ + * @type {HTMLPreElement} + */ const pre = this.querySelector("#pre"); + if (lang) { + pre.className = `language-${lang}`; + } + /** * @type {Partial} */ @@ -29,18 +29,15 @@ class CodeBlockComponent extends WebComponent { borderRadius: '5px' }; + console.log('>>> inline', inline, this) + + if (inline) { + style.display = 'inline'; + style.padding = '0.3em'; + } + Object.keys(style).forEach((rule) => { pre.style[rule] = style[rule]; }); } - - // readonly template - get template() { - const trimmed = this.innerHTML.trim(); - return ` - 
${trimmed}
- `; - } } diff --git a/templates/basic/src/components/my-head.html b/templates/basic/src/components/my-head.html index 0a2fbc4..4656ed4 100644 --- a/templates/basic/src/components/my-head.html +++ b/templates/basic/src/components/my-head.html @@ -1,8 +1,7 @@ - McFly: Back to the Basics. Into the Future. - + + McFly: Back to the Basics. Into the Future.