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

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

@ -1,22 +1,22 @@
// @ts-check
class CodeBlockComponent extends HTMLElement {
connectedCallback() {
const trimmed = this.innerHTML.trim();
const lang = this.getAttribute("language");
const inline = this.getAttribute("inline") !== null;
this.innerHTML = `
<pre id="pre"><code id="code">${trimmed}</code></pre>
`;
/**
* Custom element using a minimal Web Component Base class
* @see https://ayco.io/n/web-component-base
* @type {HTMLPreElement}
*/
class CodeBlockComponent extends WebComponent {
// initialize props
language;
// tell browser which props to cause render
static properties = ["language"];
// Triggered after view is initialized
afterViewInit() {
/**
* Provides autocompletion on IDEs when @ts-check is enabled on first line
* @type {HTMLPreElement} */
const pre = this.querySelector("#pre");
if (lang) {
pre.className = `language-${lang}`;
}
/**
* @type {Partial<CSSStyleDeclaration>}
*/
@ -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 `
<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>
<meta charset="UTF-8" />
<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="theme-color" content="#3054bf" />
<meta

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

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