@inglorious/create-app 1.5.0 → 1.7.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-The official scaffolding tool to quickly create a new web app with the [@inglorious/web](https://www.npmjs.com/package/@inglorious/web) framework or a static site with [@inglorious/ssx](https://www.npmjs.com/package/@inglorious/ssx).
+The official scaffolding tool to quickly create a new web app with the [@inglorious/web](https://www.npmjs.com/package/@inglorious/web) framework or a pre-rendered site, static or server-rendered, with [@inglorious/ssx](https://www.npmjs.com/package/@inglorious/ssx).
 
 This package allows you to generate a new project from a set of pre-configured templates, so you can start developing your web app right away.
 
@@ -25,16 +25,16 @@ The CLI will guide you through the setup process, asking for a project name and
 
 For the JavaScript and TypeScript Vite templates, the CLI then asks about the app's features:
 
-| Question                  | Flag                                                 | Adds                                                                                                       |
-| ------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| Use Inglorious UI?        | `--ui` / `--no-ui`                                   | `@inglorious/ui`, its base styles and an app bar                                                           |
-| Which theme?              | `--theme=inglorious\|material\|bootstrap`            | The theme's stylesheet and class                                                                           |
-| Is it a mobile app?       | `--mobile` / `--no-mobile`                           | Capacitor for Android and iOS; with Inglorious UI, a bottom tab bar and safe-area spacing                  |
-| Add routing?              | `--routing` / `--no-routing`                         | The Router, a home and an about page, and navigation between them                                          |
-| Animate page transitions? | `--transitions` / `--no-transitions`                 | View transitions between pages (with routing and Inglorious UI)                                            |
-| Which icon packs?         | `--icons=material,fontawesome,lucide` / `--no-icons` | Iconify icon sets, drawn by Inglorious UI's `Icon` (with Inglorious UI)                                    |
-| Translate the app?        | `--i18n` / `--no-i18n`, `--languages=en,it`          | `@inglorious/i18n`, a catalogue per language and a language picker; the first language is the default      |
-| Enable PWA support?       | `--pwa` / `--no-pwa`                                 | `vite-plugin-pwa`, a manifest, icons, and a service worker that keeps installed apps on the latest version |
+| Question                  | Flag                                                                     | Adds                                                                                                       |
+| ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
+| Use Inglorious UI?        | `--ui` / `--no-ui`                                                       | `@inglorious/ui`, its base styles and an app bar                                                           |
+| Which theme?              | `--theme=inglorious\|material-ui\|material-3\|bootstrap\|ios-18\|ios-26` | The theme's stylesheet and class                                                                           |
+| Is it a mobile app?       | `--mobile` / `--no-mobile`                                               | Capacitor for Android and iOS; with Inglorious UI, a bottom tab bar and safe-area spacing                  |
+| Add routing?              | `--routing` / `--no-routing`                                             | The Router, a home and an about page, and navigation between them                                          |
+| Animate page transitions? | `--transitions` / `--no-transitions`                                     | View transitions between pages (with routing and Inglorious UI)                                            |
+| Which icon packs?         | `--icons=material,fontawesome,lucide` / `--no-icons`                     | Iconify icon sets, drawn by Inglorious UI's `Icon` (with Inglorious UI)                                    |
+| Translate the app?        | `--i18n` / `--no-i18n`, `--languages=en,it`                              | `@inglorious/i18n`, a catalogue per language and a language picker; the first language is the default      |
+| Enable PWA support?       | `--pwa` / `--no-pwa`                                                     | `vite-plugin-pwa`, a manifest, icons, and a service worker that keeps installed apps on the latest version |
 
 Every template except `minimal` then asks whether to add agent skills (`--skills` / `--no-skills`). Saying yes runs the [skills CLI](https://skills.sh) in the new project. It asks which coding agents to install for, and installs the [Inglorious Forge skills](https://github.com/IngloriousCoderz/forge-skills) that match your choices: `forge`, `forge-best-practices`, `store`, `web` and `web-best-practices` always, plus `ssx`, `vite-plugin-jsx` or `vite-plugin-vue`, `ui` and `ui-best-practices`, and `i18n` when the project uses them. If the install fails, the CLI prints the command to retry it.
 
@@ -47,7 +47,7 @@ The app is generated in the syntax you chose: lit-html, JSX or Vue. Every questi
 | Select a rendering syntax   | `--syntax=lit-html\|jsx\|vue`                |
 
 ```bash
-npm create @inglorious/app@latest -- my-app --template=ts --syntax=jsx --ui --theme=material --routing --transitions --icons=material --languages=en,it --no-mobile --no-pwa --skills
+npm create @inglorious/app@latest -- my-app --template=ts --syntax=jsx --ui --theme=material-3 --routing --transitions --icons=material --languages=en,it --no-mobile --no-pwa --skills
 ```
 
 ## Templates

package/bin/lib/features.js

@@ -31,8 +31,14 @@ export const SYNTAXES = {
 
 export const THEMES = {
   inglorious: { title: "Inglorious", description: "Neon, videogame-inspired" },
-  material: { title: "Material", description: "Material Design inspired" },
+  "material-ui": { title: "Material UI", description: "Material UI inspired" },
+  "material-3": {
+    title: "Material 3",
+    description: "Material Design 3 inspired",
+  },
   bootstrap: { title: "Bootstrap", description: "Bootstrap inspired" },
+  "ios-18": { title: "iOS 18", description: "Flat iOS inspired" },
+  "ios-26": { title: "iOS 26", description: "Liquid Glass inspired" },
 }
 
 // Icon sets from Iconify: one module per icon, so only the icons an app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",

package/templates/js/README.md

@@ -1,6 +1,6 @@
 # my-app
 
-This project is a minimal starter template for creating an app with the Inglorious Web framework using plain JavaScript and Vite.
+This project is a minimal starter template for creating an app with the Inglorious Web framework using JavaScript, bundled with Vite.
 
 ## Getting Started
 

package/templates/js-jsx/README.md

@@ -1,6 +1,6 @@
 # my-app
 
-This project is a minimal starter template for creating an app with the Inglorious Web framework using the JSX syntax.
+This project is a minimal starter template for creating an app with the Inglorious Web framework using JavaScript and JSX, bundled with Vite.
 
 ## Getting Started
 
@@ -24,6 +24,6 @@ This will start a Vite development server. Open your browser to the local URL pr
 ## Project Setup
 
 - `index.html`: The main entry point for your app.
-- `src/`: Contains your app's JavaScript source code.
+- `src/`: Contains your app's JavaScript source code (JSX in `.jsx`/`.tsx` files).
 - `vite.config.js`: Vite configuration file.
 - `package.json`: Project metadata and dependencies.

package/templates/js-jsx/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "js-template",
+  "name": "js-jsx-template",
   "version": "0.1.0",
   "type": "module",
   "private": true,

package/templates/js-vue/README.md

@@ -1,6 +1,6 @@
 # my-app
 
-This project is a minimal starter template for creating an app with the Inglorious Web framework using plain JavaScript and Vite.
+This project is a minimal starter template for creating an app with the Inglorious Web framework using JavaScript and Vue-like templates, bundled with Vite.
 
 ## Getting Started
 
@@ -24,6 +24,6 @@ This will start a Vite development server. Open your browser to the local URL pr
 ## Project Setup
 
 - `index.html`: The main entry point for your app.
-- `src/`: Contains your app's JavaScript source code.
+- `src/`: Contains your app's JavaScript source code (templates in `.vue` files).
 - `vite.config.js`: Vite configuration file.
 - `package.json`: Project metadata and dependencies.

package/templates/js-vue/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "js-template",
+  "name": "js-vue-template",
   "version": "0.1.0",
   "type": "module",
   "private": true,

package/templates/ssx-js-jsx/.prettierrc.yml

@@ -0,0 +1 @@
+semi: false

package/templates/ssx-js-jsx/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/templates/ssx-js-jsx/eslint.config.js

@@ -0,0 +1,13 @@
+import reactConfig from "@inglorious/eslint-config/react"
+import { defineConfig } from "eslint/config"
+
+export default defineConfig([
+  ...reactConfig,
+
+  {
+    files: ["**/*.{jsx,tsx}"],
+    rules: {
+      "react/jsx-no-undef": "off",
+    },
+  },
+])

package/templates/ssx-js-jsx/gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/templates/ssx-js-jsx/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "ssx-js-jsx-template",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "A new SSX app created with @inglorious/create-app",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "dev": "ssx dev",
+    "build": "ssx build",
+    "preview": "serve dist"
+  },
+  "dependencies": {
+    "@inglorious/ssx": "workspace:*",
+    "@inglorious/store": "workspace:*",
+    "@inglorious/web": "workspace:*",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
+    "markdown-it": "^15.0.3",
+    "markdown-it-texmath": "^1.0.0",
+    "mermaid": "^12.2.0"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-jsx": "workspace:*",
+    "eslint": "^10.13.0",
+    "eslint-plugin-react": "^7.37.5",
+    "prettier": "^3.9.10",
+    "serve": "^14.2.6"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/ssx-js-jsx/public/style.css

@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}

package/templates/ssx-js-jsx/src/pages/about.jsx

@@ -0,0 +1,24 @@
+export const About = {
+  click(entity) {
+    entity.name += "!"
+  },
+
+  render(entity, api) {
+    return (
+      <div>
+        <h1>
+          About{" "}
+          <span onClick={() => api.notify(`#${entity.id}:click`)}>
+            {entity.name}
+          </span>
+        </h1>
+        <p>This is a static page generated by SSX.</p>
+        <a href="/">Back Home</a>
+      </div>
+    )
+  },
+}
+
+export const metadata = {
+  title: "About",
+}

package/templates/ssx-js-jsx/src/pages/index.jsx

@@ -0,0 +1,19 @@
+export const Index = {
+  render() {
+    return (
+      <div>
+        <h1>Welcome to SSX!</h1>
+        <p>
+          Edit <code>src/pages/index.jsx</code> to get started.
+        </p>
+        <nav>
+          <a href="/about">About</a>
+        </nav>
+      </div>
+    )
+  },
+}
+
+export const metadata = {
+  title: "Home",
+}

package/templates/ssx-js-jsx/src/site.config.js

@@ -0,0 +1,18 @@
+import { jsx } from "@inglorious/vite-plugin-jsx"
+
+/** @type {import('@inglorious/ssx').SiteConfig} */
+export default {
+  title: "My SSX App",
+  favicon: "/logo.png",
+  meta: {
+    description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
+  },
+  // SSX includes image optimization by default
+  vite: {
+    plugins: [jsx()],
+    server: {
+      port: 3000,
+    },
+  },
+}

package/templates/ssx-js-jsx/src/store/entities.js

@@ -0,0 +1,6 @@
+export const entities = {
+  about: {
+    type: "About",
+    name: "Us",
+  },
+}

package/templates/ssx-js-vue/.prettierrc.yml

@@ -0,0 +1 @@
+semi: false

package/templates/ssx-js-vue/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/templates/ssx-js-vue/eslint.config.js

@@ -0,0 +1 @@
+export { default } from "@inglorious/eslint-config/browser"

package/templates/ssx-js-vue/gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/templates/ssx-js-vue/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ssx-js-vue-template",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "A new SSX app created with @inglorious/create-app",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "dev": "ssx dev",
+    "build": "ssx build",
+    "preview": "serve dist"
+  },
+  "dependencies": {
+    "@inglorious/ssx": "workspace:*",
+    "@inglorious/store": "workspace:*",
+    "@inglorious/web": "workspace:*",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
+    "markdown-it": "^15.0.3",
+    "markdown-it-texmath": "^1.0.0",
+    "mermaid": "^12.2.0"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-vue": "workspace:*",
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
+    "serve": "^14.2.6"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/ssx-js-vue/public/style.css

@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}

package/templates/ssx-js-vue/src/pages/about.js

@@ -0,0 +1,6 @@
+// SSX routes this module; the page's template is in its .vue file.
+export { About } from "./about.vue"
+
+export const metadata = {
+  title: "About",
+}

package/templates/ssx-js-vue/src/pages/about.vue

@@ -0,0 +1,13 @@
+<script>
+const click = (entity) => (entity.name += "!")
+</script>
+
+<template>
+  <div>
+    <h1>
+      About <span @click="click">{{ entity.name }}</span>
+    </h1>
+    <p>This is a static page generated by SSX.</p>
+    <a href="/">Back Home</a>
+  </div>
+</template>

package/templates/ssx-js-vue/src/pages/index.js

@@ -0,0 +1,6 @@
+// SSX routes this module; the page's template is in its .vue file.
+export { Index } from "./index.vue"
+
+export const metadata = {
+  title: "Home",
+}

package/templates/ssx-js-vue/src/pages/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>Welcome to SSX!</h1>
+    <p>Edit <code>src/pages/index.vue</code> to get started.</p>
+    <nav>
+      <a href="/about">About</a>
+    </nav>
+  </div>
+</template>

package/templates/ssx-js-vue/src/site.config.js

@@ -0,0 +1,18 @@
+import { vue } from "@inglorious/vite-plugin-vue"
+
+/** @type {import('@inglorious/ssx').SiteConfig} */
+export default {
+  title: "My SSX App",
+  favicon: "/logo.png",
+  meta: {
+    description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
+  },
+  // SSX includes image optimization by default
+  vite: {
+    plugins: [vue()],
+    server: {
+      port: 3000,
+    },
+  },
+}

package/templates/ssx-js-vue/src/store/entities.js

@@ -0,0 +1,6 @@
+export const entities = {
+  about: {
+    type: "About",
+    name: "Us",
+  },
+}

package/templates/ssx-ts/eslint.config.js

@@ -1 +1,17 @@
-export { default } from "@inglorious/eslint-config/browser"
+import browserConfig from "@inglorious/eslint-config/browser"
+import typescriptConfig from "@inglorious/eslint-config/typescript"
+import { defineConfig } from "eslint/config"
+
+export default defineConfig([
+  ...browserConfig,
+  ...typescriptConfig,
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parserOptions: {
+        project: "./tsconfig.json",
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+])

package/templates/ssx-ts/package.json

@@ -26,10 +26,13 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
+    "@typescript-eslint/eslint-plugin": "^8.72.0",
+    "@typescript-eslint/parser": "^8.72.0",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "eslint": "^10.13.0",
     "prettier": "^3.9.10",
     "serve": "^14.2.6",
-    "typescript": "^7.0.2"
+    "typescript": "npm:@typescript/typescript6@^6.0.2"
   },
   "packageManager": "pnpm@10.15.0",
   "engines": {

package/templates/ssx-ts/tsconfig.json

@@ -19,5 +19,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", "types"]
 }

package/templates/ssx-ts-jsx/.prettierrc.yml

@@ -0,0 +1 @@
+semi: false

package/templates/ssx-ts-jsx/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/templates/ssx-ts-jsx/eslint.config.js

@@ -0,0 +1,17 @@
+import browserConfig from "@inglorious/eslint-config/browser"
+import typescriptConfig from "@inglorious/eslint-config/typescript"
+import { defineConfig } from "eslint/config"
+
+export default defineConfig([
+  ...browserConfig,
+  ...typescriptConfig,
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parserOptions: {
+        project: "./tsconfig.json",
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+])

package/templates/ssx-ts-jsx/gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/templates/ssx-ts-jsx/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "ssx-ts-jsx-template",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "A new SSX app created with @inglorious/create-app",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "dev": "ssx dev",
+    "build": "ssx build",
+    "preview": "serve dist"
+  },
+  "dependencies": {
+    "@inglorious/ssx": "workspace:*",
+    "@inglorious/store": "workspace:*",
+    "@inglorious/web": "workspace:*",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
+    "markdown-it": "^15.0.3",
+    "markdown-it-texmath": "^1.0.0",
+    "mermaid": "^12.2.0"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/jsx": "workspace:*",
+    "@inglorious/vite-plugin-jsx": "workspace:*",
+    "@typescript-eslint/eslint-plugin": "^8.72.0",
+    "@typescript-eslint/parser": "^8.72.0",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
+    "serve": "^14.2.6",
+    "typescript": "npm:@typescript/typescript6@^6.0.2"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/ssx-ts-jsx/public/style.css

@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}

package/templates/ssx-ts-jsx/src/pages/about.tsx

@@ -0,0 +1,26 @@
+import type { AboutType } from "../../types"
+
+export const About: AboutType = {
+  click(entity) {
+    entity.name += "!"
+  },
+
+  render(entity, api) {
+    return (
+      <div>
+        <h1>
+          About{" "}
+          <span onClick={() => api.notify(`#${entity.id}:click`)}>
+            {entity.name}
+          </span>
+        </h1>
+        <p>This is a static page generated by SSX.</p>
+        <a href="/">Back Home</a>
+      </div>
+    )
+  },
+}
+
+export const metadata = {
+  title: "About",
+}

package/templates/ssx-ts-jsx/src/pages/index.tsx

@@ -0,0 +1,19 @@
+export const Index = {
+  render() {
+    return (
+      <div>
+        <h1>Welcome to SSX!</h1>
+        <p>
+          Edit <code>src/pages/index.tsx</code> to get started.
+        </p>
+        <nav>
+          <a href="/about">About</a>
+        </nav>
+      </div>
+    )
+  },
+}
+
+export const metadata = {
+  title: "Home",
+}

package/templates/ssx-ts-jsx/src/site.config.ts

@@ -0,0 +1,20 @@
+import type { SiteConfig } from "@inglorious/ssx"
+import { jsx } from "@inglorious/vite-plugin-jsx"
+
+const siteConfig: SiteConfig = {
+  title: "My SSX App",
+  favicon: "/logo.png",
+  meta: {
+    description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
+  },
+  // SSX includes image optimization by default
+  vite: {
+    plugins: [jsx()],
+    server: {
+      port: 3000,
+    },
+  },
+}
+
+export default siteConfig

package/templates/ssx-ts-jsx/src/store/entities.ts

@@ -0,0 +1,8 @@
+import { AppState } from "../../types"
+
+export const entities: AppState = {
+  about: {
+    type: "About",
+    name: "Us",
+  },
+}

package/templates/ssx-ts-jsx/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* JSX, compiled by @inglorious/vite-plugin-jsx */
+    "jsx": "preserve"
+  },
+  "include": ["src", "types"]
+}

package/templates/ssx-ts-jsx/types/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="@inglorious/jsx/jsx-runtime" />
+
+import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type { Api, TemplateResult } from "@inglorious/web"
+
+// Define your entity types
+export interface AboutEntity extends BaseEntity {
+  type: "About"
+  name: string
+}
+
+// Union type of all entities
+export type AppEntity = AboutEntity
+
+// State type with known entity IDs
+export interface AppState extends EntitiesState<AppEntity> {
+  about: AboutEntity
+}
+
+export type AppApi = Api<AppEntity, AppState>
+
+// Each type's events and their payloads. Declare types with `type`, not
+// `interface`: an interface does not fit the store's `types`.
+export type AboutType = {
+  click: (entity: AboutEntity) => void
+  render: (entity: AboutEntity, api: AppApi) => TemplateResult
+}
+
+// A shorthand for a type: `{ ... } satisfies AppType<AboutEntity>` infers
+// its handlers' parameters, but neither lists its events nor types payloads.
+export type AppType<TEntity extends AppEntity> = EntityType<TEntity, AppApi>

package/templates/ssx-ts-vue/.prettierrc.yml

@@ -0,0 +1 @@
+semi: false

package/templates/ssx-ts-vue/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/templates/ssx-ts-vue/eslint.config.js

@@ -0,0 +1,17 @@
+import browserConfig from "@inglorious/eslint-config/browser"
+import typescriptConfig from "@inglorious/eslint-config/typescript"
+import { defineConfig } from "eslint/config"
+
+export default defineConfig([
+  ...browserConfig,
+  ...typescriptConfig,
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parserOptions: {
+        project: "./tsconfig.json",
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+])

package/templates/ssx-ts-vue/gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/templates/ssx-ts-vue/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "ssx-ts-vue-template",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "A new SSX app created with @inglorious/create-app",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "dev": "ssx dev",
+    "build": "ssx build",
+    "preview": "serve dist"
+  },
+  "dependencies": {
+    "@inglorious/ssx": "workspace:*",
+    "@inglorious/store": "workspace:*",
+    "@inglorious/web": "workspace:*",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
+    "markdown-it": "^15.0.3",
+    "markdown-it-texmath": "^1.0.0",
+    "mermaid": "^12.2.0"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-vue": "workspace:*",
+    "@typescript-eslint/eslint-plugin": "^8.72.0",
+    "@typescript-eslint/parser": "^8.72.0",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
+    "serve": "^14.2.6",
+    "typescript": "npm:@typescript/typescript6@^6.0.2"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/ssx-ts-vue/public/style.css

@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}

package/templates/ssx-ts-vue/src/pages/about.ts

@@ -0,0 +1,7 @@
+// SSX routes this module; the page's template is in its .vue file.
+// @ts-expect-error - Handled by @inglorious/vite-plugin-vue
+export { About } from "./about.vue"
+
+export const metadata = {
+  title: "About",
+}

package/templates/ssx-ts-vue/src/pages/about.vue

@@ -0,0 +1,13 @@
+<script>
+const click = (entity) => (entity.name += "!")
+</script>
+
+<template>
+  <div>
+    <h1>
+      About <span @click="click">{{ entity.name }}</span>
+    </h1>
+    <p>This is a static page generated by SSX.</p>
+    <a href="/">Back Home</a>
+  </div>
+</template>

package/templates/ssx-ts-vue/src/pages/index.ts

@@ -0,0 +1,7 @@
+// SSX routes this module; the page's template is in its .vue file.
+// @ts-expect-error - Handled by @inglorious/vite-plugin-vue
+export { Index } from "./index.vue"
+
+export const metadata = {
+  title: "Home",
+}

package/templates/ssx-ts-vue/src/pages/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>Welcome to SSX!</h1>
+    <p>Edit <code>src/pages/index.vue</code> to get started.</p>
+    <nav>
+      <a href="/about">About</a>
+    </nav>
+  </div>
+</template>

package/templates/ssx-ts-vue/src/site.config.ts

@@ -0,0 +1,20 @@
+import type { SiteConfig } from "@inglorious/ssx"
+import { vue } from "@inglorious/vite-plugin-vue"
+
+const siteConfig: SiteConfig = {
+  title: "My SSX App",
+  favicon: "/logo.png",
+  meta: {
+    description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
+  },
+  // SSX includes image optimization by default
+  vite: {
+    plugins: [vue()],
+    server: {
+      port: 3000,
+    },
+  },
+}
+
+export default siteConfig

package/templates/ssx-ts-vue/src/store/entities.ts

@@ -0,0 +1,8 @@
+import { AppState } from "../../types"
+
+export const entities: AppState = {
+  about: {
+    type: "About",
+    name: "Us",
+  },
+}

package/templates/ssx-ts-vue/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "types"]
+}

package/templates/ssx-ts-vue/types/index.d.ts

@@ -0,0 +1,23 @@
+import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type { Api } from "@inglorious/web"
+
+// Define your entity types
+export interface AboutEntity extends BaseEntity {
+  type: "About"
+  name: string
+}
+
+// Union type of all entities
+export type AppEntity = AboutEntity
+
+// State type with known entity IDs
+export interface AppState extends EntitiesState<AppEntity> {
+  about: AboutEntity
+}
+
+export type AppApi = Api<AppEntity, AppState>
+
+// A type for one of the app's entities. For rigour, declare a type alias
+// listing its events and payloads; this shorthand infers its handlers'
+// parameters with `{ ... } satisfies AppType<AboutEntity>`.
+export type AppType<TEntity extends AppEntity> = EntityType<TEntity, AppApi>

package/templates/ts/README.md

@@ -1,6 +1,6 @@
 # my-app
 
-This project is a minimal starter template for creating an app with the Inglorious Web framework using TypeScript and Vite.
+This project is a minimal starter template for creating an app with the Inglorious Web framework using TypeScript, bundled with Vite.
 
 ## Getting Started
 
@@ -25,6 +25,7 @@ This will start a Vite development server. Open your browser to the local URL pr
 
 - `index.html`: The main entry point for your app.
 - `src/`: Contains your app's TypeScript source code.
-- `vite.config.js`: Vite configuration file.
+- `types/`: Type declarations for your app's entities, state and types.
+- `vite.config.ts`: Vite configuration file.
 - `tsconfig.json`: TypeScript configuration for the project.
 - `package.json`: Project metadata and dependencies.

package/templates/ts-jsx/README.md

@@ -1,6 +1,6 @@
 # my-app
 
-This project is a minimal starter template for creating an app with the Inglorious Web framework using TypeScript and Vite.
+This project is a minimal starter template for creating an app with the Inglorious Web framework using TypeScript and JSX, bundled with Vite.
 
 ## Getting Started
 
@@ -24,7 +24,8 @@ This will start a Vite development server. Open your browser to the local URL pr
 ## Project Setup
 
 - `index.html`: The main entry point for your app.
-- `src/`: Contains your app's TypeScript source code.
-- `vite.config.js`: Vite configuration file.
+- `src/`: Contains your app's TypeScript source code (JSX in `.jsx`/`.tsx` files).
+- `types/`: Type declarations for your app's entities, state and types.
+- `vite.config.ts`: Vite configuration file.
 - `tsconfig.json`: TypeScript configuration for the project.
 - `package.json`: Project metadata and dependencies.

package/templates/ts-jsx/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ts-template",
+  "name": "ts-jsx-template",
   "version": "0.1.0",
   "type": "module",
   "private": true,

package/templates/ts-vue/README.md

@@ -1,6 +1,6 @@
 # my-app
 
-This project is a minimal starter template for creating an app with the Inglorious Web framework using plain JavaScript and Vite.
+This project is a minimal starter template for creating an app with the Inglorious Web framework using TypeScript and Vue-like templates, bundled with Vite.
 
 ## Getting Started
 
@@ -24,6 +24,8 @@ This will start a Vite development server. Open your browser to the local URL pr
 ## Project Setup
 
 - `index.html`: The main entry point for your app.
-- `src/`: Contains your app's JavaScript source code.
-- `vite.config.js`: Vite configuration file.
+- `src/`: Contains your app's TypeScript source code (templates in `.vue` files).
+- `types/`: Type declarations for your app's entities, state and types.
+- `vite.config.ts`: Vite configuration file.
+- `tsconfig.json`: TypeScript configuration for the project.
 - `package.json`: Project metadata and dependencies.

package/templates/ts-vue/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "js-template",
+  "name": "ts-vue-template",
   "version": "0.1.0",
   "type": "module",
   "private": true,