fix component generators

scripts/plop/plopfile.js

@@ -47,7 +47,7 @@ export default function (plop) {
       },
       {
         type: 'add',
-        path: '../../docs/pages/components/{{ tagWithoutPrefix tag }}.md',
+        path: '../../docs/docs/components/{{ tagWithoutPrefix tag }}.md',
         templateFile: 'templates/component/docs.hbs'
       }
     ]

scripts/plop/templates/component/component.hbs

@@ -1,16 +1,17 @@
-import { property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import styles from './test-element.styles.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './{{ tagWithoutPrefix tag }}.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://backers.webawesome.com/docs/components/{{ tagWithoutPrefix tag }}
  * @status experimental
- * @since 2.0
+ * @since 3.0
  *
  * @dependency wa-example
  *
@@ -23,6 +24,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --example - An example CSS custom property.
  */
+ @customElement("{{ tag }}")
 export default class {{ properCase tag }} extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 

scripts/plop/templates/component/docs.hbs

@@ -1,7 +1,6 @@
 ---
-meta:
-  title: {{ tagToTitle tag }}
-  description:
+title: {{ tagToTitle tag }}
+description: Description of component.
 layout: component
 ---
 
@@ -18,5 +17,3 @@ TODO
 ### Second Example
 
 TODO
-
-[component-metadata:{{ tag }}]