+
- {% if page.title -%}

{{ page.title }} {%- if page.version-badge -%} diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss index 0b7ae31fa..fb0dcde4d 100644 --- a/_sass/modules/_buttons.scss +++ b/_sass/modules/_buttons.scss @@ -66,9 +66,15 @@ font-size: $small-font-size; background: none; border: none; - margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1); + margin: $spacing-unit / 2 0; padding: $spacing-unit / 4; color: $color-slate; + position: sticky; + top: 0; + background-color: $color-white; + width: 100%; + text-align: left; + padding-left: $spacing-unit; @include tablet-and-up { display: none; From 63801439e73929b409faab55eda88cfc3ea8cec8 Mon Sep 17 00:00:00 2001 From: ADTC Date: Mon, 29 Mar 2021 23:44:24 +0800 Subject: [PATCH 08/15] Change the style of filter subheadings to indicate them as such It looked like the filter subheadings like Array Filters were new separate sections in the menu, when it should be a subsection under Filters. This fixes it by changing the boldness and adding an indicative arrow next to the header so that it looks different. --- _includes/sidebar-link.html | 2 +- _includes/sidebar.html | 3 +++ _sass/modules/_layout.scss | 8 ++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/_includes/sidebar-link.html b/_includes/sidebar-link.html index 4452f1926..222f56e8e 100644 --- a/_includes/sidebar-link.html +++ b/_includes/sidebar-link.html @@ -1,4 +1,4 @@ -

{{ header | capitalize }}

+

{{ header | capitalize }}

    {%- for item in items -%}
  • diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 6b61cebd5..f60b1ba5e 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -18,8 +18,10 @@ {%- for category in categories -%} {%- if category and category != "aaa" -%} {%- assign header = category | append: " " | append: section -%} + {%- assign header_class = "subheader" -%} {%- else -%} {%- assign header = section -%} + {%- assign header_class = "" -%} {%- endif -%} {%- assign items = site[section] | where: "category", category | sort: "title" -%} {%- include sidebar-link.html -%} @@ -28,6 +30,7 @@ {%- else -%} {%- assign header = section -%} + {%- assign header_class = "" -%} {%- assign items = site[section] -%} {%- include sidebar-link.html -%} diff --git a/_sass/modules/_layout.scss b/_sass/modules/_layout.scss index 828464246..5cfbc570c 100644 --- a/_sass/modules/_layout.scss +++ b/_sass/modules/_layout.scss @@ -119,6 +119,14 @@ body { .section__links + & { margin-top: $spacing-unit; } + + &.subheader { + font-weight: normal; + &::before { + content: '▾'; + margin-right: ($spacing-unit / 2) - 15.5; + } + } } .section__links { From 72897bfd94c3cbd5c2274ffa15b51df1309c950f Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 01:27:37 +0800 Subject: [PATCH 09/15] Add Template tag type and all filter types in the Introduction page Also apply some DRY principles and minification to the Javascript The filter type links use Javascript to scroll the menu to the filter section. On mobile it will also open the menu. Pretty cool, huh? --- _basics/introduction.md | 9 +++++++++ _includes/sidebar-link.html | 2 +- js/script.js | 26 +++++++++++++++++--------- 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/_basics/introduction.md b/_basics/introduction.md index cdf3fd48e..e2b5ba048 100644 --- a/_basics/introduction.md +++ b/_basics/introduction.md @@ -80,3 +80,12 @@ Multiple filters can be used on one output, and are applied from left to right. ```text {{ "adam!" | capitalize | prepend: "Hello " }} ``` + +Filters can be categorized into various types: + +- Array filters +- Math filters +- String filters +- Other filters + +You can see the list of filters for each type in their respective sections on the side menu. diff --git a/_includes/sidebar-link.html b/_includes/sidebar-link.html index 222f56e8e..512f8d159 100644 --- a/_includes/sidebar-link.html +++ b/_includes/sidebar-link.html @@ -1,4 +1,4 @@ -

    {{ header | capitalize }}

    +

    {{ header | capitalize }}

      {%- for item in items -%}
    • diff --git a/js/script.js b/js/script.js index ce9abadf8..9d2ab883e 100644 --- a/js/script.js +++ b/js/script.js @@ -1,15 +1,23 @@ var menuButton = document.querySelector('.menu-button') var sidebar = document.querySelector('.sidebar') +var sidebarNav = document.querySelector('.sidebar__nav') var contentOverlay = document.querySelector('.content__overlay') -document.addEventListener('DOMContentLoaded', function () { - menuButton.addEventListener('click', function () { - sidebar.classList.toggle('sidebar--is-visible') - contentOverlay.classList.toggle('content__overlay--is-active') - }) +function toggleSidebar() { + sidebar.classList.toggle('sidebar--is-visible') + contentOverlay.classList.toggle('content__overlay--is-active') +} + +function scrollToFilter(e, filterId) { + var fi = document.getElementById(filterId) + fi.scrollIntoView() + sidebarNav.scrollTo(sidebarNav.scrollLeft, sidebarNav.scrollTop - 150 + fi.getBoundingClientRect().top) + sidebar.getBoundingClientRect().left < 0 && toggleSidebar() + e.preventDefault() + return false +} - contentOverlay.addEventListener('click', function () { - sidebar.classList.toggle('sidebar--is-visible') - contentOverlay.classList.toggle('content__overlay--is-active') - }) +document.addEventListener('DOMContentLoaded', function () { + menuButton.addEventListener('click', toggleSidebar) + contentOverlay.addEventListener('click', toggleSidebar) }) From 733965e1268d1eaefe6ef7d4d9cb501983a73155 Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 09:31:13 +0800 Subject: [PATCH 10/15] Double the padding at the bottom of the sidebar menu It seems in mobile browsers, the padding is not enough to show the menu properly. The auto-hiding location bar of the browser pushes the menu down when visible. It looks better with double padding on both desktop and mobile. --- _sass/modules/_layout.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_sass/modules/_layout.scss b/_sass/modules/_layout.scss index 5cfbc570c..35757cf81 100644 --- a/_sass/modules/_layout.scss +++ b/_sass/modules/_layout.scss @@ -106,7 +106,8 @@ body { .sidebar__nav-interior { height: 100%; - padding: $spacing-unit; + // Add double padding at the bottom for a better experience + padding: $spacing-unit $spacing-unit ($spacing-unit * 2); } .section__header { From 876e640903973191cb88591c6318dfff6d3ff8e2 Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 14:49:17 +0800 Subject: [PATCH 11/15] Expand the note about optional "as" in the "render for" section A similar expanded note is already in "render with" so just making sure it's also in "render for". --- _tags/template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_tags/template.md b/_tags/template.md index 3f0fab4ca..8f1db1f45 100644 --- a/_tags/template.md +++ b/_tags/template.md @@ -136,7 +136,7 @@ In the example above, the `ft_product` variable in the rendered template will ho ### Rendering iteratively using `for` -A template can be rendered once for each value of an enumerable object by using the `for` and optional `as` parameters. +A template can be rendered once for each value of an enumerable object by using the `for` and `as` parameters. The `as` parameter is optional, and if missing, it assumes the template name as the variable name. ```liquid {%- raw -%} From 22ee87edd8447732f23be9756c5f8f8d881e4dc2 Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 15:35:18 +0800 Subject: [PATCH 12/15] Add a "deprecated" badge on the "include" Template tag This also removes the emphasised note that is now unnecessary. --- _includes/version-badge.html | 9 ++++++++- _tags/template.md | 4 +--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/_includes/version-badge.html b/_includes/version-badge.html index 880c51699..a5e0d4a5a 100644 --- a/_includes/version-badge.html +++ b/_includes/version-badge.html @@ -1 +1,8 @@ - +{%- if include.deprecated -%} + {%- assign adjective = 'deprecated' -%} + {%- assign text = adjective -%} +{%- else -%} + {%- assign adjective = 'available' -%} + {%- assign text = include.version -%} +{%- endif -%} + diff --git a/_tags/template.md b/_tags/template.md index 8f1db1f45..1d8e90eb5 100644 --- a/_tags/template.md +++ b/_tags/template.md @@ -149,9 +149,7 @@ In the example above, the template will be rendered once for each variant of the When using the `for` parameter, the [`forloop`](https://shopify.dev/docs/themes/liquid/reference/objects/for-loops) object is accessible within the rendered template. -## include - -_The `include` tag is deprecated; please use [`render`](#render) instead._ +## include {%- include version-badge.html version="5.0.0" deprecated=true %} Insert the rendered content of another template within the current template. From c5dc0752cc3a0048f13d7eae4af2a6e4bc82dba6 Mon Sep 17 00:00:00 2001 From: ADTC Date: Wed, 31 Mar 2021 05:15:45 +0800 Subject: [PATCH 13/15] Corrections for anchor links (avoid conflict with sidebar) --- _basics/introduction.md | 8 ++++---- _basics/whitespace.md | 2 +- _includes/sidebar-link.html | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/_basics/introduction.md b/_basics/introduction.md index e2b5ba048..051a6ba80 100644 --- a/_basics/introduction.md +++ b/_basics/introduction.md @@ -83,9 +83,9 @@ Multiple filters can be used on one output, and are applied from left to right. Filters can be categorized into various types: -- Array filters -- Math filters -- String filters -- Other filters +- Array filters +- Math filters +- String filters +- Other filters You can see the list of filters for each type in their respective sections on the side menu. diff --git a/_basics/whitespace.md b/_basics/whitespace.md index a2a2b778f..4dedff8bb 100644 --- a/_basics/whitespace.md +++ b/_basics/whitespace.md @@ -89,7 +89,7 @@ If you don't want any of your tags to print whitespace, as a general rule you ca ## Avoiding whitespace without hyphens {%- include version-badge.html version="5.0.0" %} -If you use the [`liquid`]({{ '/tags/template#liquid500' | prepend: site.baseurl }}) tag with the `echo` keyword, you can avoid whitespace without adding hyphens throughout the Liquid code: +If you use the [`liquid`]({{ '/tags/template#liquid' | prepend: site.baseurl }}) tag with the `echo` keyword, you can avoid whitespace without adding hyphens throughout the Liquid code: ```liquid {%- raw -%} diff --git a/_includes/sidebar-link.html b/_includes/sidebar-link.html index 512f8d159..ab45c8e1e 100644 --- a/_includes/sidebar-link.html +++ b/_includes/sidebar-link.html @@ -1,4 +1,4 @@ -

      {{ header | capitalize }}

      +

      {{ header | capitalize }}

        {%- for item in items -%}
      • From 21d241fbd1f1f72c926a44d3df49e28995702b15 Mon Sep 17 00:00:00 2001 From: ADTC Date: Sat, 5 Jun 2021 03:40:55 +0800 Subject: [PATCH 14/15] Drop blank lines from some output examples --- _filters/default.md | 1 - _filters/newline_to_br.md | 2 +- _tags/template.md | 10 +++++----- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/_filters/default.md b/_filters/default.md index 23ea50d76..c8a4f08e1 100644 --- a/_filters/default.md +++ b/_filters/default.md @@ -41,6 +41,5 @@ To allow variables to return `false` instead of the default value, you can use t

        Output

        ```text - false ``` diff --git a/_filters/newline_to_br.md b/_filters/newline_to_br.md index abbf974eb..8a1a6f10d 100644 --- a/_filters/newline_to_br.md +++ b/_filters/newline_to_br.md @@ -25,5 +25,5 @@ Hello there {% endcapture -%} -{{ string_with_newlines | newline_to_br }} +{{ string_with_newlines | newline_to_br -}} ``` diff --git a/_tags/template.md b/_tags/template.md index 1d8e90eb5..080ef4c9d 100644 --- a/_tags/template.md +++ b/_tags/template.md @@ -26,10 +26,10 @@ is {{ verb }} into a comment.

        Output

        ```liquid -{% assign verb = "turned" %} -{% comment %} -{% assign verb = "converted" %} -{% endcomment %} +{% assign verb = "turned" -%} +{% comment -%} +{% assign verb = "converted" -%} +{% endcomment -%} Anything you put between {% comment %} and {% endcomment %} tags is {{ verb }} into a comment. ``` @@ -47,7 +47,7 @@ In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.

        Output

        ```text -{% raw %} +{%- raw -%} In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not. {% endraw %} ``` From 19906f99e16910a6c75b307d2252a516b5407d7f Mon Sep 17 00:00:00 2001 From: ADTC Date: Sat, 5 Jun 2021 04:11:18 +0800 Subject: [PATCH 15/15] Add a description for ifchanged in Iteration page Since this exists and it's currently undocumented, it should now be documented and explained in the documentation. If this will be declared as "deprecated", a deprecation tag can be added later (stating the version number at which this became deprecated). Also, according to the original source file ifchanged.rb the logic is to check the output generated by the code between ifchanged and endifchanged, and compare it to the previous output. The logic is NOT to check whether the loop variable has changed. Even if the loop variable remained the same but there was some other change in the output (for example, using cycle tag), the ifchanged tag will print the output. --- _tags/iteration.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/_tags/iteration.md b/_tags/iteration.md index 2d68031eb..71fd8f2d4 100644 --- a/_tags/iteration.md +++ b/_tags/iteration.md @@ -87,6 +87,27 @@ Causes the loop to skip the current iteration when it encounters the `continue` 1 2 3 5 ``` +### ifchanged + +Checks the output of a block of code against the previous iteration and only prints the output if it has changed. + +

        Input

        +```liquid +{%- raw -%} + +{% for item in array %} + {% ifchanged %} + {{ item }} + {% endifchanged %} +{% endfor %} +{% endraw %} +``` + +

        Output

        +```text +1 2 1 3 +``` + ## for (parameters) ### limit