easyorders 0.1.8 → 0.1.9

package/dist/bin/cli.js

@@ -87,7 +87,7 @@ async function createTheme() {
     console.log("");
     console.log(`   ${DIM}Next steps:${RESET}`);
     console.log(`     ${CYAN}cd ${projectName}${RESET}`);
-    console.log(`     ${CYAN}npx easyorders start${RESET}`);
+    console.log(`     ${CYAN} easyorders start${RESET}`);
     console.log("");
 }
 async function startDev() {
@@ -103,15 +103,36 @@ async function startDev() {
     const serverDir = path.join(CLI_ROOT, "server");
     const indexScript = path.join(serverDir, "index.js");
     const tunnelScript = path.join(serverDir, "tunnel.js");
-    const cmd = `node "${tunnelScript}" & node "${indexScript}"`;
-    const child = spawn(cmd, {
+    const childEnv = { ...process.env, THEME_DIR: themeDir };
+    // Spawn both processes independently for cross-platform support
+    // (Using shell `&` only works on Unix; on Windows cmd.exe it runs sequentially and hangs)
+    const tunnel = spawn("node", [tunnelScript], {
         stdio: "inherit",
         cwd,
-        env: { ...process.env, THEME_DIR: themeDir },
-        shell: true,
+        env: childEnv,
     });
-    child.on("exit", (code) => {
-        process.exit(code ?? 0);
+    const server = spawn("node", [indexScript], {
+        stdio: "inherit",
+        cwd,
+        env: childEnv,
+    });
+    let exitCode = 0;
+    function cleanup(code) {
+        exitCode = code;
+        tunnel.kill();
+        server.kill();
+    }
+    tunnel.on("exit", (code) => cleanup(code ?? 1));
+    server.on("exit", (code) => cleanup(code ?? 1));
+    process.on("SIGINT", () => {
+        tunnel.kill();
+        server.kill();
+        process.exit(exitCode);
+    });
+    process.on("SIGTERM", () => {
+        tunnel.kill();
+        server.kill();
+        process.exit(exitCode);
     });
 }
 function showMenu() {

package/dist/server/index.js

@@ -23,6 +23,7 @@ const port = Number(process.env.PORT) || 4000;
 const URL_FILE = path.resolve(process.cwd(), ".tunnel-url");
 const THEME_DIR = process.env.THEME_DIR || path.resolve(process.cwd(), "theme");
 const SECTIONS_DIR = path.join(THEME_DIR, "sections");
+const HOME_SECTIONS_DIR = path.join(THEME_DIR, "home-sections");
 const AUTH_READY_FILE = path.resolve(process.cwd(), ".auth-ready");
 app.use(express.json());
 function getBaseUrl(req) {
@@ -49,6 +50,26 @@ function buildSections() {
         template: fs.readFileSync(path.join(SECTIONS_DIR, file), "utf-8"),
     }));
 }
+function buildHomeSections() {
+    if (!fs.existsSync(HOME_SECTIONS_DIR))
+        return [];
+    const result = [];
+    const entries = fs.readdirSync(HOME_SECTIONS_DIR, { withFileTypes: true });
+    for (const entry of entries) {
+        if (!entry.isDirectory())
+            continue;
+        const key = entry.name.replace(/-/g, "_");
+        const folderPath = path.join(HOME_SECTIONS_DIR, entry.name);
+        const configPath = path.join(folderPath, "config.json");
+        const templatePath = path.join(folderPath, "template.liquid");
+        if (!fs.existsSync(configPath) || !fs.existsSync(templatePath))
+            continue;
+        const config = readJsonFile(configPath);
+        const template = fs.readFileSync(templatePath, "utf-8");
+        result.push({ key, ...config, template });
+    }
+    return result;
+}
 function extractSubdomain(input) {
     const trimmed = input.trim();
     try {
@@ -211,6 +232,7 @@ app.get("/theme", (req, res) => {
     const baseUrl = getBaseUrl(req);
     res.json({
         sections: buildSections(),
+        home_sections: buildHomeSections(),
         theme_data: readJsonFile(path.join(THEME_DIR, "theme-data.json")),
         config: readJsonFile(path.join(THEME_DIR, "config.json")),
         style: `${baseUrl}/style.css`,

package/dist/template/theme/home-sections/category-mosaic/config.json

@@ -0,0 +1,66 @@
+{
+  "icon": "https://api.iconify.design/lucide:grid-3x3.svg",
+  "label": "Category mosaic",
+  "section_schema": [
+    {
+      "name": "title",
+      "type": "string",
+      "default": "Shop by mood",
+      "description": "Section heading"
+    },
+    {
+      "name": "subtitle",
+      "type": "string",
+      "default": "Curated drops for work, weekend, and everything between.",
+      "description": "Subheading under the title"
+    },
+    {
+      "name": "columns",
+      "type": "select",
+      "default": "3",
+      "description": "Columns on large screens",
+      "options": [
+        { "label": "Two columns", "value": "2" },
+        { "label": "Three columns", "value": "3" },
+        { "label": "Four columns", "value": "4" }
+      ]
+    },
+    {
+      "name": "gap_tight",
+      "type": "boolean",
+      "default": false,
+      "description": "Use tighter spacing between tiles"
+    },
+    {
+      "name": "tiles",
+      "type": "object_array",
+      "description": "Category or collection tiles",
+      "fields": [
+        {
+          "name": "image",
+          "type": "string",
+          "default": "",
+          "description": "Tile image URL"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "Dresses",
+          "description": "Tile title"
+        },
+        {
+          "name": "tagline",
+          "type": "string",
+          "default": "Fluid lines",
+          "description": "Short line under the title"
+        },
+        {
+          "name": "url",
+          "type": "string",
+          "default": "/products",
+          "description": "Tile link URL"
+        }
+      ]
+    }
+  ]
+}

package/dist/template/theme/home-sections/category-mosaic/template.liquid

@@ -0,0 +1,151 @@
+<section
+  class="category-mosaic{% if section_data.gap_tight %} category-mosaic--tight{% endif %}"
+  style="--mosaic-cols: {{ section_data.columns | default: '3' }};"
+>
+  <div class="category-mosaic__head">
+    {% if section_data.title != blank %}
+      <h2 class="category-mosaic__title">{{ section_data.title }}</h2>
+    {% endif %}
+    {% if section_data.subtitle != blank %}
+      <p class="category-mosaic__subtitle">{{ section_data.subtitle }}</p>
+    {% endif %}
+  </div>
+
+  {% if section_data.tiles and section_data.tiles.size > 0 %}
+    <div class="category-mosaic__grid">
+      {% for tile in section_data.tiles %}
+        <a class="category-mosaic__tile" href="{{ tile.url | default: '#' }}">
+          <div class="category-mosaic__visual">
+            {% if tile.image != blank %}
+              <img
+                class="category-mosaic__img"
+                src="{{ tile.image }}"
+                alt="{{ tile.label }}"
+                loading="lazy"
+                width="640"
+                height="800"
+              />
+            {% else %}
+              <div class="category-mosaic__img-fallback" aria-hidden="true"></div>
+            {% endif %}
+            <div class="category-mosaic__shade" aria-hidden="true"></div>
+          </div>
+          <div class="category-mosaic__meta">
+            {% if tile.label != blank %}
+              <span class="category-mosaic__label">{{ tile.label }}</span>
+            {% endif %}
+            {% if tile.tagline != blank %}
+              <span class="category-mosaic__tagline">{{ tile.tagline }}</span>
+            {% endif %}
+          </div>
+        </a>
+      {% endfor %}
+    </div>
+  {% endif %}
+</section>
+
+<style>
+  .category-mosaic {
+    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 3rem;
+    background: #fff;
+    color: #141218;
+  }
+  .category-mosaic--tight .category-mosaic__grid {
+    gap: 0.75rem;
+  }
+  .category-mosaic__head {
+    max-width: 720px;
+    margin: 0 auto 2rem;
+    text-align: center;
+  }
+  .category-mosaic__title {
+    margin: 0 0 0.5rem;
+    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+    font-weight: 500;
+    font-size: clamp(1.75rem, 4vw, 2.35rem);
+  }
+  .category-mosaic__subtitle {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.6;
+    color: #5c5852;
+  }
+  .category-mosaic__grid {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(var(--mosaic-cols, 3), minmax(0, 1fr));
+    gap: 1.25rem;
+  }
+  @media (max-width: 899px) {
+    .category-mosaic__grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (max-width: 520px) {
+    .category-mosaic__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+  .category-mosaic__tile {
+    position: relative;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #ece8e1;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+  .category-mosaic__tile:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 22px 50px rgba(20, 18, 24, 0.18);
+  }
+  .category-mosaic__visual {
+    position: relative;
+    aspect-ratio: 3 / 4;
+    overflow: hidden;
+  }
+  .category-mosaic__img,
+  .category-mosaic__img-fallback {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.45s ease;
+  }
+  .category-mosaic__img-fallback {
+    background: linear-gradient(160deg, #d4cec4, #a39a8f);
+  }
+  .category-mosaic__tile:hover .category-mosaic__img {
+    transform: scale(1.04);
+  }
+  .category-mosaic__shade {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, rgba(12, 10, 14, 0.72), transparent 55%);
+    pointer-events: none;
+  }
+  .category-mosaic__meta {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 1.25rem 1.1rem 1.1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    color: #fff;
+  }
+  .category-mosaic__label {
+    font-size: 1.05rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+  .category-mosaic__tagline {
+    font-size: 0.82rem;
+    opacity: 0.88;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+</style>

package/dist/template/theme/home-sections/editorial-feature/config.json

@@ -0,0 +1,68 @@
+{
+  "icon": "https://api.iconify.design/lucide:layout-template.svg",
+  "label": "Editorial feature",
+  "section_schema": [
+    {
+      "name": "image",
+      "type": "string",
+      "default": "",
+      "description": "Feature image URL"
+    },
+    {
+      "name": "eyebrow",
+      "type": "string",
+      "default": "Inside the atelier",
+      "description": "Small label above the title"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "default": "Tailoring that moves with you",
+      "description": "Headline"
+    },
+    {
+      "name": "body",
+      "type": "string",
+      "default": "Precision cuts and fluid fabrics—designed for city days and slow evenings. Discover the pieces our stylists reach for first.",
+      "description": "Body copy"
+    },
+    {
+      "name": "cta_label",
+      "type": "string",
+      "default": "Explore the story",
+      "description": "Link label"
+    },
+    {
+      "name": "cta_url",
+      "type": "string",
+      "default": "/pages/about",
+      "description": "Link URL"
+    },
+    {
+      "name": "image_position",
+      "type": "select",
+      "default": "left",
+      "description": "Image side on desktop",
+      "options": [
+        { "label": "Image left", "value": "left" },
+        { "label": "Image right", "value": "right" }
+      ]
+    },
+    {
+      "name": "surface",
+      "type": "select",
+      "default": "light",
+      "description": "Color mood",
+      "options": [
+        { "label": "Light editorial", "value": "light" },
+        { "label": "Dark editorial", "value": "dark" }
+      ]
+    },
+    {
+      "name": "accent_color",
+      "type": "color",
+      "default": "#8B7355",
+      "description": "Eyebrow and link accent"
+    }
+  ]
+}

package/dist/template/theme/home-sections/editorial-feature/template.liquid

@@ -0,0 +1,145 @@
+<section
+  class="editorial-feature editorial-feature--{{ section_data.surface | default: 'light' }} editorial-feature--img-{{ section_data.image_position | default: 'left' }}"
+  style="--ed-accent: {{ section_data.accent_color | default: '#8B7355' }};"
+>
+  <div class="editorial-feature__grid">
+    <div class="editorial-feature__media">
+      {% if section_data.image != blank %}
+        <img
+          class="editorial-feature__img"
+          src="{{ section_data.image }}"
+          alt="{{ section_data.title | default: 'Feature' }}"
+          loading="lazy"
+          width="900"
+          height="1100"
+        />
+      {% else %}
+        <div class="editorial-feature__placeholder" role="img" aria-label=""></div>
+      {% endif %}
+    </div>
+    <div class="editorial-feature__copy">
+      {% if section_data.eyebrow != blank %}
+        <p class="editorial-feature__eyebrow">{{ section_data.eyebrow }}</p>
+      {% endif %}
+      {% if section_data.title != blank %}
+        <h2 class="editorial-feature__title">{{ section_data.title }}</h2>
+      {% endif %}
+      {% if section_data.body != blank %}
+        <p class="editorial-feature__body">{{ section_data.body }}</p>
+      {% endif %}
+      {% if section_data.cta_label != blank %}
+        <a class="editorial-feature__link" href="{{ section_data.cta_url | default: '#' }}">
+          {{ section_data.cta_label }}
+          <span class="editorial-feature__link-arrow" aria-hidden="true">→</span>
+        </a>
+      {% endif %}
+    </div>
+  </div>
+</section>
+
+<style>
+  .editorial-feature {
+    padding: clamp(2.5rem, 5vw, 4.5rem) 1.25rem;
+  }
+  .editorial-feature--light {
+    background: #f6f3ee;
+    color: #1c1a17;
+  }
+  .editorial-feature--dark {
+    background: #121015;
+    color: #f4eee6;
+  }
+  .editorial-feature__grid {
+    max-width: 1120px;
+    margin: 0 auto;
+    display: grid;
+    gap: clamp(1.75rem, 4vw, 3rem);
+    align-items: center;
+  }
+  @media (min-width: 900px) {
+    .editorial-feature__grid {
+      grid-template-columns: 1.05fr 1fr;
+    }
+    .editorial-feature--img-right .editorial-feature__media {
+      order: 2;
+    }
+    .editorial-feature--img-right .editorial-feature__copy {
+      order: 1;
+    }
+  }
+  .editorial-feature__media {
+    position: relative;
+  }
+  .editorial-feature__img {
+    width: 100%;
+    display: block;
+    border-radius: 4px;
+    object-fit: cover;
+    aspect-ratio: 4 / 5;
+    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
+  }
+  .editorial-feature--dark .editorial-feature__img {
+    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
+  }
+  .editorial-feature__placeholder {
+    width: 100%;
+    aspect-ratio: 4 / 5;
+    border-radius: 4px;
+    background: linear-gradient(145deg, rgba(139, 115, 85, 0.35), rgba(28, 26, 23, 0.08));
+  }
+  .editorial-feature--dark .editorial-feature__placeholder {
+    background: linear-gradient(145deg, rgba(201, 169, 98, 0.25), rgba(0, 0, 0, 0.4));
+  }
+  .editorial-feature__copy {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.25rem 0;
+  }
+  .editorial-feature__eyebrow {
+    margin: 0;
+    font-size: 0.72rem;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: var(--ed-accent, #8b7355);
+  }
+  .editorial-feature__title {
+    margin: 0;
+    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+    font-weight: 500;
+    font-size: clamp(1.85rem, 4vw, 2.65rem);
+    line-height: 1.15;
+  }
+  .editorial-feature__body {
+    margin: 0;
+    font-size: 1.02rem;
+    line-height: 1.75;
+    opacity: 0.88;
+    max-width: 34rem;
+  }
+  .editorial-feature__link {
+    margin-top: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.82rem;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: var(--ed-accent, #8b7355);
+    border-bottom: 1px solid currentColor;
+    padding-bottom: 2px;
+    width: fit-content;
+    transition: gap 0.2s ease, opacity 0.2s ease;
+  }
+  .editorial-feature__link:hover {
+    gap: 0.65rem;
+    opacity: 0.85;
+  }
+  .editorial-feature__link-arrow {
+    font-size: 1rem;
+    line-height: 1;
+  }
+</style>

package/dist/template/theme/home-sections/newsletter-luxe/config.json

@@ -0,0 +1,66 @@
+{
+  "icon": "https://api.iconify.design/lucide:mail.svg",
+  "label": "Newsletter — luxe",
+  "section_schema": [
+    {
+      "name": "headline",
+      "type": "string",
+      "default": "Notes from the studio",
+      "description": "Heading"
+    },
+    {
+      "name": "body",
+      "type": "string",
+      "default": "Private previews, styling tips, and early access to drops—sent sparingly, never noisy.",
+      "description": "Supporting text"
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "default": "Email address",
+      "description": "Input placeholder"
+    },
+    {
+      "name": "button_label",
+      "type": "string",
+      "default": "Join the list",
+      "description": "Submit button label"
+    },
+    {
+      "name": "form_action",
+      "type": "string",
+      "default": "/pages/contact",
+      "description": "Form action URL (your ESP or contact page)"
+    },
+    {
+      "name": "footnote",
+      "type": "string",
+      "default": "By subscribing you agree to receive marketing emails. Unsubscribe anytime.",
+      "description": "Fine print under the form"
+    },
+    {
+      "name": "show_footnote",
+      "type": "boolean",
+      "default": true,
+      "description": "Show the fine print"
+    },
+    {
+      "name": "bg_color",
+      "type": "color",
+      "default": "#1A1814",
+      "description": "Section background"
+    },
+    {
+      "name": "text_color",
+      "type": "color",
+      "default": "#F4EEE6",
+      "description": "Section text color"
+    },
+    {
+      "name": "button_color",
+      "type": "color",
+      "default": "#C9A962",
+      "description": "Button background"
+    }
+  ]
+}