mirror of
https://github.com/chenasraf/simple-scaffold.git
synced 2026-05-17 17:28:09 +00:00
docs: add logo, update docs
This commit is contained in:
Chen Asraf
157
README.md
157
README.md
@@ -31,54 +31,76 @@ lifting for you and start building your projects faster and more efficiently tod
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
## Documentation
|
||||
|
||||
### Local Templates
|
||||
See full documentation [here](https://chenasraf.github.io/simple-scaffold).
|
||||
|
||||
The fastest way to get started is to use `npx` to immediately start a scaffold process.
|
||||
- [Command Line Interface (CLI) usage](https://chenasraf.github.io/simple-scaffold/docs/usage/cli)
|
||||
- [Node.js usage](https://chenasraf.github.io/simple-scaffold/docs/usage/node)
|
||||
- [Templates](https://chenasraf.github.io/simple-scaffold/docs/usage/templates)
|
||||
- [Configuration Files](https://chenasraf.github.io/simple-scaffold/docs/usage/configuration_files)
|
||||
- [Migration](https://chenasraf.github.io/simple-scaffold/docs/usage/migration)
|
||||
|
||||
Prepare any templates you want to use - for example, in the directory `templates/component`; and use
|
||||
that in the CLI args. Here is a simple example file:
|
||||
## Getting Started
|
||||
|
||||
Simple Scaffold will maintain any file and directory structure you try to generate.
|
||||
### Cheat Sheet
|
||||
|
||||
`templates/component/{{ pascalName name }}.tsx`
|
||||
A quick rundown of common usage scenarios:
|
||||
|
||||
```tsx
|
||||
// Created: {{ now 'yyyy-MM-dd' }}
|
||||
import React from 'react'
|
||||
- Remote template config file on GitHub:
|
||||
|
||||
export default {{pascalCase name}}: React.FC = (props) => {
|
||||
return (
|
||||
<div className="{{camelCase name}}">{{pascalCase name}} Component</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
```sh
|
||||
npx simple-scaffold -g username/repository -c scaffold.js -k component NewComponentName
|
||||
```
|
||||
|
||||
To generate the template output, run:
|
||||
- Local template config file:
|
||||
|
||||
```sh
|
||||
npx simple-scaffold -c scaffold.js -k component NewComponentName
|
||||
```
|
||||
|
||||
- Local one-time usage:
|
||||
|
||||
```sh
|
||||
npx simple-scaffold -t templates/component -o src/components NewComponentName
|
||||
```
|
||||
|
||||
### Remote Configurations
|
||||
|
||||
The fastest way to get started is to is to re-use someone else's (or your own) work using a template
|
||||
repository.
|
||||
|
||||
A remote config can be loaded in one of these ways:
|
||||
|
||||
- For templates hosted on GitHub, the syntax is `-g user/repository_name`
|
||||
- For other Git platforms like GitLab, use `-g https://example.com/user/repository_name.git`
|
||||
|
||||
These remote configurations support multiple scaffold groups, which can be specified using the
|
||||
`--key` or `-k` argument:
|
||||
|
||||
```sh
|
||||
# generate single component
|
||||
$ npx simple-scaffold@latest \
|
||||
-t templates/component -o src/components PageWrapper
|
||||
$ npx simple-scaffold \
|
||||
-g chenasraf/simple-scaffold \
|
||||
-k component \
|
||||
PageWrapper
|
||||
|
||||
# equivalent to:
|
||||
$ npx simple-scaffold \
|
||||
-g https://github.com/chenasraf/simple-scaffold.git \
|
||||
-c scaffold.config.js \
|
||||
-k component \
|
||||
PageWrapper
|
||||
```
|
||||
|
||||
This will immediately create the following file: `src/components/PageWrapper.tsx`
|
||||
By default, the template name is set to `default` when the `--key` option is not provided.
|
||||
|
||||
```tsx
|
||||
// Created: 2077-01-01
|
||||
import React from 'react'
|
||||
|
||||
export default PageWrapper: React.FC = (props) => {
|
||||
return (
|
||||
<div className="pageWrapper">PageWrapper Component</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
See information about each option and flag using the `--help` flag, or read the
|
||||
[CLI documentation](https://chenasraf.github.io/simple-scaffold/docs/usage/cli). For information
|
||||
about how configuration files work, [see below](#configuration-files).
|
||||
|
||||
### Configuration Files
|
||||
|
||||
You can also use a config file to more easily maintain all your scaffold definitions.
|
||||
You can use a config file to more easily maintain all your scaffold definitions.
|
||||
|
||||
`scaffold.config.js`
|
||||
|
||||
@@ -99,66 +121,61 @@ module.exports = {
|
||||
Then call your scaffold like this:
|
||||
|
||||
```sh
|
||||
$ npx simple-scaffold@latest -c scaffold.config.js PageWrapper
|
||||
$ npx simple-scaffold -c scaffold.config.js PageWrapper
|
||||
```
|
||||
|
||||
This will allow you to avoid needing to remember which configs are needed or to store them in a
|
||||
1-liner in `packqge.json` which can get pretty long and messy, which is harder to maintain.
|
||||
one-liner in `package.json` which can get pretty long and messy, and harder to maintain.
|
||||
|
||||
Also, this allows you to define more complex scaffolds with logic without having to use the Node.js
|
||||
API directly. (Of course you always have the option to still do so if you wish)
|
||||
|
||||
See more at the [CLI documentation](https://chenasraf.github.io/simple-scaffold/docs/usage/cli) and
|
||||
[Configuration Files](https://chenasraf.github.io/simple-scaffold/docs/usage/configuration_files).
|
||||
More information can be found at the
|
||||
[Configuration Files documentation](https://chenasraf.github.io/simple-scaffold/docs/usage/configuration_files).
|
||||
|
||||
### Remote Configurations
|
||||
### Templates Structure
|
||||
|
||||
Another quick way to start is to re-use someone else's (or your own) work using a template
|
||||
repository.
|
||||
Templates are **any file** in the a directory given to `--templates`.
|
||||
|
||||
A remote config can be loaded in one of these ways:
|
||||
Simple Scaffold will maintain any file and directory structure you try to generate, while replacing
|
||||
any tokens such as `{{ name }}` or other custom-data using
|
||||
[Handlebars.js](https://handlebarsjs.com/).
|
||||
|
||||
- If it's on GitHub, you can use `-g user/repository_name`
|
||||
- If it's on another git server (such as GitLab), you can use
|
||||
`-g https://example.com/user/repository_name.git`
|
||||
`templates/component/{{ pascalName name }}.tsx`
|
||||
|
||||
Configurations can hold multiple scaffold groups. Each group can be accessed using its key by
|
||||
supplying the `--key` or `-k` argument, like so:
|
||||
```tsx
|
||||
// Created: {{ now 'yyyy-MM-dd' }}
|
||||
import React from 'react'
|
||||
|
||||
```sh
|
||||
-g user/repository_name -c scaffold.js -k key_name`.
|
||||
export default {{pascalCase name}}: React.FC = (props) => {
|
||||
return (
|
||||
<div className="{{camelCase name}}">{{pascalCase name}} Component</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Here is an example for loading the example component templates in this very repository:
|
||||
To generate the template output once without saving a configuration file, run:
|
||||
|
||||
```sh
|
||||
$ npx simple-scaffold@latest \
|
||||
-g chenasraf/simple-scaffold \
|
||||
-k component \
|
||||
PageWrapper
|
||||
|
||||
# equivalent to:
|
||||
$ npx simple-scaffold@latest \
|
||||
-g https://github.com/chenasraf/simple-scaffold.git \
|
||||
-c scaffold.config.js \
|
||||
-k component \
|
||||
# generate single component
|
||||
$ npx simple-scaffold \
|
||||
-t templates/component \
|
||||
-o src/components \
|
||||
PageWrapper
|
||||
```
|
||||
|
||||
When template name (`-k component`) is omitted, `default` is used.
|
||||
This will immediately create the following file: `src/components/PageWrapper.tsx`
|
||||
|
||||
See more at the [CLI documentation](https://chenasraf.github.io/simple-scaffold/docs/usage/cli) and
|
||||
[Configuration Files](https://chenasraf.github.io/simple-scaffold/docs/usage/configuration_files).
|
||||
```tsx
|
||||
// Created: 2077-01-01
|
||||
import React from 'react'
|
||||
|
||||
## Documentation
|
||||
|
||||
See full documentation [here](https://chenasraf.github.io/simple-scaffold).
|
||||
|
||||
- [Command Line Interface (CLI) usage](https://chenasraf.github.io/simple-scaffold/docs/usage/cli)
|
||||
- [Node.js usage](https://chenasraf.github.io/simple-scaffold/docs/usage/node)
|
||||
- [Templates](https://chenasraf.github.io/simple-scaffold/docs/usage/templates)
|
||||
- [Configuration Files](https://chenasraf.github.io/simple-scaffold/docs/usage/configuration_files)
|
||||
- [Migration](https://chenasraf.github.io/simple-scaffold/docs/usage/migration)
|
||||
export default PageWrapper: React.FC = (props) => {
|
||||
return (
|
||||
<div className="pageWrapper">PageWrapper Component</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@@ -28,6 +28,7 @@ To see this and more information anytime, add the `-h` or `--help` flag to your
|
||||
| `--log-level` \| `-l` | Determine amount of logs to display. The values are: `none \| debug \| info \| warn \| error`. The provided level will display messages of the same level or higher. |
|
||||
| `--dry-run` \| `-dr` | Don't emit files. This is good for testing your scaffolds and making sure they don't fail, without having to write actual file contents or create directories. |
|
||||
| `--help` \| `-h` | Show this help message |
|
||||
| `--version` \| `-v` | Display version. |
|
||||
|
||||
## Examples:
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import type * as Preset from "@docusaurus/preset-classic"
|
||||
const config: Config = {
|
||||
title: "Simple Scaffold",
|
||||
tagline: "Generate any file structure - from single components to entire app boilerplates, with a single command.",
|
||||
favicon: "img/favicon.ico",
|
||||
favicon: "img/logo.svg",
|
||||
|
||||
// Set the production url of your site here
|
||||
url: "https://chenasraf.github.io",
|
||||
|
||||
@@ -22,3 +22,13 @@
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.heroImage {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -12,10 +12,12 @@ function HomepageHeader() {
|
||||
return (
|
||||
<header className={clsx("hero hero--primary", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<img className={styles.logo} src="img/logo-lg.svg" alt="Simple Scaffold" />
|
||||
<Heading as="h1" className="hero__title">
|
||||
{siteConfig.title}
|
||||
</Heading>
|
||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||
<img className={styles.heroImage} src="img/intro.gif" alt="Simple-Scaffold doing its thing" />
|
||||
<div className={styles.buttons}>
|
||||
<Link className="button button--secondary button--lg" to="/docs/api">
|
||||
API
|
||||
|
||||
66
docs/static/img/logo-lg.svg
vendored
Normal file
66
docs/static/img/logo-lg.svg
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 2049 1637" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
||||
<g transform="matrix(1,0,0,1,-6395,-214)">
|
||||
<g id="Artboard1" transform="matrix(1,0,0,1,6395.44,8.57899)">
|
||||
<rect x="0" y="0" width="2048" height="2048" style="fill:none;"/>
|
||||
<clipPath id="_clip1">
|
||||
<rect x="0" y="0" width="2048" height="2048"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(1,0,0,1,-7.08853,7.35235)">
|
||||
<g transform="matrix(-0.464433,0.649853,0.649853,0.464433,462.33,-484.221)">
|
||||
<g transform="matrix(0.808923,0.587914,-0.587914,0.808923,-731.199,-1371.34)">
|
||||
<path d="M2720.28,1308.55L2720.28,502.62L2877.78,502.62L2877.78,1308.55C2877.78,1352.01 2842.49,1387.3 2799.03,1387.3C2755.57,1387.3 2720.28,1352.01 2720.28,1308.55" style="fill:rgb(162,131,108);stroke:black;stroke-width:40.06px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.31252,0,0,1.31252,-308.638,-16.3029)">
|
||||
<g transform="matrix(0.89768,0.651933,-0.403893,0.556141,238.03,-727.265)">
|
||||
<rect x="1425.48" y="484.941" width="89.022" height="84.452" style="fill:rgb(159,159,159);stroke:black;stroke-width:33.08px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.89768,0.651933,-0.403893,0.556141,197.08,-865.727)">
|
||||
<rect x="1425.48" y="484.941" width="89.022" height="84.452" style="fill:rgb(159,159,159);stroke:black;stroke-width:33.08px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.61598,0.447308,-0.539035,0.742296,691.088,-327.336)">
|
||||
<path d="M1077.48,376.457C1003.04,358.562 765.282,529.617 765.282,529.617C893.096,265.602 1077.48,260.428 1077.48,260.428L1303.35,260.428L1303.35,463.123L1077.48,463.123C1077.48,463.123 1077.49,395.144 1077.48,376.457Z" style="fill:rgb(159,159,159);stroke:black;stroke-width:36.21px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.566959,0.41175,-0.902303,1.24243,1050.21,-694.215)">
|
||||
<rect x="1425.48" y="484.941" width="89.022" height="84.452" style="fill:rgb(159,159,159);stroke:black;stroke-width:25.58px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(0.464433,-0.649853,-0.649853,-0.464433,1626.97,2547.24)">
|
||||
<g transform="matrix(0.808923,0.587914,-0.587914,0.808923,-731.199,-1371.34)">
|
||||
<path d="M2720.28,1308.55L2720.28,502.62L2877.78,502.62L2877.78,1308.55C2877.78,1352.01 2842.49,1387.3 2799.03,1387.3C2755.57,1387.3 2720.28,1352.01 2720.28,1308.55" style="fill:rgb(162,131,108);stroke:black;stroke-width:40.06px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.31252,0,0,1.31252,-308.638,-16.3029)">
|
||||
<g transform="matrix(0.89768,0.651933,-0.403893,0.556141,238.03,-727.265)">
|
||||
<rect x="1425.48" y="484.941" width="89.022" height="84.452" style="fill:rgb(159,159,159);stroke:black;stroke-width:33.08px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.89768,0.651933,-0.403893,0.556141,197.08,-865.727)">
|
||||
<rect x="1425.48" y="484.941" width="89.022" height="84.452" style="fill:rgb(159,159,159);stroke:black;stroke-width:33.08px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.61598,0.447308,-0.539035,0.742296,691.088,-327.336)">
|
||||
<path d="M1077.48,376.457C1003.04,358.562 765.282,529.617 765.282,529.617C893.096,265.602 1077.48,260.428 1077.48,260.428L1303.35,260.428L1303.35,463.123L1077.48,463.123C1077.48,463.123 1077.49,395.144 1077.48,376.457Z" style="fill:rgb(159,159,159);stroke:black;stroke-width:36.21px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.566959,0.41175,-0.902303,1.24243,1050.21,-694.215)">
|
||||
<rect x="1425.48" y="484.941" width="89.022" height="84.452" style="fill:rgb(159,159,159);stroke:black;stroke-width:25.58px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(0.921987,0,0,0.784138,-5815.57,214.286)">
|
||||
<path d="M8308.84,663.296L8308.84,1439.84C8308.84,1513.63 8257.89,1573.54 8195.14,1573.54L6670.87,1573.54C6608.11,1573.54 6557.17,1513.63 6557.17,1439.84L6557.17,663.296C6557.17,589.509 6608.11,529.604 6670.87,529.604L8195.14,529.604C8257.89,529.604 8308.84,589.509 8308.84,663.296ZM8267.63,663.296C8267.63,616.256 8235.15,578.065 8195.14,578.065L6670.87,578.065C6630.86,578.065 6598.38,616.256 6598.38,663.296L6598.38,1439.84C6598.38,1486.88 6630.86,1525.08 6670.87,1525.08L8195.14,1525.08C8235.15,1525.08 8267.63,1486.88 8267.63,1439.84L8267.63,663.296Z"/>
|
||||
<path d="M8267.63,663.296L8267.63,1439.84C8267.63,1486.88 8235.15,1525.08 8195.14,1525.08L6670.87,1525.08C6630.86,1525.08 6598.38,1486.88 6598.38,1439.84L6598.38,663.296C6598.38,616.256 6630.86,578.065 6670.87,578.065L8195.14,578.065C8235.15,578.065 8267.63,616.256 8267.63,663.296Z" style="fill:rgb(212,255,173);"/>
|
||||
</g>
|
||||
<g transform="matrix(2.32199,0,0,2.32199,-9751.27,891.927)">
|
||||
<text x="4341.55px" y="35.454px" style="font-family:'PTSans-Regular', 'PT Sans', sans-serif;font-size:132.19px;fill:rgb(102,102,102);">{<tspan x="4391.4px " y="35.454px ">{</tspan></text>
|
||||
<text x="4441.25px" y="35.454px" style="font-family:'PTSans-Regular', 'PT Sans', sans-serif;font-size:132.19px;">S<tspan x="4515.56px 4555.1px 4666.55px 4742.17px 4784.89px " y="35.454px 35.454px 35.454px 35.454px 35.454px ">imple</tspan></text>
|
||||
<text x="4856.15px" y="35.454px" style="font-family:'PTSans-Regular', 'PT Sans', sans-serif;font-size:132.19px;fill:rgb(102,102,102);">}<tspan x="4906px " y="35.454px ">}</tspan></text>
|
||||
<g transform="matrix(132.19,0,0,132.19,4951.74,183.374)">
|
||||
</g>
|
||||
<text x="4341.55px" y="183.374px" style="font-family:'PTSans-Bold', 'PT Sans', sans-serif;font-weight:700;font-size:132.19px;">S<tspan x="4433.33px 4512.28px 4599.57px 4663.72px 4727.2px 4819.91px 4880.49px " y="183.374px 183.374px 183.374px 183.374px 183.374px 183.374px 183.374px ">caffold</tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
63
docs/static/img/logo.svg
vendored
63
docs/static/img/logo.svg
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.6 KiB |
Reference in New Issue
Block a user