create-apexjs 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-apexjs",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Scaffold a new Apex JS app",
   "type": "module",
   "license": "MIT",

package/templates/default/layouts/default.alpine

@@ -7,9 +7,11 @@
       <nav
         class="mx-auto flex max-w-5xl items-center gap-2 px-6 py-4"
         x-data="{ dark: false }"
-        x-init="dark = localStorage.getItem('theme') === 'dark'; document.documentElement.classList.toggle('dark', dark)"
+        x-init="dark = localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark', dark)"
+        client:load
       >
-        <a href="/" class="mr-auto font-title text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+        <a href="/" class="mr-auto flex items-center gap-2 font-title text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+          <img src="/favicon.svg" alt="" width="24" height="24" class="size-6" />
           {{name}}
         </a>
         <a href="/" class="rounded-radius px-3 py-1.5 text-sm font-medium hover:bg-surface-alt dark:hover:bg-surface-dark-alt">Home</a>

package/templates/default/pages/index.alpine

@@ -14,12 +14,16 @@
   }
 </script>
 
-<template x-data="{ show: false }">
+<template x-data>
   <!-- Hero -->
-  <section class="py-8 text-center">
-    <h1 class="font-title text-4xl font-extrabold tracking-tight text-on-surface-strong sm:text-5xl dark:text-on-surface-dark-strong" x-text="title"></h1>
+  <section class="flex flex-col items-center py-10 text-center sm:py-16">
+    <img src="/favicon.svg" alt="Apex JS" width="72" height="72" class="size-16 sm:size-20 drop-shadow" />
+    <p class="mt-5 inline-flex items-center gap-2 rounded-full border border-outline px-3 py-1 text-xs font-medium text-on-surface/80 dark:border-outline-dark dark:text-on-surface-dark/80">
+      Built with <span class="font-title font-bold text-on-surface-strong dark:text-on-surface-dark-strong">Apex&nbsp;JS</span>
+    </p>
+    <h1 class="mt-5 font-title text-4xl font-extrabold tracking-tight text-on-surface-strong sm:text-6xl dark:text-on-surface-dark-strong" x-text="title"></h1>
     <p class="mx-auto mt-4 max-w-2xl text-lg" x-text="tagline"></p>
-    <div class="mt-6 flex flex-wrap justify-center gap-3">
+    <div class="mt-7 flex flex-wrap justify-center gap-3">
       <a href="/blog"><Button>Read the blog</Button></a>
       <a href="https://apexjs.site" class="inline-flex items-center justify-center rounded-radius border border-outline px-4 py-2 text-sm font-medium text-on-surface transition hover:opacity-75 dark:border-outline-dark dark:text-on-surface-dark">Docs</a>
     </div>
@@ -54,8 +58,9 @@
     </ul>
   </section>
 
-  <!-- A hydrated, interactive component -->
-  <section class="mt-10 flex flex-col items-start gap-3">
+  <!-- A hydrated, interactive island. `client:load` hydrates it immediately in
+       islands mode; in default mode the whole page hydrates anyway. -->
+  <section class="mt-10 flex flex-col items-start gap-3" x-data="{ show: false }" client:load>
     <p class="text-sm text-on-surface/80 dark:text-on-surface-dark/80">Hydrated in the browser — click it:</p>
     <Counter start="0" label="Clicks" />
     <button type="button" class="text-sm text-primary hover:opacity-75 dark:text-primary-dark" @click="show = !show" x-text="show ? 'Hide details' : 'How does this work?'"></button>

package/templates/default/public/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Apex">
+  <defs>
+    <linearGradient id="apexLit" x1="0" y1="1" x2="1" y2="0">
+      <stop offset="0" stop-color="#22d3ee"/>
+      <stop offset="1" stop-color="#6366f1"/>
+    </linearGradient>
+  </defs>
+  <!-- Apex mark: an "A" that is also a summit. Left face lit, right face in shadow. -->
+  <path d="M32 7 L32 35 L20 56 L4 56 Z" fill="url(#apexLit)"/>
+  <path d="M32 7 L60 56 L44 56 L32 35 Z" fill="#6366f1"/>
+</svg>