fix: ordering of pre/code blocks

doug-wade · Aug 13, 2023 · 61db484 · 61db484
1 parent 9b9d95c
commit 61db484
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/website/components/main.js b/packages/website/components/main.js
@@ -27,7 +27,8 @@ defineComponent({
             <h2>Core Concepts</h2>
             <h3>Web Components</h3>
             <p>
-                Tybalt exports tools for building web components. It uses templates, slots, custom elements and the shadow dom to implement rendering.
+                Tybalt exports tools for building web components. It uses templates, slots, custom elements and the
+                shadow dom to implement rendering.
             </p>
             <pre><code class="language-javascript">
             import { defineComponent, html } from '@tybalt/core';
@@ -38,10 +39,11 @@ defineComponent({
                     return html\`<div>Hello World</div>\`;
                 },
             });
-            </pre></code>
+            </code></pre>
             <h3>Unit Testing</h3>
             <p>
-                Tybalt exports tools for testing web components. It uses Jest and JSDOM to render web components in a test environment.
+                Tybalt exports tools for testing web components. It uses Jest and JSDOM to render web components in a
+                test environment.
             </p>
             <pre><code class="language-javascript">
             import MyComponent from './my-component.js';
@@ -53,14 +55,16 @@ defineComponent({
                     expect(el.shadowHtml()).toContain('Hello World');
                 });
             });
-            </pre></code>
+            </code></pre>
             <h3>Compilation</h3>
             <p>
-                Tybalt exports a compiler for compiling web components. It uses esbuild to compile web components to a single file and a plugin called @tybalt/esbuild-plugin.
+                Tybalt exports a compiler for compiling web components. It uses esbuild to compile web components to a
+                single file and a plugin called @tybalt/esbuild-plugin.
             </p>
             <h3>Linting</h3>
             <p>
-                Tybalt exports a linter for linting web components. It uses eslint to lint web components and a plugin called @tybalt/eslint-plugin.
+                Tybalt exports a linter for linting web components. It uses eslint to lint web components and a plugin
+                called @tybalt/eslint-plugin.
             </p>
             <h2>Getting Started</h2>
             <p>The fastest way to get started is creating a static website</p>

diff --git a/packages/website/index.html b/packages/website/index.html
@@ -4,20 +4,20 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content="Tybalt" />
-        <meta property="og:description" content="A framework for writing web components." />
+        <meta property="og:description" content="A toolkit for writing web components." />
         <meta property="og:image" content="https://doug-wade.github.io/tybalt/img/favico.png" />
         <title>Tybalt</title>
         <link rel="manifest" href="manifest.json" />
         <meta name="theme-color" content="#c792ea" />
-        <meta name="description" content="A toolkit for web components" />
+        <meta name="description" content="A toolkit for writing web components" />
         <link rel="shortcut icon" type="image/jpg" href="/img/favico.png" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
             href="https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:ital,wght@0,400;0,700;1,400&display=swap"
             rel="stylesheet"
         />
-        <link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-night-owl.css" rel="stylesheet" />
+        <link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-night-owl.css" rel="stylesheet" async />
         <link href="{{ '/css/index.css' | url }}" rel="stylesheet" />
         <link href="{{ '/css/base.css' | url }}" rel="stylesheet" />