Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/empress/field-guide
SEO friendly static site implementation of a design system documentation site
https://github.com/empress/field-guide
Last synced: about 1 month ago
JSON representation
SEO friendly static site implementation of a design system documentation site
- Host: GitHub
- URL: https://github.com/empress/field-guide
- Owner: empress
- License: mit
- Created: 2019-06-12T13:29:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T16:31:13.000Z (5 months ago)
- Last Synced: 2024-11-07T21:20:35.320Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://field-guide.netlify.app/
- Size: 6.06 MB
- Stars: 17
- Watchers: 5
- Forks: 7
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Field Guide
This project is designed to be a fully-functional, static site implementation of a design system (or styleguide) documentation site. It is intended to be installed in your Ember Addon and then can be deployed statically on AWS, Netlify or any other static site deployment system.
If you want an example of the this "in production" then check out the new [redesign branch of the Ember Styleguide](https://deploy-preview-145--ember-styleguide.netlify.com/).
You do not need to be a web **developer** to be able to use this system. You just write markdown files and the rest of the work is performed by EmberJS' build system.
## Super Quick Start
If you want to get your new Field Guide deployed on [Netlify](https://www.netlify.com/) in less than a minute then you can just click this button:
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/empress/field-guide-netlify-default-template)
If you want to instead work with your Field Guide locally before deploying then you can continue reading
## Quick Start
```sh
npm init ember-addon super-design-systemcd super-design-system
# you can replace the template with the one you want to use
npx ember install field-guide field-guide-default-template
```It will ask you if you want to update the `index.html` file and you should say yes 👍 It will also create a `docs` folder with some example files to get you started.
If you want to see the documentation site running on your local machine just run `npm start` and you will be able to navigate to [http://localhost:4200](http://localhost:4200) to see the docs in action.
To build the static output directory, run the **standard** build process for a production Ember application:
```
npx ember build -prod
```This will generate a fully static output of your site in the `dist` folder.
## Usage
### Configuring
The default blueprint will update your `tests/dummy/config/environment.js` file with some configuration keys that should be updated. To see what can be configured here is an example of the current Ember Styleguide config:
```javascript
let ENV = {// leave all the other config intact and update the following key
'field-guide': {
name: 'Ember', // product name
logo: '/ember-logo.png', // if you don't have a logo it will create one for you from the product name
copyright: 'Ember Field Guide is designed to document the [ember-styleguide](https://github.com/ember-learn/ember-styleguide) project. For more information view the readme',
social: [{
name: 'github',
title: 'Ember Styleguide - Repository',
link: 'https://github.com/ember-learn/ember-styleguide'
}, {
name: 'twitter',
title: 'Ember Styleguide - Twitter',
link: 'https://twitter.com/emberjs'
}]
}
}
```**Note:**
- The images like `/ember-logo.png` will need to be in your `tests/dummy/public` folder in your addon.
- You can add as many social links as you want in the `social` array. However, remember to add a logo image in your `public` folder for the custom social links with a name matching the `name` field in your link object. If you are using `field-guide-default-template`, the logos for `github` and `twitter` links will be included by the template for you.## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).