mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-01 04:12:14 +02:00
💥 📝
This commit is contained in:
59
docs_src/components/code.html.js
Normal file
59
docs_src/components/code.html.js
Normal file
@ -0,0 +1,59 @@
|
||||
import { registerClientFile, styles } from "../ssr.js";
|
||||
styles.scope(code).css`
|
||||
:host{
|
||||
--shiki-color-text: #e9eded;
|
||||
--shiki-color-background: #212121;
|
||||
--shiki-token-constant: #82b1ff;
|
||||
--shiki-token-string: #c3e88d;
|
||||
--shiki-token-comment: #546e7a;
|
||||
--shiki-token-keyword: #c792ea;
|
||||
--shiki-token-parameter: #AA0000;
|
||||
--shiki-token-function: #80cbae;
|
||||
--shiki-token-string-expression: #c3e88d;
|
||||
--shiki-token-punctuation: var(--code);
|
||||
--shiki-token-link: #EE0000;
|
||||
white-space: pre;
|
||||
}
|
||||
:host[data-js=todo]{
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--standard-border-radius);
|
||||
margin-bottom: 1rem;
|
||||
${/* to fix shift when → dataJS=done */""}
|
||||
margin-top: 18.4px;
|
||||
padding: 1rem 1.4rem;
|
||||
}
|
||||
`;
|
||||
import { el } from "deka-dom-el";
|
||||
/**
|
||||
* Prints code to the page and registers flems to make it interactive.
|
||||
* @param {object} attrs
|
||||
* @param {string} [attrs.id]
|
||||
* @param {string} [attrs.className]
|
||||
* @param {string} attrs.content Example code file path
|
||||
* @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code
|
||||
* @param {string} [attrs.page_id] ID of the page, if setted it registers shiki
|
||||
* */
|
||||
export function code({ id, content, language= "js", className= "code", page_id }){
|
||||
let dataJS;
|
||||
if(page_id){
|
||||
registerClientPart(page_id);
|
||||
dataJS= "todo";
|
||||
}
|
||||
return el("div", { id, className, dataJS }).append(
|
||||
el("code", { className: "language-"+language, textContent: content })
|
||||
);
|
||||
}
|
||||
let is_registered= {};
|
||||
/** @param {string} page_id */
|
||||
function registerClientPart(page_id){
|
||||
if(is_registered[page_id]) return;
|
||||
|
||||
document.head.append(
|
||||
el("script", { src: "https://cdn.jsdelivr.net/npm/shiki", defer: true }),
|
||||
);
|
||||
registerClientFile(
|
||||
new URL("./code.js.js", import.meta.url),
|
||||
el("script", { type: "module" })
|
||||
);
|
||||
is_registered[page_id]= true;
|
||||
}
|
||||
12
docs_src/components/code.js.js
Normal file
12
docs_src/components/code.js.js
Normal file
@ -0,0 +1,12 @@
|
||||
const highlighter= await shiki.getHighlighter({
|
||||
theme: "css-variables",
|
||||
langs: ["js", "ts", "css", "html", "shell"],
|
||||
});
|
||||
const codeBlocks= document.querySelectorAll('code[class*="language-"]');
|
||||
|
||||
codeBlocks.forEach((block)=> {
|
||||
const lang= block.className.replace("language-", "");
|
||||
block.parentElement.dataset.js= "done";
|
||||
const html= highlighter.codeToHtml(block.textContent, { lang });
|
||||
block.innerHTML= html;
|
||||
});
|
||||
@ -1,59 +1,50 @@
|
||||
let is_registered= {};
|
||||
import { styles } from "../index.css.js";
|
||||
export const css= styles().scope(example).css`
|
||||
import { styles } from "../ssr.js";
|
||||
styles.scope(example).css`
|
||||
:host{
|
||||
grid-column: 1/-1;
|
||||
grid-column: full-main;
|
||||
width: 100%;
|
||||
max-width: calc(9/5 * var(--body-max-width));
|
||||
height: calc(3/5 * var(--body-max-width));
|
||||
margin-inline: auto;
|
||||
}
|
||||
.CodeMirror, .CodeMirror-gutters {
|
||||
background: #212121 !important;
|
||||
border: 1px solid white;
|
||||
}
|
||||
`
|
||||
import { el } from "deka-dom-el";
|
||||
import { code } from "./code.html.js";
|
||||
/**
|
||||
* Prints code to the page and registers flems to make it interactive.
|
||||
* @param {object} attrs
|
||||
* @param {URL} attrs.src Example code file path
|
||||
* @param {string} [attrs.language="javascript"] Language of the code
|
||||
* @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code
|
||||
* @param {string} attrs.page_id ID of the page
|
||||
* @param {import("../types.d.ts").registerClientFile} attrs.registerClientFile
|
||||
* */
|
||||
export function example({ src, language= "javascript", page_id, registerClientFile }){
|
||||
registerClientPart(page_id, registerClientFile);
|
||||
const code= s.cat(src).toString()
|
||||
export function example({ src, language= "js", page_id }){
|
||||
registerClientPart(page_id);
|
||||
const content= s.cat(src).toString()
|
||||
.replaceAll(' from "../../../index-with-signals.js";', ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
|
||||
const id= "code-"+Math.random().toString(36).slice(2, 7);
|
||||
return el().append(
|
||||
el("div", { id, className: example.name }).append(
|
||||
el("pre").append(
|
||||
el("code", { className: "language-"+language, textContent: code })
|
||||
)
|
||||
),
|
||||
elCode({ id, content: code })
|
||||
el(code, { id, content, language, className: example.name }),
|
||||
elCode({ id, content, extension: "."+language })
|
||||
);
|
||||
}
|
||||
function elCode({ id, content }){
|
||||
function elCode({ id, content, extension: name }){
|
||||
const options= JSON.stringify({
|
||||
files: [{ name: ".js", content }],
|
||||
files: [{ name, content }],
|
||||
toolbar: false
|
||||
});
|
||||
return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);
|
||||
}
|
||||
function registerClientPart(page_id, registerClientFile){
|
||||
let is_registered= {};
|
||||
/** @param {string} page_id */
|
||||
function registerClientPart(page_id){
|
||||
if(is_registered[page_id]) return;
|
||||
|
||||
//★ Highlite code when no flems?
|
||||
document.head.append(
|
||||
el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
|
||||
//★ el("script", { src: "https://cdn.jsdelivr.net/npm/shiki", defer: true }),
|
||||
);
|
||||
const d= el("div");
|
||||
/** @param {HTMLDivElement} a */
|
||||
const f= (a)=> a;
|
||||
f(d); //←
|
||||
//★ egisterClientFile(
|
||||
//★ new URL("./example.js.js", import.meta.url),
|
||||
//★ el("script", { type: "module" })
|
||||
//★ ;
|
||||
is_registered[page_id]= true;
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
const langs= {
|
||||
javascript: 'js',
|
||||
js: 'js',
|
||||
html: 'html',
|
||||
};
|
||||
|
||||
const highlighter= await shiki.getHighlighter({
|
||||
theme: 'css-variables',
|
||||
langs: ['js', 'html', 'shell'],
|
||||
});
|
||||
const codeBlocks= document.querySelectorAll('pre code[class*="language-"]');
|
||||
|
||||
codeBlocks.forEach((block)=> {
|
||||
const lang= block.className.replace('language-', '');
|
||||
const html= highlighter.codeToHtml(block.textContent, {
|
||||
lang: langs[lang] || lang,
|
||||
});
|
||||
block.innerHTML= html;
|
||||
});
|
||||
41
docs_src/components/prevNext.html.js
Normal file
41
docs_src/components/prevNext.html.js
Normal file
@ -0,0 +1,41 @@
|
||||
import { pages, styles } from "../ssr.js";
|
||||
styles.scope(prevNext).css`
|
||||
:host{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
:host [rel=prev]{
|
||||
grid-column: 1;
|
||||
}
|
||||
:host [rel=next]{
|
||||
grid-column: 3;
|
||||
text-align: right;
|
||||
}
|
||||
`;
|
||||
import { el } from "../../index.js";
|
||||
/**
|
||||
* @param {import("../types.d.ts").Info} page
|
||||
* */
|
||||
export function prevNext(page){
|
||||
const page_index= pages.indexOf(page);
|
||||
return el("div", { className: prevNext.name }).append(
|
||||
el(pageLink, { rel: "prev", page: pages[page_index-1] }),
|
||||
el(pageLink, { rel: "next", page: pages[page_index+1] })
|
||||
);
|
||||
}
|
||||
/**
|
||||
* @param {Object} attrs
|
||||
* @param {"prev"|"next"} attrs.rel
|
||||
* @param {import("../types.d.ts").Info} [attrs.page]
|
||||
* */
|
||||
function pageLink({ rel, page }){
|
||||
if(!page) return el();
|
||||
let { href, title, description }= page;
|
||||
return el("a", { rel, href, title: description }).append(
|
||||
rel==="next" ?"(next) " : "",
|
||||
title,
|
||||
rel==="prev" ? " (previous)" : "",
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user