@docfy/ember 0.4.2 → 0.4.6

package/README.md

@@ -4,9 +4,9 @@ Ember integration with Docfy.
 
 ## Compatibility
 
-* Ember.js v3.16 or above
-* Ember CLI v2.13 or above
-* Node.js v10 or above
+- Ember.js v3.16 or above
+- Ember CLI v2.13 or above
+- Node.js v10 or above
 
 ## Installation
 

package/addon/services/docfy.ts

@@ -20,10 +20,25 @@ export default class DocfyService extends Service {
     return this.findByUrl(this.router.currentURL);
   }
 
-  findNestedChildrenByName(name: string): NestedPageMetadata | undefined {
-    return this.nested.children.find((item) => {
+  findNestedChildrenByName(
+    scope: string,
+    previousNested: NestedPageMetadata | undefined | null = null
+  ): NestedPageMetadata | undefined {
+    if (previousNested === null) {
+      previousNested = this.nested;
+    }
+    const parts = scope.split('/');
+    const name = parts.shift();
+
+    const foundScope = previousNested?.children.find((item) => {
       return item.name === name;
     });
+
+    if (parts.length > 0) {
+      return this.findNestedChildrenByName(parts.join('/'), foundScope);
+    }
+
+    return foundScope;
   }
 
   findByUrl(url: string, scopeByNestedName?: string): PageMetadata | undefined {

package/docs/components/docfy-demo.md

@@ -6,7 +6,6 @@ title: <DocfyDemo>
 
 # {{"<DocfyDemo>"}}
 
-
 This component is used internally to render demos. It's not meant to be used directly,
 although that's possible. The scope of what you want to understand is the CSS
 classes such that you can style the parts of the demo component yourself.
@@ -16,7 +15,6 @@ Make sure to look at [writing demos](../writing-demos.md), so you can understand
 Below is an example of how styling could look like. It uses
 [TailwindCSS](https://tailwindcss.com/) and [PostCSS Nested](https://github.com/postcss/postcss-nested).
 
-
 ```css
 .docfy-demo__example {
   @apply p-4 border rounded-t;

package/docs/components/docfy-link.md

@@ -19,14 +19,13 @@ Ember doesn't have support for anchors.
 > markdown files. It gives a pleasant User Experience because it can use the
 > Ember Routing to make the page transition, removing the need for a full-page reload.
 
-
 Below you can see a simple example of this component; however, you can see more
 of its usage throughout the documentation.
 
 # API
 
 | Argument       | Description                                     | Type                    | Default Value |
-|----------------|-------------------------------------------------|-------------------------|---------------|
+| -------------- | ----------------------------------------------- | ----------------------- | ------------- |
 | `@to`          | The URL to link                                 | `string`                |               |
 | `@anchor`      | An anchor                                       | `string` \| `undefined` |               |
 | `@activeClass` | The classes to be added when the link is active | `string` \| `undefined` |               |

package/docs/components/docfy-output-demo/edit-page.md

@@ -1,6 +1,7 @@
 ---
 order: 3
 ---
+
 # Edit this page
 
 This is another example using `@fromCurrentURL`, but here we build a "edit this

package/docs/components/docfy-output-demo/on-this-page.md

@@ -1,6 +1,7 @@
 ---
 order: 2
 ---
+
 # On this page
 
 In this example, we are using the option `@fromCurrentURL`. It tells the component
@@ -11,7 +12,6 @@ can render their child for subheadings and their sub-subheadings. The depth of
 headings available here is default to 6 but can be changed using the configuration
 option `tocMaxDepth`.
 
-
 ```hbs template
 <DocfyOutput @fromCurrentURL={{true}} as |page|>
   <div class="mb-4 font-medium">

package/docs/components/docfy-output-demo/sidebar.md

@@ -1,6 +1,7 @@
 ---
 order: 1
 ---
+
 # Sidebar Navigation
 
 In this example, we are filtering the `NestedPageMetadata` by the scope name `docs`.
@@ -42,4 +43,3 @@ more deep into the tree or more shadow.
   </ul>
 </DocfyOutput>
 ```
-

package/docs/components/docfy-output-demo/top-nav.md

@@ -8,7 +8,6 @@ Here is another example that builds a top nav that could be used for the entire
 application. It will link to any top-level pages as well as to the first page of
 every child.
 
-
 ```hbs template
 <DocfyOutput @type="nested" as |node|>
   <ul>

package/docs/components/docfy-output.md

@@ -9,7 +9,6 @@ title: <DocfyOutput>
 This component exposes some of the result data from the build that you can use
 to render, for example, a sidebar navigation, "on this page" section, and more.
 
-
 Depending on the arguments you pass to the component, the output could be one of
 the following values:
 
@@ -28,7 +27,7 @@ This component has a few different options that are used to filter what the
 returning value should be. Here is the arguments this component accepts.
 
 | Argument          | Description                                           | Type                     | Default Value |
-|-------------------|-------------------------------------------------------|--------------------------|---------------|
+| ----------------- | ----------------------------------------------------- | ------------------------ | ------------- |
 | `@type`           | If the result should be a flat list or nested         | `'flat'` \| `'nested'`   | `'nested'`    |
 | `@fromCurrentURL` | If the result should be filtered from the current URL | `boolean` \| `undefined` |               |
 | `@url`            | Find the page definition for the given URL            | `string` \| `undefined`  |               |

package/docs/components/docfy-previous-and-next-page.md

@@ -16,6 +16,6 @@ would prevent linking to a page in tutorials from a documentation page.
 
 # API
 
-| Argument       | Description                    | Type                    | Default Value |
-|----------------|--------------------------------|-------------------------|---------------|
-| `@scope`       | Filter links by a scope name   | `string` \| `undefined` |               |
+| Argument | Description                  | Type                    | Default Value |
+| -------- | ---------------------------- | ----------------------- | ------------- |
+| `@scope` | Filter links by a scope name | `string` \| `undefined` |               |

package/docs/configuration.md

@@ -1,10 +1,11 @@
 ---
 order: 2
 ---
+
 # Configuration
 
 Docfy has a set of options you can configure and might have read about them
-[here](../../../../docs/configuration.md). You might have been wondering how
+[here](../../../docs/configuration.md). You might have been wondering how
 to set these options in the Ember app context.
 
 The Docfy integration with Ember reads a file named `.docfy-config.js` from the
@@ -24,10 +25,7 @@ const codeImport = require('remark-code-import');
 
 module.exports = {
   remarkPlugins: [
-    [
-      autolinkHeadings,
-      { behavior: 'wrap' }
-    ],
+    [autolinkHeadings, { behavior: 'wrap' }],
     codeImport,
     highlight
   ],

package/docs/index.md

@@ -8,7 +8,6 @@ title: Getting Started
 Let's get started by creating a new Ember app and adding Docfy to it. For adding
 to existing apps, jump to the step after creating the app.
 
-
 ## Generate the App
 
 There isn't anything special here; just create the ember app and remove the
@@ -45,8 +44,8 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function() {
-  addDocfyRoutes(this)
+Router.map(function () {
+  addDocfyRoutes(this);
 });
 ```
 
@@ -103,7 +102,7 @@ for building design systems that use the styles from your design in your docs.
 We can add a `docs` template that will be used when rendering any documentation
 page because of Ember's routing and templating patterns.
 
-In your `app/templates/docs.hbs` add the follwoing:
+In your `app/templates/docs.hbs` add the following:
 
 ```hbs
 <DocfyOutput @scope="docs" as |node|>
@@ -128,7 +127,6 @@ the simplest navigation component we can build, ignoring any nested sections
 you might define. You can learn more about these components and their capabilities
 in their respective documentation page.
 
-
 ## Add Previous and Next Page Links
 
 Documentation sites usually have a previous and next page link. Docfy provides a component that gives you the ability to add this feature.

package/docs/writing-demos-demo/demo1.md

@@ -13,6 +13,6 @@ This is my Demo: <DocfyLink @to={{this.url}}>My Link</DocfyLink>
 import Component from '@glimmer/component';
 
 export default class MyDemo extends Component {
-  url = '/docs'
+  url = '/docs';
 }
 ```

package/docs/writing-demos.md

@@ -1,6 +1,7 @@
 ---
 order: 3
 ---
+
 # Writing Demos
 
 Docfy has a concept of "demo" markdown files. It allows you to write code in
@@ -18,6 +19,7 @@ template only components by only specifying the HBS template.
 Below you can see how a demo markdown file looks like.
 
 ```md file=writing-demos-demo/demo1.md
+
 ```
 
 The demo will be injected into the owner file as a new section called "Examples";
@@ -44,11 +46,11 @@ users can see the code.
 
 Below is an example of how it works:
 
-~~~md
+````md
 ```hbs preview-template
 Click in the link to navigate to the home page: <DocfyLink @to="/">Home</DocfyLink>
 ```
-~~~
+````
 
 And here you can see how it looks like when rendered:
 

package/dummy-docs/README.md

@@ -5,11 +5,14 @@ This project is on GitHub.
 ![GitHub](./github-icon.png)
 
 ## h2 Heading
+
 ### h3 Heading
+
 #### h4 Heading
+
 ##### h5 Heading
-###### h6 Heading
 
+###### h6 Heading
 
 ## Paragraphs
 
@@ -19,20 +22,18 @@ I think I'll use it to format all of my documents from now on.
 
 "Smartypants, double quotes" and 'single quotes'
 
-
 ## Emphasis
 
 **This is bold text**
 
-__This is bold text__
+**This is bold text**
 
-*This is italic text*
+_This is italic text_
 
 _This is italic text_
 
 ~~Strikethrough~~
 
-
 ## Blockquotes
 
 > Dorothy followed her through many of the beautiful rooms in her castle.
@@ -43,24 +44,23 @@ _This is italic text_
 >
 > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
 
-
 ### Nested Blockquotes
 
 > Dorothy followed her through many of the beautiful rooms in her castle.
 >
->> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
+> > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
 
 ## Lists
 
 Unordered
 
-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
+- Create a list by starting a line with `+`, `-`, or `*`
+- Sub-lists are made by indenting 2 spaces:
   - Marker character change forces new list start:
-    * Ac tristique libero volutpat at
-    + Facilisis in pretium nisl aliquet
+    - Ac tristique libero volutpat at
+    * Facilisis in pretium nisl aliquet
     - Nulla volutpat aliquam velit
-+ Very easy!
+- Very easy!
 
 Ordered
 
@@ -68,16 +68,14 @@ Ordered
 2. Consectetur adipiscing elit
 3. Integer molestie lorem at massa
 
-
-1. You can use sequential numbers...
-1. ...or keep all the numbers as `1.`
+4. You can use sequential numbers...
+5. ...or keep all the numbers as `1.`
 
 Start numbering with offset:
 
 57. foo
 1. bar
 
-
 ## Code
 
 Inline `code`
@@ -89,7 +87,6 @@ Indented code
     line 2 of code
     line 3 of code
 
-
 Block code "fences"
 
 ```
@@ -98,7 +95,7 @@ Sample text here...
 
 Syntax highlighting
 
-``` js
+```js
 var foo = function (bar) {
   return bar++;
 };
@@ -108,30 +105,28 @@ console.log(foo(5));
 
 ## Tables
 
-| Option | Description |
-| ------ | ----------- |
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
 | data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |
 
 Right aligned columns
 
-| Option | Description |
-| ------:| -----------:|
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
-
+| Option |                                                               Description |
+| -----: | ------------------------------------------------------------------------: |
+|   data | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|    ext |                                      extension to be used for dest files. |
 
 ## Links
 
 [link text](http://dev.nodeca.com)
 
-[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
 
 Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
-
 ## Images
 
 ![Minion](https://octodex.github.com/images/minion.png)
@@ -142,4 +137,4 @@ Like links, Images also have a footnote style syntax
 
 With a reference later in the document defining the URL location:
 
-[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+[id]: https://octodex.github.com/images/dojocat.jpg 'The Dojocat'

package/dummy-docs/introduction.md

@@ -23,7 +23,7 @@ Byblis vobisque me venerisque possem **una** nihil volui desiderioque quam
 parilique quosque victor contingere urbem monendo. Meae est precor moenibus.
 
 1. Suis cum ille
-3. Recipit precor in opus quam Philyreia potest
+2. Recipit precor in opus quam Philyreia potest
 
 ```js
 import Docfy from '@docfy/core';

package/dummy-docs/packages/core/helpers/genereate-flat-output.md

@@ -5,7 +5,6 @@ subcategory: helpers
 
 # genereateFlatOutput
 
-
 Lorem markdownum animaeque obsedit adversam, saevi sed resupina tenuesque levius
 tenenti utque. Cornibus et opes crudelia primus procul alvum exit: dum frondes!
 Cornibus e, putat procul nostro erat cunctantem munus inventus quod.

package/dummy-docs/packages/ember/components/docfy-link-demo/demo1.md

@@ -21,6 +21,6 @@ This is a cool feature.
 import Component from '@glimmer/component';
 
 export default class MyDemo extends Component {
-  url = '/docs/ember/'
+  url = '/docs/ember/';
 }
 ```

package/dummy-docs/packages/ember/components/docfy-link-demo/demo2.md

@@ -9,8 +9,7 @@ I can use markdown here.
 - Item 1
 - Item 2
 
-*Super Cool*
-
+_Super Cool_
 
 ```hbs template
 <DocfyLink @to="/" class="font-bold" data-test-id="demo-2">

package/dummy-docs/packages/ember/components/docfy-output.md

@@ -9,7 +9,6 @@ Lorem markdownum animaeque obsedit adversam, saevi sed resupina tenuesque levius
 tenenti utque. Cornibus et opes crudelia primus procul alvum exit: dum frondes!
 Cornibus e, putat procul nostro erat cunctantem munus inventus quod.
 
-
 ## Example of "On this page"
 
 ```hbs

package/dummy-docs/packages/ember/demo/my-ember-demo.md

@@ -0,0 +1,3 @@
+```hbs template
+demo for ember folder
+```

package/dummy-docs/packages/ember/index.md

@@ -2,7 +2,6 @@
 
 This is a simple markdown
 
-
 Where are a lot of cool features here. One of them is to preview a template.
 
 ```hbs preview-template

package/lib/index.js

@@ -24,6 +24,7 @@ const core_1 = __importDefault(require("@docfy/core"));
 const docfy_output_template_1 = __importDefault(require("./docfy-output-template"));
 const get_config_1 = __importDefault(require("./get-config"));
 const utils_1 = require("./plugins/utils");
+const calculate_cache_key_for_tree_1 = __importDefault(require("calculate-cache-key-for-tree"));
 const debug_1 = __importDefault(require("debug"));
 const debug = debug_1.default('@docfy/ember');
 const templateOnlyComponent = `
@@ -47,6 +48,10 @@ function hasBackingJS(chunks) {
     }
     return false;
 }
+// eslint-disable-next-line
+function isDeepAddonInstance(addon) {
+    return addon.parent !== addon.project;
+}
 class DocfyBroccoli extends broccoli_plugin_1.default {
     constructor(inputNodes, options = {}) {
         super(inputNodes, options);
@@ -98,12 +103,31 @@ module.exports = {
     name: require('../package').name,
     docfyConfig: undefined,
     included(...args) {
-        this.docfyConfig = get_config_1.default(this.project.root);
-        this.bridge = new broccoli_bridge_1.default();
+        if (!isDeepAddonInstance(this)) {
+            this.docfyConfig = get_config_1.default(this.project.root);
+            this.bridge = new broccoli_bridge_1.default();
+        }
         this._super.included.apply(this, args);
     },
+    // Re-enables caching of this addon, due to opting out
+    // of the caching implicitly by specifying treeFor* methods
+    cacheKeyForTree(treeType) {
+        switch (treeType) {
+            case 'app': {
+                const sources = this.docfyConfig.sources
+                    .map((item) => item.root)
+                    .join(',');
+                return calculate_cache_key_for_tree_1.default(treeType, this, [sources]);
+            }
+            default:
+                return calculate_cache_key_for_tree_1.default(treeType, this);
+        }
+    },
     treeForApp(tree) {
         const trees = [this._super.treeForApp.call(this, tree)];
+        if (isDeepAddonInstance(this)) {
+            return trees[0];
+        }
         const inputs = [new broccoli_source_1.UnwatchedDir(this.project.root)];
         this.docfyConfig.sources.forEach((item) => {
             if (item.root && item.root !== this.project.root) {
@@ -117,12 +141,18 @@ module.exports = {
     },
     treeForAddon(tree) {
         const trees = [this._super.treeForAddon.call(this, tree)];
+        if (isDeepAddonInstance(this)) {
+            return trees[0];
+        }
         const EmberApp = require('ember-cli/lib/broccoli/ember-app'); // eslint-disable-line
         const modulePrefix = this.project.config(EmberApp.env()).modulePrefix;
         trees.push(new broccoli_file_creator_1.default('output.js', docfy_output_template_1.default(modulePrefix)));
         return new broccoli_merge_trees_1.default(trees);
     },
     treeForPublic() {
+        if (isDeepAddonInstance(this)) {
+            return;
+        }
         return new broccoli_funnel_1.default(this.bridge.placeholderFor('docfy-tree'), {
             srcDir: 'public',
             destDir: './'

package/lib/plugins/extract-demos-to-components.js

@@ -56,7 +56,10 @@ exports.default = plugin_1.default({
                             });
                         }
                     });
-                    const componentName = utils_1.generateDemoComponentName(`docfy-demo-${path_1.default.basename(page.source).split('.')[0]}-${path_1.default.basename(demo.source).split('.')[0]}`, seenNames);
+                    // 1. exclude extension
+                    // 2. remove /index.md because of web conventions
+                    const baseName = page.source.replace('/index.md', '').split('.')[0];
+                    const componentName = utils_1.generateDemoComponentName(`docfy-demo-${baseName}-${path_1.default.basename(demo.source).split('.')[0]}`, seenNames);
                     const demoTitle = unist_util_find_1.default(demo.ast, (node) => node.type === 'heading' && node.depth === 1);
                     if (demoTitle) {
                         demoTitle.depth = 3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docfy/ember",
-  "version": "0.4.2",
+  "version": "0.4.6",
   "description": "Ember integration with Docfy",
   "keywords": [
     "ember-addon",
@@ -30,7 +30,7 @@
     "test:ember-compatibility": "echo 'ember try:each TODO'"
   },
   "dependencies": {
-    "@docfy/core": "^0.4.2",
+    "@docfy/core": "^0.4.4",
     "broccoli-bridge": "^1.0.0",
     "broccoli-file-creator": "^2.1.1",
     "broccoli-funnel": "^3.0.3",
@@ -38,6 +38,7 @@
     "broccoli-node-api": "^1.7.0",
     "broccoli-plugin": "^4.0.3",
     "broccoli-source": "^3.0.0",
+    "calculate-cache-key-for-tree": "2.0.0",
     "debug": "^4.3.1",
     "ember-cli-babel": "^7.23.1",
     "ember-cli-htmlbars": "^5.3.1",
@@ -50,7 +51,7 @@
     "unist-util-visit": "^2.0.2"
   },
   "devDependencies": {
-    "@docfy/plugin-with-prose": "^0.4.2",
+    "@docfy/plugin-with-prose": "^0.4.4",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.1.4",
     "@embroider/compat": "^0.36.0",
@@ -121,5 +122,5 @@
       "prember"
     ]
   },
-  "gitHead": "d40a93b119e507fb3bac6d3d533a5650b61c48c6"
+  "gitHead": "e062ebaf86b5508cb2096de069ed054829f58eb9"
 }

package/services/docfy.d.ts

@@ -6,7 +6,7 @@ export default class DocfyService extends Service {
     get flat(): PageMetadata[];
     get nested(): NestedPageMetadata;
     get currentPage(): PageMetadata | undefined;
-    findNestedChildrenByName(name: string): NestedPageMetadata | undefined;
+    findNestedChildrenByName(scope: string, previousNested?: NestedPageMetadata | undefined | null): NestedPageMetadata | undefined;
     findByUrl(url: string, scopeByNestedName?: string): PageMetadata | undefined;
     previousPage(scopeByNestedName?: string): PageMetadata | undefined;
     nextPage(scopeByNestedName?: string): PageMetadata | undefined;

package/src/index.ts

@@ -13,6 +13,7 @@ import { DemoComponentChunk } from './plugins/types';
 import docfyOutputTemplate from './docfy-output-template';
 import getDocfyConfig from './get-config';
 import { isDemoComponents } from './plugins/utils';
+import cacheKeyForTree from 'calculate-cache-key-for-tree';
 import debugFactory from 'debug';
 const debug = debugFactory('@docfy/ember');
 
@@ -41,6 +42,11 @@ function hasBackingJS(chunks: DemoComponentChunk[]): boolean {
   return false;
 }
 
+// eslint-disable-next-line
+function isDeepAddonInstance(addon: any): boolean {
+  return addon.parent !== addon.project;
+}
+
 class DocfyBroccoli extends Plugin {
   config: DocfyConfig;
 
@@ -122,14 +128,33 @@ module.exports = {
   docfyConfig: undefined,
 
   included(...args: unknown[]): void {
-    this.docfyConfig = getDocfyConfig(this.project.root);
-
-    this.bridge = new BroccoliBridge();
+    if (!isDeepAddonInstance(this)) {
+      this.docfyConfig = getDocfyConfig(this.project.root);
+      this.bridge = new BroccoliBridge();
+    }
     this._super.included.apply(this, args);
   },
 
-  treeForApp(tree: InputNode): Node {
-    const trees: InputNode[] = [this._super.treeForApp.call(this, tree)];
+  // Re-enables caching of this addon, due to opting out
+  // of the caching implicitly by specifying treeFor* methods
+  cacheKeyForTree(treeType: string): string {
+    switch (treeType) {
+      case 'app': {
+        const sources = (this.docfyConfig as DocfyConfig).sources
+          .map((item) => item.root)
+          .join(',');
+        return cacheKeyForTree(treeType, this, [sources]);
+      }
+      default:
+        return cacheKeyForTree(treeType, this);
+    }
+  },
+
+  treeForApp(tree: Node): Node {
+    const trees: Node[] = [this._super.treeForApp.call(this, tree)];
+    if (isDeepAddonInstance(this)) {
+      return trees[0];
+    }
 
     const inputs: InputNode[] = [new UnwatchedDir(this.project.root)];
 
@@ -147,8 +172,12 @@ module.exports = {
     return new MergeTrees(trees, { overwrite: true });
   },
 
-  treeForAddon(tree: InputNode): Node {
-    const trees: InputNode[] = [this._super.treeForAddon.call(this, tree)];
+  treeForAddon(tree: Node): Node {
+    const trees: Node[] = [this._super.treeForAddon.call(this, tree)];
+    if (isDeepAddonInstance(this)) {
+      return trees[0];
+    }
+
     const EmberApp = require('ember-cli/lib/broccoli/ember-app'); // eslint-disable-line
     const modulePrefix = this.project.config(EmberApp.env()).modulePrefix;
 
@@ -157,7 +186,11 @@ module.exports = {
     return new MergeTrees(trees);
   },
 
-  treeForPublic(): Node {
+  treeForPublic(): Node | undefined {
+    if (isDeepAddonInstance(this)) {
+      return;
+    }
+
     return new Funnel(
       (this.bridge as BroccoliBridge).placeholderFor('docfy-tree'),
       {

package/src/plugins/extract-demos-to-components.ts

@@ -71,8 +71,13 @@ export default plugin({
               });
             }
           });
+
+          // 1. exclude extension
+          // 2. remove /index.md because of web conventions
+          const baseName = page.source.replace('/index.md', '').split('.')[0];
+
           const componentName = generateDemoComponentName(
-            `docfy-demo-${path.basename(page.source).split('.')[0]}-${
+            `docfy-demo-${baseName}-${
               path.basename(demo.source).split('.')[0]
             }`,
             seenNames