feat: create-slidev-theme

packages/client/layouts/cover.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="layout-master cover">
+    <slot />
+  </main>
+</template>

packages/create-app/template/README.md

@@ -0,0 +1,11 @@
+# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
+
+To start the slide show:
+
+- `npm install`
+- `npm run dev`
+- visit http://localhost:3030
+
+Edit the [slides.md](./slides.md) to see the changes.
+
+Learn more about Slidev on [documentations](https://slidev.antfu.me/).

packages/create-theme/index.js

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// @ts-check
+const fs = require('fs')
+const path = require('path')
+const argv = require('minimist')(process.argv.slice(2))
+const { prompt } = require('enquirer')
+const { cyan, blue, yellow, bold, dim, green } = require('kolorist')
+const { version } = require('./package.json')
+const { basename } = require('path')
+
+const cwd = process.cwd()
+
+const renameFiles = {
+  _gitignore: '.gitignore',
+  _npmrc: '.npmrc',
+}
+
+async function init() {
+  console.log()
+  console.log(`  ${cyan('●') + blue('■') + yellow('▲')}`)
+  console.log(`${bold('  Slidev') + dim(' Theme Creator')}  ${blue(`v${version}`)}`)
+  console.log()
+
+  let targetDir = argv._[0]
+  if (!targetDir) {
+    /**
+     * @type {{ name: string }}
+     */
+    const { name } = await prompt({
+      type: 'input',
+      name: 'name',
+      message: 'Theme name:',
+      initial: 'slidev-theme-starter',
+    })
+    targetDir = name
+  }
+  const packageName = await getValidPackageName(targetDir)
+  const root = path.join(cwd, targetDir)
+
+  if (!fs.existsSync(root)) {
+    fs.mkdirSync(root, { recursive: true })
+  }
+  else {
+    const existing = fs.readdirSync(root)
+    if (existing.length) {
+      console.log(yellow(`  Target directory "${targetDir}" is not empty.`))
+      /**
+       * @type {{ yes: boolean }}
+       */
+      const { yes } = await prompt({
+        type: 'confirm',
+        name: 'yes',
+        initial: 'Y',
+        message: 'Remove existing files and continue?',
+      })
+      if (yes)
+        emptyDir(root)
+
+      else
+        return
+    }
+  }
+
+  console.log(dim('  Scaffolding Slidev theme in ') + targetDir + dim(' ...'))
+
+  prepareTemplate(root, path.join(__dirname, 'template'), packageName)
+
+  const pkgManager = (/pnpm/.test(process.env.npm_execpath) || /pnpm/.test(process.env.npm_config_user_agent))
+    ? 'pnpm'
+    : /yarn/.test(process.env.npm_execpath) ? 'yarn' : 'npm'
+
+  const related = path.relative(cwd, root)
+
+  console.log(green('  Done.\n'))
+
+  console.log(dim('\n  start it by:\n'))
+  if (root !== cwd)
+    console.log(blue(`  cd ${bold(related)}`))
+
+  console.log(blue(`  ${pkgManager === 'yarn' ? 'yarn' : `${pkgManager} install`}`))
+  console.log(blue(`  ${pkgManager === 'yarn' ? 'yarn dev' : `${pkgManager} run dev`}`))
+  console.log()
+  console.log(`  ${cyan('●')} ${blue('■')} ${yellow('▲')}`)
+  console.log()
+}
+
+function prepareTemplate(root, templateDir, packageName) {
+  const write = (file, content) => {
+    const targetPath = renameFiles[file]
+      ? path.join(root, renameFiles[file])
+      : path.join(root, file)
+    if (content)
+      fs.writeFileSync(targetPath, content)
+
+    else
+      copy(path.join(templateDir, file), targetPath)
+  }
+
+  const files = fs.readdirSync(templateDir)
+  for (const file of files.filter(f => !['package.json', 'README.md'].includes(f)))
+    write(file)
+
+  write(
+    'package.json',
+    JSON.stringify({
+      name: packageName,
+      version: '0.0.0',
+      ...require(path.join(templateDir, 'package.json')),
+    }, null, 2),
+  )
+
+  write(
+    'README.md',
+    fs
+      .readFileSync(path.join(templateDir, 'README.md'), 'utf-8')
+      .replace(/{{package-name}}/g, packageName)
+      .replace(/{{name}}/g, getThemeName(packageName)),
+  )
+}
+
+function copy(src, dest) {
+  const stat = fs.statSync(src)
+  if (stat.isDirectory())
+    copyDir(src, dest)
+
+  else
+    fs.copyFileSync(src, dest)
+}
+
+function getValidPackageName(projectName) {
+  projectName = basename(projectName)
+  if (!projectName.startsWith('slidev-theme-'))
+    return `slidev-theme-${projectName}`
+  return projectName
+}
+
+function getThemeName(pkgName) {
+  return pkgName.replace(/^slidev-theme-/, '')
+}
+
+function copyDir(srcDir, destDir) {
+  fs.mkdirSync(destDir, { recursive: true })
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file)
+    const destFile = path.resolve(destDir, file)
+    copy(srcFile, destFile)
+  }
+}
+
+function emptyDir(dir) {
+  if (!fs.existsSync(dir))
+    return
+
+  for (const file of fs.readdirSync(dir)) {
+    const abs = path.resolve(dir, file)
+    // baseline is Node 12 so can't use rmSync :(
+    if (fs.lstatSync(abs).isDirectory()) {
+      emptyDir(abs)
+      fs.rmdirSync(abs)
+    }
+    else {
+      fs.unlinkSync(abs)
+    }
+  }
+}
+
+init().catch((e) => {
+  console.error(e)
+})

packages/create-theme/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "create-slidev-theme",
+  "version": "0.0.0-alpha.24",
+  "description": "Create starter theme template for Slidev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/slidevjs/slidev"
+  },
+  "funding": "https://github.com/sponsors/antfu",
+  "author": "antfu <anthonyfu117@hotmail.com>",
+  "main": "index.js",
+  "bin": {
+    "create-slidev-theme": "index.js"
+  },
+  "homepage": "https://github.com/slidevjs/slidev",
+  "bugs": "https://github.com/slidevjs/slidev/issues",
+  "dependencies": {
+    "enquirer": "^2.3.6",
+    "kolorist": "^1.4.1",
+    "minimist": "^1.2.5"
+  }
+}

packages/create-theme/template/README.md

@@ -0,0 +1,45 @@
+# {{package-name}}
+
+[![NPM version](https://img.shields.io/npm/v/{{package-name}}?color=3AB9D4&label=)](https://www.npmjs.com/package/{{package-name}})
+
+A (...) theme for [Slidev](https://github.com/slidevjs/slidev).
+
+<!--
+run `npm run dev` to check out the slides for more details of how to start writing a theme
+-->
+
+<!--
+put some screenshots here to demonstrate your theme,
+-->
+
+<!-- 
+Live demo: [...]
+-->
+
+## Install
+
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+
+<pre><code>---<br>theme: <b>{{name}}</b><br>---</code></pre>
+
+Learn more about [how to use a theme](https://slidev.antfu.me/themes/).
+
+## Layouts
+
+This theme provides the following layouts:
+
+> TODO:
+
+## Components
+
+This theme provides the following components:
+
+> TODO:
+
+## Contributing
+
+- `npm install`
+- `npm run dev` to start theme preview of `example.md`
+- Edit the `example.md` and style to see the changes
+- `npm run export` to genreate the preview PDF
+- `npm run screenshot` to genrate the preview PNG

packages/create-theme/template/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+*.local
+index.html
+.remote-assets

packages/create-theme/template/_npmrc

@@ -0,0 +1,2 @@
+# for pnpm
+shamefully-hoist=true

packages/create-theme/template/example.md

@@ -0,0 +1,81 @@
+---
+theme: none
+---
+
+# Slidev Theme Starter
+
+Presentation slides for developers
+
+<div class="pt-12">
+  <span @click="next" class="px-2 p-1 rounded cursor-pointer hover:bg-white hover:bg-opacity-10">
+    Press Space for next page <carbon:arrow-right class="inline"/>
+  </span>
+</div>
+
+---
+
+# What is Slidev?
+
+Slidev is a slides maker and presenter designed for developers, consist of the following features
+
+- 📝 **Text-based** - focus on the content with Markdown, and then style them later
+- 🎨 **Themable** - theme can be shared and used with npm packages
+- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
+- 🤹 **Interactive** - embedding Vue components to enhance your expressions
+- 🎥 **Recording** - built-in recording and camera view
+- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
+- 🛠 **Hackable** - anything possible on a webpage
+
+<br>
+<br>
+
+Read more about [Why Slidev?](https://slidev.antfu.me/guide/why)
+
+
+---
+
+# Navigation
+
+Hover on the bottom-left corner to see the navigation's controls panel
+
+### Keyboard Shortcuts
+
+|     |     |
+| --- | --- |
+| <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide |
+| <kbd>left</kbd> | previous animation or slide |
+| <kbd>up</kbd> | previous slide |
+| <kbd>down</kbd> | next slide |
+
+---
+layout: image-right
+image: 'https://source.unsplash.com/collection/94734566/1920x1080'
+---
+
+# Code
+
+Use code snippets and get the highlighting directly!
+
+```ts
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+
+function updateUser(id: number, update: Partial<User>) {
+  const user = getUser(id)
+  const newUser = {...user, ...update}  
+  saveUser(id, newUser)
+}
+```
+
+---
+layout: center
+class: "text-center"
+---
+
+# Learn More
+
+[Documentations](https://slidev.antfu.me) / [GitHub Repo](https://github.com/slidevjs/slidev)

packages/create-theme/template/index.html

@@ -0,0 +1,4 @@
+<head>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
+</head>

packages/create-theme/template/layouts/cover.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="layout-master cover">
+    <div class="my-auto w-full">
+      <slot />
+    </div>
+  </div>
+</template>

packages/create-theme/template/layouts/intro.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="layout-master intro">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>

packages/create-theme/template/package.json

@@ -0,0 +1,16 @@
+{
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
+  "scripts": {
+    "dev": "slidev example.md",
+    "build": "slidev build example.md",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  },
+  "dependencies": {
+    "@slidev/cli": "^0.0.0-alpha.24",
+    "@slidev/theme-default": "^0.0.0-alpha.24"
+  }
+}