@haxtheweb/create 10.0.4 → 10.0.5

package/dist/lib/programs/site.js

@@ -348,7 +348,7 @@ async function siteCommandDetected(commandRun) {
           }
           recipe.log(siteLoggingName, (0, _logging.commandString)(commandRun));
         } else if (!commandRun.options.quiet) {
-          (0, _logging.log)('Must specify --item-import as path to valid item export file or URL', 'error');
+          (0, _logging.log)('Must specify --items-import as path to valid item export file or URL', 'error');
         }
         break;
       case "start":
@@ -1107,7 +1107,7 @@ async function siteProcess(commandRun, project, port = '3000') {
       if (commandRun.options.importStructure === 'drupal7-book-print-html') {
         let siteContent = await fetch(commandRun.options.importSite).then(d => d.ok ? d.text() : '');
         if (siteContent) {
-          // @todo refactor to support 9 levels of heirarchy as this is technically what Drupal supports
+          // @todo refactor to support 9 levels of hierarchy as this is technically what Drupal supports
           let dom = (0, _nodeHtmlParser.parse)(siteContent);
           // pull all of level 1 of hierarchy
           let depth;

package/dist/lib/programs/webcomponent.js

@@ -184,6 +184,7 @@ async function webcomponentProcess(commandRun, project, port = "8000") {
   // rename gitignore to improve copy cross platform compat
   await fs.renameSync(`${project.path}/${project.name}/_github`, `${project.path}/${project.name}/.github`);
   await fs.renameSync(`${project.path}/${project.name}/_vscode`, `${project.path}/${project.name}/.vscode`);
+  await fs.renameSync(`${project.path}/${project.name}/_dddignore`, `${project.path}/${project.name}/.dddignore`);
   await fs.renameSync(`${project.path}/${project.name}/_editorconfig`, `${project.path}/${project.name}/.editorconfig`);
   await fs.renameSync(`${project.path}/${project.name}/_gitignore`, `${project.path}/${project.name}/.gitignore`);
   await fs.renameSync(`${project.path}/${project.name}/_nojekyll`, `${project.path}/${project.name}/.nojekyll`);

package/dist/templates/sitetheme/base-theme.js

@@ -2,21 +2,80 @@
  * Copyright <%= year %> <%= author %>
  * @license Apache-2.0, see License.md for full text.
  */
-import { html, css, HAXCMSLitElementTheme } from "@haxtheweb/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
+import { HAXCMSLitElementTheme, css, unsafeCSS, html, store, autorun, toJS } from "@haxtheweb/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
+import "@haxtheweb/haxcms-elements/lib/ui-components/navigation/site-menu-button.js";
+import "@haxtheweb/haxcms-elements/lib/ui-components/site/site-title.js";
+import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-active-title.js";
 
 /**
  * `<%= className %>`
- * `<%= className %> based on modern flex design system`
+ * `<%= className %> based on HAXCMS theming ecosystem`
  * `This theme is an example of extending an existing theme component`
  *
  * @microcopy - language worth noting:
  *  - HAXcms - A headless content management system
- *  - HAXCMSTheme - A super class that provides correct baseline wiring to build a new theme
+ *  - HAXCMSLitElementTheme - A class that provides correct baseline wiring to build a new theme that HAX can use
  *
- * @demo demo/index.html
+ * @documentation - see HAX docs to learn more about theming
+ *  - Custom theme development - https://haxtheweb.org/documentation/developers/haxsite/custom-theme-development
+ *  - Theme Blocks - https://haxtheweb.org/documentation/developers/theme-blocks
+ *  - DDD - https://haxtheweb.org/documentation/ddd
+ *  - Data Store - https://haxtheweb.org/documentation/developers/haxsite/data-store
  * @element <%= customThemeName %>
  */
 class <%= className %> extends HAXCMSLitElementTheme {
+  /**
+   * Store the tag name to make it easier to obtain directly.
+   * @notice function name must be here for tooling to operate correctly
+   */
+  static get tag() {
+    return "<%= customThemeName %>";
+  }
+
+  // set defaults or tie into the store
+  constructor() {
+    super();
+    this._items = [];
+    this.activeId = null;
+    autorun(() => {
+      this.activeId = toJS(store.activeId);
+      this._items = toJS(store.manifest.items);
+    });
+  }
+
+  // properties to respond to the activeID and list of items
+  static get properties() {
+    return {
+      ...super.properties,
+      activeId: { type: String },
+      _items: { type: Array },
+    };
+  }
+
+  // allows for global styles to be set against the entire document
+  // you can also use this to cascade styles down to the theme
+  // but the more common reason is to influence the body or other things
+  // put into the global index.html context by the system itself
+  HAXCMSGlobalStyleSheetContent() {
+    return [
+      ...super.HAXCMSGlobalStyleSheetContent(),
+      css`
+      :root {
+        --my-theme-low-tone: var(--ddd-theme-default-slateMaxLight);
+        --my-theme-high-tone: var(--ddd-theme-default-coalyGray);
+      }
+      body {
+        padding: 0;
+        margin: 0;
+        background-color: var(--my-theme-low-tone);
+      }
+      body.dark-mode {
+        background-color: var(--my-theme-high-tone);
+      }
+      `,
+    ];
+  }
+
   //styles function
   static get styles() {
     return [
@@ -24,22 +83,106 @@ class <%= className %> extends HAXCMSLitElementTheme {
       css`
         :host {
           display: block;
+          padding: var(--ddd-spacing-10) var(--ddd-spacing-20);
+          max-width: 960px;
+          min-width: 400px;
+          margin: 0 auto;
+          border: var(--ddd-border-lg);
+          border-width: var(--ddd-spacing-5);
+          border-radius: var(--ddd-radius-lg);
+          background-color: light-dark(var(--my-theme-low-tone), var(--my-theme-high-tone));
+          color: light-dark(var(--my-theme-high-tone), var(--my-theme-low-tone));
+        }
+        .wrapper {
+          border-radius: var(--ddd-radius-lg);
+        }
+
+        site-title {
+          font-size: var(--ddd-font-size-l);
+        }
+
+        header {
+          display: flex;
+        }
+        ul {
+          margin: 0;
+          padding: 0;
+        }
+        ul li {
+          display: inline-block;
+          margin: 0;
+          padding: 0;
+          list-style-type: none;
+          vertical-align: top;
+        }
+        ul li a {
+          display: block;
+        }
+
+        button {
+          height: 32px;
+          width: 32px;
+          margin: 0;
+          padding: 0;
+          font-size: var(--ddd-font-size-sm);
+          cursor: pointer;
+        }
+
+        .active button {
+          background-color: light-dark(var(--my-theme-low-tone), var(--my-theme-high-tone));
+          color: light-dark(var(--my-theme-high-tone), var(--my-theme-low-tone));
+          font-weight: bold;
+        }
+
+        site-menu-button {
+          display: inline-block;
+          vertical-align: top;
         }
       `,
     ];
   }
 
-  /**
-   * Store the tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
-   */
-  static get tag() {
-    return "<%= customThemeName %>";
-  }
- 
-  constructor() {
-    super();
+  render() {
+    return html`
+    <div class="wrapper">
+    <header>
+      <ul>
+        <li>
+          <site-menu-button
+            type="prev"
+            position="top"
+          ></site-menu-button>
+        </li>
+    ${this._items.map((item, index) => {
+      return html`
+        <li class="${item.id === this.activeId ? "active" : ""}">
+          <a href="${item.slug}"><button title="${item.title}">${(index+1)}</button></a>
+        </li>
+      `;
+    }
+    )}
+        <li>
+          <site-menu-button
+            type="next"
+            position="top"
+          ></site-menu-button>
+        </li>
+      </ul>
+    </header>
+    <main>
+      <site-active-title></site-active-title>
+      <article>
+        <!-- this block and names are required for HAX to edit the content of the page. contentcontainer, slot, and wrapping the slot. -->
+        <div id="contentcontainer"><div id="slot"><slot></slot></div></div>
+      </article>
+    </main>
+    <footer>
+      <slot name="footer"></slot>
+    </footer>
+  </div>
+    `;
   }
+
 }
-customElements.define(<%= className %>.tag, <%= className %>);
+globalThis.customElements.define(<%= className %>.tag, <%= className %>);
 export { <%= className %> };

package/dist/templates/sitetheme/flex-theme.js

@@ -3,7 +3,7 @@
  * @license Apache-2.0, see License.md for full text.
  */
 import { html, css, HAXCMSLitElementTheme } from "@haxtheweb/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
-import { PolarisFlexTheme } from "@haxtheweb/polaris-theme/lib/polaris-flex-theme";
+import { PolarisFlexTheme } from "@haxtheweb/polaris-theme/lib/polaris-flex-theme.js";
 import "@haxtheweb/haxcms-elements/lib/ui-components/blocks/site-children-block.js";
 
 /**

package/dist/templates/sitetheme/sidebar-theme.js

@@ -3,7 +3,7 @@
  * @license Apache-2.0, see License.md for full text.
  */
 import { html, css, HAXCMSLitElementTheme } from "@haxtheweb/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
-import { PolarisFlexTheme } from "@haxtheweb/polaris-theme/lib/polaris-flex-theme";
+import { PolarisFlexTheme } from "@haxtheweb/polaris-theme/lib/polaris-flex-theme.js";
 import "@haxtheweb/haxcms-elements/lib/ui-components/blocks/site-children-block.js";
 
 /**

package/dist/templates/webcomponent/hax/_dddignore

@@ -0,0 +1,37 @@
+# Directories
+# (Must start with with / or \, as seen below)
+/.github # Inline comments are supported
+/.vscode
+/.idea
+/locales
+\test
+/dist
+/build
+/public # ignored by program regardless of presence in .dddignore
+/node_modules # ignored by program regardless of presence in .dddignore
+
+# Files 
+# (Must include filename and extension, as seen below)
+LICENSE
+.dddignore
+.editorconfig
+.gitignore
+.nojekyll
+.npmignore
+.surgeignore
+rollup.config.js
+
+# File extension
+# (Must start with *, as seen below)
+*.html
+*.md
+*.yml
+*.json
+*.toml
+*.mjs
+*.cjs
+*.png
+*.ico
+*.svg
+*.jpg
+*.jpeg

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haxtheweb/create",
-  "version": "10.0.4",
+  "version": "10.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -45,7 +45,7 @@
   "dependencies": {
     "@clack/core": "0.3.4",
     "@clack/prompts": "0.7.0",
-    "@haxtheweb/haxcms-nodejs": "^10.0.3",
+    "@haxtheweb/haxcms-nodejs": "^10.0.4",
     "@haxtheweb/open-apis": "^10.0.1",
     "commander": "12.1.0",
     "ejs": "3.1.10",