+
- {% 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 3a02cfce7e95f274bcc05c062a9f1da6309f3b13 Mon Sep 17 00:00:00 2001 From: ADTC Date: Sun, 28 Mar 2021 18:53:15 +0800 Subject: [PATCH 25/31] Fix the code block in EmptyDrop section in Types The {% endraw %} tag must be on its own line when using {%- raw -%} otherwise the code block will not get rendered as expected. --- _basics/types.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_basics/types.md b/_basics/types.md index 1d127da01..9b4e28532 100644 --- a/_basics/types.md +++ b/_basics/types.md @@ -148,7 +148,8 @@ You can check to see if an object exists or not before you access any of its att {% unless pages == empty %}

{{ pages.frontpage.title }}

{{ pages.frontpage.content }}
-{% endunless %}{% endraw %} +{% endunless %} +{% endraw %} ``` Both empty strings and empty arrays will return `true` if checked for equivalence with `empty`. From e5f8134a116d4e8c6e36a5b2be19676417d899c8 Mon Sep 17 00:00:00 2001 From: ADTC Date: Mon, 29 Mar 2021 23:44:24 +0800 Subject: [PATCH 26/31] 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 48db290d0..28f41f053 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 35b9743e410935b6b475659b489aab7094be26a6 Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 01:27:37 +0800 Subject: [PATCH 27/31] 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 | 10 ++++++++++ _includes/sidebar-link.html | 2 +- js/script.js | 26 +++++++++++++++++--------- 3 files changed, 28 insertions(+), 10 deletions(-) diff --git a/_basics/introduction.md b/_basics/introduction.md index 8bfe3b7d1..e30f390c2 100644 --- a/_basics/introduction.md +++ b/_basics/introduction.md @@ -46,6 +46,7 @@ Tags can be categorized into various types: - [Control flow]({{ "/tags/control-flow/" | prepend: site.baseurl }}) - [Iteration]({{ "/tags/iteration/" | prepend: site.baseurl }}) +- [Template]({{ "/tags/template/" | prepend: site.baseurl }}) - [Variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }}) You can read more about each type of tag in their respective sections. @@ -79,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 866a664766fad9dc8aa25c8d2bcdb1e754a279f3 Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 09:31:13 +0800 Subject: [PATCH 28/31] 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 11a84c0f102119bc639d7d9ccac6fdba03190755 Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 14:49:17 +0800 Subject: [PATCH 29/31] Add the note about optional "as" in the "render for" section The 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 94a124c80..b38413c4d 100644 --- a/_tags/template.md +++ b/_tags/template.md @@ -153,7 +153,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 `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 1bd73b93f321a60ffbdd65edfea134a8c09cd800 Mon Sep 17 00:00:00 2001 From: ADTC Date: Tue, 30 Mar 2021 15:35:18 +0800 Subject: [PATCH 30/31] Add a "deprecated" badge on the "include" Template tag --- _includes/version-badge.html | 9 ++++++++- _tags/template.md | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/_includes/version-badge.html b/_includes/version-badge.html index ca9c74684..0af214ca3 100644 --- a/_includes/version-badge.html +++ b/_includes/version-badge.html @@ -1 +1,8 @@ -{{ include.version }} +{%- if include.deprecated -%} + {%- assign adjective = 'deprecated' -%} + {%- assign text = adjective -%} +{%- else -%} + {%- assign adjective = 'available' -%} + {%- assign text = include.version -%} +{%- endif -%} +{{ text }} diff --git a/_tags/template.md b/_tags/template.md index b38413c4d..620696203 100644 --- a/_tags/template.md +++ b/_tags/template.md @@ -166,7 +166,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 +## include {%- include version-badge.html version="5.0.0" deprecated=true %} Insert the rendered content of another template within the current template. From 8137ef8fef4c8970a626a7832e07dbaee6bfd9be Mon Sep 17 00:00:00 2001 From: ADTC Date: Wed, 31 Mar 2021 05:15:45 +0800 Subject: [PATCH 31/31] Fix the anchor links in Introduction and Template For Introduction, because the sidebar menu also contain the same anchors, they create a conflict for the anchor links in the first paragraph. The solution is to manually render the headings with a modified anchor name. (Objects header was included for consistency and future-proofing.) For Template, because of the presence of the version badge, the anchor name has the stripped version number added to it. Hence the anchor links need to reflect that. --- _basics/introduction.md | 8 ++++---- _tags/template.md | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/_basics/introduction.md b/_basics/introduction.md index e30f390c2..188028b1c 100644 --- a/_basics/introduction.md +++ b/_basics/introduction.md @@ -4,9 +4,9 @@ description: An overview of objects, tags, and filters in the Liquid template la redirect_from: /basics/ --- -Liquid uses a combination of [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters) inside **template files** to display dynamic content. +Liquid uses a combination of [**objects**](#intro-objects), [**tags**](#intro-tags), and [**filters**](#intro-filters) inside **template files** to display dynamic content. -## Objects +

      Objects

      **Objects** contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`. @@ -24,7 +24,7 @@ Liquid uses a combination of [**objects**](#objects), [**tags**](#tags), and [** In this case, Liquid is rendering the content of the `title` property of the `page` object, which contains the text `{{ page.title }}`. -## Tags +

      Tags

      **Tags** create the logic and control flow for templates. The curly brace percentage delimiters `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}` and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page. @@ -51,7 +51,7 @@ Tags can be categorized into various types: You can read more about each type of tag in their respective sections. -## Filters +

      Filters

      **Filters** change the output of a Liquid object or variable. They are used within double curly braces `{% raw %}{{ }}{% endraw %}` and [variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }}), and are separated by a pipe character `|`. diff --git a/_tags/template.md b/_tags/template.md index 620696203..70177ba9b 100644 --- a/_tags/template.md +++ b/_tags/template.md @@ -93,7 +93,7 @@ If you need to output data, use `echo` _(described below)_ instead of closing an ## echo {%- include version-badge.html version="5.0.0" %} -Outputs an expression in the rendered HTML. This is identical to wrapping an expression in `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`, but works inside [`liquid`](#liquid) tags and supports [filters]({{ "/basics/introduction/#filters" | prepend: site.baseurl }}). +Outputs an expression in the rendered HTML. This is identical to wrapping an expression in `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`, but works inside [`liquid`](#liquid500) tags and supports [filters]({{ "/basics/introduction/#intro-filters" | prepend: site.baseurl }}).

      Input

      ```liquid @@ -176,6 +176,6 @@ Insert the rendered content of another template within the current template. {% endraw %} ``` -The `include` tag works similarly to the [`render`](#render) tag, but it allows the code inside of the rendered template to access and overwrite the variables within its parent template. The `include` tag has been deprecated because the way that it handles variables reduces performance and makes Liquid code harder to both read and maintain. +The `include` tag works similarly to the [`render`](#render500) tag, but it allows the code inside of the rendered template to access and overwrite the variables within its parent template. The `include` tag has been deprecated because the way that it handles variables reduces performance and makes Liquid code harder to both read and maintain. -Note that when a template is rendered using the [`render`](#render) tag, the `include` tag cannot be used within the template. +Note that when a template is rendered using the [`render`](#render500) tag, the `include` tag cannot be used within the template.