feat(site): move back to separate view/viewmodel, show html

We need to highlight the simplicity of Aurelia

Author: Vheissu

aurelia-apps/src/examples/simple-counter.html

@@ -0,0 +1,2 @@
+<p>Current count: ${count}</p>
+<button click.trigger="increment()">Increment</button>

aurelia-apps/src/examples/simple-counter.ts

@@ -1,15 +1,3 @@
-import { customElement } from 'aurelia';
-
-@customElement({
-  name: 'simple-counter',
-  template: `
-    <p style="margin-top:0;">Current count: \${count}</p>
-    <button click.trigger="increment()">Increment</button>
-  `,
-  shadowOptions: {
-    mode: 'open',
-  },
-})
 export class SimpleCounter {
   count = 0;
 

themes/aurelia-theme/layouts/index.html

@@ -90,28 +90,39 @@ <h1 class="text-4xl sm:text-6xl font-bold mb-6">
     <!-- Right Column: Interactive Demo -->
     <div class="hidden lg:block w-full max-w-lg">
       <div class="relative">
-        <!-- Code Preview -->
+        <!-- Code Preview Tabs -->
         <div class="rounded-xl bg-gray-900 p-4 shadow-2xl transform hover:-translate-y-1 transition-transform">
-          <div class="flex items-center gap-1.5 mb-4">
-            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-1.5">
+              <div class="w-3 h-3 rounded-full bg-red-500"></div>
+              <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+              <div class="w-3 h-3 rounded-full bg-green-500"></div>
+            </div>
+            <div class="flex gap-2 text-xs text-gray-400">
+              <span class="px-2 py-1 rounded bg-gray-800 text-aurelia">simple-counter.ts</span>
+              <span class="px-2 py-1 rounded bg-gray-800/50">simple-counter.html</span>
+            </div>
           </div>
-          <pre class="text-sm font-mono"><code class="language-typescript text-gray-300">import { customElement } from 'aurelia';
-
-@customElement({
-  name: 'simple-counter',
-  template: `<p>Current count: \${count}</p><button click.trigger="increment()">Increment</button>`
-})
-export class SimpleCounter {
+          <pre class="text-sm font-mono"><code class="language-typescript text-gray-300">export class Counter {
   count = 0;
 
   increment() {
     this.count++;
   }
 }</code></pre>
+          
+          <div class="mt-4 pt-4 border-t border-gray-800">
+            <div class="flex gap-2 text-xs text-gray-400 mb-2">
+              <span class="px-2 py-1 rounded bg-gray-800/50">simple-counter.ts</span>
+              <span class="px-2 py-1 rounded bg-gray-800 text-aurelia">simple-counter.html</span>
+            </div>
+            <pre class="text-sm font-mono"><code class="language-html text-gray-300">&lt;p&gt;Current count: ${count}&lt;/p&gt;
+&lt;button click.trigger="increment()"&gt;
+  Increment
+&lt;/button&gt;</code></pre>
+          </div>
         </div>
-        
+            
         <!-- Result Preview -->
         <div class="mt-4 rounded-xl bg-white p-6 shadow-xl border border-gray-200">
           <div data-aurelia-app="simple-counter"></div>