feat(templates): add code-block to basic template

2023-10-21 14:41:53 +02:00 · 2023-10-21 14:41:53 +02:00 · 85b15303c8
commit 85b15303c8
parent 75ebfda840
9 changed files with 183 additions and 29 deletions
--- a/templates/basic/public/favicon.ico
+++ b/templates/basic/public/favicon.ico
--- a/templates/basic/public/morty.png
+++ b/templates/basic/public/morty.png
--- a/templates/basic/public/prism.css
+++ b/templates/basic/public/prism.css
@ -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}
--- a/templates/basic/public/prism.js
+++ b/templates/basic/public/prism.js
--- a/templates/basic/public/reset.css
+++ b/templates/basic/public/reset.css
@ -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;
+}
--- a/templates/basic/public/robots.txt
+++ b/templates/basic/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
--- a/templates/basic/src/components/code-block.js
+++ b/templates/basic/src/components/code-block.js
@ -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>
+    `;
+  }
+}
--- a/templates/basic/src/components/my-head.html
+++ b/templates/basic/src/components/my-head.html
@ -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>
--- a/templates/basic/src/pages/index.html
+++ b/templates/basic/src/pages/index.html
@ -1,38 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-  <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>
-    <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>
+  <my-head>
+    <link rel="stylesheet" href="/prism.css" />
+    <script src="/prism.js"></script>
+  </my-head>
  <body>
    <awesome-header></awesome-header>
    <main>
      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 [&quot;data-name&quot;];
+  }
+
+  connectedCallback() {
+    let count = 0;
+    this.onclick = () => {
+      this.setAttribute(&quot;data-name&quot;, `Clicked ${++count}x`);
+    };
+  }
+
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (property === &quot;data-name&quot; && previousValue !== currentValue) {
+      this.innerHTML = `&lt;button style=&quot;cursor:pointer&quot;&gt;Hello ${currentValue}!&lt;/button&gt;`;
+    }
+  }
+}</pre
+        >
+      </code-block>
    </main>
    <my-footer></my-footer>
  </body>