|
1 | | - |
2 | | -Please update the follwing Shopify liquid code to improve the formatting and readability. The code is using Tailwind CSS and Alpine JS. Please format this with a standardized and documented approach. |
3 | | - |
4 | | -- Add comments to explain each main section of the code |
5 | | -- Each HTML attribute should be sorted and ordered on a new line based on the importance |
6 | | -- The contents of the class attribute should be indented |
7 | | -- Sort and order standard Tailwind CSS classes on the first indented line of the class attribute |
8 | | -- Liquid variables within class attributes should be moved to the end of the class order on their own line |
9 | | -- All contents within Alpine.js attributes should use standard JavaScript formatting |
10 | | -- Liquid variables with multiple options should be sorted onto new lines for improved readability |
11 | | -- All code should use standard 2 space indentation |
12 | | -- Code comments within the main code block should use liquid {% comment %} tags |
13 | | -- You can skip over the {% schema %} tag in your output |
14 | | - |
15 | | -Here is a sample to demostrate class sorting: |
16 | | - |
17 | | -``` |
18 | | -<section |
19 | | - id="{{ section.id }}" |
20 | | - class=" |
21 | | - relative flex items-center justify-center overflow-hidden |
22 | | - {{ section.settings.visibility }} |
23 | | - {{ section.settings.color_scheme }} |
24 | | - {{ section.settings.color_border }} |
25 | | - {{ section.settings.style_border }} |
26 | | - {% if section.settings.enable_header_overlap %} |
27 | | - -mt-36 |
28 | | - {% endif %} |
29 | | - "> |
30 | | -``` |
31 | | - |
32 | | -Here is a full sample to demostrate ideal formatting: |
33 | | - |
34 | | -``` |
35 | | -<section |
36 | | - id="{{ section.id }}" |
37 | | - class=" |
38 | | - relative flex items-center justify-center overflow-hidden |
39 | | - {{ section.settings.visibility }} |
40 | | - {{ section.settings.color_scheme }} |
41 | | - {{ section.settings.color_border }} |
42 | | - {{ section.settings.style_border }} |
43 | | - {% if section.settings.enable_header_overlap %} |
44 | | - -mt-36 |
45 | | - {% endif %} |
46 | | - "> |
47 | | -
|
48 | | - {% comment %} Image background {% endcomment %} |
49 | | - <div |
50 | | - class=" |
51 | | - absolute h-full w-full |
52 | | - {% unless request.design_mode %} |
53 | | - {% if settings.enable_animations %} |
54 | | - scale-200 blur-lg js-animation animation-1000 |
55 | | - {% endif %} |
56 | | - {% endunless %} |
57 | | - " |
58 | | - {% if settings.enable_animations %} |
59 | | - data-delay="0" |
60 | | - data-replace="{ |
61 | | - 'scale-200' : 'scale-100', |
62 | | - 'blur-lg' : 'blur-none' |
63 | | - }" |
64 | | - {% endif %}> |
65 | | -
|
66 | | - {% comment %} Classes for custom image crop {% endcomment %} |
67 | | - {% assign image_classes = '' %} |
68 | | - {% if section.settings.show_entire_image %} |
69 | | - {% assign image_classes = 'hidden md:block object-contain' %} |
70 | | - {% else %} |
71 | | - {% assign image_classes = 'hidden md:block object-cover' %} |
72 | | - {% endif %} |
73 | | -
|
74 | | - {% comment %} Toggle to set lazy_loading {% endcomment %} |
75 | | - {% if section.settings.image_background_desktop %} |
76 | | - <div |
77 | | - class=" |
78 | | - absolute w-full h-full |
79 | | - "> |
80 | | - {% render 'component__image', |
81 | | - image: section.settings.image_background_desktop, |
82 | | - aspect_ratio: '', |
83 | | - background: '', |
84 | | - crop: '', |
85 | | - max_width: 5760, |
86 | | - container_class: 'h-full z-10', |
87 | | - image_class: image_classes, |
88 | | - enable_lazy_load: section.settings.enable_lazy_loading, |
89 | | - include_2x: true |
90 | | - %} |
91 | | - </div> |
92 | | - {% endif %} |
93 | | - {% if section.settings.image_background_mobile == blank %} |
94 | | - {% if section.settings.image_background_desktop %} |
95 | | - <div |
96 | | - class=" |
97 | | - absolute w-full h-full |
98 | | - "> |
99 | | - {% render 'component__image', |
100 | | - image: section.settings.image_background_desktop, |
101 | | - aspect_ratio: '', |
102 | | - background: '', |
103 | | - crop: 'object-cover', |
104 | | - max_width: 5760, |
105 | | - container_class: 'md:hidden w-full h-full z-10', |
106 | | - image_class: '', |
107 | | - enable_lazy_load: section.settings.enable_lazy_loading, |
108 | | - include_2x: true |
109 | | - %} |
110 | | - </div> |
111 | | - {% endif %} |
112 | | - {% else %} |
113 | | - <div |
114 | | - class=" |
115 | | - absolute w-full h-full |
116 | | - "> |
117 | | - {% render 'component__image', |
118 | | - image: section.settings.image_background_mobile, |
119 | | - aspect_ratio: '', |
120 | | - background: '', |
121 | | - crop: 'object-cover', |
122 | | - max_width: 900, |
123 | | - container_class: 'md:hidden w-full h-full z-10', |
124 | | - image_class: '', |
125 | | - enable_lazy_load: section.settings.enable_lazy_loading, |
126 | | - include_2x: true |
127 | | - %} |
128 | | - </div> |
129 | | - {% endif %} |
130 | | - </div> |
131 | | -
|
132 | | - {% comment %} Video background {% endcomment %} |
133 | | - {% unless section.settings.video_background == blank %} |
134 | | - <div |
135 | | - class=" |
136 | | - absolute top-0 bottom-0 left-0 right-0 z-10 |
137 | | - "> |
138 | | - {% render 'component__video', |
139 | | - video: section.settings.video_background, |
140 | | - background: '', |
141 | | - container_class: 'max-w-none md:min-h-full min-w-full h-full', |
142 | | - video_class: '', |
143 | | - enable_controls: false, |
144 | | - enable_autoplay: true, |
145 | | - enable_loop: true, |
146 | | - enable_mute_toggle: false |
147 | | - %} |
148 | | - </div> |
149 | | - {% endunless %} |
150 | | -
|
151 | | - {% comment %} Banner content {% endcomment %} |
152 | | - <div |
153 | | - class=" |
154 | | - relative z-10 w-full h-full |
155 | | - " |
156 | | - {% if section.settings.enable_gradient %} |
157 | | - style="background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) );" |
158 | | - {% endif %}> |
159 | | -
|
160 | | - <div |
161 | | - class=" |
162 | | - w-full flex flex-row flex-wrap py-4 |
163 | | - {{ settings.layout_horizontal }} |
164 | | - {{ section.settings.layout_x_alignment }} |
165 | | - {{ section.settings.layout_y_alignment }} |
166 | | - {{ section.settings.layout_y_spacing }} |
167 | | - {% assign colors = section.settings.color_scheme | split: " " %}{{ colors[1] }} |
168 | | - "> |
169 | | -
|
170 | | - <div |
171 | | - class=" |
172 | | - max-w-prose gap-4 flex flex-col |
173 | | - {% if section.settings.layout_x_alignment contains 'text-center' %}items-center{% endif %} |
174 | | - {% if section.settings.layout_x_alignment contains 'text-right' %}items-end{% endif %} |
175 | | - {% if section.settings.enable_background_overlay %} |
176 | | - p-4 w-full border--radius {{ section.settings.color_scheme }} |
177 | | - {% endif %} |
178 | | - {% unless request.design_mode %} |
179 | | - {% if settings.enable_animations %} |
180 | | - opacity-0 js-animation animation-300 |
181 | | - {% endif %} |
182 | | - {% endunless %} |
183 | | - " |
184 | | - {% if settings.enable_animations %} |
185 | | - data-delay="0" |
186 | | - data-replace="{ |
187 | | - 'opacity-0' : 'opacity-100' |
188 | | - }" |
189 | | - {% endif %}> |
190 | | -
|
191 | | - {% for block in section.blocks %} |
192 | | - {% case block.type %} |
193 | | - {% when 'heading' %} |
194 | | - <h1 |
195 | | - class=" |
196 | | - m-0 |
197 | | - {{ section.settings.color_text }} |
198 | | - " |
199 | | - style=" |
200 | | - padding-top:{{ block.settings.spacing_top }}px; |
201 | | - padding-bottom:{{ block.settings.spacing_bottom }}px; |
202 | | - "> |
203 | | - {{ block.settings.content }} |
204 | | - </h1> |
205 | | - {% when 'content' %} |
206 | | - <div |
207 | | - class=" |
208 | | - m-0--clear |
209 | | - {{ section.settings.color_text }} |
210 | | - " |
211 | | - style=" |
212 | | - padding-top:{{ block.settings.spacing_top }}px; |
213 | | - padding-bottom:{{ block.settings.spacing_bottom }}px; |
214 | | - "> |
215 | | - {{ block.settings.content }} |
216 | | - </div> |
217 | | - {% when 'buttons' %} |
218 | | - <div |
219 | | - class=" |
220 | | - md:flex-nowrap flex flex-wrap gap-2 |
221 | | - {% if section.settings.layout_x_alignment contains 'text-center' %}justify-center{% endif %} |
222 | | - {% if section.settings.layout_x_alignment contains 'text-right' %}justify-end{% endif %} |
223 | | - " |
224 | | - style=" |
225 | | - padding-top:{{ block.settings.spacing_top }}px; |
226 | | - padding-bottom:{{ block.settings.spacing_bottom }}px; |
227 | | - "> |
228 | | - {% unless block.settings.button_url == blank %} |
229 | | - <a |
230 | | - href="{{ block.settings.button_url }}" |
231 | | - class=" |
232 | | - {{ block.settings.color_button }} |
233 | | - "> |
234 | | - {{ block.settings.button_label }} |
235 | | - </a> |
236 | | - {% endunless %} |
237 | | - {% unless block.settings.secondary_button_url == blank %} |
238 | | - <a |
239 | | - href="{{ block.settings.secondary_button_url }}" |
240 | | - class=" |
241 | | - {{ block.settings.secondary_color_button }} |
242 | | - "> |
243 | | - {{ block.settings.secondary_button_label }} |
244 | | - </a> |
245 | | - {% endunless %} |
246 | | - </div> |
247 | | - {% endcase %} |
248 | | - {% endfor %} |
249 | | - |
250 | | - </div> |
251 | | - |
252 | | - </div> |
253 | | - </div> |
254 | | -
|
255 | | -</section> |
256 | | -``` |
| 1 | +1. HTML Properties: |
| 2 | + - Group related properties together (e.g., class, id, data attributes) |
| 3 | + - For the `class` attribute: |
| 4 | + - Sort class names alphabetically |
| 5 | + - Place Alpine.js attributes at the end of the element, after all other attributes |
| 6 | + - For the contents of Alpine.js attributes: |
| 7 | + - Format using standard JavaScript formatting for readability |
| 8 | + - Place the contents on a new line if it exceeds a certain length (e.g., 80 characters) |
| 9 | + - For all other HTML attributes: |
| 10 | + - Place the contents on a new line unless the attribute only contains a single word |
| 11 | + |
| 12 | +2. Liquid `{% render %}` Tag: |
| 13 | + - When using the `{% render %}` tag, format it as follows: |
| 14 | + ```liquid |
| 15 | + {% render 'component__icon', |
| 16 | + icon: 'plus', |
| 17 | + size: '16', |
| 18 | + class: '' |
| 19 | + %} |
| 20 | + ``` |
| 21 | + - Place the `{% render %}` tag on a new line |
| 22 | + - Indent the attributes correctly, with each attribute on a separate line |
| 23 | + - Align the attributes vertically for better visual clarity |
| 24 | + - Follow this same format for all liquid tags |
| 25 | +
|
| 26 | +3. Indentation: |
| 27 | + - Use consistent indentation throughout the code (2 spaces) |
| 28 | + - Indent nested elements properly to improve readability |
| 29 | + - Align attributes vertically for better visual clarity |
| 30 | +
|
| 31 | +4. Comments: |
| 32 | + - Add comments to explain complex or non-obvious code sections |
| 33 | + - Use comments to describe the purpose or functionality of specific elements or blocks of code |
| 34 | + - Follow a consistent commenting style using Liquid tags to contain comments, such as `{% comment %} {% endcomment %}` |
| 35 | +
|
| 36 | +5. Whitespace: |
| 37 | + - Remove unnecessary whitespace, such as trailing spaces or multiple blank lines |
| 38 | + - Add appropriate spacing around operators, parentheses, and curly braces |
| 39 | + - Use blank lines to separate logical sections of code |
0 commit comments