@haxtheweb/create 10.0.0 → 10.0.2

package/dist/create.js

@@ -363,6 +363,11 @@ async function main() {
             results
           }) => {
             let themes = await (0, _site.siteThemeList)();
+            let custom = {
+              value: 'custom-theme',
+              label: 'Create Custom Theme'
+            };
+            themes.push(custom);
             if (results.type === "site" && !commandRun.options.theme) {
               // support having no theme but autoselecting
               if (commandRun.options.auto && commandRun.options.skip) {
@@ -377,6 +382,53 @@ async function main() {
               }
             }
           },
+          customName({
+            results
+          }) {
+            if (results.theme === "custom-theme") {
+              return p.text({
+                message: 'Theme Name:',
+                placeholder: results.theme,
+                required: false,
+                validate: value => {
+                  if (!value) {
+                    return "Name is required (tab writes default)";
+                  }
+                  if (/^\d/.test(value)) {
+                    return "Name cannot start with a number";
+                  }
+                  if (value.indexOf(' ') !== -1) {
+                    return "No spaces allowed in project name";
+                  }
+                  if (value.indexOf('-') === -1 && value.indexOf('-') !== 0 && value.indexOf('-') !== value.length - 1) {
+                    return "Name must include at least one `-` and must not start or end name.";
+                  }
+                }
+              });
+            }
+          },
+          customTemplate({
+            results
+          }) {
+            if (results.theme === "custom-theme") {
+              const options = [{
+                value: 'base',
+                label: 'Vanilla Theme with Hearty Documentation'
+              }, {
+                value: 'polaris-flex',
+                label: 'Minimalist Theme with Horizontal Nav'
+              }, {
+                value: 'polaris-sidebar',
+                label: 'Content-Focused Theme with Flexible Sidebar'
+              }];
+              return p.select({
+                message: 'Template:',
+                required: false,
+                options: options,
+                initialValue: `${results.theme}`
+              });
+            }
+          },
           extras: ({
             results
           }) => {

package/dist/lib/programs/site.js

@@ -15,11 +15,13 @@ var _promises = require("node:timers/promises");
 var fs = _interopRequireWildcard(require("node:fs"));
 var path = _interopRequireWildcard(require("node:path"));
 var p = _interopRequireWildcard(require("@clack/prompts"));
+var ejs = _interopRequireWildcard(require("ejs"));
 var _picocolors = _interopRequireDefault(require("picocolors"));
 var _jsYaml = require("js-yaml");
 var winston = _interopRequireWildcard(require("winston"));
 var _nodeHtmlParser = require("node-html-parser");
 var _statements = require("../statements.js");
+var _utils = require("../utils.js");
 var _logging = require("../logging.js");
 var _microFrontendRegistry = require("../micro-frontend-registry.js");
 var haxcmsNodejsCli = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs/dist/cli.js"));
@@ -752,12 +754,12 @@ async function siteCommandDetected(commandRun) {
               initialValue: val,
               options: list
             });
-            let themes = await HAXCMS.getThemes();
-            if (themes && commandRun.options.theme && themes[commandRun.options.theme]) {
-              activeHaxsite.manifest.metadata.theme = themes[commandRun.options.theme];
-              activeHaxsite.manifest.save(false);
-              recipe.log(siteLoggingName, (0, _logging.commandString)(commandRun));
-            }
+          }
+          let themes = await HAXCMS.getThemes();
+          if (themes && commandRun.options.theme && themes[commandRun.options.theme]) {
+            activeHaxsite.manifest.metadata.theme = themes[commandRun.options.theme];
+            activeHaxsite.manifest.save(false);
+            recipe.log(siteLoggingName, (0, _logging.commandString)(commandRun));
           }
         } catch (e) {
           (0, _logging.log)(e.stderr);
@@ -1208,6 +1210,13 @@ async function siteProcess(commandRun, project, port = '3000') {
     s.stop((0, _statements.merlinSays)(`${project.name} created!`));
     await (0, _promises.setTimeout)(500);
   }
+
+  // Write theme template to site/custom
+  if (project.customName && project.customTemplate) {
+    s.start((0, _statements.merlinSays)(`Creating new theme: ${project.customName}`));
+    await customSiteTheme(commandRun, project);
+    s.stop((0, _statements.merlinSays)(`${project.customName} theme created!`));
+  }
   if (project.gitRepo && !commandRun.options.isMonorepo) {
     try {
       await exec(`cd ${project.path}/${project.name} && git init && git add -A && git commit -m "first commit" && git branch -M main${project.gitRepo ? ` && git remote add origin ${project.gitRepo}` : ''}`);
@@ -1271,6 +1280,43 @@ async function siteThemeList() {
   }
   return items;
 }
+async function customSiteTheme(commandRun, project) {
+  project.className = (0, _utils.dashToCamel)(project.customName);
+  var sitePath = `${project.path}/${project.name}`;
+  const filePath = `${sitePath}/custom/src/${project.customName}.js`;
+  if (project.customTemplate === "base") {
+    await fs.copyFileSync(`${process.mainModule.path}/templates/sitetheme/base-theme.js`, `${sitePath}/custom/src/base-theme.js`);
+    await fs.renameSync(`${sitePath}/custom/src/base-theme.js`, filePath);
+  } else if (project.customTemplate === "polaris-flex") {
+    await fs.copyFileSync(`${process.mainModule.path}/templates/sitetheme/flex-theme.js`, `${sitePath}/custom/src/flex-theme.js`);
+    await fs.renameSync(`${sitePath}/custom/src/flex-theme.js`, filePath);
+  } else if (project.customTemplate === "polaris-sidebar") {
+    await fs.copyFileSync(`${process.mainModule.path}/templates/sitetheme/sidebar-theme.js`, `${sitePath}/custom/src/sidebar-theme.js`);
+    await fs.renameSync(`${sitePath}/custom/src/sidebar-theme.js`, filePath);
+  }
+  try {
+    // ensure we don't try to pattern rewrite image files
+    if (!filePath.endsWith('.jpg') && !filePath.endsWith('.png')) {
+      const ejsString = ejs.fileLoader(filePath, 'utf8');
+      let content = ejs.render(ejsString, project);
+      // file written successfully  
+      fs.writeFileSync(filePath, content);
+    }
+  } catch (err) {
+    console.error(filePath);
+    console.error(err);
+  }
+  await fs.appendFileSync(`${sitePath}/custom/src/custom.js`, `\n import "./${project.customName}.js"`);
+  var activeHaxsite = await hax.systemStructureContext(sitePath);
+  let themeObj = {
+    element: project.customName,
+    path: filePath,
+    name: project.className
+  };
+  activeHaxsite.manifest.metadata.theme = themeObj;
+  activeHaxsite.manifest.save(false);
+  await exec(`cd ${sitePath}/custom/ && ${commandRun.options.npmClient} install && ${commandRun.options.npmClient} run build && cd ${sitePath}`);
+}
 
 // @fork of the hax core util for this so that we avoid api difference between real dom and parse nodejs dom
 async function nodeToHaxElement(node, eventName = "insert-element") {

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

@@ -0,0 +1,45 @@
+/**
+ * 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";
+
+/**
+ * `<%= className %>`
+ * `<%= className %> based on modern flex design system`
+ * `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
+ *
+ * @demo demo/index.html
+ * @element <%= customName %>
+ */
+class <%= className %> extends HAXCMSLitElementTheme {
+  //styles function
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * 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 "<%= customName %>";
+  }
+ 
+  constructor() {
+    super();
+  }
+}
+customElements.define(<%= className %>.tag, <%= className %>);
+export { <%= className %> };

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

@@ -0,0 +1,66 @@
+/**
+ * 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 { PolarisFlexTheme } from "@haxtheweb/polaris-theme/lib/polaris-flex-theme";
+import "@haxtheweb/haxcms-elements/lib/ui-components/blocks/site-children-block.js";
+
+/**
+ * `<%= className %>`
+ * `<%= className %> based on modern flex design system`
+ * `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
+ *
+ * @demo demo/index.html
+ * @element <%= customName %>
+ */
+class <%= className %> extends PolarisFlexTheme {
+  //styles function
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * Overload methods for customization of slots from the base class 
+   */
+  renderHeaderSlot() {
+    return html``
+  }
+
+  renderFooterContactInformation() {
+    return html``
+  }
+
+  renderFooterSecondarySlot() {
+    return html``
+  }
+
+  renderFooterPrimarySlot() {
+    return html``
+  }
+
+  /**
+   * 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 "<%= customName %>";
+  }
+ 
+  constructor() {
+    super();
+  }
+}
+customElements.define(<%= className %>.tag, <%= className %>);
+export { <%= className %> };

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

@@ -0,0 +1,112 @@
+/**
+ * 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 { PolarisFlexTheme } from "@haxtheweb/polaris-theme/lib/polaris-flex-theme";
+import "@haxtheweb/haxcms-elements/lib/ui-components/blocks/site-children-block.js";
+
+/**
+ * `<%= className %>`
+ * `<%= className %> based on modern flex design system`
+ * `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
+ *
+ * @demo demo/index.html
+ * @element <%= customName %>
+ */
+class <%= className %> extends PolarisFlexTheme {
+  //styles function
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+        }
+        aside {
+          float: left;
+          width: 240px;
+        }
+        aside section h4 {
+          font-size: 16px;
+          margin: 0 0 24px 0;
+          text-transform: uppercase;
+          font-family: "Open Sans", sans-serif;
+          font-weight: 300;
+        }
+
+        aside section {
+          background-color: #fff;
+          border-radius: 3px;
+          margin-bottom: 40px;
+          padding: 0px 40px 40px 0px;
+        }
+
+        site-children-block {
+          --site-children-block-border-bottom: lightblue 1px solid;
+          --site-children-block-li-padding: 8px 0;
+          --site-children-block-link-hover-color: rgb(0, 95, 169);
+          --site-children-block-active-border-left: rgb(0, 95, 169) 3px solid;
+          --site-children-block-link-active-color: rgb(0, 30, 68);
+          font-family: "Roboto Condensed", sans-serif;
+          font-size: 16px;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * Overload methods for customization of slots from the base class 
+   */
+  renderHeaderSlot() {
+    return html``
+  }
+
+  renderSideBar() {
+    return html`
+    <aside
+          role="complementary"
+          aria-label="Primary Sidebar"
+          itemtype="http://schema.org/WPSideBar"
+          part="page-primary-sidebar"
+        >
+          <section>
+            <site-children-block
+              part="page-children-block"
+              dynamic-methodology="ancestor"
+            ></site-children-block>
+          </section>
+        </aside>
+    `
+  }
+
+  renderFooterContactInformation() {
+    return html``
+  }
+
+  renderFooterSecondarySlot() {
+    return html``
+  }
+
+  renderFooterPrimarySlot() {
+    return html``
+  }
+
+  /**
+   * 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 "<%= customName %>";
+  }
+ 
+  constructor() {
+    super();
+  }
+}
+customElements.define(<%= className %>.tag, <%= className %>);
+export { <%= className %> };

package/dist/templates/webcomponent/hax/package.json

@@ -28,8 +28,8 @@
     },
     "dependencies": {
       "lit": "^3.2.1",
-      "@haxtheweb/d-d-d": "^9.0.21",
-      "@haxtheweb/i18n-manager": "^9.0.18"
+      "@haxtheweb/d-d-d": "^10.0.1",
+      "@haxtheweb/i18n-manager": "^10.0.0"
     },
     "devDependencies": {
       "@babel/preset-env": "^7.16.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haxtheweb/create",
-  "version": "10.0.0",
+  "version": "10.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -45,12 +45,12 @@
   "dependencies": {
     "@clack/core": "0.3.4",
     "@clack/prompts": "0.7.0",
-    "@haxtheweb/haxcms-nodejs": "^10.0.0",
+    "@haxtheweb/haxcms-nodejs": "^10.0.1",
     "@haxtheweb/open-apis": "^10.0.1",
     "commander": "12.1.0",
-    "node-html-parser": "6.1.13",
     "ejs": "3.1.10",
     "js-yaml": "4.1.0",
+    "node-html-parser": "6.1.13",
     "picocolors": "1.0.1",
     "winston": "3.17.0"
   },