feat(templates): add code-block to basic template
This commit is contained in:
Ayo
parent
75ebfda840
commit
85b15303c8
9 changed files with 183 additions and 29 deletions
BIN
templates/basic/public/favicon.ico
Normal file
BIN
templates/basic/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
templates/basic/public/morty.png
Normal file
BIN
templates/basic/public/morty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
3
templates/basic/public/prism.css
Normal file
3
templates/basic/public/prism.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
/* 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}
|
||||||
7
templates/basic/public/prism.js
Normal file
7
templates/basic/public/prism.js
Normal file
File diff suppressed because one or more lines are too long
76
templates/basic/public/reset.css
Normal file
76
templates/basic/public/reset.css
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
/**
|
||||||
|
THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
|
||||||
|
👉 https://www.joshwcomeau.com/css/custom-css-reset/
|
||||||
|
**/
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Use a more-intuitive box-sizing model.
|
||||||
|
*/
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
2. Remove default margin
|
||||||
|
*/
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
3. Allow percentage-based heights in the application
|
||||||
|
*/
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Typographic tweaks!
|
||||||
|
4. Add accessible line-height
|
||||||
|
5. Improve text rendering
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
6. Improve media defaults
|
||||||
|
*/
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
video,
|
||||||
|
canvas,
|
||||||
|
svg,
|
||||||
|
iframe {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
7. Remove built-in form typography styles
|
||||||
|
*/
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
8. Avoid text overflows
|
||||||
|
*/
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
9. Create a root stacking context
|
||||||
|
*/
|
||||||
|
#root,
|
||||||
|
#__next {
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
2
templates/basic/public/robots.txt
Normal file
2
templates/basic/public/robots.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
17
templates/basic/src/components/code-block.js
Normal file
17
templates/basic/src/components/code-block.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
class CodeBlockComponent extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
this.trimmed = this.innerHTML.trim();
|
||||||
|
const lang = this.getAttribute("language");
|
||||||
|
const lineNumbers = this.getAttribute("line-numbers") === "true";
|
||||||
|
|
||||||
|
console.log(lineNumbers, lang);
|
||||||
|
|
||||||
|
this.innerHTML = `
|
||||||
|
<div>
|
||||||
|
<pre class="language-${lang} ${
|
||||||
|
lineNumbers ? "line-numbers" : ""
|
||||||
|
}" id="pre"><code id="code">${this.trimmed}</code></pre>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
51
templates/basic/src/components/my-head.html
Normal file
51
templates/basic/src/components/my-head.html
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<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" />
|
||||||
|
<meta name="generator" content="McFly v0.0.1" />
|
||||||
|
<meta name="theme-color" content="#3054bf" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="McFly is a no-framework framework that assists in leveraging the web platform."
|
||||||
|
/>
|
||||||
|
<meta name="author" content="McFly" />
|
||||||
|
<meta name="origin" content="https://mc-fly.vercel.app/" />
|
||||||
|
<!-- Open Graph data -->
|
||||||
|
<meta property="og:site_name" content="McFly" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:image" content="https://mc-fly.vercel.app/morty.png" />
|
||||||
|
<meta
|
||||||
|
property="og:title"
|
||||||
|
content="McFly: Back to the Basics. Into the Future. 😱"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="McFly is a no-framework framework that assists in leveraging the web platform."
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
max-width: 750px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
body > * {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
p,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</head>
|
||||||
|
|
@ -1,38 +1,36 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<my-head>
|
||||||
<meta charset="UTF-8" />
|
<link rel="stylesheet" href="/prism.css" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<script src="/prism.js"></script>
|
||||||
<title>McFly: Back to the Basics. Into the Future.</title>
|
</my-head>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
body > * {
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<awesome-header></awesome-header>
|
<awesome-header></awesome-header>
|
||||||
<main>
|
<main>
|
||||||
Here's a vanilla custom element:
|
Here's a vanilla custom element:
|
||||||
<vanilla-hello-world data-name="McFly"></vanilla-hello-world>
|
<vanilla-hello-world data-name="McFly" />
|
||||||
|
<code-block language="js">
|
||||||
|
<pre>
|
||||||
|
class HelloWorld extends HTMLElement {
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ["data-name"];
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
let count = 0;
|
||||||
|
this.onclick = () => {
|
||||||
|
this.setAttribute("data-name", `Clicked ${++count}x`);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
attributeChangedCallback(property, previousValue, currentValue) {
|
||||||
|
if (property === "data-name" && previousValue !== currentValue) {
|
||||||
|
this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}</pre
|
||||||
|
>
|
||||||
|
</code-block>
|
||||||
</main>
|
</main>
|
||||||
<my-footer></my-footer>
|
<my-footer></my-footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue