docs: migrate eleventy config to the root of the project

.eleventy.js

@@ -0,0 +1,157 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+const compress = require("compression");
+const markdownIt = require("markdown-it");
+const markdownItAnchor = require("markdown-it-anchor");
+const markdownItContainer = require("markdown-it-container");
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.setQuietMode(process.env.npm_config_quiet);
+  eleventyConfig.setWatchThrottleWaitTime(100);
+
+  eleventyConfig.addFilter('dump', obj => {
+    const getCircularReplacer = () => {
+      const seen = new WeakSet();
+      return (key, value) => {
+        if (typeof value === "object" && value !== null) {
+          if (seen.has(value)) {
+            return;
+          }
+          seen.add(value);
+        }
+        return value;
+      };
+    };
+
+    return JSON.stringify(obj, getCircularReplacer(), 4);
+  });
+
+  /**
+   * Collections to organize by alphabetical instead of date
+   */
+  const tagsToAlphabetize = [
+    'component'
+  ];
+
+  for (let i = 0; i < tagsToAlphabetize.length; i++) {
+    const tag = tagsToAlphabetize[i];
+
+    eleventyConfig.addCollection(tag, collection => {
+      return collection.getFilteredByTag(tag).sort((a, b) => {
+        if (a.data.title < b.data.title) {
+          return -1;
+        }
+        if (a.data.title > b.data.title) {
+          return 1;
+        }
+        return 0;
+      });
+    });
+  }
+
+  /**
+   * Collections to organize by order instead of date
+   */
+  const tagsToOrderByOrder = [
+    "develop"
+  ];
+
+  for (let i = 0; i < tagsToOrderByOrder.length; i++) {
+    const tag = tagsToOrderByOrder[i];
+
+    eleventyConfig.addCollection(tag, collection => {
+      return collection.getFilteredByTag(tag).sort((a, b) => a.data.order - b.data.order);
+    });
+  }
+
+  eleventyConfig.addWatchTarget("./docs/**/*.{css,md,svg,png}");
+  eleventyConfig.addWatchTarget("./elements/*/{dist,demo,docs}");
+
+  eleventyConfig.addPassthroughCopy("./elements/*/demo/*");
+  eleventyConfig.addPassthroughCopy("./elements/*/dist/*");
+  eleventyConfig.addPassthroughCopy("./elements/*/docs/*");
+  // @TODO: Migrate these to use the preview image in the docs folder
+  eleventyConfig.addPassthroughCopy("./elements/*/*.{jpg,png,svg}");
+
+  eleventyConfig.addPassthroughCopy("./brand");
+  eleventyConfig.addPassthroughCopy("./storybook");
+
+  eleventyConfig.addPassthroughCopy({
+    "./elements/*.json": "docs/_data/"
+  });
+
+  // Check if the components folder needs to be created
+  if(!fs.existsSync(`docs/components/`)) {
+    fs.mkdirSync(`docs/components/`);
+  }
+
+  // This copies the assets for each component into the docs folder
+  glob("elements/*/docs/*", (err, files) => {
+    if (err) throw err;
+
+    files.forEach(file => {
+      const capture = file.match(/elements\/([\w|-]*?)\//);
+      const component = capture[1].replace("pfe-", "");
+      const copyTo = `docs/components/${component}/${path.basename(file)}`;
+
+      // Check if the folder needs to be created
+      if(!fs.existsSync(`docs/components/${component}`)) {
+        fs.mkdirSync(`docs/components/${component}`);
+      }
+
+      // Copy the files for the component to the newly created folder
+      fs.copyFileSync(file, copyTo, (error) => {
+        if (error) throw error;
+        // else console.log(`Copied ${file} to ${copyTo}`);
+      });
+    });
+  });
+
+  let options = {
+    html: true
+  };
+
+  let markdownLib = markdownIt(options);
+  markdownLib.use(markdownItAnchor);
+  markdownLib.use(markdownItContainer, "section", {
+    validate: params => {
+      return params.trim().match(/^section+(.*)$/);
+    },
+    render: (tokens, idx) => {
+      let m = tokens[idx].info.trim().match(/^section+(.*)$/);
+      let color = m && m[1].trim() === "header" ? "" : "lightest";
+      let size = m && m[1].trim() === "header" ? "" : "small";
+      let classes = m && m[1].trim() === "header" ? `class="header"` : "";
+
+      if (tokens[idx].nesting === 1) {
+        return `<pfe-band ${size ? `size="${size}"` : ""} color="${color}"${classes} use-grid>`
+      } else {
+        return `</pfe-band>\n`;
+      }
+    }
+  });
+
+  eleventyConfig.setLibrary("md", markdownLib);
+
+  return {
+    dir: {
+      input: "./docs",
+    },
+    setBrowserSyncConfig: {
+      open: "local",
+      server: {
+        baseDir: "./_site",
+        middleware: [compress()]
+      }
+    },
+    templateFormats: [
+      "html",
+      "md",
+      "css",
+      "js",
+      "svg",
+      "png"
+    ]
+  }
+};

.gitignore

@@ -24,6 +24,7 @@ local.log
 
 # Storybook
 .storybook_out
+storybook/
 
 test/.wct-kludge
 
@@ -43,11 +44,10 @@ test/.wct-kludge
 *.swp
 
 # Documentation
-/docs/_site
+/_site
 /docs/components/*/
-/docs/node_modules/
 /docs/examples/index.html
-/docs/storybook
+/docs/_data/*.json
 
 # E2E
 /test/vrt-snapshots/

README.md

@@ -22,12 +22,9 @@ A Yeoman generator is included for creating web components that meet these goals
 git clone [email protected]:patternfly/patternfly-elements.git
 cd patternfly-elements
 npm install # this will take a while due to lerna bootstrap
-npm run build
-npm run storybook
+npm run dev -- --storybook --docs # This will build and spin up a local server with storybook preview and documentation
 ```
 
-The storybook script will launch the interactive demo pages.
-
 ### Additional dependencies
 If you will be doing any release work, it is recommended that you install Hub.
 
@@ -36,7 +33,7 @@ To install on a MacOS: `brew install hub`.
 For other systems, please see documentation:
     - [Hub](https://hub.github.com/)
 
-_Note: You will need to use [Node](https://nodejs.org/en/) v10 or higher._
+_Note: You will need to use [Node](https://nodejs.org/en/) v12 or higher._
 
 ## Command Line Helper Scripts
 Many commands have an optional argument of space-separated component name(s), if left off it will assume it should run on all components. These should run from the project root.
@@ -60,10 +57,7 @@ The build command can accept a few flags; for more details, use `npm run build -
 npm start
 
 # Builds, sets up the watch, and runs server process to preview files
-npm run dev
-
-# Runs storybook preview tool
-npm run storybook
+npm run dev [component-name(s)]
 ```
 
 ### Testing
@@ -91,17 +85,17 @@ npm run pr
 ### Documentation site
 View the documentation locally
 ```shell
-npm run start-docs
+npm run start:docs
 ```
 
 Build the documentation site
 ```shell
-npm run build-docs
+npm run build:docs
 ```
 
 ## Support
 
-Though we have tested and verified general usability within these frameworks, PFE makes no guarantees about compatibility within specific sites & applications. Please test accordingly.
+Though we have tested and verified general usability within these frameworks, PatternFly Elements makes no guarantees about compatibility within specific sites and applications. Please test accordingly.
 
 
 ## Stay informed

docs/_data/meta.js

@@ -0,0 +1,3 @@
+module.exports = {
+    env: process.env.ELEVENTY_ENV
+};

docs/_includes/_foot.html

@@ -0,0 +1,55 @@
+{% for c in collections.component %}
+  {% if page.url == c.url %}
+    {% assign component = c %}
+  {% endif %}
+{% endfor %}
+  <footer>
+    <pfe-band color="darkest">
+      <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
+        <div>
+          <h3>Community</h3>
+          <ul>
+            <li>
+              <a href="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/patternfly/patternfly-elements">GitHub</a>
+            </li>
+            <li>
+              <a href="https://github.com/patternfly/patternfly-elements/blob/master/CONTRIBUTING.md">Contributing</a>
+            </li>
+            <li>
+              <a href="https://github.com/patternfly/patternfly-elements/blob/master/CODE_OF_CONDUCT.md">Code of
+                conduct</a>
+            </li>
+            <li>
+              <a href="https://www.redhat.com/mailman/listinfo/patternfly-elements-contribute">Contributors email
+                list</a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h3>Resources</h3>
+          <ul>
+            <li>
+              <a href="/get-started">Documentation</a>
+            </li>{% if page.url == component.url %}
+            <li>
+              <a href="/elements/{{ component.data.package }}/demo">Demo page</a>
+            </li>
+            <li>
+              <a href="/storybook/?path=/story/{{ component.data.title | downcase }}--{{ component.data.package }}">Storybook</a>
+            </li>{% else %}
+            <li>
+              <a href="/storybook">Storybook</a>
+            </li>{% endif %}
+            <li>
+              <a href="https://medium.com/patternfly-elements">Medium</a>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <a href="https://www.netlify.com">
+            <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify">
+          </a>
+        </div>
+      </div>
+    </pfe-band>
+  </footer>