create-markdown2site 0.0.0-stage → 1.0.0

package/index.js

@@ -0,0 +1,193 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createInterface } from 'node:readline/promises';
+import { stdin, stdout, argv, exit, cwd, env } from 'node:process';
+
+const TEMPLATE_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), 'template');
+const PRESETS = ['default', 'ocean', 'forest', 'sunset', 'rose', 'midnight', 'mono', 'paper'];
+const RENAME = { _gitignore: '.gitignore' };
+
+const color = stdout.isTTY && !env.NO_COLOR;
+const paint = (code) => (s) => (color ? `\x1b[${code}m${s}\x1b[0m` : String(s));
+const bold = paint('1');
+const dim = paint('2');
+const green = paint('32');
+const cyan = paint('36');
+const red = paint('31');
+
+const HELP = `
+${bold('create-markdown2site')} — scaffold a markdown2site website
+
+${bold('Usage')}
+  npm create markdown2site@latest [project-name] [-- options]
+  npx create-markdown2site [project-name] [options]
+
+${bold('Options')}
+  -p, --preset <name>   Color preset: ${PRESETS.join(', ')}
+  -t, --title <title>   Site title (defaults to the project name)
+  -f, --force           Write into a non-empty folder
+  -y, --yes             Skip questions and use defaults
+  -h, --help            Show this help
+  -v, --version         Show version
+`;
+
+function parseArgs(args) {
+  const opts = { dir: undefined, preset: undefined, title: undefined, force: false, yes: false };
+  for (let i = 0; i < args.length; i += 1) {
+    const arg = args[i];
+    const next = () => {
+      const value = args[i + 1];
+      if (!value || value.startsWith('-')) fail(`Missing value for ${arg}`);
+      i += 1;
+      return value;
+    };
+    if (arg === '-h' || arg === '--help') opts.help = true;
+    else if (arg === '-v' || arg === '--version') opts.version = true;
+    else if (arg === '-f' || arg === '--force') opts.force = true;
+    else if (arg === '-y' || arg === '--yes') opts.yes = true;
+    else if (arg === '-p' || arg === '--preset') opts.preset = next();
+    else if (arg.startsWith('--preset=')) opts.preset = arg.slice(9);
+    else if (arg === '-t' || arg === '--title') opts.title = next();
+    else if (arg.startsWith('--title=')) opts.title = arg.slice(8);
+    else if (arg.startsWith('-')) fail(`Unknown option: ${arg}`);
+    else if (!opts.dir) opts.dir = arg;
+    else fail(`Unexpected argument: ${arg}`);
+  }
+  return opts;
+}
+
+function fail(message) {
+  console.error(`\n${red('✖')} ${message}\n`);
+  exit(1);
+}
+
+function toPackageName(name) {
+  return name
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z0-9-~]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '') || 'markdown2site-app';
+}
+
+function toTitle(name) {
+  return name
+    .replace(/[-_]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ') || 'My Site';
+}
+
+function isEmptyDir(dir) {
+  if (!fs.existsSync(dir)) return true;
+  const files = fs.readdirSync(dir).filter((f) => f !== '.git' && f !== '.DS_Store');
+  return files.length === 0;
+}
+
+// Escape the title for the kind of file it's inserted into.
+const escapers = {
+  '.js': (s) => s.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/`/g, '\\`').replace(/\$\{/g, '\\${'),
+  '.jsx': (s) => s.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/`/g, '\\`').replace(/\$\{/g, '\\${'),
+  '.html': (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'),
+};
+
+function copyTemplate(src, dest, vars) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const from = path.join(src, entry.name);
+    const to = path.join(dest, RENAME[entry.name] || entry.name);
+    if (entry.isDirectory()) {
+      copyTemplate(from, to, vars);
+      continue;
+    }
+    const ext = path.extname(entry.name);
+    if (['.js', '.jsx', '.html', '.md', '.json'].includes(ext) || entry.name === '_gitignore') {
+      const escape = escapers[ext] || ((s) => s);
+      let text = fs.readFileSync(from, 'utf8');
+      for (const [key, value] of Object.entries(vars)) text = text.split(`%${key}%`).join(escape(value));
+      fs.writeFileSync(to, text);
+    } else {
+      fs.copyFileSync(from, to);
+    }
+  }
+}
+
+function packageManager() {
+  const agent = env.npm_config_user_agent || '';
+  if (agent.startsWith('pnpm')) return 'pnpm';
+  if (agent.startsWith('yarn')) return 'yarn';
+  if (agent.startsWith('bun')) return 'bun';
+  return 'npm';
+}
+
+async function main() {
+  const opts = parseArgs(argv.slice(2));
+  if (opts.help) { console.log(HELP); return; }
+  if (opts.version) {
+    const pkg = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf8'));
+    console.log(pkg.version);
+    return;
+  }
+
+  const interactive = stdin.isTTY && stdout.isTTY && !opts.yes;
+  const rl = interactive ? createInterface({ input: stdin, output: stdout }) : null;
+  const ask = async (question, fallback) => {
+    if (!rl) return fallback;
+    const answer = (await rl.question(`${cyan('?')} ${bold(question)} ${dim(`(${fallback})`)} `)).trim();
+    return answer || fallback;
+  };
+
+  try {
+    console.log(`\n${bold('markdown2site')} ${dim('— build websites from markdown')}\n`);
+
+    const dirName = opts.dir || (await ask('Project name:', 'my-site'));
+    const targetDir = path.resolve(cwd(), dirName);
+    const baseName = path.basename(targetDir);
+
+    if (!isEmptyDir(targetDir) && !opts.force) {
+      const answer = rl
+        ? (await ask(`"${dirName}" is not empty. Write into it anyway? (y/N)`, 'n')).toLowerCase()
+        : 'n';
+      if (answer !== 'y' && answer !== 'yes') fail(`Folder "${dirName}" is not empty. Use --force to write into it.`);
+    }
+
+    let preset = opts.preset;
+    if (!preset && rl) {
+      console.log(dim(`  Presets: ${PRESETS.map((p, i) => `${i + 1}) ${p}`).join('  ')}`));
+      const picked = await ask('Color preset:', 'default');
+      preset = PRESETS[Number(picked) - 1] || picked;
+    }
+    preset = preset || 'default';
+    if (!PRESETS.includes(preset)) fail(`Unknown preset "${preset}". Choose one of: ${PRESETS.join(', ')}`);
+
+    const title = opts.title || toTitle(baseName);
+
+    copyTemplate(TEMPLATE_DIR, targetDir, { SITE_TITLE: title, PRESET: preset });
+
+    const pkgPath = path.join(targetDir, 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    pkg.name = toPackageName(baseName);
+    fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
+
+    const pm = packageManager();
+    const run = pm === 'npm' ? 'npm run' : pm;
+    const relative = path.relative(cwd(), targetDir);
+
+    console.log(`\n${green('✔')} Created ${bold(title)} in ${cyan(relative || '.')}\n`);
+    console.log('  Next steps:\n');
+    if (relative) console.log(`    cd ${relative.includes(' ') ? `"${relative}"` : relative}`);
+    console.log(`    ${pm} install`);
+    console.log(`    ${run} dev\n`);
+    console.log(dim('  Edit src/site.config.js to configure your site, and add pages in public/markdown/.\n'));
+  } finally {
+    if (rl) rl.close();
+  }
+}
+
+main().catch((err) => fail(err && err.message ? err.message : String(err)));

package/package.json

@@ -1,6 +1,35 @@
 {
   "name": "create-markdown2site",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Scaffold a ready-to-run markdown2site website: npm create markdown2site my-site",
+  "type": "module",
+  "bin": {
+    "create-markdown2site": "index.js"
+  },
+  "files": [
+    "index.js",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "markdown2site",
+    "create",
+    "scaffold",
+    "markdown",
+    "react",
+    "vite",
+    "website"
+  ],
+  "author": "imaketech <imaketechofficial@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/imaketech1/markdown2site.git",
+    "directory": "create-markdown2site"
+  },
+  "bugs": {
+    "url": "https://github.com/imaketech1/markdown2site/issues"
+  }
+}

package/template/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+*.log
+.DS_Store
+.env
+.env.local

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>%SITE_TITLE%</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "markdown2site-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "markdown2site": "^1.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}

package/template/public/markdown/index.md

@@ -0,0 +1,20 @@
+# Welcome to %SITE_TITLE%
+
+This website is generated from markdown files with **markdown2site**. Edit
+`public/markdown/index.md` to change this page.
+
+## What's here
+
+- **Home** — this page, from `public/markdown/index.md`
+- **Posts** — every file in `public/markdown/posts/` listed in `src/site.config.js`
+- **Themes** — light and dark mode, color presets, fonts and layouts
+
+## Make it yours
+
+Click the palette button in the bottom-left corner to try colors, fonts and
+layouts live. When you like it, press **Copy config** and paste the result into
+`src/site.config.js`.
+
+## Next
+
+Read [Getting Started](/getting-started) to add your first page.

package/template/public/markdown/posts/getting-started.md

@@ -0,0 +1,33 @@
+## Add a page
+
+1. Create a file in `public/markdown/posts/`, for example `my-page.md`.
+2. Add it to `postsList` in `src/site.config.js`:
+
+```js
+postsList: [
+  { title: 'My Page', slug: 'my-page' },
+],
+```
+
+3. Open `/my-page` in the browser.
+
+## Change the look
+
+Everything lives in `src/site.config.js`:
+
+| Option | Values |
+|---|---|
+| `preset` | `default`, `ocean`, `forest`, `sunset`, `rose`, `midnight`, `mono`, `paper` |
+| `mode` | `light`, `dark`, `system` |
+| `layout.style` | `classic`, `card`, `minimal`, `wide` |
+| `sidebar.align` | `left`, `right`, `hidden` |
+| `header.show` | `true`, `false` |
+
+## Deploy
+
+```bash
+npm run build
+```
+
+Upload the `dist/` folder to any static host. For GitHub Pages, set
+`router: 'hash'` in `src/site.config.js`.

package/template/public/markdown/posts/writing-pages.md

@@ -0,0 +1,34 @@
+## Headings
+
+Every `##` and `###` title shows up in the **On this page** sidebar.
+
+### Smaller sections
+
+Like this one.
+
+## Text and links
+
+Write **bold**, *italic*, `inline code` and [links](/getting-started) as usual.
+
+> Blockquotes are great for tips and notes.
+
+## Code
+
+```js
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+
+## Lists and tasks
+
+- Plain lists
+- [x] Task lists
+- [ ] Still to do
+
+## Tables
+
+| Feature | Supported |
+|---|---|
+| Tables | Yes |
+| Images | Yes |

package/template/src/App.jsx

@@ -0,0 +1,10 @@
+import { SiteConfigProvider, MarkdownSite } from 'markdown2site';
+import { siteConfig } from './site.config.js';
+
+export default function App() {
+  return (
+    <SiteConfigProvider config={siteConfig}>
+      <MarkdownSite />
+    </SiteConfigProvider>
+  );
+}

package/template/src/main.jsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template/src/site.config.js

@@ -0,0 +1,59 @@
+/**
+ * Your site's configuration. Every option is optional.
+ * Turn on `features.customizer`, tweak the look live in the browser, then click "Copy config".
+ */
+export const siteConfig = {
+  siteTitle: '%SITE_TITLE%',
+
+  // 'default' | 'ocean' | 'forest' | 'sunset' | 'rose' | 'midnight' | 'mono' | 'paper'
+  preset: '%PRESET%',
+  mode: 'system', // 'light' | 'dark' | 'system'
+
+  fonts: {
+    body: 'inter',
+    heading: 'plus-jakarta',
+    code: 'jetbrains-mono',
+  },
+
+  typography: {
+    headingStyle: 'accent', // 'plain' | 'underline' | 'accent' | 'hash'
+  },
+
+  layout: {
+    style: 'classic', // 'classic' | 'card' | 'minimal' | 'wide'
+  },
+
+  header: {
+    logo: '📝 %SITE_TITLE%',
+    variant: 'glass', // 'gradient' | 'solid' | 'glass' | 'minimal'
+    show: true,
+    showNav: true,
+    showThemeToggle: true,
+    sticky: true,
+  },
+
+  // "On this page" navigation built from your ## titles
+  sidebar: {
+    align: 'right', // 'left' | 'right' | 'hidden'
+    variant: 'line', // 'line' | 'card' | 'minimal'
+  },
+
+  footer: {
+    text: `© ${new Date().getFullYear()} %SITE_TITLE%`,
+    links: [{ label: 'GitHub', url: 'https://github.com', external: true }],
+  },
+
+  features: {
+    readingProgress: true,
+    backToTop: true,
+    customizer: true, // set to false before you deploy
+  },
+
+  router: 'browser', // use 'hash' for GitHub Pages
+
+  // Each slug matches a file in public/markdown/posts/<slug>.md
+  postsList: [
+    { title: 'Getting Started', slug: 'getting-started' },
+    { title: 'Writing Pages', slug: 'writing-pages' },
+  ],
+};

package/template/vite.config.js

@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  build: { chunkSizeWarningLimit: 1500 },
+});

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-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.