feat(templates): update basic examples; remove prism

This commit is contained in:
Ayo 2023-10-21 23:46:24 +02:00
parent 3ae61b0183
commit 0812058748
4 changed files with 34 additions and 15 deletions

View file

@ -1,3 +0,0 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

File diff suppressed because one or more lines are too long

View file

@ -10,7 +10,9 @@ class CodeBlockComponent extends HTMLElement {
<div> <div>
<pre class="language-${lang} ${ <pre class="language-${lang} ${
lineNumbers ? "line-numbers" : "" lineNumbers ? "line-numbers" : ""
}" id="pre"><code id="code">${this.trimmed}</code></pre> }" id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;overflow:scroll"><code id="code">${
this.trimmed
}</code></pre>
</div> </div>
`; `;
} }

View file

@ -1,14 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!--
Hello! This page is an example McFly page.
See more on https://ayco.io/gh/McFly
-->
<my-head> <my-head>
<link rel="stylesheet" href="/prism.css" /> <script server:setup>
<script src="/prism.js"></script> /**
* This server:setup script block will get evaluated on the server
* ...then get stripped away, leaving just the HTML
* */
const name = "McFly";
</script>
</my-head> </my-head>
<body> <body>
<!--
This element below is a static HTML fragment, found in ./components/awesome-header.html
-->
<awesome-header></awesome-header> <awesome-header></awesome-header>
<main> <main>
<!--
any varible declared in a server:setup script can be used on the page
-->
<h2>Welcome to {{name}}</h2>
<p>
Here's a vanilla custom element: Here's a vanilla custom element:
<vanilla-hello-world data-name="McFly" /> <vanilla-hello-world data-name="{{name}}" />
</p>
<!--
this is just a code-block element, found in ./components/code-block.html
(not an actual JS code)
-->
<code-block language="js"> <code-block language="js">
<pre> <pre>
class HelloWorld extends HTMLElement { class HelloWorld extends HTMLElement {
@ -32,6 +56,9 @@ class HelloWorld extends HTMLElement {
> >
</code-block> </code-block>
</main> </main>
<!--
Here's another static .html fragment, found in ./components/my-footer.html
-->
<my-footer></my-footer> <my-footer></my-footer>
</body> </body>
</html> </html>