create-materialize 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cristiano Casazza
+
+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/README.md

@@ -1,3 +1,19 @@
-# Temporary Holding Version
+# create-materialize
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Crea un nuovo sito Materialize con un comando: npm create materialize@latest
+
+```bash
+npm create materialize@latest
+```
+
+Chiede la cartella, copia il sito di partenza e installa le dipendenze. Poi `npm run dev` e il pannello su http://localhost:4321/admin.
+
+## Materialize
+
+CMS open source con editor visuale: le pagine si disegnano sulla tela, il sito è fatto di file statici veloci. Per un nuovo sito (serve Node 24):
+
+```bash
+npm create materialize@latest
+```
+
+Documentazione e codice: https://github.com/materializecms/materialize · Licenza MIT.

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "create-materialize",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Crea un nuovo sito Materialize con un comando: npm create materialize@latest",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/materializecms/materialize.git",
+    "directory": "packages/create-materialize"
+  },
+  "homepage": "https://github.com/materializecms/materialize#readme",
+  "bugs": "https://github.com/materializecms/materialize/issues",
+  "bin": {
+    "create-materialize": "src/index.js"
+  },
+  "files": [
+    "src",
+    "template"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export declare function createProject(target: string, siteName?: string): Promise<string>;

package/src/index.js

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { existsSync, realpathSync } from 'node:fs';
+import { cp, readdir, readFile, rename, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { basename, dirname, join, relative, resolve } from 'node:path';
+import { createInterface } from 'node:readline/promises';
+import { fileURLToPath } from 'node:url';
+import { parseArgs, styleText } from 'node:util';
+const TEMPLATE = join(dirname(fileURLToPath(import.meta.url)), '..', 'template');
+/** Materialize packages move together: a new site uses the version of this starter. */
+const VERSION = createRequire(import.meta.url)('../package.json').version;
+// npm drops dotfiles named .gitignore when publishing, so the template ships them without the dot.
+const RENAMES = { gitignore: '.gitignore' };
+const TEXT_FILES = ['package.json', 'materialize.config.ts', 'README.md', 'src/layouts/Site.astro'];
+export async function createProject(target, siteName) {
+    const dir = resolve(target);
+    if (existsSync(dir) && (await readdir(dir)).length > 0) {
+        throw new Error(`La cartella ${dir} esiste e non è vuota`);
+    }
+    await cp(TEMPLATE, dir, { recursive: true });
+    for (const [from, to] of Object.entries(RENAMES)) {
+        if (existsSync(join(dir, from)))
+            await rename(join(dir, from), join(dir, to));
+    }
+    const slug = basename(dir)
+        .toLowerCase()
+        .replace(/[^a-z0-9-]+/g, '-')
+        .replace(/^-+|-+$/g, '') || 'materialize-site';
+    const name = siteName ??
+        basename(dir)
+            .replace(/[-_]+/g, ' ')
+            .replace(/^\w/, (c) => c.toUpperCase());
+    for (const file of TEXT_FILES) {
+        const path = join(dir, file);
+        if (!existsSync(path))
+            continue;
+        const text = await readFile(path, 'utf8');
+        await writeFile(path, text
+            .replaceAll('__PACKAGE_NAME__', slug)
+            // Inside TypeScript and Astro strings.
+            .replaceAll('__SITE_NAME__', file === 'README.md' ? name : name.replaceAll("'", "\\'"))
+            .replaceAll('__VERSION__', VERSION));
+    }
+    return dir;
+}
+/** The package manager that ran us (npm create, pnpm create, …), so the site installs with the same one. */
+function packageManager() {
+    const agent = process.env.npm_config_user_agent ?? '';
+    return ['pnpm', 'yarn', 'bun'].find((pm) => agent.startsWith(`${pm}/`)) ?? 'npm';
+}
+function install(dir, pm) {
+    return new Promise((done) => {
+        const child = spawn(pm, ['install'], { cwd: dir, stdio: 'inherit', shell: process.platform === 'win32' });
+        child.on('close', (code) => done(code === 0));
+        child.on('error', () => done(false));
+    });
+}
+async function ask(question, fallback) {
+    if (!process.stdin.isTTY)
+        return fallback;
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    try {
+        return (await rl.question(`  ${question} ${styleText('dim', `(${fallback})`)} `)).trim() || fallback;
+    }
+    finally {
+        rl.close();
+    }
+}
+async function main() {
+    const { values, positionals } = parseArgs({
+        allowPositionals: true,
+        options: { 'no-install': { type: 'boolean' }, help: { type: 'boolean', short: 'h' } },
+    });
+    if (values.help) {
+        console.log('\n  npm create materialize@latest [cartella] [--no-install]\n');
+        return;
+    }
+    console.log();
+    console.log(`  ${styleText(['bold', 'blue'], 'Materialize')} ${styleText('dim', VERSION)}`);
+    console.log();
+    const target = positionals[0] ?? (await ask('Dove creo il sito?', 'il-mio-sito'));
+    const dir = await createProject(target);
+    const rel = relative(process.cwd(), dir) || '.';
+    console.log(`  ${styleText('green', '✓')} Progetto creato in ${rel}`);
+    const pm = packageManager();
+    let installed = false;
+    if (!values['no-install']) {
+        console.log(`  ${styleText('dim', `Installo le dipendenze con ${pm}…`)}`);
+        console.log();
+        installed = await install(dir, pm);
+        console.log();
+        if (!installed)
+            console.log(`  ${styleText('yellow', '!')} Installazione non riuscita: riprova a mano.`);
+    }
+    const run = pm === 'npm' ? 'npm run' : pm;
+    console.log('  Per iniziare:');
+    console.log();
+    if (rel !== '.')
+        console.log(`    cd ${rel}`);
+    if (!installed)
+        console.log(`    ${pm} install`);
+    console.log(`    ${run} dev`);
+    console.log();
+    console.log(`  Poi apri ${styleText('blue', 'http://localhost:4321/admin')} e crea il tuo account.`);
+    console.log();
+}
+// Run as a command (through the bin symlink npm creates), not when imported by tests.
+if (process.argv[1] && realpathSync(process.argv[1]) === fileURLToPath(import.meta.url)) {
+    try {
+        await main();
+    }
+    catch (error) {
+        console.error(`  ${styleText('red', error instanceof Error ? error.message : String(error))}`);
+        process.exit(1);
+    }
+}

package/template/README.md

@@ -0,0 +1,30 @@
+# __SITE_NAME__
+
+Sito creato con [Materialize](https://www.npmjs.com/package/create-materialize): contenuti nel pannello, pagine statiche e veloci.
+
+## Avvio
+
+```bash
+npm run dev
+```
+
+Apri http://localhost:4321/admin, crea l’account di amministratore e poi una pagina con indirizzo `home`: parti da una pagina pronta o componila con le sezioni della libreria.
+
+## Dove mettere le mani
+
+| Cosa | Dove |
+| --- | --- |
+| Pagine, sezioni, animazioni | Il pannello, sulla tela |
+| Colori, caratteri e forme del sito | Il pannello, scheda **Stili** dell’editor |
+| Modello dei contenuti (raccolte e campi) | `materialize.config.ts` |
+| Struttura HTML comune (meta, caratteri) | `src/layouts/Site.astro` |
+
+## Comandi
+
+| Comando | Cosa fa |
+| --- | --- |
+| `npm run dev` | Pannello e sito con anteprima dal vivo |
+| `npm run build` | Sito statico in `dist/`, da pubblicare su qualsiasi hosting |
+| `npm run start` | Pannello e sito in produzione: ogni pubblicazione ricostruisce il sito |
+
+Contenuti e immagini restano in `.materialize/`: fanne un backup.

package/template/astro.config.ts

@@ -0,0 +1,10 @@
+import node from '@astrojs/node'
+import materialize from '@materializecms/astro'
+import { defineConfig } from 'astro/config'
+
+export default defineConfig({
+  // Pages are static files; only the editor's live preview renders on demand.
+  output: 'static',
+  adapter: node({ mode: 'middleware' }),
+  integrations: [materialize()],
+})

package/template/gitignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+.astro/
+.materialize/
+.env
+.env.*
+.DS_Store

package/template/materialize.config.ts

@@ -0,0 +1,31 @@
+import { defineCollection, defineConfig, f } from '@materializecms/core'
+
+// Il modello dei contenuti del sito. Le pagine si compongono sulla tela del pannello,
+// con le sezioni della libreria; qui si aggiungono raccolte e campi quando servono.
+
+const pages = defineCollection({
+  name: 'pages',
+  label: 'Pagine',
+  url: (page) => (page.slug === 'home' ? '/' : `/${page.slug}`),
+  fields: {
+    title: f.text({ label: 'Titolo', required: true, max: 80 }),
+    slug: f.slug({ label: 'Indirizzo', from: 'title' }),
+    page: f.page({ label: 'Pagina' }),
+    seo: f.seo({ label: 'Motori di ricerca' }),
+  },
+})
+
+const settings = defineCollection({
+  name: 'settings',
+  label: 'Impostazioni del sito',
+  singleton: true,
+  fields: {
+    siteName: f.text({ label: 'Nome del sito', required: true }),
+    email: f.text({ label: 'Email' }),
+  },
+})
+
+export default defineConfig({
+  site: { name: '__SITE_NAME__' },
+  collections: [pages, settings],
+})

package/template/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "materialize dev",
+    "build": "materialize build",
+    "start": "materialize start"
+  },
+  "dependencies": {
+    "@astrojs/node": "^11.1.9",
+    "@fontsource-variable/fraunces": "^5.3.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource/instrument-serif": "^5.3.0",
+    "@materializecms/astro": "__VERSION__",
+    "@materializecms/cli": "__VERSION__",
+    "@materializecms/core": "__VERSION__",
+    "astro": "^7.4.4"
+  },
+  "engines": {
+    "node": ">=24"
+  }
+}

package/template/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#111113"/><rect x="9" y="9" width="14" height="14" rx="3" fill="#fff"/></svg>

package/template/src/layouts/Site.astro

@@ -0,0 +1,53 @@
+---
+// Every font a theme can choose: browsers download only the ones a page uses.
+import '@fontsource-variable/geist'
+import '@fontsource-variable/geist-mono'
+import '@fontsource/instrument-serif'
+import '@fontsource-variable/fraunces'
+import '@fontsource-variable/inter'
+import Tracking from '@materializecms/astro/components/Tracking.astro'
+import { type Entry, getSingleton, getTheme } from '@materializecms/astro/content'
+import { pageRootStyle } from '@materializecms/core/page'
+
+interface Props {
+  title: string
+  description?: string
+  entry?: Entry
+  /** Rendered inside the editor canvas. */
+  preview?: boolean
+}
+
+const { title, description, entry } = Astro.props
+const settings = await getSingleton('settings')
+const siteName: string = settings?.data.siteName ?? '__SITE_NAME__'
+const seo = entry?.data.seo ?? {}
+const pageTitle = seo.title || (entry?.url === '/' ? siteName : `${title} · ${siteName}`)
+const metaDescription = seo.description || description
+const root = pageRootStyle(await getTheme())
+---
+
+<!doctype html>
+<html lang={entry?.locale ?? 'it'}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{pageTitle}</title>
+    {metaDescription && <meta name="description" content={metaDescription} />}
+    {seo.noindex && <meta name="robots" content="noindex" />}
+    {seo.image?.src && <meta property="og:image" content={seo.image.src} />}
+    <meta property="og:title" content={pageTitle} />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <Tracking lang={entry?.locale} />
+    {Astro.site && entry?.url && <link rel="canonical" href={new URL(entry.url, Astro.site)} />}
+  </head>
+  <body style={root}>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  body {
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+  }
+</style>

package/template/src/pages/404.astro

@@ -0,0 +1,27 @@
+---
+import Site from '../layouts/Site.astro'
+---
+
+<Site title="Pagina non trovata">
+  <main>
+    <h1>Questa pagina non c’è.</h1>
+    <p>Forse è stata spostata. <a href="/">Torna alla home</a>.</p>
+  </main>
+</Site>
+
+<style>
+  main {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 160px 24px;
+    font-family: 'Geist Variable', system-ui, sans-serif;
+  }
+  h1 {
+    margin: 0;
+    font: 400 clamp(44px, 7vw, 88px) / 1 'Instrument Serif', Georgia, serif;
+  }
+  p {
+    margin-top: 24px;
+    font-size: 18px;
+  }
+</style>

package/template/src/pages/[...path].astro

@@ -0,0 +1,74 @@
+---
+import Page from '@materializecms/astro/components/Page.astro'
+import { type Entry, getRoutes } from '@materializecms/astro/content'
+import Site from '../layouts/Site.astro'
+
+// One static page for every published document that has an address.
+// Until a home page is published, the home shows how to start.
+export async function getStaticPaths() {
+  const routes: { params: { path: string | undefined }; props: { entry: Entry | null } }[] = await getRoutes()
+  if (!routes.some((r) => r.params.path === undefined)) routes.push({ params: { path: undefined }, props: { entry: null } })
+  return routes
+}
+
+const { entry } = Astro.props as { entry: Entry | null }
+---
+
+{
+  entry ? (
+    <Site title={entry.title} entry={entry}>
+      <Page sections={entry.data.page} document={entry} />
+    </Site>
+  ) : (
+    <Site title="Benvenuto">
+      <main class="welcome">
+        <p class="eyebrow">Materialize</p>
+        <h1>Il sito è pronto.</h1>
+        <p>Apri il pannello, crea una pagina con indirizzo <code>home</code> e pubblicala: comparirà qui.</p>
+        <a href="/admin">Apri il pannello →</a>
+      </main>
+    </Site>
+  )
+}
+
+<style>
+  .welcome {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: clamp(96px, 16vw, 200px) 24px;
+    font-family: 'Geist Variable', system-ui, sans-serif;
+  }
+  .eyebrow {
+    font: 500 12px/1 'Geist Mono Variable', ui-monospace, monospace;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    opacity: 0.6;
+  }
+  h1 {
+    margin: 20px 0 0;
+    font: 400 clamp(48px, 8vw, 92px) / 1 'Instrument Serif', Georgia, serif;
+    letter-spacing: -0.025em;
+  }
+  p {
+    margin: 24px 0 0;
+    font-size: 18px;
+    line-height: 1.6;
+    opacity: 0.75;
+  }
+  code {
+    font-size: 0.9em;
+    padding: 2px 6px;
+    border-radius: 6px;
+    background: rgb(127 127 127 / 0.14);
+  }
+  a {
+    display: inline-flex;
+    margin-top: 36px;
+    padding: 14px 24px;
+    border-radius: 999px;
+    background: #a8502a;
+    color: #fff;
+    font-weight: 500;
+    text-decoration: none;
+  }
+</style>

package/template/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*", "node_modules/@materializecms/astro/src/virtual.d.ts"],
+  "exclude": ["dist"]
+}