feat: new create-nuxt-content-docs package (#336)

* chore: move tests to content package

* chore(content): fix readme license

* chore(theme-docs): fix readme license

* chore(theme-docs): add generate.routes option by default

* feat: init create-nuxt-content-docs package

* Update README.md

* Update packages/create-nuxt-content-docs/src/saofile.js

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

* Update packages/create-nuxt-content-docs/src/saofile.js

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

* fix(theme-docs): put back  after rebase

* chore(create-nuxt-content-docs): update default template alert to success

* docs: improve themes docs

* chore(create-nuxt-content-docs): improve readme

* chore(theme-docs): improve readme

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

.eslintignore

@@ -6,3 +6,4 @@ coverage
 
 # Packages
 packages/content/templates
+packages/create-nuxt-content-docs/template

docs/content/en/themes/docs.md

@@ -1,23 +1,76 @@
 ---
 title: Docs Theme
 menuTitle: Docs
-description: 'Create your documentation with @nuxt/content docs theme in minutes.'
+description: 'Create your documentation with @nuxt/content docs theme in seconds!'
 category: Themes
 position: 8
 version: 1
 ---
 
-Create a beautiful documentation like this website in minutes ✨
+Create a beautiful documentation like this website in seconds ✨
 
 <alert type="info">
 
 Checkout the [live example](/examples/docs-theme)
 
 </alert>
 
-Let's say we're creating the documentation of an open-source project in the `docs/` directory.
+## Getting Started
+
+To get started quickly you can use the [create-nuxt-content-docs](https://github.com/nuxt/content/tree/dev/packages/create-nuxt-content-docs) package.
+
+<code-group>
+  <code-block label="Yarn" active>
+
+  ```bash
+  yarn create nuxt-content-docs <project-name>
+  ```
+
+  </code-block>
+  <code-block label="NPX">
+
+  ```bash
+  # Make sure you have npx installed (npx is shipped by default since NPM 5.2.0) or npm v6.1 or yarn.
+  npx create-nuxt-content-docs <project-name>
+  ```
+
+  </code-block>
+  <code-block label="NPM">
+
+  ```bash
+  # Starting with npm v6.1 you can do:
+  npm init nuxt-content-docs <project-name>
+  ```
+
+  </code-block>
+</code-group>
+
+It will ask you some questions (name, title, url, repository, etc.), when answered the dependencies will be installed. The next step is to navigate to the project folder and launch it:
 
-## Directory Structure
+<code-group>
+  <code-block label="Yarn" active>
+
+  ```bash
+  cd <project-name>
+  yarn dev
+  ```
+
+  </code-block>
+  <code-block label="NPM">
+
+  ```bash
+  cd <project-name>
+  npm run dev
+  ```
+
+  </code-block>
+</code-group>
+
+The application is now running on [http://localhost:3000](http://localhost:3000). Well done!
+
+## Manual Setup
+
+Let's say we're creating the documentation of an open-source project in the `docs/` directory.
 
 The theme is a classic NuxtJS app, you need:
 
@@ -189,7 +242,7 @@ Once you've setup your documentation, you can directly start writing your conten
 
 ### Locales
 
-The first level of directories in the `content/` folder will be the locales you defined in your `nuxt.config.js`. By default there is only the default `en` locale defined, you have to create a `content/en/` directory to make it work.
+The first level of directories in the `content/` folder are the locales used with [nuxt-i18n](https://github.com/nuxt-community/i18n-module) defined in your `nuxt.config.js`. By default there is only the default `en` locale defined, you have to create a `content/en/` directory to make it work.
 
 You can override the locales in your `nuxt.config.js`:
 
@@ -220,8 +273,6 @@ As explained in [nuxt.config.js](/themes/docs#nuxtconfigjs) section, we use `def
 
 </alert>
 
-> Check out the [nuxt-i18n](https://github.com/nuxt-community/i18n-module) documentation
-
 ### Routing
 
 Each markdown page in the `content/{locale}/` directory will become a page and will be listed in the left navigation.

package.json

@@ -18,8 +18,11 @@
     "docs": "nuxt docs",
     "lint": "eslint --ext .js,.vue .",
     "release": "yarn test && lerna publish",
-    "test": "yarn lint && jest -i",
-    "test:watch": "jest --watch"
+    "test": "yarn lint && yarn test:packages",
+    "test:packages": "jest packages -i",
+    "test:packages:watch": "jest packages --watch",
+    "test:packages:content": "jest packages/content -i",
+    "test:packages:create-nuxt-content-docs": "jest packages/create-nuxt-content-docs"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",

packages/content/README.md

@@ -36,7 +36,7 @@
 
 ## License
 
-[MIT License](./LICENSE)
+[MIT License](../../LICENSE)
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@nuxt/content/latest.svg

packages/create-nuxt-content-docs/README.md

@@ -0,0 +1,47 @@
+# create-nuxt-content-docs
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![lerna][lerna-src]][lerna-href]
+
+> Create a documentation with @nuxt/content docs theme in seconds
+
+- [📖  Read the @nuxt/content-theme-docs documentation](https://content.nuxtjs.org/themes/docs)
+
+## Usage
+
+With [yarn](https://yarnpkg.com/en/):
+
+```bash
+yarn create nuxt-content-docs <project-name>
+```
+
+Or with [npx](https://www.npmjs.com/package/npx) (`npx` is shipped by default since [npm](https://www.npmjs.com/get-npm) `5.2.0`)
+
+```bash
+npx create-nuxt-content-docs <project-name>
+```
+
+Or starting with npm v6.1 you can do:
+
+```bash
+npm init nuxt-content-docs <project-name>
+```
+
+## License
+
+[MIT License](../../LICENSE)
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/create-nuxt-content-docs/latest.svg
+[npm-version-href]: https://npmjs.com/package/create-nuxt-content-docs
+
+[npm-downloads-src]: https://img.shields.io/npm/dt/create-nuxt-content-docs.svg
+[npm-downloads-href]: https://npmjs.com/package/create-nuxt-content-docs
+
+[license-src]: https://img.shields.io/npm/l/@nuxt/content.svg
+[license-href]: https://npmjs.com/package/@nuxt/content
+
+[lerna-src]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
+[lerna-href]: https://lerna.js.org/

packages/create-nuxt-content-docs/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "create-nuxt-content-docs",
+  "version": "0.0.0",
+  "files": [
+    "src",
+    "template"
+  ],
+  "bin": "src/cli.js",
+  "dependencies": {
+    "cac": "^6.6.1",
+    "sao": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/create-nuxt-content-docs/src/cli.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+const path = require('path')
+const fs = require('fs')
+const sao = require('sao')
+const cac = require('cac')
+const chalk = require('chalk')
+const { version } = require('../package.json')
+
+const generator = path.resolve(__dirname, './')
+
+const cli = cac('create-nuxt-content-docs')
+
+cli
+  .command('[out-dir]', 'Generate in a custom directory or current directory')
+  .option('--verbose', 'Show debug logs')
+  .action((outDir = '.', cliOptions) => {
+    const files = fs.existsSync(outDir) ? fs.readdirSync(outDir) : []
+    // eslint-disable-next-line no-console
+    console.log(chalk`{cyan create-nuxt-content-docs v${version}}`)
+    if (files.length) {
+      // eslint-disable-next-line no-console
+      return console.log(chalk.red(`Can't create ${outDir} because there's already a non-empty directory ${outDir} existing in path.`))
+    }
+    // eslint-disable-next-line no-console
+    console.log(chalk`✨  Generating @nuxt/content documentation in {cyan ${outDir}}`)
+
+    const { verbose, answers } = cliOptions
+    const logLevel = verbose ? 4 : 2
+    // See https://saojs.org/api.html#standalone-cli
+    sao({ generator, outDir, logLevel, answers, cliOptions })
+      .run()
+      .catch((err) => {
+        // eslint-disable-next-line no-console
+        console.trace(err)
+        process.exit(1)
+      })
+  })
+
+cli.help()
+
+cli.version(version)
+
+cli.parse()

packages/create-nuxt-content-docs/src/saofile.js

@@ -0,0 +1,66 @@
+module.exports = {
+  prompts () {
+    return [
+      {
+        name: 'name',
+        message: 'Project name:',
+        default: this.outFolder,
+        filter: val => val.toLowerCase()
+      },
+      {
+        name: 'title',
+        message: 'Project title:'
+      },
+      {
+        name: 'url',
+        message: 'Documentation url:'
+      },
+      {
+        name: 'github',
+        message: 'GitHub repository (owner/name):'
+      },
+      {
+        name: 'twitter',
+        message: 'Twitter username (@username):'
+      },
+      {
+        name: 'pm',
+        message: 'Package manager:',
+        choices: [
+          { name: 'Yarn', value: 'yarn' },
+          { name: 'Npm', value: 'npm' }
+        ],
+        type: 'list',
+        default: 'yarn'
+      }
+    ]
+  },
+  templateData () {
+    const pm = this.answers.pm === 'yarn' ? 'yarn' : 'npm'
+    const pmRun = this.answers.pm === 'yarn' ? 'yarn' : 'npm run'
+
+    return {
+      pm,
+      pmRun
+    }
+  },
+  actions: [
+    {
+      type: 'add',
+      files: '**',
+      templateDir: '../template'
+    },
+    {
+      type: 'move',
+      patterns: {
+        gitignore: '.gitignore',
+        '_package.json': 'package.json'
+      }
+    }
+  ],
+  async completed () {
+    this.gitInit()
+    await this.npmInstall()
+    this.showProjectTips()
+  }
+}

packages/create-nuxt-content-docs/template/README.md

@@ -0,0 +1,27 @@
+# <%= name %>
+
+## Setup
+
+Install dependencies:
+
+```bash
+<%= pmRun %> install
+```
+
+## Development
+
+```bash
+<%= pmRun %> dev
+```
+
+## Static Generation
+
+This will create the `dist/` directory for publishing to static hosting:
+
+```bash
+<%= pmRun %> generate
+```
+
+To preview the static generated app, run `<%= pmRun %> start`
+
+For detailed explanation on how things work, checkout [nuxt/content](https://content.nuxtjs.org) and [@nuxt/content theme docs](https://content.nuxtjs.org/themes-docs).

packages/create-nuxt-content-docs/template/content/en/index.md

@@ -0,0 +1,29 @@
+---
+title: Introduction
+description: 'Welcome to your new documentation!'
+position: 1
+category: Getting started
+features:
+  - Blazing fast hot reload in development
+  - Vue components in Markdown
+  - Full-text search
+  - Support static site generation with `nuxt generate`
+  - Powerful QueryBuilder API (MongoDB like)
+  - Syntax highlighting to code blocks in markdown files using PrismJS.
+  - Table of contents generation
+  - Handles Markdown, CSV, YAML, JSON(5), XML
+  - Extend with custom parsers
+  - Extend with hooks
+---
+
+<alert type="success">
+
+Your documentation has been created successfully!
+
+</alert>
+
+## Features
+
+<list :items="features"></list>
+
+<p class="flex items-center">Enjoy light and dark mode:&nbsp;<app-color-switcher class="inline-flex ml-2"></app-color-switcher></p>

packages/create-nuxt-content-docs/template/content/settings.json

@@ -0,0 +1,10 @@
+{
+  "title": "<%= title %>",
+  "url": "<%= url %>",
+  "logo": {
+    "light": "/logo-light.svg",
+    "dark": "/logo-dark.svg"
+  },
+  "github": "<%= github %>",
+  "twitter": "<%= twitter %>"
+}

packages/create-nuxt-content-docs/template/gitignore

@@ -0,0 +1 @@
+node_modules

packages/create-nuxt-content-docs/template/nuxt.config.js

@@ -0,0 +1,3 @@
+import theme from '@nuxt/content-theme-docs'
+
+export default theme({})

packages/create-nuxt-content-docs/template/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "<%= name %>",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxt/content-theme-docs": "^0.3.1",
+    "nuxt": "^2.14.0"
+  }
+}