Added reusable button for tutorials

[kickoke]

I'm currently working on our tutorial content to get it published. Instead of just providing a link to the next lesson, I wanted to make the action item clearer and use a button, like this: In order to do that, I need a button in the _includes folder.

[ronaldtse]

Thanks @kickoke ! @strogonoff could you help? Thanks.

[kickoke]

@strogonoff @ronaldtse FYI: I found out today that the "include" mechanism was deprecated. Liquid (5.0.0) now uses "render". We might want to check how this impacts our codebase. Maybe another reason to migrate to another platform in the long run? https://www.shopify.com/partners/blog/88186566-tips-for-using-snippets-in-your-shopify-theme

[strogonoff]

• If we are adding a new feature to the theme, it’s worth considering what it is. This looks like a generic component for a button that represents the main action the user is suggested to undertake next.
• Let’s consider how we can characterize it generally. It looks to me as an instance of a call to action button (often referred to as CTA for short).

Currently, this theme provides a cta-button mixin. It can be given background and foreground, and it produces style rules for a similar button as shown in your reference image.

Metanorma.org site actually uses this mixin for the “Get started” button in the authoring section, giving it nothing as background and primary color as foreground:

It looks like what you want may better be achieved by adding a similar cta-button() invocation somewhere else in metanorma.org/_sass/metanorma-rules.scss, scoped appropriately to page class, and with a different choice of background and foreground colors (I recommend to use variables defined by the site, Metanorma.org, for primary/primary-dark colors).

---

More technically, I don’t want to merge it yet even if my comments are addressed, since the way it is currently implemented does not fit into theme architecture and it’s not quite clear whether the component is called for:

• It adds the style in style.css, while the appropriate location would be relevant .scss file under _sass directory.
• It doesn’t specify a representative class name for the component, and doesn’t scope that class name to a particular page or section.
• It does not seem like the component is used by the theme itself. If this aims to provide a component that some users of this theme might want to use, it should probably be a mixin.
• And judging by the spirit of this PR, there already exists a style mixin that accomplishes something quite similar in a configurable way.

[kickoke]

We can close this PR, since I managed to create Buttons in the metanorma.org repo.

[strogonoff]

@strogonoff @ronaldtse FYI: I found out today that the "include" mechanism was deprecated. Liquid (5.0.0) now uses "render". We might want to check how this impacts our codebase. Maybe another reason to migrate to another platform in the long run? https://www.shopify.com/partners/blog/88186566-tips-for-using-snippets-in-your-shopify-theme

@kickoke please note that when you research Liquid syntax, you will find two sources:

• Jekyll docs (https://jekyllrb.com/docs/includes/)
• Shopify docs

While Shopify’s Liquid is broadly similar, it is trending to differ from Jekyll’s Liquid. I’m not sure whether they have plans to consolidate or not.

Sometimes Shopify’s documentation has something that Jekyll’s documentation misses, but the caveat is that other parts of Shopify’s documentation do not apply to Jekyll. (The part about includes doesn’t.)