This repo is no longer maintained. Documentation for the latest version of nasawds can be found here.
This repo includes code and documentation for the NASA Web Design System website. For information on the Design System (components) themselves, please visit nasawds.
Note that this README includes steps to pull the latest version of the Design System into your local instance of the documentation.
The NASA Web Design System documentation is built using Jekyll for the file framework, gulp for task management, and the node module for the Design System.
You will need to have the following installed on your machine before following the commands below:
- Ruby v2.2.2+, Installation guides
- Node v4.2.3+, Installation guides
- Bundler v1.12.3+, Installation guides
- Chrome v59 or higher (v60 if on Windows)
Some parts of the documentation are built using gulp.
To work on the site, switch to your local copy of the repository in terminal then run the following command to install project dependencies:
npm installNow that all of your dependencies are installed, you can run your local server by running the following command:
npm startGo to 127.0.0.1:4000 in your browser — you should be viewing a local instance of nasawds-site.
Here are a few other utility commands you may find useful:
-
npm run clean: Cleans out copied-over dependency assets. -
npm run lint: Runseslintandsass-lintagainst JavaScript and Sass files. -
npm test: Runs all tests and linters. -
npm run watch: Runs a series of commands that watches for any changes in both the Design System node module and the root level asset folders in this repo.
npm start -- --incremental: Runs your local server with incremental regeneration enabled to greatly improve build time. Use instead ofnpm start.
Sometimes you will want to use the latest version of the nasawds repo. Follow these steps to do so:
- Clone the latest version of the
nasawdsrepo. - Run
npm installto install the dependencies required for the package in thenasawdsdirectory. - Run
npm run buildto create the built version of the Design System in thenasawdsdirectory. - Run
npm linkin the root level of thenasawdsdirectory on your local machine. - Run
npm link nasawdsin the root level of thenasawds-sitedirectory on your local machine. - Set the
FRACTAL_BASE_URLenv var to the running fractal instance fornasawds. In your terminal window in thenasawds-sitedirectory, enterexport FRACTAL_BASE_URL="http://127.0.0.1:3000". - Run
npm run watchin both project directories to have changes automatically built and compiled on changes to any asset files. - In a new terminal window, run
npm startin thenasawds-sitedirectory to start the Jekyll server locally.
You are now using the latest version of the Design System via your cloned version on your local machine. To stop using this version, type npm unlink nasawds from the root level of the nasawds-site directory.
The Design System uses the fractal design system builder to organize and document the components. This documentation site pulls the components from fractal to showcase them on the site. This is done with a custom fractal_component Jekyll tag, which takes the full name of the fractal component as a parameter.
Some of the content on the documentation site is dynamically fetched from
GitHub. If you want to ensure that its API won't rate-limit you, you
may want to
create an access token
and assign it to your GITHUB_ACCESS_TOKEN environment variable.
The dynamic content is stored in the .jekyll_get_cache directory and
won't be re-fetched once it's cached there. However, this means that your
data can get stale over time, so if you want to ensure that your site
is using the very latest data, you'll want to clear the cache by running:
rm -rf .jekyll_get_cache