+
See [docs/usage.md](./docs/usage.md) for more details or check out the [example templates](./examples/).
diff --git a/docs/screenshot.svg b/docs/screenshot.svg
new file mode 100644
index 0000000..9a83e49
--- /dev/null
+++ b/docs/screenshot.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/templates.md b/docs/templates.md
index 26a8fd1..49ebdd4 100644
--- a/docs/templates.md
+++ b/docs/templates.md
@@ -59,6 +59,15 @@ scffld template-name --myProperty="foo"
| `shortName` | Shortened option name |
| `description` | Description of the property
+
## Syntax
@@ -53,6 +55,12 @@ npx @querc/scffld examples/simple \
-o ./my-project/src/
```
+or leave out all options to be prompted for them:
+
+```sh
+npx @querc/scffld examples/simple
+```
+
## Remote templates
Templates can be loaded from a remote URL:
@@ -69,6 +77,13 @@ npx @querc/scffld github:lindsayevans/scffld/examples/simple \
--name="My Remote Component"
```
+and with a specific commit/tag/branch:
+
+```sh
+npx @querc/scffld github:lindsayevans/scffld/examples/simple@v0.11.0 \
+ --name="My Remote Component"
+```
+
## Common options
| Option | Details |
diff --git a/examples/kitchen-sink.md b/examples/kitchen-sink.md
index 47a8a37..e384f07 100644
--- a/examples/kitchen-sink.md
+++ b/examples/kitchen-sink.md
@@ -5,49 +5,40 @@ props:
name:
type: string
required: true
+ shortName: N
includeStyle:
type: boolean
default: true
+ yeah:
+ type: boolean
+ shortName: y
+ default: true
+ nah:
+ type: boolean
+ shortName: n
+ default: false
appRoot:
type: string
default: '@app/'
-# Hooks?
-hooks:
- afterWrite: applyPrettier
+postInstallMessage: |
+ ___
+ # Your web app '' has been created!
+ \
+ To get started, run the following commands:
+ ```sh
+ cd
+ npm i
+ npm start
+ ```
+
+# hooks:
+# afterWrite: applyPrettier
---
# scffld template for React Functional Component with SCSS
Anything outside code blocks can be used for documentation etc.
-Could probably use any of the methods from [change-case](https://www.npmjs.com/package/change-case) as output directives.
-
-## File path directives
-
-- `${SCFFLD(propName)}`
-- `${ @scffld-kebab propName }`
-- `${ @scffld-pascal propName }`
-- ...
-
-## Output directives
-
-- `/* @scffld propName */`
-- `/* @scffld-kebab propName */`
-- `/* @scffld-pascal propName */`
-- ...
-
-### Conditional directives
-
-- `/* @scffld-if propName */`
-- `/* @scffld-else */`
-- `/* @scffld-elseif propName */`
-- `/* @scffld-endif */`
-- ...
-
-JS/CSS/C#/Java and so on use C-style multiline comments for directives.
-
-Probably ignore any code blocks that don't have `{ filename: ...}`
-
```tsx { filename: '${ @scffld-pascal name }/${ @scffld-pascal name }.tsx' }
import React from 'react'
import { Button } from '/* @scffld appRoot */components';
@@ -92,9 +83,7 @@ HTML, SVG etc. would need to use HTML-style comments
```
-JSON?
-
-Might need to do some kinda JSON5 -> JSON conversion thing so the output is valid...
+JSON
```json { filename: '${ @scffld-pascal name }/${ @scffld-kebab name }.json' }
{
@@ -122,6 +111,69 @@ CFML FTMFW
Relative path to outputDirectory: +includeStyle:+
yeah, nah
+ + +nah, yeah
+ + +yeah1
+ +nah1
+ + +nah2
+ +yeah2
+ +Relative path to outputDirectory: -includeStyle:-
yeah, nah
- - -nah, yeah
- -yeah1
- -nah1
- - -nah2
- -yeah2
+