Skip to content

Commit 7417a5e

Browse files
authored
Merge pull request #11760 from mcanouil/fix/issue11758
fix: Markdown support in listings templates
2 parents 555a4d1 + 9c43d63 commit 7417a5e

File tree

9 files changed

+199
-79
lines changed

9 files changed

+199
-79
lines changed

src/resources/projects/website/listing/_filter.ejs.md

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,32 +10,29 @@ const sortUi = listing['sort-ui'];
1010
<% const sortableFields = listing.utilities.sortableFieldData(); %>
1111
<% if (sortUi && sortableFields.length > 0) { %>
1212
<div class="input-group input-group-sm quarto-listing-sort">
13-
<span class="input-group-text"><i class="bi bi-sort-down"></i></span>
14-
<select
13+
<span class="input-group-text"><i class="bi bi-sort-down"></i></span>
14+
<select
1515
id="listing-<%- listing.id %>-sort"
1616
class="form-select"
17-
aria-label="<%- listing.utilities.localizedString("listing-page-order-by")%>"
17+
aria-label="<%= listing.utilities.localizedString("listing-page-order-by") %>"
1818
onChange="window['quarto-listings']['listing-<%- listing.id %>'].sort(this.options[this.selectedIndex].value, { order: this.options[this.selectedIndex].getAttribute('data-direction')})"
1919
>
20-
<option value="" disabled selected hidden><%- listing.utilities.localizedString("listing-page-order-by")%></option>
21-
<option value="index" data-direction="asc"><%- listing.utilities.localizedString("listing-page-order-by-default")%></option>
22-
<% for (const sortData of sortableFields) { %>
23-
<option
24-
value="<%- sortData.listingSort.field %>"
25-
data-direction="<%- sortData.listingSort.direction %>">
26-
<%= sortData.description %>
27-
</option>
28-
<% } %>
29-
</select>
20+
<option value="" disabled selected hidden><%= listing.utilities.localizedString("listing-page-order-by") %></option>
21+
<option value="index" data-direction="asc"><%= listing.utilities.localizedString("listing-page-order-by-default") %></option>
22+
<% for (const sortData of sortableFields) { %>
23+
<option
24+
value="<%- sortData.listingSort.field %>"
25+
data-direction="<%- sortData.listingSort.direction %>">
26+
<%= sortData.description %>
27+
</option>
28+
<% } %>
29+
</select>
3030
</div>
31-
32-
3331
<% } %>
34-
3532
<% if (filterUi) { %>
3633
<div class="input-group input-group-sm quarto-listing-filter">
3734
<span class="input-group-text"><i class="bi bi-search"></i></span>
38-
<input type="text" class="search form-control" placeholder="<%- listing.utilities.localizedString("listing-page-filter")%>" />
35+
<input type="text" class="search form-control" placeholder="<%= listing.utilities.localizedString("listing-page-filter") %>" />
3936
</div>
4037
<% } %>
4138
</div>

src/resources/projects/website/listing/_metadata.ejs.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
const categories = item.categories !== undefined ? item.categories.join(',') : undefined;
33
%>
44

5-
<div class="quarto-listing-item-metadata" style-"display:none;">
5+
```{=html}
6+
<div class="quarto-listing-item-metadata" style="display:none;">
67
<span class="original-value" data-original-value="${itemNumber}" style="display:none;"></span>
78
<% if (categories !== undefined) { %><span class="categories" data-categories="${categories}" style="display:none;"></span><% } %>
89
</div>
10+
```
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="listing-no-matching d-none"><%- listing.utilities.localizedString("listing-page-no-matches")%></div>
2-
<% if (listing["page-size"] < items.length) { %>
31
```{=html}
2+
<div class="listing-no-matching d-none"><%= listing.utilities.localizedString("listing-page-no-matches") %></div>
3+
<% if (listing["page-size"] < items.length) { %>
44
<nav id="<%- listing.id %>-pagination" class="listing-pagination" aria-label="Page Navigation">
55
<ul class="pagination"></ul>
66
</nav>
7-
```
87
<% } %>
8+
```

src/resources/projects/website/listing/item-default.ejs.md

Lines changed: 68 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,44 +31,94 @@ return value;
3131

3232
let value = readField(item, field);
3333
if (value !== undefined) {
34-
print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLink(item, field, value)}</div>`);
34+
print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLink(item, field, value)}</div>`);
3535
}
3636
}
3737
%>
3838

39-
<div class="quarto-post image-<%= imageAlign %>" <%= listing.utilities.metadataAttrs(item) %>>
39+
::: {.quarto-post .image-<%= imageAlign %> <%= listing.utilities.metadataAttrs(item) %>}
40+
4041
<% if (fields.includes('image')) { %>
41-
<div class="thumbnail">
42-
<a href="<%- item.path %>" class="no-external">
42+
43+
```{=html}
44+
<div class="thumbnail"><a href="<%- item.path %>" class="no-external">
4345
<% if (item.image) { %>
4446
<%= listing.utilities.img(itemNumber, item.image, "thumbnail-image", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
4547
<% } else { %>
4648
<%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref) %>
4749
<% } %>
48-
</a>
49-
</div>
50+
</a></div>
51+
```
52+
5053
<% } %>
51-
<div class="body">
54+
55+
::: {.body}
56+
5257
<% if (fields.includes('title')) { %>
5358
<h3 class="no-anchor listing-title"><a href="<%- item.path %>" class="no-external"><%= item.title %></a></h3>
59+
<% if (fields.includes('subtitle')) { %>
5460
<div class="listing-subtitle"><a href="<%- item.path %>" class="no-external"><%= item.subtitle %></a></div>
5561
<% } %>
56-
<% if (fields.includes('categories') && item.categories) { %>
62+
<% } %>
63+
64+
<% if (fields.includes('categories') && item.categories) { %>
65+
66+
```{=html}
5767
<div class="listing-categories">
5868
<% for (const category of item.categories) { %>
59-
<div class="listing-category" onclick="window.quartoListingCategory('<%=utils.b64encode(category)%>'); return false;"><%= category %></div>
69+
<div class="listing-category" onclick="window.quartoListingCategory('<%= utils.b64encode(category) %>'); return false;"><%= category %></div>
6070
<% } %>
6171
</div>
62-
<% } %>
72+
```
73+
74+
<% } %>
75+
6376
<% if (fields.includes('description')) { %>
64-
<div class="delink listing-description"><a href="<%- item.path %>" class="no-external"><%= item.description %></a></div>
77+
78+
```{=html}
79+
<div class="delink listing-description"><a href="<%- item.path %>" class="no-external">
80+
```
81+
82+
<%= item.description %>
83+
84+
```{=html}
85+
</a></div>
86+
```
87+
6588
<% } %>
66-
</div>
67-
<div class="metadata"><a href="<%- item.path %>" class="no-external">
68-
<% if (fields.includes('date') && item.date) { %><div class="listing-date"><%= item.date %></div><% } %>
69-
<% if (fields.includes('author') && item.author) { %><div class="listing-author"><%= item.author %></div><% } %>
70-
<% if (fields.includes('reading-time') && item['reading-time']) { %> <div class="listing-reading-time"><%= item['reading-time'] %></div> <% } %>
89+
90+
:::
91+
92+
::: {.metadata}
93+
94+
```{=html}
95+
<a href="<%- item.path %>" class="no-external">
96+
```
97+
98+
<% if (fields.includes('date') && item.date) { %>
99+
<div class="listing-date"><%= item.date %></div>
100+
<% } %>
101+
102+
<% if (fields.includes('author') && item.author) { %>
103+
<div class="listing-author"><%= item.author %></div>
104+
<% } %>
105+
106+
<% if (fields.includes('reading-time') && item['reading-time']) { %>
107+
108+
```{=html}
109+
<div class="listing-reading-time"><%= item['reading-time'] %></div>
110+
```
111+
112+
<% } %>
113+
71114
<% for (const field of otherFields) { %>
72-
<% outputMetadata(item, field) %><% } %></a></div>
115+
<% outputMetadata(item, field) %>
116+
<% } %>
73117

74-
</div>
118+
```{=html}
119+
</a>
120+
```
121+
122+
:::
123+
124+
:::

src/resources/projects/website/listing/item-grid.ejs.md

Lines changed: 96 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,83 +37,151 @@ return !["title", "image", "image-alt", "date", "author", "subtitle", "descripti
3737
});
3838
%>
3939

40-
<div class="g-col-1" <%= listing.utilities.metadataAttrs(item) %>>
40+
::: {.g-col-1 <%= listing.utilities.metadataAttrs(item) %> }
41+
42+
```{=html}
4143
<a href="<%- item.path %>" class="quarto-grid-link">
42-
<div class="quarto-grid-item card h-100 <%-`card-${align}`%><%= hideBorders ? ' borderless' : '' %>">
44+
<div class="quarto-grid-item card h-100 <%= `card-${align}` %><%= hideBorders ? ' borderless' : '' %>">
45+
```
4346

4447
<% if (fields.includes('image')) { %>
4548

4649
<% if (item.image) { %>
4750

51+
```{=html}
4852
<p class="card-img-top">
4953
<%= listing.utilities.img(itemNumber, item.image, "thumbnail-image card-img", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
5054
</p>
55+
```
56+
5157
<% } else { %>
58+
59+
```{=html}
5260
<%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref) %>
53-
<% } %>
61+
```
5462

5563
<% } %>
64+
<% } %>
65+
5666
<% if (showField('title') || showField('subtitle') || showField('description') || showField('author') || showField('date') || otherFields.length > 0) { %>
5767

58-
<div class="card-body post-contents">
59-
<% if (showField('title')) { %><h5 class="no-anchor card-title listing-title"><%= item.title %></h5><% } %>
60-
<% if (showField('subtitle')) { %><div class="card-subtitle listing-subtitle"><%= item.subtitle %></div><% } %>
61-
<% if (showField('reading-time')) { %><div class="listing-reading-time card-text text-muted"><%= item['reading-time'] %></div> <% } %>
68+
::: {.card-body .post-contents}
69+
70+
<% if (showField('title')) { %>
71+
<h5 class="no-anchor card-title listing-title"><%= item.title %></h5>
72+
<% } %>
73+
74+
<% if (showField('subtitle')) { %>
75+
<div class="card-subtitle listing-subtitle"><%= item.subtitle %></div>
76+
<% } %>
77+
78+
<% if (showField('reading-time')) { %>
79+
80+
```{=html}
81+
<div class="listing-reading-time card-text text-muted"><%= item['reading-time'] %></div>
82+
```
83+
84+
<% } %>
6285

6386
<% if (fields.includes('categories') && item.categories) { %>
6487

88+
```{=html}
6589
<div class="listing-categories">
66-
<% for (const category of item.categories) { %>
67-
<div class="listing-category" onclick="window.quartoListingCategory('<%=utils.b64encode(category)%>'); return false;"><%= category %></div>
68-
<% } %>
90+
<% for (const category of item.categories) { %>
91+
<div class="listing-category" onclick="window.quartoListingCategory('<%= utils.b64encode(category ) %>'); return false;"><%= category %></div>
92+
<% } %>
6993
</div>
94+
```
7095

7196
<% } %>
97+
7298
<% if (showField('description')) { %>
7399

74-
<div class="card-text listing-description delink"><%= item.description %></div>
100+
```{=html}
101+
<div class="card-text listing-description delink">
102+
```
103+
104+
<%= item.description %>
105+
106+
```{=html}
107+
</div>
108+
```
109+
75110
<% } %>
76-
<%
111+
112+
<%
77113
const flexJustify = showField('author') && showField('date') ? "justify" : showField('author') ? "start" : "end";
78114
%>
115+
79116
<% if (showField('author') || showField('date')) { %>
80-
<div class="card-attribution card-text-small <%-flexJustify%>">
81-
<% if (showField('author')) { %><div class="listing-author"><%= item.author %></div><% } %>
82-
<% if (showField('date')) { %><div class="listing-date"><%= item.date %></div><% } %>
117+
118+
```{=html}
119+
<div class="card-attribution card-text-small <%- flexJustify %>">
120+
```
121+
122+
<% if (showField('author')) { %>
123+
<div class="listing-author"><%= item.author %></div>
124+
<% } %>
125+
126+
<% if (showField('date')) { %>
127+
<div class="listing-date"><%= item.date %></div>
128+
<% } %>
129+
130+
```{=html}
83131
</div>
132+
```
133+
84134
<% } %>
85135

86136
<% if (otherFields.length > 0) { %>
87137

138+
```{=html}
88139
<table class="card-other-values">
89-
<% for (const field of otherFields) {
90-
let value = readField(item, field);
140+
<% for (const field of otherFields) {
141+
let value = readField(item, field);
91142
%>
92143
<tr>
144+
```
145+
93146
<td><%= listing.utilities.fieldName(field) %></td>
94-
<td class="<%-field%>"><%= listing.utilities.outputLink(item, field, value) %></td>
147+
<td class="<%- field %>"><%= listing.utilities.outputLink(item, field, value) %></td>
148+
149+
```{=html}
95150
</tr>
96151
<% } %>
97152
</table>
153+
```
98154

99155
<% } %>
100156

101-
</div>
157+
:::
102158
<% } %>
103159

104160
<% if (fields.includes('filename') || fields.includes('file-modified')) { %>
105161

106-
<div class="card-footer">
162+
::: {.card-footer}
163+
107164
<% if (fields.includes('filename')) { %>
108-
<div class="card-filename listing-filename">
109-
<%= item.filename ? item.filename : "&nbsp;" %>
110-
</div>
165+
166+
```{=html}
167+
<div class="card-filename listing-filename"><%= item.filename ? item.filename : "&nbsp;" %></div>
168+
```
169+
111170
<% } %>
171+
112172
<% if (fields.includes('file-modified')) { %>
113-
<div class="card-file-modified listing-file-modified">
114-
<%= item['file-modified'] ? item['file-modified'] : "&nbsp;"%>
115-
</div>
173+
174+
```{=html}
175+
<div class="card-file-modified listing-file-modified"><%= item['file-modified'] ? item['file-modified'] : "&nbsp;" %></div>
176+
```
177+
116178
<% } %>
117-
</div>
179+
180+
:::
118181
<% } %>
119-
</div></a></div>
182+
183+
```{=html}
184+
</div></a>
185+
```
186+
187+
:::
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
:::{.list .quarto-listing-default}
2-
``````{=html}
1+
::: {.list .quarto-listing-default}
2+
33
<% for (const item of items) { %>
44
<% partial('item-default.ejs.md', {listing, item, utils }) %>
55
<% } %>
6-
``````
6+
77
:::

src/resources/projects/website/listing/listing-grid.ejs.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
const cols = listing['grid-columns'];
33
%>
44

5-
:::{.list .grid .quarto-listing-cols-<%=cols%>}
6-
```{=html}
5+
::: {.list .grid .quarto-listing-cols-<%= cols %>}
6+
77
<% for (const item of items) { %>
88
<% partial('item-grid.ejs.md', {listing, item, utils }) %>
99
<% } %>
10-
```
10+
1111
:::

0 commit comments

Comments
 (0)