diff --git a/guides/theming.md b/guides/theming.md index 591954ae9ce2..cf6b9c05f4fc 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -26,6 +26,9 @@ single css file for Angular Material in your app. You can include a theme file directly into your application from `@angular/material/core/theming/prebuilt` +Available pre-built themes: + + If you're using Angular CLI, this is as simple as including one line in your `styles.css` file: ```css @@ -133,3 +136,4 @@ For more details about theming your own components, see [theming-your-components ### Future work * Once CSS variables (custom properties) are available in all the browsers we support, we will explore how to take advantage of them to make theming even simpler. +* More prebuilt themes will be added as development continues. diff --git a/tools/gulp/tasks/docs.ts b/tools/gulp/tasks/docs.ts index 00b0a40bf274..3bb1c07f1b48 100644 --- a/tools/gulp/tasks/docs.ts +++ b/tools/gulp/tasks/docs.ts @@ -24,6 +24,11 @@ const EXAMPLE_PATTERN = //g; // documentation page. Using a RegExp to rewrite links in HTML files to work in the docs. const LINK_PATTERN = /(]*) href="([^"]*)"/g; +// Some docs require maintaining a list of files. +// Supplying a directory as a argument will list the files at that directory. +// Supplying no arguments will list the files at the root of that folder. +const DIRECTORY_PATTERN = //g; + // HTML tags in the markdown generated files that should receive a .docs-markdown-${tagName} class // for styling purposes. const MARKDOWN_TAGS_TO_CLASS_ALIAS = [ @@ -107,10 +112,30 @@ function transformMarkdownFiles(buffer: Buffer, file: any): string { // If the head is not prepended to the replaced value, then the first match will be lost. `${head} href="${fixMarkdownDocLinks(link, file.path)}"` ); - + + /* Replace comments with HTML elements. */ + content = content.replace(DIRECTORY_PATTERN, (match: string, directory: string) => + `
${listFiles(directory,file.path)}
` + ); + return content; } +/** Returns a list of files from a given directory */ +function listFiles(directory: string, filePath: string): string { + // If no directory is supplied, take the directory from the filePath. + if(directory === '') { + directory = .dirname(filePath.base); + } + + // Get all the files in the directory, just store their names in a list. + let files = gulp.src(directory).map((path) => { + return '
  • ' + path.basename() + '
  • '; + }).join(); + + return ''; +} + /** Fixes paths in the markdown files to work in the material-docs-io. */ function fixMarkdownDocLinks(link: string, filePath: string): string { // As for now, only markdown links that are relative and inside of the guides/ directory