Add export and serve commands

Author: rogden

.gitignore

@@ -1,6 +1,8 @@
 .DS_Store
 node_modules
 /dist
+# static export build
+tcv-build
 
 # local env files
 .env.local

README.md

@@ -10,24 +10,48 @@ Tailwind Config Viewer is a local UI tool for visualizing your Tailwind CSS conf
 Run `npx tailwind-config-viewer` from within the directory that contains your Tailwind configuration file.
 
 ### Globally
-`npm i tailwind-config-viewer`
+`npm i tailwind-config-viewer -g`
 
 ### Locally
 `npm i tailwind-config-viewer -D`
 
+When installing locally, you can add an entry into the package.json scripts field to run and open the viewer:
+
+```json
+"scripts": {
+  "tailwind-config-viewer": "tailwind-config-viewer -o"
+}
+```
+
 ## Usage
+
 Run the `tailwind-config-viewer` command from within the directory that contains your Tailwind configuration file.
 
-## Options
-There are a few options you can provide to the `tailwind-config-viewer` command.
+## Commands
+
+### serve (default)
+
+The `serve` command is the default command. Running `tailwind-config-viewer` is the same as `tailwind-config-viewer serve`. 
+
+**Options**
 
 |Option|Default|Description|
 |----|----|----|
 |-p, --port|`3000`|The port to run the viewer on. If occupied it will use next available port.|
 |-o, --open|`false`|Open the viewer in default browser|
 |-c, --config|`tailwind.config.js`|Path to your Tailwind config file|
 
+### export
+
+Exports the viewer to a directory that can be uploaded to a static host. It accepts the output directory path as its sole argument. 
+
+`tailwind-config-viewer export ./output-dir`
+
+If an output directory isn't specificied it will be output to `tcv-build`.
+
 ## Roadmap
+
+- [x] Add static export 
 - [ ] Add support for loading custom fonts / font family section
 - [ ] Add Transition section
 - [ ] Dark Mode toggle

cli/export.js

@@ -0,0 +1,31 @@
+const fs = require('fs-extra')
+const path = require('path')
+const crypto = require('crypto')
+const replace = require('replace-in-file')
+const { resolveConfigToJson } = require('../lib/tailwindConfigUtils')
+
+module.exports = function (outputDir, config) {
+  outputDir = path.resolve(process.cwd(), outputDir)
+
+  fs.removeSync(outputDir)
+  fs.mkdirSync(outputDir)
+
+  const configJson = resolveConfigToJson(config)
+  const configFileName = generateConfigFileNameFromJson(configJson)
+
+  fs.writeFileSync(path.resolve(outputDir, configFileName), configJson)
+
+  fs.copySync('./dist', outputDir)
+
+  replace.sync({
+    files: `${outputDir}/index.html`,
+    from: 'config.json',
+    to: configFileName
+  })
+}
+
+function generateConfigFileNameFromJson (configJson) {
+  const configFileHash = crypto.createHash('md5').update(configJson).digest('hex')
+
+  return `config.${configFileHash.substr(0, 8)}.json`
+}

cli/index.js

@@ -1,3 +1,27 @@
 #!/usr/bin/env node
+const program = require('commander')
 
-require('../server/index.js')
+program
+  .option('-c, --config <path>', 'Path to your Tailwind config file', 'tailwind.config.js')
+
+program
+  .command('serve', { isDefault: true })
+  .description('Serve the viewer')
+  .option('-p, --port <port>', 'Port to run the viewer on', 3000)
+  .option('-o, --open', 'Open the viewer in default browser')
+  .action(args => {
+    require('../server')({
+      port: args.port,
+      tailwindConfigPath: program.config,
+      shouldOpen: args.open
+    })
+  })
+
+program
+  .command('export [outputDir]')
+  .description('Create a static export of the viewer')
+  .action((outputDir = './tcv-build') => {
+    require('./export')(outputDir, program.config)
+  })
+
+program.parse(process.argv)

lib/tailwindConfigUtils.js

@@ -0,0 +1,17 @@
+const path = require('path')
+const resolveTailwindConfig = require('tailwindcss/resolveConfig')
+
+const resolveConfigPath = configPath => path.resolve(process.cwd(), configPath)
+
+const resolveConfig = configPath => {
+  const config = require(resolveConfigPath(configPath))
+  return resolveTailwindConfig(config)
+}
+
+const resolveConfigToJson = configPath => JSON.stringify(resolveConfig(configPath))
+
+module.exports = {
+  resolveConfig,
+  resolveConfigPath,
+  resolveConfigToJson
+}