Feat: fix formatting

Author: jlukic

docs/src/components/AIPrompt/AIPrompt.js

@@ -1,6 +1,7 @@
 import { formatCode, ready as highlighterReady } from '@javascript/client-highlight.js';
 import { defineComponent } from '@semantic-ui/component';
 import { getJSON } from '@semantic-ui/utils';
+import pretty from 'pretty';
 
 import { AILoader } from '@components/AILoader/AILoader.js';
 import { UIButton } from '@semantic-ui/core';
@@ -243,15 +244,16 @@ const createComponent = ({ self, $, settings, state }) => ({
             }
           }
           else if (data.type === 'done') {
-            const trimmed = htmlAccum.trim();
+            // trim and add newline for pretty to fix
+            const currentHTML = htmlAccum;
             if (!isValidHTML) {
               // API returned plain text, not HTML — show as note instead
               state.codeHTML.set('');
               state.previewHTML.set('');
-              state.note.set(trimmed || 'No valid HTML was returned');
+              state.note.set(currentHTML || 'No valid HTML was returned');
               break;
             }
-            self.currentHTML = trimmed;
+            self.currentHTML = pretty(currentHTML, { ocd: true });
             state.previewHTML.set(self.currentHTML);
             state.codeHTML.set(formatCode(self.currentHTML));
             self.promptHistory.push({ prompt, html: self.currentHTML });

docs/src/javascript/client-highlight.js

@@ -30,11 +30,17 @@ export const ready = createHighlighterCore({
 });
 
 export function formatCode(code, lang = 'html') {
-  if (!highlighter) {
-    return `<pre><code>${code}</code></pre>`;
-  }
+  // trim and add newline for pretty to fix
+  code = code.trim();
+
   if (lang === 'html') {
+    code = code.replaceAll('>', '>\n');
+    code = code.replaceAll('<', '\n<');
     code = pretty(code, { ocd: true });
   }
+
+  if (!highlighter) {
+    return `<pre><code>${code}</code></pre>`;
+  }
   return highlighter.codeToHtml(code, { lang, theme: 'github-dark', colorReplacements });
 }

docs/src/pages/index.astro

@@ -256,19 +256,15 @@ const demoSteps = [
           <div class="copy">
             <h4 class="sub header">Component Authoring</h4>
             <h3 class="header">Expressive Templates</h3>
-            <p>Author components using a signals based templating engine. Updates are surgical without full component rerenders.</p>
+            <p>Use javascript or list style expressions. Surgically update values with Signals against your data.</p>
             <ul class="feature-list">
               <li>
                 <ui-icon check></ui-icon>
-                Use <code>js</code> style expression to handle complexity.
+                Use any javascript inside templates without arbitrary limitations
               </li>
               <li>
                 <ui-icon check></ui-icon>
-                 Use <code>lisp</code> style expression to improve legibility and semantic intent.
-              </li>
-              <li>
-                <ui-icon check></ui-icon>
-                Mix syntaxes to get the best of both worlds
+                Try out natural-language style Lisp syntax to improve comprehension during Huma in the Loop
               </li>
             </ul>
             <UIButton subtle icon-after icon="right-chevron" href="/docs/guides/templates">Templating Guide</UIButton>