This folder contains the documentation site that exhibits the Sage design system. See app.
It also contains the Gem for the Rails component library. See lib/sage_rails.
This relies on the sage-assets and sage-system packages to provide the styles and JavaScript for the base system. A library of corresponding React components can be found in sage-react, and all these pieces are pulled together and distributed via sage-packs for use in Rails applications.
New code may be generated in the system using either a generator or based on some boilerplate code.
The following generators will create the desired aspect in the main Documentation site, Rails component library, and/or the sage-assets style system. Each is documented in the <root directory>/docs/lib/generators directory.
📝 NOTE: All generators in the Sage Design System must be run from within the <root directory>/docs directory.
-
Token -- a SCSS map and function to use for system tokens.
rails generate sage_token <MY_TOKEN_NAME> -
Component -- generates source files, documentation files, and style sheets for a component. See also Rails Component generator below.
rails generate sage_component <MY_COMPONENT_NAME> <attributes...> -
Page -- a page within the documentation system.
rails generate sage_page <MY_PAGE_NAME>
Often components here will need either system JavaScript or a similar React component. See the README within packages/sage-system and packages/sage-react as needed.
In order to build the docker image you must specify a GITHUB_TOKEN as a build arg.
```
docker buildx build --build-arg RAILS_ENV=production --build-arg GITHUB_TOKEN -t sage-docs --load .
```
Running the image:
```
docker run --rm -it -p 3000:3000 -e RAILS_ENV=production -e SECRET_KEY_BASE=foobarbaz -t sage-docs
```
The image requires SSL in production mode. You can use ngrok.io to setup SSL
```
ngrok http 3000
```
You can then access the image running locally via your ngrok domain for verification. Fonts may not work if your domain is not allowed.