add unlisted and unpublished support (#919)

* add unlisted and excludeFromSearch filters

* rename unlisted to unreleased, rename excludeFromSearch to unlisted

* add notes for unlisted and unpublished

* prettier

* make unused patterns unpublished

* unreleased -> unpublished

* unreleased -> unpublished

* update contributing

docs/.eleventy.js

@@ -153,6 +153,15 @@ export default function (eleventyConfig) {
     ]),
   );
 
+  eleventyConfig.addPreprocessor('unpublished', '*', (data, content) => {
+    if (data.unpublished && process.env.ELEVENTY_RUN_MODE === 'build') {
+      // Exclude "unpublished" pages from final builds.
+      return false;
+    }
+
+    return content;
+  });
+
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({

docs/_includes/head.njk

@@ -1,7 +1,7 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="{{ description }}">
-{% if noindex %}<meta name="robots" content="noindex">{% endif %}
+{% if noindex or unlisted %}<meta name="robots" content="noindex">{% endif %}
 
 <title>{{ title }}</title>
 

docs/_utils/search.js

@@ -24,9 +24,23 @@ export function searchPlugin(options = {}) {
   };
 
   return function (eleventyConfig) {
-    const pagesToIndex = [];
+    const pagesToIndex = new Map();
+
+    eleventyConfig.addPreprocessor('exclude-unlisted-from-search', '*', function (data, content) {
+      if (data.unlisted) {
+        // no-op
+      } else {
+        pagesToIndex.set(data.page.inputPath, {});
+      }
+
+      return content;
+    });
 
     eleventyConfig.addTransform('search', function (content) {
+      if (!pagesToIndex.has(this.page.inputPath)) {
+        return content;
+      }
+
       const doc = parse(content, {
         blockTextElements: {
           script: false,
@@ -42,7 +56,7 @@ export function searchPlugin(options = {}) {
         doc.querySelectorAll(selector).forEach(el => el.remove());
       });
 
-      pagesToIndex.push({
+      pagesToIndex.set(this.page.inputPath, {
         title: collapseWhitespace(options.getTitle(doc)),
         description: collapseWhitespace(options.getDescription(doc)),
         headings: options.getHeadings(doc).map(collapseWhitespace),
@@ -65,7 +79,7 @@ export function searchPlugin(options = {}) {
         this.field('h', { boost: 10 });
         this.field('c');
 
-        for (const page of pagesToIndex) {
+        for (const [_inputPath, page] of pagesToIndex) {
           this.add({ id: index, t: page.title, h: page.headings, c: page.content });
           map[index] = { title: page.title, description: page.description, url: page.url };
           index++;

docs/docs/components/cheatsheet/index.njk

@@ -1,7 +1,7 @@
 ---
 title: Component Cheatsheet
 layout: docs
-unlisted: true
+unpublished: true
 ---
 
 <style>

docs/docs/components/code-demo.md

@@ -3,6 +3,7 @@ title: Code Demo
 description: Code demos can be used to render code examples as inline live demos.
 tags: component
 isPro: true
+unpublished: true
 ---
 
 ```html {.example}
@@ -209,4 +210,4 @@ It goes without saying that this list is a rough plan and subject to change.
 - Tabbed layout
 - Provide a way to display CSS and JS separately
 - Provide a way to customize the playground used (currently it is hardcoded to CodePen)
-- Provide a way to customize the buttons shown
+- Provide a way to customize the buttons shown

docs/docs/components/viewport-demo.md

@@ -3,6 +3,7 @@ title: Viewport Demo
 description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
 tags: component
 isPro: true
+unpublished: true
 ---
 
 ```html {.example}
@@ -67,4 +68,4 @@ It goes without saying that this list is a rough plan and subject to change.
 - Non-linear zoom scale
 - Extend to general content, not just iframes
 - Styles for mobile and tablet frames and an attribute to switch between them
-- Automatic iframe height
+- Automatic iframe height

docs/docs/patterns/blog.md

@@ -1,7 +1,7 @@
 ---
 title: Blog
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/business.md

@@ -1,7 +1,7 @@
 ---
 title: Business
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/ecommerce/store-navigation.md

@@ -1,7 +1,7 @@
 ---
 title: Store Navigation
 description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/education.md

@@ -1,7 +1,7 @@
 ---
 title: Business
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/entertainement.md

@@ -1,7 +1,7 @@
 ---
 title: Entertainment
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/membership.md

@@ -1,7 +1,7 @@
 ---
 title: Membership
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/news.md

@@ -1,7 +1,7 @@
 ---
 title: News
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/non-profit.md

@@ -1,7 +1,7 @@
 ---
 title: Non-profit
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/portfolio.md

@@ -1,7 +1,7 @@
 ---
 title: Portfolio
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/patterns/product-landing.md

@@ -1,7 +1,7 @@
 ---
 title: Product Landing
 description: TODO
-unlisted: true
+unpublished: true
 isPro: true
 ---
 

docs/docs/resources/contributing.md

@@ -150,6 +150,27 @@ To link to a GitHub issue, PR, or discussion, use the following syntax.
 [#1234]
 ```
 
+### Frontmatter
+
+There's a number of frontmatter properties for doing different things in the Web Awesome documention.
+
+For example, to only show a page in development, use the `unpublished: true` key / value pair.
+
+```md
+---
+unpublished: true
+---
+```
+
+To build a page, but not add it to any search indexes and collections so they don't appear in the sidebar, use `unlisted: true, eleventyExcludeFromCollections: true` key / value pairs.
+
+```md
+---
+unlisted: true
+eleventyExcludeFromCollections: true
+---
+```
+
 ## Best Practices
 
 The following is a non-exhaustive list of conventions, patterns, and best practices we try to follow. As a contributor, we ask that you make a good faith effort to follow them as well. This ensures consistency and maintainability throughout the project.
@@ -395,4 +416,4 @@ or for hydrated rendering only:
 
 ```bash
 SSR_ONLY="true" npm run test
-```
+```

docs/docs/themes/demo/index.njk

@@ -9,6 +9,7 @@ eleventyExcludeFromCollections: true
 override:tags: []
 eleventyComputed:
   forceTheme: "{{ theme.fileSlug if theme.fileSlug !== 'custom' else 'default' }}"
+unlisted: true
 ---
 {% set isPro = theme.data.isPro %}
 {% set status = theme.data.status %}