@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/sections/baseline-section.liquid

@@ -0,0 +1,661 @@
+{% comment %}
+  Baseline Section (spec: components/section/spec.md): a full-width band in a colour scheme with block padding on the
+  responsive spacing scale. Its width setting is its first Container, so the common case needs no extra block; add a
+  Container block for a second width, Columns for a column layout and Panel for a card-style box. Built from scratch on
+  the tokens: Skeleton's page grid (.shopify-section) is escaped with full-width.
+{% endcomment %}
+{%- capture section_blocks -%}{% content_for 'blocks' %}{%- endcapture -%}
+<{{ section.settings.tag }}
+  class="bl-section full-width color-{{ section.settings.color_scheme.id }}"
+  data-slot="section"
+  data-surface="{{ section.settings.surface }}"
+  data-padding-top="{{ section.settings.padding_top }}"
+  data-padding-bottom="{{ section.settings.padding_bottom }}"
+>
+  {% render 'container',
+    content: section_blocks,
+    width: section.settings.width,
+    padding_x: section.settings.padding_x,
+    gap: section.settings.gap
+  %}
+</{{ section.settings.tag }}>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/section/section.tsx: the scheme paints the band edge to edge. */
+  .bl-section {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+  /* Figma's Surface mode on the Section: the role pair within the scheme (muted for an announcement bar). */
+  .bl-section[data-surface='muted'] { background-color: var(--muted); color: var(--muted-foreground); }
+  .bl-section[data-surface='card'] { background-color: var(--card); color: var(--card-foreground); }
+  .bl-section[data-surface='primary'] { background-color: var(--primary); color: var(--primary-foreground); }
+  .bl-section[data-surface='secondary'] { background-color: var(--secondary); color: var(--secondary-foreground); }
+  .bl-section[data-surface='accent'] { background-color: var(--accent); color: var(--accent-foreground); }
+  .bl-section[data-surface='inverse'] { background-color: var(--foreground); color: var(--background); }
+  .bl-section[data-padding-top='none'] { padding-top: 0; }
+  .bl-section[data-padding-top='xs'] { padding-top: var(--bl-spacing-responsive-xs); }
+  .bl-section[data-padding-top='sm'] { padding-top: var(--bl-spacing-responsive-sm); }
+  .bl-section[data-padding-top='md'] { padding-top: var(--bl-spacing-responsive-md); }
+  .bl-section[data-padding-top='lg'] { padding-top: var(--bl-spacing-responsive-lg); }
+  .bl-section[data-padding-top='xl'] { padding-top: var(--bl-spacing-responsive-xl); }
+  .bl-section[data-padding-top='2xl'] { padding-top: var(--bl-spacing-responsive-2xl); }
+  .bl-section[data-padding-bottom='none'] { padding-bottom: 0; }
+  .bl-section[data-padding-bottom='xs'] { padding-bottom: var(--bl-spacing-responsive-xs); }
+  .bl-section[data-padding-bottom='sm'] { padding-bottom: var(--bl-spacing-responsive-sm); }
+  .bl-section[data-padding-bottom='md'] { padding-bottom: var(--bl-spacing-responsive-md); }
+  .bl-section[data-padding-bottom='lg'] { padding-bottom: var(--bl-spacing-responsive-lg); }
+  .bl-section[data-padding-bottom='xl'] { padding-bottom: var(--bl-spacing-responsive-xl); }
+  .bl-section[data-padding-bottom='2xl'] { padding-bottom: var(--bl-spacing-responsive-2xl); }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:baseline.section.name",
+  "tag": "div",
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "settings": [
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:baseline.color_scheme",
+      "default": "scheme-1"
+    },
+    {
+      "type": "select",
+      "id": "surface",
+      "label": "t:baseline.section.surface",
+      "options": [
+        {
+          "value": "background",
+          "label": "t:baseline.section.surface_background"
+        },
+        {
+          "value": "muted",
+          "label": "t:baseline.section.surface_muted"
+        },
+        {
+          "value": "card",
+          "label": "t:baseline.section.surface_card"
+        },
+        {
+          "value": "primary",
+          "label": "t:baseline.section.surface_primary"
+        },
+        {
+          "value": "secondary",
+          "label": "t:baseline.section.surface_secondary"
+        },
+        {
+          "value": "accent",
+          "label": "t:baseline.section.surface_accent"
+        },
+        {
+          "value": "inverse",
+          "label": "t:baseline.section.surface_inverse"
+        }
+      ],
+      "default": "background"
+    },
+    {
+      "type": "select",
+      "id": "tag",
+      "label": "t:baseline.section.tag",
+      "options": [
+        {
+          "value": "section",
+          "label": "section"
+        },
+        {
+          "value": "header",
+          "label": "header"
+        },
+        {
+          "value": "footer",
+          "label": "footer"
+        },
+        {
+          "value": "article",
+          "label": "article"
+        },
+        {
+          "value": "div",
+          "label": "div"
+        }
+      ],
+      "default": "section"
+    },
+    {
+      "type": "select",
+      "id": "padding_top",
+      "label": "t:baseline.section.padding_top",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "xs",
+          "label": "XS"
+        },
+        {
+          "value": "sm",
+          "label": "SM"
+        },
+        {
+          "value": "md",
+          "label": "MD"
+        },
+        {
+          "value": "lg",
+          "label": "LG"
+        },
+        {
+          "value": "xl",
+          "label": "XL"
+        },
+        {
+          "value": "2xl",
+          "label": "2XL"
+        }
+      ],
+      "default": "lg"
+    },
+    {
+      "type": "select",
+      "id": "padding_bottom",
+      "label": "t:baseline.section.padding_bottom",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "xs",
+          "label": "XS"
+        },
+        {
+          "value": "sm",
+          "label": "SM"
+        },
+        {
+          "value": "md",
+          "label": "MD"
+        },
+        {
+          "value": "lg",
+          "label": "LG"
+        },
+        {
+          "value": "xl",
+          "label": "XL"
+        },
+        {
+          "value": "2xl",
+          "label": "2XL"
+        }
+      ],
+      "default": "lg"
+    },
+    {
+      "type": "header",
+      "content": "t:baseline.container.name"
+    },
+    {
+      "type": "select",
+      "id": "width",
+      "label": "t:baseline.container.width",
+      "options": [
+        {
+          "value": "content",
+          "label": "t:baseline.container.content"
+        },
+        {
+          "value": "wide",
+          "label": "t:baseline.container.wide"
+        },
+        {
+          "value": "full",
+          "label": "t:baseline.container.full"
+        }
+      ],
+      "default": "wide"
+    },
+    {
+      "type": "select",
+      "id": "padding_x",
+      "label": "t:baseline.container.padding_x",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "xs",
+          "label": "XS"
+        },
+        {
+          "value": "sm",
+          "label": "SM"
+        },
+        {
+          "value": "md",
+          "label": "MD"
+        },
+        {
+          "value": "lg",
+          "label": "LG"
+        },
+        {
+          "value": "xl",
+          "label": "XL"
+        },
+        {
+          "value": "2xl",
+          "label": "2XL"
+        }
+      ],
+      "default": "xs"
+    },
+    {
+      "type": "select",
+      "id": "gap",
+      "label": "t:baseline.container.gap",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "xs",
+          "label": "XS"
+        },
+        {
+          "value": "sm",
+          "label": "SM"
+        },
+        {
+          "value": "md",
+          "label": "MD"
+        },
+        {
+          "value": "lg",
+          "label": "LG"
+        },
+        {
+          "value": "xl",
+          "label": "XL"
+        },
+        {
+          "value": "2xl",
+          "label": "2XL"
+        }
+      ],
+      "default": "sm"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.section.name",
+      "blocks": {
+        "columns": {
+          "type": "columns",
+          "blocks": {
+            "one": {
+              "type": "_column",
+              "blocks": {
+                "text": {
+                  "type": "text",
+                  "settings": {
+                    "text": "Column one",
+                    "text_style": "text--title"
+                  }
+                }
+              },
+              "block_order": [
+                "text"
+              ]
+            },
+            "two": {
+              "type": "_column",
+              "blocks": {
+                "text": {
+                  "type": "text",
+                  "settings": {
+                    "text": "Column two",
+                    "text_style": "text--normal"
+                  }
+                }
+              },
+              "block_order": [
+                "text"
+              ]
+            }
+          },
+          "block_order": [
+            "one",
+            "two"
+          ]
+        }
+      },
+      "block_order": [
+        "columns"
+      ]
+    },
+    {
+      "name": "t:baseline.sections.hero_centered",
+      "settings": {
+        "width": "content"
+      },
+      "blocks": {
+        "heading": {
+          "type": "section-heading",
+          "settings": {
+            "heading": "Build a website your team can run",
+            "style": "display-sm",
+            "tag": "h1",
+            "lead": "<p>Launch faster with components that are designed, built and tested together for every platform you use.</p>",
+            "alignment": "center"
+          },
+          "blocks": {
+            "primary": {
+              "type": "button",
+              "settings": {
+                "label": "Start a free trial",
+                "link": "/",
+                "variant": "default"
+              }
+            },
+            "secondary": {
+              "type": "button",
+              "settings": {
+                "label": "Request a demo",
+                "link": "/",
+                "variant": "outline"
+              }
+            }
+          },
+          "block_order": [
+            "primary",
+            "secondary"
+          ]
+        }
+      },
+      "block_order": [
+        "heading"
+      ]
+    },
+    {
+      "name": "t:baseline.sections.hero_split",
+      "settings": {
+        "width": "wide"
+      },
+      "blocks": {
+        "columns": {
+          "type": "columns",
+          "settings": {
+            "columns": 2,
+            "gap": "sm"
+          },
+          "blocks": {
+            "text": {
+              "type": "_column",
+                  "settings": { "align": "center" },
+              "blocks": {
+                "heading": {
+                  "type": "section-heading",
+                  "settings": {
+                    "eyebrow": "New for 2026",
+                    "heading": "Build a website your team can run",
+                    "style": "display-sm",
+                    "tag": "h1",
+                    "lead": "<p>Launch faster with components that are designed, built and tested together for every platform you use.</p>",
+                    "alignment": "start"
+                  },
+                  "blocks": {
+                    "primary": {
+                      "type": "button",
+                      "settings": {
+                        "label": "Start a free trial",
+                        "link": "/",
+                        "variant": "default"
+                      }
+                    },
+                    "secondary": {
+                      "type": "button",
+                      "settings": {
+                        "label": "Request a demo",
+                        "link": "/",
+                        "variant": "outline"
+                      }
+                    }
+                  },
+                  "block_order": [
+                    "primary",
+                    "secondary"
+                  ]
+                }
+              },
+              "block_order": [
+                "heading"
+              ]
+            },
+            "image": {
+              "type": "_column",
+              "blocks": {
+                "media": {
+                  "type": "media",
+                  "settings": {
+                    "ratio": "1-1"
+                  }
+                }
+              },
+              "block_order": [
+                "media"
+              ]
+            }
+          },
+          "block_order": [
+            "text",
+            "image"
+          ]
+        }
+      },
+      "block_order": [
+        "columns"
+      ]
+    },
+    {
+      "name": "t:baseline.sections.cta_left",
+      "settings": {
+        "width": "wide"
+      },
+      "blocks": {
+        "heading": {
+          "type": "section-heading",
+          "settings": {
+            "heading": "Let’s build something great together",
+            "style": "heading-xl",
+            "tag": "h2",
+            "alignment": "start"
+          },
+          "blocks": {
+            "primary": {
+              "type": "button",
+              "settings": {
+                "label": "Start a free trial",
+                "link": "/",
+                "variant": "default"
+              }
+            },
+            "secondary": {
+              "type": "button",
+              "settings": {
+                "label": "Request a demo",
+                "link": "/",
+                "variant": "outline"
+              }
+            }
+          },
+          "block_order": [
+            "primary",
+            "secondary"
+          ]
+        }
+      },
+      "block_order": [
+        "heading"
+      ]
+    },
+    {
+      "name": "t:baseline.sections.faq_centered",
+      "settings": {
+        "width": "content"
+      },
+      "blocks": {
+        "heading": {
+          "type": "section-heading",
+          "settings": {
+            "heading": "Frequently asked questions",
+            "style": "heading-xl",
+            "tag": "h2",
+            "lead": "<p>Can’t find the answer you’re looking for? Contact our support team.</p>",
+            "alignment": "start"
+          }
+        },
+        "faq": {
+          "type": "accordion",
+          "blocks": {
+            "one": {
+              "type": "_accordion-item",
+              "settings": {
+                "title": "How do I reset my password?",
+                "open": true
+              },
+              "blocks": {
+                "text": {
+                  "type": "text",
+                  "settings": {
+                    "text": "Click on ‘Forgot password’ on the login page and we’ll email you a link. It expires in 24 hours.",
+                    "text_style": "text--normal"
+                  }
+                }
+              },
+              "block_order": [
+                "text"
+              ]
+            },
+            "two": {
+              "type": "_accordion-item",
+              "settings": {
+                "title": "Can I change my plan later?",
+                "open": false
+              },
+              "blocks": {
+                "text": {
+                  "type": "text",
+                  "settings": {
+                    "text": "Yes. Changes apply from the next billing period.",
+                    "text_style": "text--normal"
+                  }
+                }
+              },
+              "block_order": [
+                "text"
+              ]
+            },
+            "three": {
+              "type": "_accordion-item",
+              "settings": {
+                "title": "Do you offer support?",
+                "open": false
+              },
+              "blocks": {
+                "text": {
+                  "type": "text",
+                  "settings": {
+                    "text": "Every plan includes email support; business plans add phone support.",
+                    "text_style": "text--normal"
+                  }
+                }
+              },
+              "block_order": [
+                "text"
+              ]
+            }
+          },
+          "block_order": [
+            "one",
+            "two",
+            "three"
+          ]
+        }
+      },
+      "block_order": [
+        "heading",
+        "faq"
+      ]
+    },
+    {
+      "name": "t:baseline.sections.contact_centered",
+      "settings": {
+        "width": "content"
+      },
+      "blocks": {
+        "heading": {
+          "type": "section-heading",
+          "settings": {
+            "heading": "Get in touch",
+            "style": "heading-xl",
+            "tag": "h2",
+            "lead": "<p>Tell us about your project and we’ll get back to you within one business day.</p>",
+            "alignment": "start"
+          }
+        },
+        "form": {
+          "type": "contact-form"
+        }
+      },
+      "block_order": [
+        "heading",
+        "form"
+      ]
+    },
+    {
+      "name": "t:baseline.sections.blog_card_grid",
+      "settings": {
+        "width": "wide"
+      },
+      "blocks": {
+        "heading": {
+          "type": "section-heading",
+          "settings": {
+            "eyebrow": "Blog",
+            "heading": "Latest articles",
+            "style": "heading-xl",
+            "tag": "h2",
+            "lead": "<p>Insights on design, development and marketing from our team.</p>",
+            "alignment": "start"
+          }
+        },
+        "posts": {
+          "type": "blog-posts",
+          "settings": {
+            "limit": 3
+          }
+        }
+      },
+      "block_order": [
+        "heading",
+        "posts"
+      ]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/sections/blog.liquid

@@ -0,0 +1,36 @@
+{% comment %}
+  This section is used in the blog template to render the blog page listing all
+  articles within a blog.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/blog
+{% endcomment %}
+
+{% render 'breadcrumb', class: 'bl-breadcrumb--page' %}
+<h1>{{ blog.title }}</h1>
+
+{% paginate blog.articles by 5 %}
+  {% for article in blog.articles %}
+    <div>
+      {% if article.image %}
+        {{ article.image | image_url: width: 1000 | image_tag }}
+      {% endif %}
+      <h2>
+        {{ article.title | link_to: article.url }}
+      </h2>
+      {% assign date = article.published_at | time_tag: format: 'date' %}
+      <p>{{ 'blog.article_metadata_html' | t: date: date, author: article.author }}</p>
+      <p>{{ article.excerpt }}</p>
+    </div>
+  {% endfor %}
+
+  {%- if paginate.pages > 1 -%}
+    {% render 'pagination', paginate: paginate %}
+  {%- endif -%}
+{% endpaginate %}
+
+{% schema %}
+{
+  "name": "t:general.blog",
+  "settings": []
+}
+{% endschema %}