create-evikit 2.2.3 → 2.3.1

package/bin/create-evikit.js

@@ -23,10 +23,12 @@ for (const file of [...template, "eslint.config.js", "tsconfig.json"]) {
   mkdirSync(dirname(path), { recursive: true });
   writeFileSync(
     path,
-    readFileSync(join(ownRoot, file), "utf8").replace(
-      /<link\s+href="\/node_modules\/[^"]+.css"\s+media="[^"]+"\s+rel="stylesheet"\s+\/>\s+/g,
-      "",
-    ),
+    readFileSync(join(ownRoot, file), "utf8")
+      .replace(
+        /<link\s+href="[^"]+"(\s+media="[^"]+")?\s+rel="[a-z]+"\s+\/>\s+/g,
+        "",
+      )
+      .replace(', "uk"', ""),
   );
 }
 
@@ -47,19 +49,6 @@ package-lock.json
 
 // ---
 
-writeFileSync(
-  join(target, "src/lib/index.js"),
-  `
-import acceptLanguage from "accept-language";
-
-export function acceptLanguages() {
-  acceptLanguage.languages(["en"]);
-}
-`.trimStart(),
-);
-
-// ---
-
 writeFileSync(
   join(target, "src/routes/api/types.js"),
   `

package/index.css

@@ -5,8 +5,19 @@
   text-wrap: balance;
 }
 
+.badge-info.badge-soft,
 p a:not([class]) {
   color: #28f;
+}
+
+@media (prefers-color-scheme: dark) {
+  .badge-info.badge-soft,
+  p a:not([class]) {
+    color: #61afef;
+  }
+}
+
+p a:not([class]) {
   text-decoration: underline;
 }
 
@@ -32,7 +43,7 @@ details {
 nav a {
   background-color: currentColor;
   color: #fff;
-  border-radius: 1em;
+  border-radius: 0.75rem;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
   display: inline-block;
   margin-bottom: 1em;
@@ -53,3 +64,13 @@ nav a[href*="issues"] {
   background-color: #7d8f;
   color: #fff;
 }
+
+@media (prefers-color-scheme: dark) {
+  nav a[href*="documentation"] {
+    background-color: #c678dd;
+  }
+
+  nav a[href*="issues"] {
+    background-color: #61afef;
+  }
+}

package/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link href="/static/favicon.svg" rel="icon" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="dark light" />
     <link href="/index.css" rel="stylesheet" />

package/index.js

@@ -7,6 +7,7 @@ import { api } from "./src/api.js";
 import { prerender } from "./src/app.js";
 
 const app = express();
+app.use("/static", express.static("./static"));
 app.use(api().onRequest);
 app.use("/openapi", swaggerUi.serve, swaggerUi.setup(api().openapi));
 app.use("/", express.static("./dist", { index: false, redirect: false }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-evikit",
-  "version": "2.2.3",
+  "version": "2.3.1",
   "type": "module",
   "bin": "bin/create-evikit.js",
   "scripts": {
@@ -37,7 +37,7 @@
     "@speed-highlight/core": "^1.2.17",
     "accept-language": "^3.0.20",
     "classnames": "^2.5.1",
-    "evikit": "^2.2.2",
+    "evikit": "^2.3.2",
     "express": "^5.2.1",
     "file-type": "^22.0.1",
     "hoofd": "^1.7.3",

package/po/create-evikit.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: create-evikit\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-07-07 23:06+0300\n"
+"POT-Creation-Date: 2026-07-08 12:51+0300\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -21,12 +21,6 @@ msgstr ""
 msgid "EviKit: Preact SSR framework for small web apps"
 msgstr ""
 
-msgid "Preact SSR framework."
-msgstr ""
-
-msgid "For small web apps hosted on a <b>VPS</b> or in local network."
-msgstr ""
-
 msgid ""
 "Standard modern <b>JavaScript</b>, no JSX or TS. <b>Forms</b> accessible "
 "when JS doesn't load. Automatic <b>Swagger</b> specification. First-class "
@@ -34,6 +28,12 @@ msgid ""
 "for UI <b>translation</b> through .po files."
 msgstr ""
 
+msgid "Preact SSR framework."
+msgstr ""
+
+msgid "For small web apps hosted on a <b>VPS</b> or in local network."
+msgstr ""
+
 msgid "Documentation"
 msgstr ""
 
@@ -45,6 +45,11 @@ msgid ""
 "are deleted every 10 minutes."
 msgstr ""
 
+msgid ""
+"<a href=\"{openapi}\" target=\"_top\">OpenAPI demo</a> (Swagger) is "
+"generated from API route schema."
+msgstr ""
+
 msgid "Quick start"
 msgstr ""
 
@@ -55,6 +60,9 @@ msgid ""
 "using all the primary features of the EviKit framework."
 msgstr ""
 
+msgid "Favicon by <a href=\"{artist}\">Solar Icons</a>"
+msgstr ""
+
 msgid ""
 "<a href=\"{evikit}\"><b>Source code</b> at Codeberg</a> under <b>MIT</b> "
 "license"

package/po/uk.po

@@ -7,8 +7,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: create-evikit\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-07-07 23:06+0300\n"
-"PO-Revision-Date: 2026-07-07 23:07+0300\n"
+"POT-Creation-Date: 2026-07-08 12:51+0300\n"
+"PO-Revision-Date: 2026-07-08 03:11+0300\n"
 "Last-Translator: EMAIL@ADDRESS\n"
 "Language-Team: Ukrainian\n"
 "Language: uk\n"
@@ -22,13 +22,6 @@ msgstr ""
 msgid "EviKit: Preact SSR framework for small web apps"
 msgstr "EviKit: Preact SSR-фреймворк для невеликих вебзастосунків"
 
-msgid "Preact SSR framework."
-msgstr "Preact SSR-фреймворк."
-
-msgid "For small web apps hosted on a <b>VPS</b> or in local network."
-msgstr ""
-"Для невеликих вебзастосунків, розміщених на <b>VPS</b> чи в локальній мережі."
-
 msgid ""
 "Standard modern <b>JavaScript</b>, no JSX or TS. <b>Forms</b> accessible "
 "when JS doesn't load. Automatic <b>Swagger</b> specification. First-class "
@@ -41,6 +34,13 @@ msgstr ""
 "коробки. Вбудована <b>ORM</b> на основі <b>node:sqlite</b>. Підтримується "
 "<b>переклад</b> інтерфейсу через .po-файли."
 
+msgid "Preact SSR framework."
+msgstr "Preact SSR-фреймворк."
+
+msgid "For small web apps hosted on a <b>VPS</b> or in local network."
+msgstr ""
+"Для невеликих вебзастосунків, розміщених на <b>VPS</b> чи в локальній мережі."
+
 msgid "Documentation"
 msgstr "Документація"
 
@@ -54,6 +54,13 @@ msgstr ""
 "Перегляньте <a href=\"{todo}\">живе демо</a> коду зразків, наведених унизу. "
 "Завдання видаляються кожні 10 хвилин."
 
+msgid ""
+"<a href=\"{openapi}\" target=\"_top\">OpenAPI demo</a> (Swagger) is "
+"generated from API route schema."
+msgstr ""
+"<a href=\"{openapi}\" target=\"_top\">Демо OpenAPI</a> (Swagger) генерується "
+"зі схеми API-шляхів."
+
 msgid "Quick start"
 msgstr "Швидкий початок"
 
@@ -68,6 +75,9 @@ msgstr ""
 "покрокові інструкції з <b><a href=\"{documentation}\">написання застосунка</"
 "a></b>, що використовує всі основні функції фреймворка EviKit."
 
+msgid "Favicon by <a href=\"{artist}\">Solar Icons</a>"
+msgstr "Піктограма за авторством <a href=\"{artist}\">Solar Icons</a>"
+
 msgid ""
 "<a href=\"{evikit}\"><b>Source code</b> at Codeberg</a> under <b>MIT</b> "
 "license"

package/src/app.js

@@ -3,6 +3,7 @@ import { h } from "preact";
 import { Route } from "preact-iso";
 
 import { acceptLanguages } from "./lib/index.js";
+import { ErrorPage } from "./routes/error.js";
 import { HomePage } from "./routes/page.js";
 import { TodoPage } from "./routes/todo/page.js";
 
@@ -18,6 +19,7 @@ export function App(props) {
     props,
     h(Route, { component: HomePage, path: "/" }),
     h(Route, { component: TodoPage, path: "/todo" }),
+    h(Route, { component: ErrorPage, default: true }),
   );
 }
 

package/src/routes/api/server.js

@@ -1,5 +1,7 @@
 import { endpoint, json } from "evikit/server";
+import { ok } from "node:assert/strict";
 import { readFile } from "node:fs/promises";
+import { object, parse, record, string } from "valibot";
 
 import { HomeGet } from "./types.js";
 
@@ -8,6 +10,8 @@ export const template = [
   "src/routes/api/todo/types.js",
   "src/routes/api/todo/server.js",
   "src/routes/todo/page.js",
+  "src/routes/error.js",
+  "src/lib/index.js",
   "src/api.js",
   "src/app.js",
   "index.js",
@@ -17,13 +21,27 @@ export const template = [
 ];
 
 export const HomeServer = {
-  get: endpoint(HomeGet, async () =>
-    json({
+  get: endpoint(HomeGet, async () => {
+    const latest = Object.entries(
+      parse(
+        object({ time: record(string(), string()) }),
+        await (await fetch("https://registry.npmjs.org/evikit")).json(),
+      ).time,
+    )
+      .filter(
+        ([, publishedAt]) =>
+          // Give me 30 minutes for hotfix.
+          new Date(publishedAt).getTime() < Date.now() - 30 * 60e3,
+      )
+      .at(-1);
+    ok(latest);
+    return json({
       File: Object.fromEntries(
         await Promise.all(
           template.map(async (path) => [path, await readFile(path, "utf8")]),
         ),
       ),
-    }),
-  ),
+      npm: { publishedAt: latest[1], version: latest[0] },
+    });
+  }),
 };

package/src/routes/api/types.js

@@ -2,5 +2,10 @@ import { object, record, string } from "valibot";
 
 export const HomeGet = {
   input: object({ lang: string() }),
-  outputs: { 200: object({ File: record(string(), string()) }) },
+  outputs: {
+    200: object({
+      File: record(string(), string()),
+      npm: object({ publishedAt: string(), version: string() }),
+    }),
+  },
 };

package/src/routes/error.js

@@ -0,0 +1,16 @@
+import { a, h1, main, p, useStatus } from "evikit";
+import { useMeta, useTitle } from "hoofd/preact";
+
+/** @param {{ children?: import("preact").ComponentChildren, error?: unknown }} props */
+export function ErrorPage({ children, error }) {
+  const status = useStatus(error);
+  useMeta({ content: "noindex", name: "robots" });
+  useTitle(status);
+
+  return main(
+    { class: "m-8" },
+    p({ class: "mb-4" }, a({ class: "link", href: "/" }, "EviKit")),
+    h1({ class: "text-2xl" }, status),
+    children,
+  );
+}

package/src/routes/page.js

@@ -1,31 +1,79 @@
 import { highlightAll } from "@speed-highlight/core";
-import { a, b, div, figure, h1, main, p, span, useApi, useI18n } from "evikit";
+import {
+  a,
+  b,
+  blockquote,
+  br,
+  code,
+  details,
+  div,
+  figcaption,
+  figure,
+  footer,
+  h1,
+  hr,
+  main,
+  nav,
+  p,
+  pre,
+  span,
+  summary,
+  useApi,
+  useI18n,
+} from "evikit";
 import { useMeta, useTitle } from "hoofd/preact";
 import { h } from "preact";
 import { useEffect } from "preact/hooks";
 
 import { HomeGet } from "./api/types.js";
 
+const darkBg = "dark:bg-[#161b22]";
+const blockquoteStyle = `bg-gray-50 ${darkBg} border border-gray-100 dark:border-black mx-auto p-4 rounded-xl md:text-center`;
+
 export function HomePage() {
   const i18n = useI18n();
   const { data } = useApi(HomeGet);
   useTitle(i18n.gettext("EviKit: Preact SSR framework for small web apps"));
+  const description = i18n.gettext(
+    "Standard modern <b>JavaScript</b>, no JSX or TS. <b>Forms</b> accessible when JS doesn't load. Automatic <b>Swagger</b> specification. First-class API input/output <b>validation</b>. Built-in <b>node:sqlite ORM</b>. Support for UI <b>translation</b> through .po files.",
+  );
   useMeta({
-    content:
-      "Standard modern JavaScript, no JSX or TS. Forms accessible when JS doesn't load. Automatic Swagger specification. First-class API input/output validation. Built-in node:sqlite ORM. Support for UI translation through .po files.",
+    content: description.replace(/<[^>]+>/g, ""),
     name: "description",
   });
+  useMeta({ content: "/static/preact-ssr-framework.png", name: "og:image" });
+  useMeta({ content: "summary_large_image", name: "twitter:card" });
   useEffect(() => {
     highlightAll();
   }, [JSON.stringify(data?.File)]);
 
   return main(
     { class: "max-w-5xl mx-auto p-8" },
+    p(
+      { class: "mb-4 sm:text-center" },
+      a(
+        {
+          class: "badge badge-info badge-soft",
+          href: "https://npmx.dev/package/evikit",
+        },
+        "npm i evikit",
+        data
+          ? [
+              "@^" + data.npm.version + " ",
+              span(
+                { class: "opacity-50" },
+                `# ${data.npm.publishedAt.replace(/T.*/, "")}`,
+              ),
+            ]
+          : undefined,
+      ),
+    ),
+
     h1(
-      { class: "mb-4 text-xl lg:text-3xl lg:text-center" },
+      { class: "mb-4 text-xl lg:text-3xl sm:text-center" },
       "EviKit: ",
       b(null, i18n.gettext("Preact SSR framework.")),
-      h("br", null),
+      br(null),
       span({
         class: "mt-0 text-base lg:text-sm",
         ...sanitize(
@@ -35,18 +83,9 @@ export function HomePage() {
         ),
       }),
     ),
+    p({ class: "lg:text-center", ...sanitize(description) }),
 
-    p({
-      class: "lg:text-center",
-      ...sanitize(
-        i18n.gettext(
-          "Standard modern <b>JavaScript</b>, no JSX or TS. <b>Forms</b> accessible when JS doesn't load. Automatic <b>Swagger</b> specification. First-class API input/output <b>validation</b>. Built-in <b>node:sqlite ORM</b>. Support for UI <b>translation</b> through .po files.",
-        ),
-      ),
-    }),
-
-    h(
-      "nav",
+    nav(
       { class: "gap-4 grid grid-cols-2 max-w-lg mx-auto mt-6 text-center" },
 
       a(
@@ -61,32 +100,39 @@ export function HomePage() {
       }),
     ),
 
-    p({
-      class: "mb-6 lg:text-center",
-      ...sanitize(
-        i18n
-          .gettext(
-            'See <a href="{todo}">live demo</a> of the example code from below. Todos are deleted every 10 minutes.',
-          )
-          .replace("{todo}", "/todo"),
-      ),
-    }),
+    p(
+      { class: "mb-6 lg:text-center", id: "demo" },
+      span({
+        ...sanitize(
+          i18n
+            .gettext(
+              'See <a href="{todo}">live demo</a> of the example code from below. Todos are deleted every 10 minutes.',
+            )
+            .replace("{todo}", "/todo"),
+        ),
+      }),
+      " ",
+      span({
+        ...sanitize(
+          i18n
+            .gettext(
+              '<a href="{openapi}" target="_top">OpenAPI demo</a> (Swagger) is generated from API route schema.',
+            )
+            .replace(
+              "{openapi}",
+              /localhost/.test(location.href) ? "/openapi.json" : "/openapi",
+            ),
+        ),
+        class: "lg:block",
+      }),
+    ),
 
-    h(
-      "blockquote",
-      {
-        class: "max-w-xs mx-auto mb-8 p-4 rounded-lg text-center",
-        style: {
-          background: "rgba(0, 0, 0, 0.025)",
-          border: "1px solid rgba(0, 0, 0, 0.05)",
-        },
-      },
+    blockquote(
+      { class: `${blockquoteStyle} max-w-sm mb-8` },
       p(null, b(null, i18n.gettext("Quick start"))),
-      h(
-        "pre",
+      pre(
         null,
-        h(
-          "code",
+        code(
           { class: "!bg-transparent shj-lang-bash" },
           `
 npm init evikit my-app
@@ -127,6 +173,20 @@ npm run dev
         b(null, "todo/page.js"),
       ),
 
+      h(
+        Code,
+        { file: data?.File["src/routes/error.js"], lang: "js" },
+        span(null, "src/routes/"),
+        b(null, "error.js"),
+      ),
+
+      h(
+        Code,
+        { file: data?.File["src/lib/index.js"], lang: "js" },
+        span(null, "src/lib/"),
+        b(null, "index.js"),
+      ),
+
       h(
         Code,
         { file: data?.File["src/api.js"], lang: "js", tag: "details" },
@@ -167,16 +227,10 @@ npm run dev
       ),
     ),
 
-    h("hr", { class: "opacity-0" }),
+    hr({ class: "opacity-0" }),
     h(
       "blockquote",
-      {
-        class: "max-w-2xl mx-auto my-8 p-4 rounded-lg text-center",
-        style: {
-          background: "rgba(0, 0, 0, 0.025)",
-          border: "1px solid rgba(0, 0, 0, 0.05)",
-        },
-      },
+      { class: `${blockquoteStyle} max-w-2xl my-8` },
       p({
         ...sanitize(
           i18n
@@ -191,15 +245,25 @@ npm run dev
       }),
     ),
 
-    h("hr", { class: "opacity-0" }),
-    h(
-      "footer",
-      { class: "text-center" },
+    hr({ class: "opacity-0" }),
+    footer(
+      { class: "md:text-center" },
       p(
         { class: "mb-4" },
         "Copyright © 2026 ",
         a({ href: "https://libre.net.ua" }, "Denys Nykula"),
       ),
+      p({
+        class: "mb-4",
+        ...sanitize(
+          i18n
+            .gettext('Favicon by <a href="{artist}">Solar Icons</a>')
+            .replace(
+              "{artist}",
+              "https://www.svgrepo.com/author/Solar%20Icons/",
+            ),
+        ),
+      }),
       p({
         class: "mb-4",
         ...sanitize(
@@ -223,27 +287,27 @@ npm run dev
 
 /** @param {{ children?: any, lang: string, file: string | undefined, tag?: string }} props */
 function Code({ children, file, lang, tag }) {
-  const inner = h(
-    "pre",
+  const inner = pre(
     { class: "mt-4 overflow-auto text-sm" },
-    h(
-      "code",
+    code(
       { class: `w-full shj-lang-${lang}` },
       file
         ?.replace(/.*EviKit.*\r?\n/g, "")
-        .replace(/\{[\s\S]*?\} from/g, (match) => match.replace(/\s+/g, " "))
-        .replace(/.*(HomeServer|acceptLanguage).*\r?\n/g, "")
-        .replace(/.*(HomePage|acceptLanguage).*\r?\n/g, "")
+        .replace(/\{[0-9a-z,\s]*?\} from/gi, (match) =>
+          match.replace(/\s+/g, " "),
+        )
+        .replace(/.*HomeServer.*\r?\n/g, "")
+        .replace(/.*HomePage.*\r?\n/g, "")
         .replace(
-          /<link\s+href="\/node_modules\/[^"]+.css"\s+media="[^"]+"\s+rel="stylesheet"\s+\/>\s+/g,
+          /<link\s+href="[^"]+"(\s+media="[^"]+")?\s+rel="[a-z]+"\s+\/>\s+/g,
           "",
         ),
     ),
   );
-  const style = "border-lg mb-4 mx-0 overflow-hidden p-4";
+  const style = `${darkBg} mb-4 mx-0 overflow-hidden p-4 rounded-xl`;
   return tag == "details"
-    ? h("details", { class: style }, h("summary", null, children), inner)
-    : figure({ class: style }, h("figcaption", null, children), inner);
+    ? details({ class: style }, summary(null, children), inner)
+    : figure({ class: style }, figcaption(null, children), inner);
 }
 
 /** @param {string} html */
@@ -251,7 +315,8 @@ function sanitize(html) {
   return {
     dangerouslySetInnerHTML: {
       __html: html.replace(/<([^>]*)>/g, (match) =>
-        /^<\/?[a-z]+>$/.test(match) || /^<a href="[a-z:/.#]*">$/.test(match)
+        /^<\/?[a-z]+>$/.test(match) ||
+        /^<a href="[0-9A-Za-z:/.#%]*"( target="_top")?>$/.test(match)
           ? match
           : "",
       ),

package/static/favicon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+#app { fill: #84f }
+#api { fill: #7d8 }
+@media (prefers-color-scheme: dark) {
+    #app { fill: #c678dd }
+    #api { fill: #61afef }
+}
+</style>
+<rect fill="#fff" width="18" height="6" x="3" y="4" />
+<rect fill="#fff" width="18" height="6" x="3" y="14" />
+<path id="app" fill-rule="evenodd" clip-rule="evenodd" d="M2.58579 3.58579C2 4.17157 2 5.11438 2 7C2 8.88562 2 9.82843 2.58579 10.4142C3.17157 11 4.11438 11 6 11H18C19.8856 11 20.8284 11 21.4142 10.4142C22 9.82843 22 8.88562 22 7C22 5.11438 22 4.17157 21.4142 3.58579C20.8284 3 19.8856 3 18 3H6C4.11438 3 3.17157 3 2.58579 3.58579ZM9 8.75C8.58579 8.75 8.25 8.41421 8.25 8V6C8.25 5.58579 8.58579 5.25 9 5.25C9.41421 5.25 9.75 5.58579 9.75 6V8C9.75 8.41421 9.41421 8.75 9 8.75ZM13.5 6.25C13.0858 6.25 12.75 6.58579 12.75 7C12.75 7.41421 13.0858 7.75 13.5 7.75H18C18.4142 7.75 18.75 7.41421 18.75 7C18.75 6.58579 18.4142 6.25 18 6.25H13.5ZM6 8.75C5.58579 8.75 5.25 8.41421 5.25 8L5.25 6C5.25 5.58579 5.58579 5.25 6 5.25C6.41421 5.25 6.75 5.58579 6.75 6V8C6.75 8.41421 6.41421 8.75 6 8.75Z"/>
+<path id="api" fill-rule="evenodd" clip-rule="evenodd" d="M2.58579 13.5858C2 14.1716 2 15.1144 2 17C2 18.8856 2 19.8284 2.58579 20.4142C3.17157 21 4.11438 21 6 21H18C19.8856 21 20.8284 21 21.4142 20.4142C22 19.8284 22 18.8856 22 17C22 15.1144 22 14.1716 21.4142 13.5858C20.8284 13 19.8856 13 18 13H6C4.11438 13 3.17157 13 2.58579 13.5858ZM12.75 17C12.75 16.5858 13.0858 16.25 13.5 16.25H18C18.4142 16.25 18.75 16.5858 18.75 17C18.75 17.4142 18.4142 17.75 18 17.75H13.5C13.0858 17.75 12.75 17.4142 12.75 17ZM5.25 18C5.25 18.4142 5.58579 18.75 6 18.75C6.41421 18.75 6.75 18.4142 6.75 18V16C6.75 15.5858 6.41421 15.25 6 15.25C5.58579 15.25 5.25 15.5858 5.25 16L5.25 18ZM9 18.75C8.58579 18.75 8.25 18.4142 8.25 18V16C8.25 15.5858 8.58579 15.25 9 15.25C9.41421 15.25 9.75 15.5858 9.75 16V18C9.75 18.4142 9.41421 18.75 9 18.75Z"/>
+</svg>