Virgil Dubois TeamDijon

## dawn-rem-rebase.js
import { promises as fs } from 'fs';
import { extname, join, resolve } from 'path';

const DEFAULT_ASSETS_DIR = 'assets';
const CSS_EXTENSION = '.css';
const DISCLAIMER = '/* CAUTION: Source document was rebased from 10px to 16px rem root */';
const DRY_RUN = process.env.DRY_RUN === 'true';

let processedFiles = 0;
let skippedFiles = 0;

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

  Accepts:
    - template {Template object} - Template object

  Usage:
    <body class="{% render 'template-name', template: template -%}">...</body>
{%- endcomment -%}

## svg-cross.liquid
<svg {{ class_attribute }} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {{ style_attribute }}>
  <path d="M 45 5 L 5 45 M 5 5 L 45 45"></path>
</svg>

## social-networks.liquid
{% liquid
  # social_network_list contains the list of social_network metaobject entries associated with the current market
  assign social_network_list = localization.market.metafields.content.social_network_list.value
%}

{% # Later in the markup %}
<ul class="social-network-link-list">
  {% for social_network in social_network_list %}
    {% liquid
      # We get and process the data from the metaobject entry

## css-minifier.liquid
{%- comment -%}
  Minifies and return CSS. Returns nothing if the CSS is empty.

  Accepts:
  - css {string} - CSS to minify
  - section {Section object} - Section object (Optional)

  Usage:
    {% capture dynamic_style %}
      {% render 'template-section-style' %}

## article-playground.liquid
{% comment %}
  If you have questions regarding the blog/article list interface, see :
  https://gist.github.com/TeamDijon/15684d1bef3c4bb5ca9dfd8a9381a156

  As always, with collections/blogs/articles, mind the potential conflicts with pagination

  For the article handle source, I usually go with a "ricthext" setting using unordered list.
  From this, I can retrieve the data and store everything in an array before using it on the following snippets of code
{% endcomment %}

## blog-handle-list.liquid
{% liquid
  # The setting is of "richtext" type
  assign blog_handle_list = section.settings.blog_handle_list

  assign associated_blog_list = ''
  assign markup_blog_markup_list = blog_handle_list | split: '</ul>' | first | split: '</li>'
  for markup_blog_handle in markup_blog_handle_list
     assign blog_handle = static_blog_handle | split: '>' | last
     assign associated_blog = blogs[blog_handle]

## css-variables.liquid
{% # Inside the liquid file %}
{% liquid
  assign base_selector = '#shopify-section-' | append: section.id
  assign accent_color = section.settings.accent_color
%}

<style>
  {{ base_selector }} {
    {% if accent_color != 'rgba(0,0,0,0)' and accent_color != '#000000' %}
      --accent-color: {{ accent_color }};

## color-contrast.liquid
{% comment %}
  Returns the color code most contrasted with the given color.

  Accepts:
    color {Hex color} - The background color of the element. Defaults to #ffffff.
    black {Hex color} - The first color we calculate the contrast with. Defaults to #000000. (Optional)
    white {Hex color} - The second color we calculate the constrast with. Defaults to #ffffff. (Optional)

  Usage:
    {% render 'color-contrast', color: section.settings.background_color %}

## cross-sell-data.liquid
{% comment %}
  - I have a product with a variant metafield containing associated cross-sell product list
  - Objective is to show cross-sell products associated with the variant
  - Second objective was to use object construction to remove complexity in markup
  - Inside the markup, we need the product reference for data population as well as the variant IDs which needs to show the cross sell card (used by Javascript)
{% endcomment %}

{% liquid
  # First, we make a duplicate-free list of cross-sell products
  assign cross_sell_product_list = ''
	import { promises as fs } from 'fs';
	import { extname, join, resolve } from 'path';

	const DEFAULT_ASSETS_DIR = 'assets';
	const CSS_EXTENSION = '.css';
	const DISCLAIMER = '/* CAUTION: Source document was rebased from 10px to 16px rem root */';
	const DRY_RUN = process.env.DRY_RUN === 'true';

	let processedFiles = 0;
	let skippedFiles = 0;
	{%- comment -%}
	Renders the template name based on the template object.

	Accepts:
	- template {Template object} - Template object

	Usage:
	<body class="{% render 'template-name', template: template -%}">...</body>
	{%- endcomment -%}
	<svg {{ class_attribute }} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {{ style_attribute }}>
	<path d="M 45 5 L 5 45 M 5 5 L 45 45"></path>
	</svg>
	{% liquid
	# social_network_list contains the list of social_network metaobject entries associated with the current market
	assign social_network_list = localization.market.metafields.content.social_network_list.value
	%}

	{% # Later in the markup %}
	<ul class="social-network-link-list">
	{% for social_network in social_network_list %}
	{% liquid
	# We get and process the data from the metaobject entry
	{%- comment -%}
	Minifies and return CSS. Returns nothing if the CSS is empty.

	Accepts:
	- css {string} - CSS to minify
	- section {Section object} - Section object (Optional)

	Usage:
	{% capture dynamic_style %}
	{% render 'template-section-style' %}
	{% comment %}
	If you have questions regarding the blog/article list interface, see :
	https://gist.github.com/TeamDijon/15684d1bef3c4bb5ca9dfd8a9381a156

	As always, with collections/blogs/articles, mind the potential conflicts with pagination

	For the article handle source, I usually go with a "ricthext" setting using unordered list.
	From this, I can retrieve the data and store everything in an array before using it on the following snippets of code
	{% endcomment %}
	{% liquid
	# The setting is of "richtext" type
	assign blog_handle_list = section.settings.blog_handle_list

	assign associated_blog_list = ''
	assign markup_blog_markup_list = blog_handle_list \| split: '</ul>' \| first \| split: '</li>'
	for markup_blog_handle in markup_blog_handle_list
	assign blog_handle = static_blog_handle \| split: '>' \| last
	assign associated_blog = blogs[blog_handle]
	{% # Inside the liquid file %}
	{% liquid
	assign base_selector = '#shopify-section-' \| append: section.id
	assign accent_color = section.settings.accent_color
	%}

	<style>
	{{ base_selector }} {
	{% if accent_color != 'rgba(0,0,0,0)' and accent_color != '#000000' %}
	--accent-color: {{ accent_color }};
	{% comment %}
	Returns the color code most contrasted with the given color.

	Accepts:
	color {Hex color} - The background color of the element. Defaults to #ffffff.
	black {Hex color} - The first color we calculate the contrast with. Defaults to #000000. (Optional)
	white {Hex color} - The second color we calculate the constrast with. Defaults to #ffffff. (Optional)

	Usage:
	{% render 'color-contrast', color: section.settings.background_color %}
	{% comment %}
	- I have a product with a variant metafield containing associated cross-sell product list
	- Objective is to show cross-sell products associated with the variant
	- Second objective was to use object construction to remove complexity in markup
	- Inside the markup, we need the product reference for data population as well as the variant IDs which needs to show the cross sell card (used by Javascript)
	{% endcomment %}

	{% liquid
	# First, we make a duplicate-free list of cross-sell products
	assign cross_sell_product_list = ''