glyder v2.0.3
Glyder
Glyder is a flexible markdown-based style guide generator with support for code previews.
Once installed, the glyder command can be used to transform any directory of Markdown files into a website.
Installation
Glyder can be installed with plain ol' NPM:
npm install -g glyderIf you'd like to install it local to a project, use the --save-dev flag:
npm install --save-dev glyderPlease note that if you install glyder local to a project you will need to use the npx command with the glyder binary. For example:
npx glyder --helpConfiguration
Configuration is stored in a glyder.json file stored in the root of your Glyder project.
Here are the options, with default values shown:
{
"input": "src", // Directory where markdown and other source files are stored
"output": "build", // Directory where build files are generated (HTML, etc.)
"tmp": ".tmp", // Directory for temp files generated by glyder command
"logo": "/glyder-logo.svg", // Relative URL for the logo of your project
"edit": null, // Edit URL template. Use this format for GitHub:
// "http://github.com/username/repository/edit/master/%filename%"
"copyright": "© %Y Your Company Here" // Copyright for your project filtered through strftime
"sections": [ // Sections for the navigation
{ "name": "Guidelines", "key": "guidelines" },
{ "name": "Components", "key": "components" }
],
"packages": [ // Package sets for code previews
{
name: 'oxygen',
styles: [ 'http://oxygencss.com/styles/site.css' ],
scripts: [ 'http://oxygencss.com/styles/site.js' ]
}
]
}Composing articles
Articles are created by putting markdown files in your source directory. By default this is src in the root of your project, but it can be configured in the Glyder configuration file (glyder.json). All markdown files must use the ".md" file extension.
Glyder articles must include front matter. By default the title key is the only required frontmater option:
---
title: My article
---
Markdown contents hereFrontmater options include:
| Key | Description |
|---|---|
| title | The title of the article. This appears as an H1 at the top of the page. |
| section | The section in the side navigation where this article should appear. Sections are reference by key and can be declared in your Glyder config. |
| index | Used to order the navigation within a section in the sidebar. Lower values are sorted first. And then by the title of the article. By default articles have a index value of 100. |
| noHeading | Do not output the title. Instead rely on the author to include it in the Markdown portion of the article. |
| redirectTo | Redirect to a specific URL. Implemented with an HTML meta refresh tag. |
Development server
To bring up a lightweight developement server to preview your project, use the serve command:
glyder serveThis will launch a preview server here:
You must use the glyder command from the root directory of the project.
Building HTML
To generate a site in the build directory (specified in the config), use the build command:
glyder build Made with Gulp
Glyder is really a frontend for a bunch of Gulp tasks that combine to make a flexible style guide generator. If you are familiar with Gulp, you should find it fairly easy to contribute.
Acknowledgements
Originally based on code from John Long's styleguide repo with improvements by Michael Lee.