feat(create-app): pretty cli

demo/slides.md

@@ -103,7 +103,7 @@ class: text-center
 a brief go-through
 
 
-------
+---
 
 <div class="grid grid-cols-2 gap-x-4"><div>
 
@@ -162,7 +162,7 @@ bar.prop = 1
 </div></div>
 
 
-------
+---
 
 # Ref Auto Unwrapping <MarkerCore />
 
@@ -210,7 +210,7 @@ data.foo // 'bar'
 </div>
 
 
-------
+---
 
 # `unref` - Oppsite of Ref <MarkerCore />
 
@@ -256,7 +256,7 @@ class: text-center
 of writing composable functions
 
 
-------
+---
 
 # What's Composable Functions
 
@@ -294,7 +294,7 @@ export function useDark(options: UseDarkOptions = {}) {
 </div>
 
 
-------
+---
 
 # Think as "Connections"
 
@@ -312,7 +312,7 @@ The `setup()` only runs **once** on component initialization, to construct the r
 </div>
 
 
-------
+---
 
 # One Thing at a Time
 
@@ -325,7 +325,7 @@ Just the same as authoring JavaScript functions.
 - "Do one thing, and do it well"
 
 
-------
+---
 
 # Passing Refs as Arguments <MarkerPattern />
 
@@ -401,7 +401,7 @@ c.value // 6
 </div>
 
 
-------
+---
 
 # MaybeRef <MarkerTips/>
 
@@ -439,7 +439,7 @@ export function useTimeAgo(
 </v-click>
 
 
-------
+---
 
 # Make it Flexible <MarkerPattern />
 
@@ -485,7 +485,7 @@ name.value = 'Hi' // Hi - World
 </div>
 
 
-------
+---
 
 # `useTitle` <Marker class="text-blue-400">Case</Marker>
 
@@ -529,7 +529,7 @@ export function useTitle(
 </div>
 
 
-------
+---
 
 # "Reuse" Ref <MarkerCore />
 
@@ -561,7 +561,7 @@ Extremely useful in composable functions that take uncertain argument types.
 
 </v-clicks>
 
-------
+---
 
 # `ref` / `unref` <MarkerTips />
 
@@ -584,7 +584,7 @@ function useBala<T>(arg: MaybeRef<T>) {
 
 </div>
 
-------
+---
 
 # Object of Refs <MarkerPattern />
 
@@ -621,7 +621,7 @@ mouse.x === x.value // true
 </div>
 
 
-------
+---
 
 # Async to "Sync" <MarkerTips />
 
@@ -655,7 +655,7 @@ Establish the "Connections" first, then wait data to be filled up. The idea is s
 
 </div>
 
-------
+---
 
 # `useFetch` <Marker class="text-blue-400">Case</Marker>
 
@@ -685,7 +685,7 @@ export function useFetch<R>(url: MaybeRef<string>) {
 </div>
 
 
-------
+---
 
 # Side-effects Self Cleanup <MarkerPattern />
 
@@ -717,7 +717,7 @@ Lower the mental burden
 -->
 
 
-------
+---
 
 # `effectScope` RFC <Marker class="text-purple-400">Upcoming</Marker>
 
@@ -807,7 +807,7 @@ export default defineComponent({
 </div>
 
 
-------
+---
 
 # Typed Provide / Inject <MarkerCore/>
 
@@ -830,7 +830,7 @@ export const injectKeyUser: InjectionKey<UserInfo> = Symbol()
 </div>
 
 
-------
+---
 
 # Typed Provide / Inject <MarkerCore/>
 
@@ -887,7 +887,7 @@ export const injectKeyUser: InjectionKey<UserInfo> = Symbol()
 </script>
 
 
-------
+---
 
 # Shared State <MarkerPattern />
 
@@ -933,7 +933,7 @@ console.log(state.foo) // 2
 <h3 v-click class="opacity-100">⚠️ But it's not SSR compatible!</h3>
 
 
-------
+---
 
 # Shared State (SSR friendly) <MarkerPattern />
 
@@ -994,7 +994,7 @@ const state = useMyState()
 </div>
 
 
-------
+---
 
 # useVModel <MarkerTips />
 
@@ -1092,7 +1092,7 @@ layout: center
 # All of them work for both Vue 2 and 3
 
 
-------
+---
 
 # `@vue/composition-api` <Marker class="text-teal-400">Lib</Marker>
 
@@ -1110,7 +1110,7 @@ import { ref, reactive } from '@vue/composition-api'
 ```
 
 
-------
+---
 
 # Vue 2.7 <Marker class="text-purple-400">Upcoming</Marker>
 
@@ -1123,7 +1123,7 @@ import { ref, reactive } from '@vue/composition-api'
 - LTS.
 
 
-------
+---
 
 # Vue Demi <Marker class="text-teal-400">Lib</Marker>
 
@@ -1137,7 +1137,7 @@ import { ref, reactive, defineComponent } from 'vue-demi'
 <img class="h-50 mx-auto" src="https://raw.githubusercontent.com/vueuse/vue-demi/master/assets/banner.png" />
 
 
-------
+---
 
 # Recap
 

packages/create-app/index.js

@@ -7,6 +7,8 @@ const path = require('path')
 const argv = require('minimist')(process.argv.slice(2))
 const { prompt } = require('enquirer')
 const execa = require('execa')
+const { cyan, blue, yellow, bold, dim, green } = require('kolorist')
+const { version } = require('./package.json')
 
 const cwd = process.cwd()
 
@@ -16,6 +18,11 @@ const renameFiles = {
 }
 
 async function init() {
+  console.log()
+  console.log(`  ${cyan('●') + blue('■') + yellow('▲')}`)
+  console.log(`${bold('  Slidev') + dim(' Creator')}  ${blue(`v${version}`)}`)
+  console.log()
+
   let targetDir = argv._[0]
   if (!targetDir) {
     /**
@@ -31,24 +38,22 @@ async function init() {
   }
   const packageName = await getValidPackageName(targetDir)
   const root = path.join(cwd, targetDir)
-  console.log(`\nScaffolding project in ${root}...`)
 
   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:
-          `Target directory ${targetDir} is not empty.\n`
-          + 'Remove existing files and continue?',
+        message: 'Remove existing files and continue?',
       })
       if (yes)
         emptyDir(root)
@@ -58,6 +63,8 @@ async function init() {
     }
   }
 
+  console.log(dim('  Scaffolding project in ') + targetDir + dim(' ...'))
+
   const templateDir = path.join(__dirname, 'template')
 
   const write = (file, content) => {
@@ -87,27 +94,31 @@ async function init() {
 
   const related = path.relative(cwd, root)
 
+  console.log(green('  Done.\n'))
+
   /**
    * @type {{ yes: boolean }}
    */
   const { yes } = await prompt({
     type: 'confirm',
     name: 'yes',
     initial: 'Y',
-    message: 'Done. Do you want to install the dependency and start the server now?',
+    message: 'Install and start it now?',
   })
 
   if (yes) {
     await execa(pkgManager, ['-C', related, 'install'], { stdio: 'inherit' })
     await execa(pkgManager, ['-C', related, 'run', 'dev'], { stdio: 'inherit' })
   }
   else {
-    console.log('\nNow run:\n')
+    console.log(dim('\n  start it later by:\n'))
     if (root !== cwd)
-      console.log(`  cd ${related}`)
+      console.log(blue(`  cd ${bold(related)}`))
 
-    console.log(`  ${pkgManager === 'yarn' ? 'yarn' : `${pkgManager} install`}`)
-    console.log(`  ${pkgManager === 'yarn' ? 'yarn dev' : `${pkgManager} run dev`}`)
+    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()
   }
 }

packages/create-app/template/slides.md

@@ -22,7 +22,7 @@ Presentation slides for developers
   <carbon-logo-github />
 </a>
 
-----
+---
 
 # What is Slidev?
 
@@ -41,7 +41,7 @@ Slidev is a slides maker and presenter designed for developers, consist of the f
 
 Read more about [Why Slidev?](https://slidev.antfu.me/guide/why)
 
-----
+---
 
 # Navigation
 

packages/slidev/node/cli.ts

@@ -9,6 +9,7 @@ import { build } from './build'
 import { createServer } from './server'
 import * as parser from './parser'
 import { ResolvedSlidevOptions, resolveOptions } from './plugins/options'
+import { resolveThemeName } from './themes'
 
 const cli = yargs
   .scriptName('slidev')
@@ -59,7 +60,7 @@ cli.command(
         options,
         {
           onDataReload(newData, data) {
-            if (!theme && newData.config.theme !== data.config.theme) {
+            if (!theme && resolveThemeName(newData.config.theme) !== data.config.theme) {
               console.log(yellow('Slidev reloaded on theme change'))
               initServer()
             }
@@ -73,7 +74,7 @@ cli.command(
         },
       ))
       await server.listen()
-      printInfo(options)
+      printInfo(options, port)
     }
 
     initServer()
@@ -179,12 +180,18 @@ function commonOptions(args: Argv<{}>) {
     })
 }
 
-function printInfo(options: ResolvedSlidevOptions) {
+function printInfo(options: ResolvedSlidevOptions, port?: number) {
   console.log()
-  console.log(`  ${cyan('●')}${blue('■')}${yellow('▲')}`)
+  console.log(`  ${cyan('●') + blue('■') + yellow('▲')}`)
   console.log(`${bold('  Slidev')}  ${blue(`v${version}`)}`)
   console.log()
-  console.log(`${dim('  theme   ')}${green(options.theme)}`)
-  console.log(`${dim('  entry   ')}${dim(options.entry)}`)
+  console.log(dim('  theme   ') + green(options.theme))
+  console.log(dim('  entry   ') + dim(path.dirname(options.entry) + path.sep) + path.basename(options.entry))
+  if (port) {
+    console.log()
+    console.log(`${dim('  presenter mode ')} > ${blue(`http://localhost:${bold(port)}/presenter`)}`)
+    console.log(`${dim('  slide show     ')} > ${cyan(`http://localhost:${bold(port)}/`)}`)
+  }
+  console.log()
   console.log()
 }