create-supaslidev 0.1.4 → 0.2.0

package/dist/cli.js

@@ -158,11 +158,7 @@ async function renderTemplatesRecursively(sourceDir, targetDir, data) {
 	}
 }
 function createDirectoryStructure(targetDir) {
-	for (const dir of [
-		"presentations",
-		"packages",
-		"scripts"
-	]) {
+	for (const dir of ["presentations", "packages"]) {
 		const fullPath = join(targetDir, dir);
 		mkdirSync(fullPath, { recursive: true });
 		trackPath(fullPath);
@@ -221,90 +217,7 @@ Add your content here
 [Slidev Documentation](https://sli.dev/)
 `;
 	writeFileSync(join(presentationDir, "slides.md"), slidesContent, "utf-8");
-	writeFileSync(join(presentationDir, ".gitignore"), "node_modules\ndist\n.slidev\n", "utf-8");
-	writeFileSync(join(presentationDir, ".npmrc"), "shamefully-hoist=true\n", "utf-8");
-}
-function createScripts(targetDir) {
-	writeFileSync(join(join(targetDir, "scripts"), "dev-presentation.mjs"), `#!/usr/bin/env node
-
-import { existsSync, readdirSync, statSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { spawn } from 'node:child_process';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const rootDir = join(__dirname, '..');
-const presentationsDir = join(rootDir, 'presentations');
-
-function getPresentations() {
-  if (!existsSync(presentationsDir)) {
-    return [];
-  }
-
-  return readdirSync(presentationsDir)
-    .filter((name) => {
-      const fullPath = join(presentationsDir, name);
-      return statSync(fullPath).isDirectory() && existsSync(join(fullPath, 'slides.md'));
-    })
-    .sort();
-}
-
-function printUsage(presentations) {
-  console.error('Usage: pnpm dev <presentation-name>');
-  console.error('\\nAvailable presentations:');
-
-  if (presentations.length === 0) {
-    console.error('  No presentations found');
-  } else {
-    presentations.forEach((name) => {
-      console.error(\`  \${name}\`);
-    });
-  }
-}
-
-function runDev(name) {
-  const packageName = \`@supaslidev/\${name}\`;
-
-  console.log(\`\\nStarting dev server for \${name}...\\n\`);
-
-  const pnpm = spawn('pnpm', ['--filter', packageName, 'dev'], {
-    cwd: rootDir,
-    stdio: 'inherit',
-    shell: true,
-  });
-
-  pnpm.on('error', (err) => {
-    console.error(\`Failed to start dev server: \${err.message}\`);
-    process.exit(1);
-  });
-
-  pnpm.on('close', (code) => {
-    process.exit(code ?? 0);
-  });
-}
-
-function main() {
-  const args = process.argv.slice(2);
-  const name = args[0];
-  const presentations = getPresentations();
-
-  if (!name) {
-    console.error('Error: Presentation name is required');
-    printUsage(presentations);
-    process.exit(1);
-  }
-
-  if (!presentations.includes(name)) {
-    console.error(\`Error: Presentation "\${name}" not found\`);
-    printUsage(presentations);
-    process.exit(1);
-  }
-
-  runDev(name);
-}
-
-main();
-`, "utf-8");
+	writeFileSync(join(presentationDir, ".gitignore"), "node_modules\n.DS_Store\ndist\n*.local\n.vite-inspect\n.remote-assets\ncomponents.d.ts\n", "utf-8");
 }
 function createSharedPackage(targetDir) {
 	const sharedDir = join(targetDir, "packages", "shared");
@@ -326,49 +239,99 @@ function createSharedPackage(targetDir) {
 		keywords: ["slidev-addon", "slidev"],
 		dependencies: { vue: "catalog:" }
 	}, null, 2) + "\n", "utf-8");
-	writeFileSync(join(sharedDir, "components", "SharedBadge.vue"), `<template>
-  <span class="shared-badge">
-    <slot />
-  </span>
+	writeFileSync(join(sharedDir, "components", "SharedBadge.vue"), `<script setup lang="ts">
+defineProps<{
+  text?: string;
+}>();
+<\/script>
+
+<template>
+  <span class="shared-badge">{{ text ?? 'Shared' }}</span>
 </template>
 
 <style scoped>
 .shared-badge {
   display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--slidev-theme-primary, #3b82f6);
-  color: white;
-  font-size: 0.875rem;
-  font-weight: 500;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #fff;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 9999px;
 }
 </style>
 `, "utf-8");
 	writeFileSync(join(sharedDir, "README.md"), `# @supaslidev/shared
 
-Shared components, layouts, and styles for your Slidev presentations.
+A local Slidev addon for sharing components, layouts, and styles across all presentations in your workspace.
 
-## Usage
+## How It Works
 
-This package is configured as a Slidev addon. Components in the \`components\` directory are automatically available in all presentations that include this addon.
+This package follows the [Slidev addon pattern](https://sli.dev/guide/write-addon). Slidev automatically discovers and imports resources from the following directories:
 
-## Structure
+- **components/** - Vue components available in all slides
+- **layouts/** - Custom slide layouts
+- **styles/** - Shared CSS/SCSS styles
 
-- \`components/\` - Shared Vue components
-- \`layouts/\` - Custom slide layouts
-- \`styles/\` - Global styles
+## Using This Addon
+
+Add the addon to your presentation's frontmatter:
+
+\`\`\`yaml
+---
+addons:
+  - '@supaslidev/shared'
+---
+\`\`\`
+
+## Example: Using SharedBadge
+
+The \`SharedBadge\` component is available globally once the addon is configured:
+
+\`\`\`md
+---
+addons:
+  - '@supaslidev/shared'
+---
+
+# My Slide
+
+<SharedBadge text="New" />
+\`\`\`
+
+## Directory Structure
+
+\`\`\`
+shared/
+├── components/       # Vue components (auto-imported)
+│   └── SharedBadge.vue
+├── layouts/          # Custom layouts
+├── styles/           # Shared styles
+├── package.json
+└── README.md
+\`\`\`
+
+## Adding New Components
+
+Create a \`.vue\` file in \`components/\`:
+
+\`\`\`vue
+<script setup lang="ts">
+defineProps<{
+  label: string;
+}>();
+<\/script>
+
+<template>
+  <div class="my-component">{{ label }}</div>
+</template>
+\`\`\`
+
+The component is immediately available in all presentations using this addon.
 `, "utf-8");
-	writeFileSync(join(sharedDir, "tsconfig.json"), JSON.stringify({
-		compilerOptions: {
-			target: "ESNext",
-			module: "ESNext",
-			moduleResolution: "bundler",
-			strict: true,
-			jsx: "preserve",
-			skipLibCheck: true
-		},
-		include: ["**/*.ts", "**/*.vue"]
-	}, null, 2) + "\n", "utf-8");
 }
 async function create(options = {}) {
 	const spinner = createSafeSpinner();
@@ -471,8 +434,6 @@ async function create(options = {}) {
 		await createPresentation(targetDir, presentationName);
 		spinner.message("Creating shared package...");
 		createSharedPackage(targetDir);
-		spinner.message("Creating scripts...");
-		createScripts(targetDir);
 		spinner.stop("Workspace structure created");
 		if (initGit) {
 			spinner.start("Initializing git repository...");

package/dist/index.js

@@ -158,11 +158,7 @@ async function renderTemplatesRecursively(sourceDir, targetDir, data) {
 	}
 }
 function createDirectoryStructure(targetDir) {
-	for (const dir of [
-		"presentations",
-		"packages",
-		"scripts"
-	]) {
+	for (const dir of ["presentations", "packages"]) {
 		const fullPath = join(targetDir, dir);
 		mkdirSync(fullPath, { recursive: true });
 		trackPath(fullPath);
@@ -221,90 +217,7 @@ Add your content here
 [Slidev Documentation](https://sli.dev/)
 `;
 	writeFileSync(join(presentationDir, "slides.md"), slidesContent, "utf-8");
-	writeFileSync(join(presentationDir, ".gitignore"), "node_modules\ndist\n.slidev\n", "utf-8");
-	writeFileSync(join(presentationDir, ".npmrc"), "shamefully-hoist=true\n", "utf-8");
-}
-function createScripts(targetDir) {
-	writeFileSync(join(join(targetDir, "scripts"), "dev-presentation.mjs"), `#!/usr/bin/env node
-
-import { existsSync, readdirSync, statSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { spawn } from 'node:child_process';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const rootDir = join(__dirname, '..');
-const presentationsDir = join(rootDir, 'presentations');
-
-function getPresentations() {
-  if (!existsSync(presentationsDir)) {
-    return [];
-  }
-
-  return readdirSync(presentationsDir)
-    .filter((name) => {
-      const fullPath = join(presentationsDir, name);
-      return statSync(fullPath).isDirectory() && existsSync(join(fullPath, 'slides.md'));
-    })
-    .sort();
-}
-
-function printUsage(presentations) {
-  console.error('Usage: pnpm dev <presentation-name>');
-  console.error('\\nAvailable presentations:');
-
-  if (presentations.length === 0) {
-    console.error('  No presentations found');
-  } else {
-    presentations.forEach((name) => {
-      console.error(\`  \${name}\`);
-    });
-  }
-}
-
-function runDev(name) {
-  const packageName = \`@supaslidev/\${name}\`;
-
-  console.log(\`\\nStarting dev server for \${name}...\\n\`);
-
-  const pnpm = spawn('pnpm', ['--filter', packageName, 'dev'], {
-    cwd: rootDir,
-    stdio: 'inherit',
-    shell: true,
-  });
-
-  pnpm.on('error', (err) => {
-    console.error(\`Failed to start dev server: \${err.message}\`);
-    process.exit(1);
-  });
-
-  pnpm.on('close', (code) => {
-    process.exit(code ?? 0);
-  });
-}
-
-function main() {
-  const args = process.argv.slice(2);
-  const name = args[0];
-  const presentations = getPresentations();
-
-  if (!name) {
-    console.error('Error: Presentation name is required');
-    printUsage(presentations);
-    process.exit(1);
-  }
-
-  if (!presentations.includes(name)) {
-    console.error(\`Error: Presentation "\${name}" not found\`);
-    printUsage(presentations);
-    process.exit(1);
-  }
-
-  runDev(name);
-}
-
-main();
-`, "utf-8");
+	writeFileSync(join(presentationDir, ".gitignore"), "node_modules\n.DS_Store\ndist\n*.local\n.vite-inspect\n.remote-assets\ncomponents.d.ts\n", "utf-8");
 }
 function createSharedPackage(targetDir) {
 	const sharedDir = join(targetDir, "packages", "shared");
@@ -326,49 +239,99 @@ function createSharedPackage(targetDir) {
 		keywords: ["slidev-addon", "slidev"],
 		dependencies: { vue: "catalog:" }
 	}, null, 2) + "\n", "utf-8");
-	writeFileSync(join(sharedDir, "components", "SharedBadge.vue"), `<template>
-  <span class="shared-badge">
-    <slot />
-  </span>
+	writeFileSync(join(sharedDir, "components", "SharedBadge.vue"), `<script setup lang="ts">
+defineProps<{
+  text?: string;
+}>();
+<\/script>
+
+<template>
+  <span class="shared-badge">{{ text ?? 'Shared' }}</span>
 </template>
 
 <style scoped>
 .shared-badge {
   display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--slidev-theme-primary, #3b82f6);
-  color: white;
-  font-size: 0.875rem;
-  font-weight: 500;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #fff;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 9999px;
 }
 </style>
 `, "utf-8");
 	writeFileSync(join(sharedDir, "README.md"), `# @supaslidev/shared
 
-Shared components, layouts, and styles for your Slidev presentations.
+A local Slidev addon for sharing components, layouts, and styles across all presentations in your workspace.
 
-## Usage
+## How It Works
 
-This package is configured as a Slidev addon. Components in the \`components\` directory are automatically available in all presentations that include this addon.
+This package follows the [Slidev addon pattern](https://sli.dev/guide/write-addon). Slidev automatically discovers and imports resources from the following directories:
 
-## Structure
+- **components/** - Vue components available in all slides
+- **layouts/** - Custom slide layouts
+- **styles/** - Shared CSS/SCSS styles
 
-- \`components/\` - Shared Vue components
-- \`layouts/\` - Custom slide layouts
-- \`styles/\` - Global styles
+## Using This Addon
+
+Add the addon to your presentation's frontmatter:
+
+\`\`\`yaml
+---
+addons:
+  - '@supaslidev/shared'
+---
+\`\`\`
+
+## Example: Using SharedBadge
+
+The \`SharedBadge\` component is available globally once the addon is configured:
+
+\`\`\`md
+---
+addons:
+  - '@supaslidev/shared'
+---
+
+# My Slide
+
+<SharedBadge text="New" />
+\`\`\`
+
+## Directory Structure
+
+\`\`\`
+shared/
+├── components/       # Vue components (auto-imported)
+│   └── SharedBadge.vue
+├── layouts/          # Custom layouts
+├── styles/           # Shared styles
+├── package.json
+└── README.md
+\`\`\`
+
+## Adding New Components
+
+Create a \`.vue\` file in \`components/\`:
+
+\`\`\`vue
+<script setup lang="ts">
+defineProps<{
+  label: string;
+}>();
+<\/script>
+
+<template>
+  <div class="my-component">{{ label }}</div>
+</template>
+\`\`\`
+
+The component is immediately available in all presentations using this addon.
 `, "utf-8");
-	writeFileSync(join(sharedDir, "tsconfig.json"), JSON.stringify({
-		compilerOptions: {
-			target: "ESNext",
-			module: "ESNext",
-			moduleResolution: "bundler",
-			strict: true,
-			jsx: "preserve",
-			skipLibCheck: true
-		},
-		include: ["**/*.ts", "**/*.vue"]
-	}, null, 2) + "\n", "utf-8");
 }
 async function create(options = {}) {
 	const spinner = createSafeSpinner();
@@ -471,8 +434,6 @@ async function create(options = {}) {
 		await createPresentation(targetDir, presentationName);
 		spinner.message("Creating shared package...");
 		createSharedPackage(targetDir);
-		spinner.message("Creating scripts...");
-		createScripts(targetDir);
 		spinner.stop("Workspace structure created");
 		if (initGit) {
 			spinner.start("Initializing git repository...");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-supaslidev",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "CLI tool for scaffolding Supaslidev presentations",
   "keywords": [
     "slidev",
@@ -50,7 +50,7 @@
     "tsdown": "^0.12.5",
     "tsx": "^4.19.0",
     "typescript": "^5.3.3",
-    "vitest": "^3.0.0"
+    "vitest": "^4.0.0"
   },
   "scripts": {
     "build": "tsdown",

package/templates/default/gitignore.ejs

@@ -4,4 +4,3 @@ deploy
 .DS_Store
 *.log
 .slidev
-.turbo

package/templates/default/nuxt.config.ts.ejs

@@ -0,0 +1,3 @@
+import { defineSupaslidevConfig } from 'supaslidev';
+
+export default defineNuxtConfig(defineSupaslidevConfig({}));

package/templates/default/package.json.ejs

@@ -9,9 +9,11 @@
     "new": "supaslidev new",
     "present": "supaslidev present",
     "export": "supaslidev export",
-    "deploy": "supaslidev deploy"
+    "deploy": "supaslidev deploy",
+    "build": "pnpm --filter @supaslidev/* run build"
   },
   "devDependencies": {
+    "nuxt": "catalog:core",
     "playwright-chromium": "catalog:",
     "supaslidev": "<%= supaslidevVersion %>"
   },

package/templates/default/pnpm-workspace.yaml.ejs

@@ -8,7 +8,27 @@ catalog:
   '@slidev/theme-seriph': latest
   '@slidev/theme-apple-basic': latest
   vue: ^3.5.26
-  '@vue/compiler-sfc': ^3.5.27
-  typescript: ^5.3.3
-  vue-tsc: ^2.0.0
   playwright-chromium: ^1.58.2
+
+catalogs:
+  core:
+    nuxt: ^4.4.2
+    '@vue/compiler-sfc': ^3.5.27
+    typescript: ^5.3.3
+    vue-tsc: ^2.0.0
+
+catalogMode: prefer
+
+linkWorkspacePackages: true
+
+shellEmulator: true
+
+trustPolicy: no-downgrade
+
+trustPolicyExclude:
+  - axios
+  - chokidar
+  - semver
+  - undici
+  - undici-types
+  - vite

package/templates/default/npmrc.ejs

@@ -1 +0,0 @@
-shamefully-hoist=true

package/templates/default/tsconfig.json.ejs

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true,
-    "noEmit": true
-  },
-  "include": ["packages/**/*.ts", "packages/**/*.vue"],
-  "exclude": ["node_modules", "**/dist"]
-}

package/templates/default/turbo.json.ejs

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://turbo.build/schema.json",
-  "tasks": {
-    "typecheck": {
-      "dependsOn": ["^typecheck"],
-      "inputs": ["**/*.ts", "**/*.tsx", "**/*.vue", "tsconfig.json"],
-      "outputs": []
-    },
-    "lint": {
-      "dependsOn": ["^lint"],
-      "inputs": ["**/*.ts", "**/*.tsx", "**/*.vue", "**/*.js", "**/*.mjs"],
-      "outputs": []
-    },
-    "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["src/**", "**/*.ts", "**/*.vue", "package.json"],
-      "outputs": ["dist/**"]
-    },
-    "dev": {
-      "cache": false,
-      "persistent": true
-    }
-  }
-}