Skip to content

Instantly share code, notes, and snippets.

View TeamDijon's full-sized avatar

Virgil Dubois TeamDijon

26 followers · 15 following
View GitHub Profile
@TeamDijon
TeamDijon / details-animation-support.css
Created June 28, 2025 15:56
<details> animation support
@media (prefers-reduced-motion: no-preference) {
details {
transition: 0.3s ease-in-out;
@supports (interpolate-size: allow-keywords) {
interpolate-size: allow-keywords;
&::details-content {
block-size: 0;
opacity: 0;
@TeamDijon
TeamDijon / gorgias-integration.js
Created June 24, 2025 08:12
Gorgias utility functions
/**
* Manages interface with the Gorgias third-party chat widget.
*/
window.mx.utils.gorgias = {
/**
* Gets the Gorgias chat container element.
* @returns {HTMLElement|null} The Gorgias chat container or null if not found.
*/
getContainer: () => {
try {
@TeamDijon
TeamDijon / dry-pagination.liquid
Last active February 25, 2025 14:04
Snippet showing a DRY paginated product grid using both collection and product_list source
{% liquid
# Using the collections object is necessary as we can't paginate collection settings, only collectionDrop objects
assign featured_collection = collections[section.settings.featured_collection]
assign product_list = section.settings.product_list
if featured_collection == null and product_list == blank
# Default behavior handling can go there
endif
assign pagination_size = section.settings.pagination_size
@TeamDijon
TeamDijon / test-case.liquid
Created August 29, 2024 21:56
Early performance testing of the `inline_asset_content` filter
{% comment %}
Findings:
- The filter works really good as far as I can tell
- Need to test with a bunch of SVGs (only one maybe hardly stress the performance) with effective caching
- If you use the SVG multiple times, do not hesitate to store the markup in a variable instead of using the filter multiple times
First batch : One SVG / no filter piped to the markup / 50k iterations
- Case #1, #2 and #3: around 350ms (no significant difference)
- Case #4: around 2500ms+
@TeamDijon
TeamDijon / dawn-rem-rebase.js
Last active July 22, 2024 09:00
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;
@TeamDijon
TeamDijon / template-name.liquid
Last active October 3, 2024 14:47
{%- 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 -%}
@TeamDijon
TeamDijon / svg-cross.liquid
Last active August 27, 2024 14:14
SVG library snippet with associated SVG snippet
<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>
@TeamDijon
TeamDijon / social-networks.liquid
Created July 1, 2024 14:38
In this Gist, we create a Shopify-theme interface for social networks leveraging market metafields (metafields everywhere)
{% 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
@TeamDijon
TeamDijon / css-minifier.liquid
Created June 29, 2024 10:55
{%- 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' %}
@TeamDijon
TeamDijon / article-playground.liquid
Last active July 2, 2024 21:02
Some snippets on how to use
{% 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 %}