@haxtheweb/create 10.0.0 → 10.0.3

package/dist/create.js

@@ -35,7 +35,7 @@ async function main() {
   .option('--org <char>', 'organization for package.json').option('--author <char>', 'author for site / package.json').option('--writeHaxProperties', 'Write haxProperties for the element')
 
   // options for site
-  .option('--import-site <char>', 'URL of site to import').option('--import-structure <char>', `import method to use:\n\rpressbooksToSite\n\relmslnToSite\n\rhaxcmsToSite\n\rnotionToSite\n\rgitbookToSite\n\revolutionToSite\n\rhtmlToSite\n\rdocxToSite`).option('--node-op <char>', 'node operation to perform').option('--item-id <char>', 'node ID to operate on').option('--name <char>', 'name of the project').option('--domain <char>', 'published domain name').option('--title-scrape <char>', 'CSS Selector for `title` in resource').option('--content-scrape <char>', 'CSS Selector for `body` in resource').option('--items-import <char>', 'import items from a file / site').option('--recipe <char>', 'path to recipe file').version(await HAXCMS.getHAXCMSVersion()).helpCommand(true);
+  .option('--import-site <char>', 'URL of site to import').option('--import-structure <char>', `import method to use:\n\rpressbooksToSite\n\relmslnToSite\n\rhaxcmsToSite\n\rnotionToSite\n\rgitbookToSite\n\revolutionToSite\n\rhtmlToSite\n\rdocxToSite`).option('--node-op <char>', 'node operation to perform').option('--item-id <char>', 'node ID to operate on').option('--name <char>', 'name of the project').option('--domain <char>', 'published domain name').option('--title-scrape <char>', 'CSS Selector for `title` in resource').option('--content-scrape <char>', 'CSS Selector for `body` in resource').option('--items-import <char>', 'import items from a file / site').option('--recipe <char>', 'path to recipe file').option('--custom-theme-name <char>', 'custom theme name').option('--custom-theme-template <char>', 'custom theme template; (options: base, polaris-flex, polaris-sidebar)').version(await HAXCMS.getHAXCMSVersion()).helpCommand(true);
 
   // default command which runs interactively
   _commander.program.command('start').description('Select which hax sub-program to run').action(() => {
@@ -61,7 +61,7 @@ async function main() {
       commandRun.arguments.action = action;
       commandRun.options.skip = true;
     }
-  }).option('--v', 'Verbose output').option('--debug', 'Output for developers').option('--format <char>', 'Output format; json (default), yaml').option('--path <char>', 'where to perform operation').option('--npm-client <char>', 'npm client to use (must be installed) npm, yarn, pnpm', 'npm').option('--y', 'yes to all questions').option('--skip', 'skip frills like animations').option('--quiet', 'remove console logging').option('--auto', 'yes to all questions, alias of y').option('--no-i', 'prevent interactions / sub-process, good for scripting').option('--to-file <char>', 'redirect command output to a file').option('--no-extras', 'skip all extra / automatic command processing').option('--root <char>', 'root location to execute the command from').option('--import-site <char>', 'URL of site to import').option('--import-structure <char>', `import method to use:\n\rpressbooksToSite\n\relmslnToSite\n\rhaxcmsToSite\n\rnotionToSite\n\rgitbookToSite\n\revolutionToSite\n\rhtmlToSite\n\rdocxToSite`).option('--name <char>', 'name of the site (when creating a new one)').option('--domain <char>', 'published domain name').option('--node-op <char>', 'node operation to perform').option('--title-scrape <char>', 'CSS Selector for `title` in resource').option('--content-scrape <char>', 'CSS Selector for `body` in resource').option('--item-import <char>', 'import items from a file / site').option('--recipe <char>', 'path to recipe file').version(await HAXCMS.getHAXCMSVersion());
+  }).option('--v', 'Verbose output').option('--debug', 'Output for developers').option('--format <char>', 'Output format; json (default), yaml').option('--path <char>', 'where to perform operation').option('--npm-client <char>', 'npm client to use (must be installed) npm, yarn, pnpm', 'npm').option('--y', 'yes to all questions').option('--skip', 'skip frills like animations').option('--quiet', 'remove console logging').option('--auto', 'yes to all questions, alias of y').option('--no-i', 'prevent interactions / sub-process, good for scripting').option('--to-file <char>', 'redirect command output to a file').option('--no-extras', 'skip all extra / automatic command processing').option('--root <char>', 'root location to execute the command from').option('--import-site <char>', 'URL of site to import').option('--import-structure <char>', `import method to use:\n\rpressbooksToSite\n\relmslnToSite\n\rhaxcmsToSite\n\rnotionToSite\n\rgitbookToSite\n\revolutionToSite\n\rhtmlToSite\n\rdocxToSite`).option('--name <char>', 'name of the site (when creating a new one)').option('--domain <char>', 'published domain name').option('--node-op <char>', 'node operation to perform').option('--title-scrape <char>', 'CSS Selector for `title` in resource').option('--content-scrape <char>', 'CSS Selector for `body` in resource').option('--item-import <char>', 'import items from a file / site').option('--recipe <char>', 'path to recipe file').option('--custom-theme-name <char>', 'custom theme name').option('--custom-theme-template <char>', 'custom theme template (options: base, polaris-flex, polaris-sidebar)').version(await HAXCMS.getHAXCMSVersion());
   let siteNodeOps = (0, _site.siteNodeOperations)();
   for (var i in siteNodeOps) {
     _commander.program.option(`--${(0, _utils.camelToDash)(siteNodeOps[i].value)} <char>`, `${siteNodeOps[i].label}`);
@@ -134,6 +134,10 @@ async function main() {
       commandRun.options.author = author;
     }
   }
+  // validate theme cli commands
+  if (commandRun.options.theme !== 'custom-theme' && (commandRun.options.customThemeName || commandRun.options.customThemeTemplate)) {
+    _commander.program.error(_picocolors.default.red('ERROR: You can only use the --custom-theme-name option with --theme custom-theme'));
+  }
   let packageData = {};
   let testPackages = [path.join(process.cwd(), 'package.json'), path.join(process.cwd(), '../', 'package.json'), path.join(process.cwd(), '../', '../', 'package.json')];
   // test within reason, for package.json files seeing if anything is available to suggest
@@ -262,6 +266,14 @@ async function main() {
       activeProject = project.type;
       // silly but this way we don't have to take options for quitting
       if (project.type !== 'quit') {
+        // also silly temp spot
+        let themes = await (0, _site.siteThemeList)();
+        const custom = {
+          value: 'custom-theme',
+          label: 'Create Custom Theme'
+        };
+        // Append custom option to list of core themes
+        themes.push(custom);
         project = await p.group({
           type: ({
             results
@@ -362,7 +374,6 @@ async function main() {
           theme: async ({
             results
           }) => {
-            let themes = await (0, _site.siteThemeList)();
             if (results.type === "site" && !commandRun.options.theme) {
               // support having no theme but autoselecting
               if (commandRun.options.auto && commandRun.options.skip) {
@@ -377,6 +388,57 @@ async function main() {
               }
             }
           },
+          customThemeName: async ({
+            results
+          }) => {
+            if (results.theme === "custom-theme") {
+              let tmpCustomName = await p.text({
+                message: 'Theme Name:',
+                placeholder: `${results.name}`,
+                required: false,
+                validate: value => {
+                  if (!value) {
+                    return "Theme name is required (tab writes default)";
+                  }
+                  if (themes.some(theme => theme.value === value)) {
+                    return "Theme name is already in use";
+                  }
+                  if (/^\d/.test(value)) {
+                    return "Theme name cannot start with a number";
+                  }
+                  if (/[A-Z]/.test(value)) {
+                    return "No uppercase letters allowed in theme name";
+                  }
+                  if (value.indexOf(' ') !== -1) {
+                    return "No spaces allowed in theme name";
+                  }
+                }
+              });
+              return tmpCustomName;
+            }
+          },
+          customThemeTemplate: ({
+            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/logging.js

@@ -14,7 +14,12 @@ var winston = _interopRequireWildcard(require("winston"));
 var _utils = require("./utils.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const logFileName = path.join((0, _nodeOs.homedir)(), '.haxtheweb', 'create.log');
+// check for vercel running which is not allowed to write to home in logs
+let baseLogPath = (0, _nodeOs.homedir)();
+if (process.env.VERCEL_ENV) {
+  baseLogPath = "/tmp/";
+}
+const logFileName = path.join(baseLogPath, '.haxtheweb', 'create.log');
 const consoleTransport = exports.consoleTransport = new winston.transports.Console({
   format: winston.format.simple()
 });
@@ -35,7 +40,7 @@ const logger = exports.logger = winston.createLogger({
   transports: [consoleTransport, logFile]
 });
 function haxCliEnvOptions() {
-  return ['skip', 'npmClient', 'i', 'extras', 'root', 'path', 'org', 'author', 'y', 'auto'];
+  return ['skip', 'npmClient', 'i', 'extras', 'root', 'path', 'org', 'author', 'y', 'auto', 'domain'];
 }
 
 // wrapper so we can silence all log messages at the same time

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 (commandRun.options.theme === 'custom-theme' && commandRun.options.customThemeName && commandRun.options.customThemeTemplate || project.customThemeName && project.customThemeTemplate) {
+    s.start((0, _statements.merlinSays)(`Creating new theme: ${commandRun.options.customThemeName ? commandRun.options.customThemeName : project.customThemeName}`));
+    await customSiteTheme(commandRun, project);
+    s.stop((0, _statements.merlinSays)(`${commandRun.options.customThemeName ? commandRun.options.customThemeName : project.customThemeName} 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,73 @@ async function siteThemeList() {
   }
   return items;
 }
+async function customSiteTheme(commandRun, project) {
+  // pass theme name for twig templates
+  project.customThemeName = commandRun.options.customThemeName ? commandRun.options.customThemeName : project.customThemeName;
+
+  // validate start and end tags for theme name
+  if (/^custom/.test(project.customThemeName) && !/^custom-/.test(project.customThemeName)) {
+    project.customThemeName = project.customThemeName.replace(/^custom/, "custom-");
+  } else if (!/^custom-/.test(project.className)) {
+    project.customThemeName = `custom-${project.customThemeName}`;
+  }
+  if (/theme$/.test(project.customThemeName) && !/-theme$/.test(project.customThemeName)) {
+    project.customThemeName = project.customThemeName.replace(/theme$/, "-theme");
+  } else if (!/-theme$/.test(project.customThemeName)) {
+    project.customThemeName = `${project.customThemeName}-theme`;
+  }
+
+  // set camel case class name
+  project.className = (0, _utils.dashToCamel)(project.customThemeName);
+
+  // path to hax site
+  var sitePath = `${project.path}/${commandRun.options.name ? commandRun.options.name : project.name}`;
+
+  // path to new theme file
+  const filePath = `${sitePath}/custom/src/${project.customThemeName}.js`;
+
+  // theme template to use
+  const themeTemplate = commandRun.options.customThemeTemplate ? commandRun.options.customThemeTemplate : project.customThemeTemplate;
+  if (themeTemplate === "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 (themeTemplate === "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);
+  } else {
+    // vanilla theme is default
+    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);
+  }
+  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);
+  }
+
+  // import theme to custom.js
+  await fs.appendFileSync(`${sitePath}/custom/src/custom.js`, `\n import "./${project.customThemeName}.js"`);
+  var activeHaxsite = await hax.systemStructureContext(sitePath);
+
+  // add theme to site.json
+  let themeObj = {
+    element: project.customThemeName,
+    path: filePath,
+    name: project.className
+  };
+  activeHaxsite.manifest.metadata.theme = themeObj;
+  activeHaxsite.manifest.save(false);
+
+  // install and build theme dependencies
+  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 <%= customThemeName %>
+ */
+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 "<%= customThemeName %>";
+  }
+ 
+  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 <%= customThemeName %>
+ */
+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 "<%= customThemeName %>";
+  }
+ 
+  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 <%= customThemeName %>
+ */
+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 "<%= customThemeName %>";
+  }
+ 
+  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.2",
+      "@haxtheweb/i18n-manager": "^10.0.2"
     },
     "devDependencies": {
       "@babel/preset-env": "^7.16.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haxtheweb/create",
-  "version": "10.0.0",
+  "version": "10.0.3",
   "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"
   },