ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(templates): code-block support for inline; unique title

Browse source
This commit is contained in:
Ayo 2023-11-17 15:24:50 +01:00
parent 7c7dfa87bb
commit 56ccb672ff
3 changed files with 23 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
templates/basic/src/components/code-block.js
View file

@ -1,22 +1,22 @@
// @ts-check class CodeBlockComponent extends HTMLElement {
/** connectedCallback() {
* Custom element using a minimal Web Component Base class const trimmed = this.innerHTML.trim();
* @see https://ayco.io/n/web-component-base const lang = this.getAttribute("language");
*/ const inline = this.getAttribute("inline") !== null;
class CodeBlockComponent extends WebComponent {
// initialize props
language;
// tell browser which props to cause render this.innerHTML = `
static properties = ["language"]; <pre id="pre"><code id="code">${trimmed}</code></pre>
`;
// 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"); const pre = this.querySelector("#pre");
if (lang) {
pre.className = `language-${lang}`;
}
/** /**
* @type {Partial<CSSStyleDeclaration>} * @type {Partial<CSSStyleDeclaration>}
*/ */
@ -29,18 +29,15 @@ class CodeBlockComponent extends WebComponent {
borderRadius: '5px' borderRadius: '5px'
}; };
console.log('>>> inline', inline, this)
if (inline) {
style.display = 'inline';
style.padding = '0.3em';
}
Object.keys(style).forEach((rule) => { Object.keys(style).forEach((rule) => {
pre.style[rule] = style[rule]; pre.style[rule] = style[rule];
}); });
} }
// readonly template
get template() {
const trimmed = this.innerHTML.trim();
return `
<pre class="${
this.language && `language-${this.language}`
}" id="pre"><code id="code">${trimmed}</code></pre>
`;
}
} }

3
templates/basic/src/components/my-head.html
View file

@ -1,8 +1,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>McFly: Back to the Basics. Into the Future.</title> <link rel="stylesheet" href="/reset.css" />
<link rel="stylesheet" href="./reset.css" />
<meta name="generator" content="McFly v0.0.1" /> <meta name="generator" content="McFly v0.0.1" />
<meta name="theme-color" content="#3054bf" /> <meta name="theme-color" content="#3054bf" />
<meta <meta

1
templates/basic/src/pages/index.html
View file

@ -5,6 +5,7 @@
See more on https://ayco.io/gh/McFly See more on https://ayco.io/gh/McFly
--> -->
<my-head> <my-head>
<title>McFly: Back to the Basics. Into the Future.</title>
<script server:setup> <script server:setup>
const project = { const project = {
name: "McFly", name: "McFly",