fix(#554): fix code samples on homepage

doug-wade · Jan 13, 2024 · 04252a0 · 04252a0
1 parent 0236011
commit 04252a0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/packages/website/components/code-example/code-example.component.ts b/packages/website/components/code-example/code-example.component.ts
@@ -5,11 +5,7 @@ import Prism from 'prismjs/prism.js';
 import syntaxHighlighting from '../../../../node_modules/prism-themes/themes/prism-night-owl.css' assert { type: 'css' };
 
 function encode(str) {
-    var buf = [];
-    for (var i = str.length - 1; i >= 0; i--) {
-        buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
-    }
-    return buf.join('');
+    return str.replaceAll('&gt;', '>');
 }
 
 defineComponent({
@@ -24,8 +20,8 @@ defineComponent({
     setup({ language }) {
         const code = this.innerHTML.replace(/^\s+/g, '');
         const languageCode = language === 'shell' ? Prism.languages.shell : Prism.languages.javascript;
-        const highlighted = Prism.highlight(code, languageCode, language);
-
+        const highlighted = Prism.highlight(encode(code), languageCode, language);
+``
         return {
             code: highlighted,
         };

diff --git a/packages/website/components/main/main.component.ts b/packages/website/components/main/main.component.ts
@@ -31,20 +31,31 @@ defineComponent({
                 shadow dom to implement rendering.
             </p>
             <tybalt-code-example language="javascript">
-                import { defineComponent, html } from '@tybalt/core'; export default defineComponent({ name:
-                'my-component', shadowMode: 'open', render() { return html\`
-                <div>Hello World</div>
-                \`; }, });
+import { defineComponent, html } from '@tybalt/core'; 
+                
+export default defineComponent({ 
+    name: 'my-component', 
+    shadowMode: 'open', 
+    render() { 
+        return html\`<div>Hello World</div>\`; 
+    }, 
+});
             </tybalt-code-example>
             <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.
             </p>
             <tybalt-code-example language="javascript">
-                import MyComponent from './my-component.js'; import { mount } from '@tybalt/test-utils';
-                describe('my-component', () => { it('renders', async () => { const el = await mount(MyComponent);
-                expect(el.shadowHtml()).toContain('Hello World'); }); });
+import MyComponent from './my-component.js'; 
+import { mount } from '@tybalt/test-utils';
+
+describe('my-component', () => { 
+    it('renders', async () => { 
+        const el = await mount(MyComponent);
+        expect(el.shadowHtml()).toContain('Hello World'); 
+    }); 
+});
             </tybalt-code-example>
             <h3>Compilation</h3>
             <p>
@@ -59,7 +70,7 @@ defineComponent({
             <h2>Getting Started</h2>
             <p>The fastest way to get started is creating a static website</p>
             <tybalt-code-example language="shell">
-                $ npx @tybalt/cli scaffold eleventy -n my-static-website
+$ npx @tybalt/cli scaffold eleventy -n my-static-website
             </tybalt-code-example>
             <p>Then, you can start the development server</p>
             <tybalt-code-example language="shell"> $ npx @11ty/eleventy --serve </tybalt-code-example>