@zinejs/create 0.9.1

package/index.js

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+// Scaffold a new zinejs flipbook project. Run via `npm create @zinejs`,
+// `pnpm create @zinejs`, or `yarn create @zinejs`. Zero runtime dependencies.
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as readline from 'node:readline/promises';
+import { fileURLToPath } from 'node:url';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATES = new Set(['image', 'pdf']);
+const SELF_VERSION = JSON.parse(fs.readFileSync(path.join(HERE, 'package.json'), 'utf8')).version;
+
+function help() {
+  console.log(`
+Create a zinejs flipbook project.
+
+Usage:
+  npm create @zinejs [dir] [options]
+
+Options:
+  --template <image|pdf>   Starter to use (prompted if omitted)
+  --force                  Scaffold into a non-empty directory
+  -h, --help               Show this help
+`);
+}
+
+/** Turn a directory name into a valid npm package name. */
+function toPkgName(s) {
+  const name = s
+    .toLowerCase()
+    .replace(/[^a-z0-9-~._]/g, '-')
+    .replace(/^[._]+/, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+  return name || 'zine-book';
+}
+
+/** Copy a template tree, renaming `_gitignore` to `.gitignore` (npm strips real .gitignore). */
+function copyTree(from, to) {
+  fs.mkdirSync(to, { recursive: true });
+  for (const entry of fs.readdirSync(from, { withFileTypes: true })) {
+    const src = path.join(from, entry.name);
+    const name = entry.name === '_gitignore' ? '.gitignore' : entry.name;
+    const dest = path.join(to, name);
+    if (entry.isDirectory()) copyTree(src, dest);
+    else fs.copyFileSync(src, dest);
+  }
+}
+
+/** Set the project name and pin @zinejs/* deps to this tool's version. */
+function patchPackageJson(dir, projectName) {
+  const file = path.join(dir, 'package.json');
+  const pkg = JSON.parse(fs.readFileSync(file, 'utf8'));
+  pkg.name = projectName;
+  for (const dep of Object.keys(pkg.dependencies ?? {})) {
+    if (dep.startsWith('@zinejs/')) pkg.dependencies[dep] = `^${SELF_VERSION}`;
+  }
+  fs.writeFileSync(file, JSON.stringify(pkg, null, 2) + '\n');
+}
+
+function parseArgs(argv) {
+  const out = { dir: undefined, template: undefined, force: false, help: false };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '-h' || a === '--help') out.help = true;
+    else if (a === '--force') out.force = true;
+    else if (a === '--template') out.template = argv[++i];
+    else if (a.startsWith('--template=')) out.template = a.slice('--template='.length);
+    else if (!a.startsWith('-') && out.dir === undefined) out.dir = a;
+  }
+  return out;
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help) {
+    help();
+    return;
+  }
+
+  const interactive = process.stdin.isTTY && process.stdout.isTTY;
+  const rl = interactive
+    ? readline.createInterface({ input: process.stdin, output: process.stdout })
+    : null;
+  const ask = async (q, def) => {
+    if (!rl) return def;
+    const a = (await rl.question(q)).trim();
+    return a || def;
+  };
+
+  try {
+    const dir = args.dir ?? (await ask('Project directory: (my-zine-book) ', 'my-zine-book'));
+
+    let template = args.template;
+    if (template && !TEMPLATES.has(template)) {
+      console.error(`error: unknown template '${template}' (expected image or pdf)`);
+      process.exitCode = 1;
+      return;
+    }
+    if (!template) {
+      const a = await ask('Source type: image or pdf? (image) ', 'image');
+      template = a.toLowerCase();
+      if (!TEMPLATES.has(template)) {
+        console.error(`error: unknown template '${template}' (expected image or pdf)`);
+        process.exitCode = 1;
+        return;
+      }
+    }
+
+    const target = path.resolve(process.cwd(), dir);
+    if (fs.existsSync(target)) {
+      const rest = fs.readdirSync(target).filter((f) => f !== '.git');
+      if (rest.length > 0 && !args.force) {
+        console.error(`error: ${dir} is not empty. Use --force to scaffold into it anyway.`);
+        process.exitCode = 1;
+        return;
+      }
+    }
+
+    copyTree(path.join(HERE, 'templates', template), target);
+    patchPackageJson(target, toPkgName(path.basename(target)));
+
+    console.log(`
+Created a zinejs (${template}) flipbook in ${dir}
+
+Next steps:
+  cd ${dir}
+  npm install
+  npm run dev
+`);
+  } finally {
+    rl?.close();
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@zinejs/create",
+  "version": "0.9.1",
+  "description": "Scaffold a new zinejs flipbook project (npm create @zinejs).",
+  "type": "module",
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "keywords": ["zinejs", "flipbook", "create", "scaffold", "starter"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/awecode/zinejs.git",
+    "directory": "packages/create"
+  },
+  "homepage": "https://zinejs.com",
+  "bugs": "https://github.com/awecode/zinejs/issues",
+  "bin": {
+    "create-zine": "index.js"
+  },
+  "files": ["index.js", "templates"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/templates/image/README.md

@@ -0,0 +1,25 @@
+# zinejs flipbook (image book)
+
+A flipbook built from page images, powered by [zinejs](https://zinejs.com/docs/).
+
+## Develop
+
+```bash
+npm install
+npm run dev
+```
+
+## Your pages
+
+Replace the images in `public/pages/` with your own and update the list in
+`src/main.js`. Drag a corner or click near an edge to turn; arrow keys work when
+the book is focused; pinch or Ctrl/Cmd+wheel to zoom.
+
+## Build
+
+```bash
+npm run build   # outputs to dist/
+npm run preview # serve the production build
+```
+
+Docs and options: https://zinejs.com/docs/

package/templates/image/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/image/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>zinejs flipbook</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: #14141b;
+      }
+      /* Size the book by width; zinejs sets the height via aspect-ratio after the first paint. */
+      #book {
+        width: min(900px, 92vw);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="book"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/image/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "zine-book",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@zinejs/core": "^0.9.1"
+  },
+  "devDependencies": {
+    "vite": "^8.0.0"
+  }
+}

package/templates/image/src/main.js

@@ -0,0 +1,11 @@
+import { Zine, ImageSource } from '@zinejs/core';
+
+// A flipbook from a list of image URLs. Drop your own pages in public/pages/.
+new Zine(document.getElementById('book'), {
+  source: new ImageSource([
+    '/pages/page-1.png',
+    '/pages/page-2.png',
+    '/pages/page-3.png',
+    '/pages/page-4.png',
+  ]),
+});

package/templates/pdf/README.md

@@ -0,0 +1,30 @@
+# zinejs flipbook (PDF book)
+
+A flipbook built from a PDF, powered by [zinejs](https://zinejs.com/docs/) and
+[@zinejs/pdf](https://www.npmjs.com/package/@zinejs/pdf).
+
+## Develop
+
+```bash
+npm install
+npm run dev
+```
+
+## Your document
+
+Replace `public/sample.pdf` with your own and update the path in `src/main.js`.
+Under a bundler the pdf.js worker is resolved automatically; see the
+[worker notes](https://zinejs.com/docs/) for CDN / offline setups. Drag a corner
+or click near an edge to turn; pinch or Ctrl/Cmd+wheel to zoom.
+
+`vite.config.js` excludes `@zinejs/pdf` from dependency pre-bundling so Vite can
+resolve the pdf.js worker; keep it when you add your own config.
+
+## Build
+
+```bash
+npm run build   # outputs to dist/
+npm run preview # serve the production build
+```
+
+Docs and options: https://zinejs.com/docs/

package/templates/pdf/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/pdf/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>zinejs flipbook</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: #14141b;
+      }
+      /* Size the book by width; zinejs sets the height via aspect-ratio after the first paint. */
+      #book {
+        width: min(900px, 92vw);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="book"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/pdf/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "zine-book",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@zinejs/core": "^0.9.1",
+    "@zinejs/pdf": "^0.9.1"
+  },
+  "devDependencies": {
+    "vite": "^8.0.0"
+  }
+}

package/templates/pdf/src/main.js

@@ -0,0 +1,8 @@
+import { Zine } from '@zinejs/core';
+import { PdfSource } from '@zinejs/pdf';
+
+// A flipbook from a PDF. Replace public/sample.pdf with your own document.
+// Under a bundler (Vite here) the pdf.js worker is resolved for you.
+new Zine(document.getElementById('book'), {
+  source: new PdfSource('/sample.pdf'),
+});

package/templates/pdf/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+
+// @zinejs/pdf loads the pdf.js worker through a `?url` import that Vite's dependency
+// pre-bundler cannot follow. Excluding it lets Vite's normal pipeline resolve the
+// worker, so PDF books work in dev and build. See https://zinejs.com/docs/ (worker notes).
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@zinejs/pdf'],
+  },
+});