material-web/catalog/eleventy.config.cjs
Copybara-Service 1b0461884e Merge pull request #4981 from material-components:catalog-fixes
PiperOrigin-RevId: 567885328
2023-09-23 11:19:40 -07:00

113 lines
3.7 KiB
JavaScript

/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
const litPlugin = require('@lit-labs/eleventy-plugin-lit');
const inlineCss = require('./eleventy-helpers/shortcodes/inline-css.cjs');
const inlineJS = require('./eleventy-helpers/shortcodes/inline-js.cjs');
const playgroundExample = require('./eleventy-helpers/shortcodes/playground-example.cjs');
const minifyHTML = require('./eleventy-helpers/transforms/minify-html.cjs');
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
const pluginTOC = require('eleventy-plugin-nesting-toc');
const permalinks = require('./eleventy-helpers/plugins/permalinks.cjs');
const filterToc = require('./eleventy-helpers/filters/filter-toc.cjs');
const filterSort = require('./eleventy-helpers/filters/filter-sort.cjs');
const mdMarkdown = require('./eleventy-helpers/filters/md-markdown.cjs');
const copyCodeButtonPlugin = require('./eleventy-helpers/plugins/copy-code-button.cjs');
const markdownIt = require('markdown-it');
const { compress } = require('eleventy-plugin-compress');
// dev mode build
const DEV = process.env.NODE_ENV === 'DEV';
// where the JS files are outputted
const jsDir = DEV ? 'lib' : 'build';
// where to output 11ty output
const outputFolder = DEV ? '_dev' : '_prod';
module.exports = function (eleventyConfig) {
// copy folders to the 11ty output folder
eleventyConfig
.addPassthroughCopy({ [`${jsDir}/`]: 'js/' })
.addPassthroughCopy('site/css')
.addPassthroughCopy('site/fonts')
.addPassthroughCopy('site/images')
// Most of the stories files are generated by the wireit script that copies
// the stories files in the source to this directory
.addPassthroughCopy({ 'stories/': 'assets/stories/' })
// These images are generated by the docs copy step in wireit
.addPassthroughCopy('site/components/images')
.addPassthroughCopy('site/theming/images')
.addPassthroughCopy('site/about/images');
// add the lit-ssr plugin
eleventyConfig.addPlugin(litPlugin, {
mode: 'worker',
componentModules: [`./${jsDir}/ssr.js`],
});
// Add this for 11ty's --watch flag
eleventyConfig.addWatchTarget(`./${jsDir}/**/*.js`);
// install shortcodes
inlineCss(eleventyConfig, DEV);
inlineJS(eleventyConfig, DEV, { jsDir });
playgroundExample(eleventyConfig);
// install filters
filterSort(eleventyConfig);
filterToc(eleventyConfig);
// list of our transforms that we want to apply to markdown links.
mdMarkdown(eleventyConfig, [
['../theming/README.md', '/theming/material-theming/'],
['./list', '/components/list'],
[/theming\/README/, '/theming/'],
[/^typography\.md/, '/theming/typography/'],
[/^color\.md/, '/theming/color/'],
[/^color\.md/, '/theming/color/'],
[/^components\//, '/components/button/'],
]);
// install transforms
minifyHTML(eleventyConfig, DEV);
// install code syntax highlighting
eleventyConfig.addPlugin(syntaxHighlight);
const md = markdownIt({
html: true,
breaks: false, // 2 newlines for paragraph break instead of 1
linkify: true,
});
// permalink markdown plugin
permalinks(md);
// copy code button plugin
copyCodeButtonPlugin(md);
eleventyConfig.setLibrary('md', md);
// Add a TOC plugin (implementation is TODO for now)
eleventyConfig.addPlugin(pluginTOC, {
tags: ['h2', 'h3', 'h4'],
wrapper: 'div',
});
eleventyConfig.addPlugin(compress, {
enabled: !DEV,
});
// set output folders and use nunjucks for html templating engine. see
// nunjucks docs and 11ty docs for more info on nunjucks templating
return {
htmlTemplateEngine: 'njk',
markdownTemplateEngine: 'njk',
dir: {
input: 'site',
output: outputFolder,
},
};
};