More explanation regarding file organization

file-documentation.liquid

{% # Snippet documentation comment %}
{%- comment -%}
  Renders the template name based on the template object.

  Accepts:
    - template {Template object} - Template object

  Usage:
    {% render 'template-name' %}
{%- endcomment -%}

{% # Here is how Dawn does it, really similar https://github.com/Shopify/dawn/blob/main/snippets/facets.liquid %}

////////////////////////////////////////////////////

{% # Section documentation comment %}
{% liquid
  # MX Announcement bar v1.1.0 - https://xxx.myshopify.com/pages/sections/announcement-bar
  # Section name (version) - Documentation URL
  
  # Followed by the liquid logic part
%}

file-logic.liquid

{% # Snippet liquid block %}
{% liquid
  assign template_name = 'template-' | append: template.name

  if template.suffix
    assign template_name = template_name | append: ' ' | append: template_name | append: '-' | append: template.suffix
  endif

  # In this case, no markup, I just output what my logic prepared
  echo template_name
%}

////////////////////////////////////////////////////

{% liquid
  # MX Announcement bar v1.1.0 - https://xxx.myshopify.com/pages/sections/announcement-bar
  echo 'mx-announcement-bar.css' | asset_url | stylesheet_tag
  echo 'mx-announcement-bar.js' | asset_url | script_tag | replace_first: 'text/javascript', 'module'

  capture dynamic_style
    assign base_selector = '#shopify-section-' | append: section.id
    echo base_selector | append: ' {'
    render 'mx-section-style', section: section
    echo '}'
  endcapture
  render 'mx-css-minifier', css: dynamic_style, section: section

  assign announcement_block_list = section.blocks | where: 'type', 'announcement'
  assign announcement_slider_id = 'announcement-slider-' | append: section.id

  if announcement_block_list == empty
    continue
  endif
%}

{% # After this liquid block, all my data is ready to be used as is, no sugar-coating needed %}

file-markup.liquid

{% # Here's what my markup looks like once you apply the logic prepared beforehand %}
{% # Lots of things to uncover here, feel free to ask if something piques your curiosity %}

<mx-section class="mx-announcement-bar">
  <div class="announcement-list-container">
    <ul is="mx-slider" class="announcement-list" id="{{ announcement_slider_id }}">
      {% for announcement_block in announcement_block_list %}
        {% liquid
          assign block_attributes = announcement_block.shopify_attributes
          assign content = announcement_block.settings.content | remove: '<div class="metafield-rich_text_field">' | remove: '</div>'
          assign link = announcement_block.settings.link

          assign container_tag = 'div'
          assign behavior_attribute = ''
          if link != blank
            assign container_tag = 'a'
            assign behavior_attribute = 'href="' | append: link | append: '"'
          endif
        %}
        <li class="announcement-container" {{ block_attributes }}>
          <{{ container_tag }} class="announcement-content-container" {{ behavior_attribute }}>
            {{ content }}
          </{{ container_tag }}>
        </li>
      {% endfor %}
    </ul>
    <script type="application/json" id="{{ announcement_slider_id }}__config">
      {
        "allowDrag": false,
        "loopOver": true
      }
    </script>

    <button
      class="announcement-arrow"
      is="mx-slider-navigation-button"
      data-previous
      aria-controls="{{ announcement_slider_id }}"
    >
      <span class="sr-only">{{ 'mx.general.previous' | t }}</span>
      {% render 'mx-svg-library', svg: 'chevron', class: 'announcement-arrow-icon' %}
    </button>
    <button
      class="announcement-arrow"
      is="mx-slider-navigation-button"
      data-next
      aria-controls="{{ announcement_slider_id }}"
    >
      <span class="sr-only">{{ 'mx.general.next' | t }}</span>
      {% render 'mx-svg-library', svg: 'chevron', class: 'announcement-arrow-icon' %}
    </button>
  </div>
</mx-section>

file-schema.liquid

{% # Again, lots of things in lots of places, we'll go over many schema patterns / combos over time, it will be nice ! %}

{% schema %}
{
  "name": "t:mx.sections.announcement_bar.name",
  "tag": "section",
  "class": "mx-section shopify-section--announcement-bar",
  "blocks": [
    {
      "type": "announcement",
      "name": "t:mx.sections.announcement_bar.blocks.announcement.name",
      "settings": [
        {
          "type": "paragraph",
          "content": "t:mx.sections.announcement_bar.blocks.announcement.intro"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "t:mx.general.content",
          "info": "t:mx.sections.announcement_bar.blocks.announcement.settings.content.info"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:mx.general.link",
          "info": "t:mx.sections.announcement_bar.blocks.announcement.settings.link.info"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "header",
      "content": "t:mx.sections.announcement_bar.intro"
    },
    {
      "type": "header",
      "content": "t:mx.general.max_width"
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "t:mx.sections.announcement_bar.settings.max_width.label",
      "min": 200,
      "max": 2000,
      "step": 20,
      "unit": "px",
      "default": 480
    },
    {
      "type": "header",
      "content": "t:mx.general.color.other"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:mx.sections.general.background_color.label",
      "default": "#1f1f1f"
    },
    {
      "type": "color",
      "id": "content_color",
      "label": "t:mx.sections.general.content_color.label",
      "default": "#ffffff"
    }
  ],
  "presets": []
}
{% endschema %}