From 4c60f2de64796818fb0cf91eff01064f82023ecf Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Tue, 5 Dec 2023 15:23:24 -0800
Subject: [PATCH] doc(#513): Update eleventy-plugin documentation to have
 options

---
 packages/website/pages/eleventy-plugin.md | 60 ++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/packages/website/pages/eleventy-plugin.md b/packages/website/pages/eleventy-plugin.md
index 5a5356a8..9696fdcf 100644
--- a/packages/website/pages/eleventy-plugin.md
+++ b/packages/website/pages/eleventy-plugin.md
@@ -26,14 +26,15 @@ const tybaltPlugin = require('@tybalt/eleventy-plugin');
 
 module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(tybaltPlugin, {
-        components: ['./components'],
+        pattern: './components',
+        outfile: 'tybalt-out.js'
     });
 };
 ```
 
 ## Usage
 
-The plugin makes the components available for use on all of your pages. If you have a component defined like this
+The plugin makes your component library available for use on all of your pages. If you have a component defined like this
 
 ```javascript
 defineComponent({
@@ -41,6 +42,9 @@ defineComponent({
     props: {
         value: {},
     },
+    render({ value }) {
+        return html`got value: ${value}`;
+    })
 });
 ```
 
@@ -49,3 +53,55 @@ You can use it on your index.html or page.md like any other html element
 ```html
 <foo-bar-baz value="value"></foo-bar-baz>
 ```
+
+## Options
+
+The plugin takes a pair of options to configure its usage
+
+### outfile
+
+This is the name of the file the plugin will generate that contains your component library. It defaults to `tybalt-out.js`, but you can configure it to be any valid filename. For instance, if you set this option as follows
+
+```javascript
+const tybaltPlugin = require('@tybalt/eleventy-plugin');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(tybaltPlugin, {
+        outfile: 'index.js'
+    });
+};
+```
+
+The generated view will include a script tag as follows
+
+```html
+<script src="/index.js"></script></body></html>
+```
+
+And the file loaded by the browser and generated by the build will be called `index.js`, rather than `tybalt-out.js`.
+
+### pattern
+
+This is the pattern for the component definitions that will be included in your component library. Defaults to `./components`, which corresponds to a file tree as follows
+
+```shell
+└── components
+    ├── component-one.js
+    ├── component-two.js
+    └── component-three.js
+```
+
+where each component is a single file. If you'd prefer to have multiple files in a single directory, you could set this to `./components/**/*.component.ts`, to treat all files ending in `.component.ts` as entry points, which corresponds to a file tree as follows
+
+```shell
+├── components
+│   ├── ComponentOne
+│   │   ├── one.component.ts
+│   │   ├── one.test.ts
+│   │   └── one.css
+│   ├── ComponentTwo
+│   │   └── two.ts
+│   └── ComponentThree
+│       ├── header.ts
+│       └── header.css
+```