Skip to content

Commit 7abf9b5

Browse files
MWDelaneyMWDelaney
committed
Update readme with more examples
1 parent 3b67da0 commit 7abf9b5

File tree

1 file changed

+292
-2
lines changed

1 file changed

+292
-2
lines changed

‎README.md‎

Lines changed: 292 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function(eleventyConfig) {
3939
Create a component file at `src/components/callout.liquid`:
4040

4141
<details open>
42-
<summary>View component template</summary>
42+
<summary>View Liquid component template</summary>
4343

4444
```liquid
4545
---
@@ -68,12 +68,103 @@ background: light
6868

6969
</details>
7070

71+
<details>
72+
<summary>View Nunjucks component template</summary>
73+
74+
```njk
75+
---
76+
title: Callout
77+
78+
# Default values
79+
heading: Lorem ipsum dolor sit
80+
description: A callout component to highlight important information.
81+
links:
82+
- linkUrl: "#"
83+
linkText: Learn more
84+
background: light
85+
---
86+
<div class="callout callout--{{ background }}">
87+
<h3 class="callout__heading">{{ heading }}</h3>
88+
<p class="callout__description">{{ description }}</p>
89+
{% if links %}
90+
<div class="callout__links">
91+
{% for link in links %}
92+
<a href="{{ link.linkUrl }}" class="callout__link">{{ link.linkText }}</a>
93+
{% endfor %}
94+
</div>
95+
{% endif %}
96+
</div>
97+
```
98+
99+
</details>
100+
101+
<details>
102+
<summary>View WebC component template</summary>
103+
104+
```html
105+
---
106+
title: Callout
107+
108+
# Default values
109+
heading: Lorem ipsum dolor sit
110+
description: A callout component to highlight important information.
111+
links:
112+
- linkUrl: "#"
113+
linkText: Learn more
114+
background: light
115+
---
116+
<div :class="`callout callout--${background}`">
117+
<h3 class="callout__heading" @text="heading"></h3>
118+
<p class="callout__description" @text="description"></p>
119+
<div class="callout__links" webc:if="links">
120+
<a
121+
:href="link.linkUrl"
122+
class="callout__link"
123+
@text="link.linkText"
124+
webc:for="link of links">
125+
</a>
126+
</div>
127+
</div>
128+
```
129+
130+
</details>
131+
132+
<details>
133+
<summary>View Vento component template</summary>
134+
135+
```vento
136+
---
137+
title: Callout
138+
139+
# Default values
140+
heading: Lorem ipsum dolor sit
141+
description: A callout component to highlight important information.
142+
links:
143+
- linkUrl: "#"
144+
linkText: Learn more
145+
background: light
146+
---
147+
<div class="callout callout--{{ background }}">
148+
<h3 class="callout__heading">{{ heading }}</h3>
149+
<p class="callout__description">{{ description }}</p>
150+
{{ if links }}
151+
<div class="callout__links">
152+
{{ for link of links }}
153+
<a href="{{ link.linkUrl }}" class="callout__link">{{ link.linkText }}</a>
154+
{{ /for }}
155+
</div>
156+
{{ /if }}
157+
</div>
158+
```
159+
160+
</details>
161+
71162
### 3. Use the Component
72163

73164
In any template, use the `renderComponent` filter:
74165

75166
<details open>
76-
<summary>View usage example</summary>
167+
<summary>View Liquid usage example</summary>
77168

78169
```liquid
79170
---
@@ -95,6 +186,199 @@ callout:
95186

96187
</details>
97188

189+
<details>
190+
<summary>View Nunjucks usage example</summary>
191+
192+
```njk
193+
---
194+
title: My Page
195+
196+
# Callout component data
197+
callout:
198+
type: callout
199+
heading: Help organize the 11ty Meetup!
200+
description: A callout component to highlight important information.
201+
links:
202+
- linkUrl: https://11tymeetup.dev/
203+
linkText: Join the 11ty Meetup!
204+
background: warning
205+
---
206+
207+
{{ callout | renderComponent | safe }}
208+
```
209+
210+
</details>
211+
212+
<details>
213+
<summary>View WebC usage example</summary>
214+
215+
```html
216+
---
217+
title: My Page
218+
219+
# Callout component data
220+
callout:
221+
type: callout
222+
heading: Help organize the 11ty Meetup!
223+
description: A callout component to highlight important information.
224+
links:
225+
- linkUrl: https://11tymeetup.dev/
226+
linkText: Join the 11ty Meetup!
227+
background: warning
228+
---
229+
230+
<template @html="callout | renderComponent"></template>
231+
```
232+
233+
</details>
234+
235+
<details>
236+
<summary>View Vento usage example</summary>
237+
238+
```vento
239+
---
240+
title: My Page
241+
242+
# Callout component data
243+
callout:
244+
type: callout
245+
heading: Help organize the 11ty Meetup!
246+
description: A callout component to highlight important information.
247+
links:
248+
- linkUrl: https://11tymeetup.dev/
249+
linkText: Join the 11ty Meetup!
250+
background: warning
251+
---
252+
253+
{{ callout |> renderComponent |> safe }}
254+
```
255+
256+
</details>
257+
258+
### 4. Render Multiple Components
259+
You can render multiple components by passing an array of component data:
260+
261+
<details open>
262+
<summary>View Liquid multiple components example</summary>
263+
264+
```liquid
265+
---
266+
title: My Page
267+
268+
# Mixed component data
269+
components:
270+
- type: callout
271+
heading: Help organize the 11ty Meetup!
272+
description: A callout component to highlight important information.
273+
links:
274+
- linkUrl: https://11tymeetup.dev/
275+
linkText: Join the 11ty Meetup!
276+
background: warning
277+
278+
- type: text-and-image
279+
heading: About Our Community
280+
description: Join thousands of developers building amazing things with Eleventy.
281+
image: /assets/images/community.jpg
282+
imageAlt: Community members collaborating
283+
layout: image-right
284+
---
285+
286+
{{ components | renderComponent }}
287+
```
288+
289+
</details>
290+
291+
<details>
292+
<summary>View Nunjucks multiple components example</summary>
293+
294+
```njk
295+
---
296+
title: My Page
297+
298+
# Mixed component data
299+
components:
300+
- type: callout
301+
heading: Help organize the 11ty Meetup!
302+
description: A callout component to highlight important information.
303+
links:
304+
- linkUrl: https://11tymeetup.dev/
305+
linkText: Join the 11ty Meetup!
306+
background: warning
307+
308+
- type: text-and-image
309+
heading: About Our Community
310+
description: Join thousands of developers building amazing things with Eleventy.
311+
image: /assets/images/community.jpg
312+
imageAlt: Community members collaborating
313+
layout: image-right
314+
---
315+
316+
{{ components | renderComponent | safe }}
317+
```
318+
319+
</details>
320+
321+
<details>
322+
<summary>View WebC multiple components example</summary>
323+
324+
```html
325+
---
326+
title: My Page
327+
328+
# Mixed component data
329+
components:
330+
- type: callout
331+
heading: Help organize the 11ty Meetup!
332+
description: A callout component to highlight important information.
333+
links:
334+
- linkUrl: https://11tymeetup.dev/
335+
linkText: Join the 11ty Meetup!
336+
background: warning
337+
338+
- type: text-and-image
339+
heading: About Our Community
340+
description: Join thousands of developers building amazing things with Eleventy.
341+
image: /assets/images/community.jpg
342+
imageAlt: Community members collaborating
343+
layout: image-right
344+
---
345+
346+
<template @html="components | renderComponent"></template>
347+
```
348+
349+
</details>
350+
351+
<details>
352+
<summary>View Vento multiple components example</summary>
353+
354+
```vento
355+
---
356+
title: My Page
357+
358+
# Mixed component data
359+
components:
360+
- type: callout
361+
heading: Help organize the 11ty Meetup!
362+
description: A callout component to highlight important information.
363+
links:
364+
- linkUrl: https://11tymeetup.dev/
365+
linkText: Join the 11ty Meetup!
366+
background: warning
367+
368+
- type: text-and-image
369+
heading: About Our Community
370+
description: Join thousands of developers building amazing things with Eleventy.
371+
image: /assets/images/community.jpg
372+
imageAlt: Community members collaborating
373+
layout: image-right
374+
---
375+
376+
{{ components |> renderComponent |> safe }}
377+
```
378+
379+
</details>
380+
381+
98382
> **Note:** The `renderComponent` filter accepts a template language parameter (`"njk"`, `"liquid"`, `"webc"`, `"vto"`, etc.) and can process both single components and arrays of components. The filter automatically merges component default values with your provided data - any missing fields will use the defaults from the component file.
99383
100384
## Configuration
@@ -161,6 +445,7 @@ components:
161445
heading: Welcome!
162446
description: Thanks for visiting our site
163447
background: primary
448+
164449
- type: text-and-image
165450
heading: About Us
166451
description: Learn more about our company
@@ -188,6 +473,7 @@ components:
188473
heading: Welcome!
189474
description: Thanks for visiting our site
190475
background: primary
476+
191477
- type: text-and-image
192478
heading: About Us
193479
description: Learn more about our company
@@ -215,6 +501,7 @@ components:
215501
heading: Welcome!
216502
description: Thanks for visiting our site
217503
background: primary
504+
218505
- type: text-and-image
219506
heading: About Us
220507
description: Learn more about our company
@@ -538,6 +825,7 @@ Components should follow this structure:
538825
```liquid
539826
---
540827
title: ComponentName
828+
541829
# Default values
542830
heading: "default heading"
543831
description: "default description"
@@ -578,6 +866,8 @@ If your component has these defaults:
578866
```yaml
579867
---
580868
title: Callout
869+
870+
# Default values
581871
heading: "Default Heading"
582872
description: "Default description"
583873
background: "light"

0 commit comments

Comments
 (0)