@rmdes/indiekit-endpoint-blogroll 1.0.13 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles.css +342 -0
- package/lib/controllers/blogs.js +3 -0
- package/lib/controllers/dashboard.js +19 -0
- package/lib/controllers/sources.js +22 -0
- package/lib/storage/blogs.js +31 -26
- package/package.json +1 -1
- package/views/blogroll-blog-edit.njk +88 -297
- package/views/blogroll-blogs.njk +25 -146
- package/views/blogroll-dashboard.njk +50 -207
- package/views/blogroll-source-edit.njk +72 -144
- package/views/blogroll-sources.njk +19 -106
- package/views/layouts/blogroll.njk +6 -0
|
@@ -1,303 +1,94 @@
|
|
|
1
|
-
{% extends "
|
|
2
|
-
|
|
3
|
-
{% block
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
.br-field-hint {
|
|
21
|
-
color: var(--color-on-offset, #666);
|
|
22
|
-
font: var(--font-caption, 0.875rem/1.4 sans-serif);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.br-field input,
|
|
26
|
-
.br-field select,
|
|
27
|
-
.br-field textarea {
|
|
28
|
-
appearance: none;
|
|
29
|
-
background-color: var(--color-background, #fff);
|
|
30
|
-
border: 1px solid var(--color-outline-variant, #ccc);
|
|
31
|
-
border-radius: var(--border-radius-small, 0.25rem);
|
|
32
|
-
font: var(--font-body, 0.875rem/1.4 sans-serif);
|
|
33
|
-
padding: calc(var(--space-s, 0.75rem) / 2) var(--space-s, 0.75rem);
|
|
34
|
-
width: 100%;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.br-field textarea {
|
|
38
|
-
min-height: 100px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.br-field input:focus,
|
|
42
|
-
.br-field select:focus,
|
|
43
|
-
.br-field textarea:focus {
|
|
44
|
-
border-color: var(--color-primary, #0066cc);
|
|
45
|
-
outline: 2px solid var(--color-primary, #0066cc);
|
|
46
|
-
outline-offset: 1px;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.br-field-inline {
|
|
50
|
-
flex-direction: row;
|
|
51
|
-
align-items: center;
|
|
52
|
-
gap: var(--space-s, 0.75rem);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.br-field-inline input[type="checkbox"] {
|
|
56
|
-
appearance: auto;
|
|
57
|
-
width: auto;
|
|
58
|
-
cursor: pointer;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.br-section {
|
|
62
|
-
margin-block-start: var(--space-l, 1.5rem);
|
|
63
|
-
padding-block-start: var(--space-l, 1.5rem);
|
|
64
|
-
border-block-start: 1px solid var(--color-outline-variant, #ddd);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.br-section h3 {
|
|
68
|
-
font: var(--font-subhead, bold 1rem/1.4 sans-serif);
|
|
69
|
-
margin-block-end: var(--space-s, 0.75rem);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.br-items-list {
|
|
73
|
-
list-style: none;
|
|
74
|
-
padding: 0;
|
|
75
|
-
margin: 0;
|
|
76
|
-
display: flex;
|
|
77
|
-
flex-direction: column;
|
|
78
|
-
gap: var(--space-xs, 0.5rem);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.br-item {
|
|
82
|
-
background: var(--color-offset, #f5f5f5);
|
|
83
|
-
border-radius: var(--border-radius-small, 0.25rem);
|
|
84
|
-
padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.br-item-title {
|
|
88
|
-
font: var(--font-body, 0.875rem/1.4 sans-serif);
|
|
89
|
-
font-weight: 600;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.br-item-title a {
|
|
93
|
-
color: inherit;
|
|
94
|
-
text-decoration: none;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.br-item-title a:hover {
|
|
98
|
-
text-decoration: underline;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.br-item-meta {
|
|
102
|
-
color: var(--color-on-offset, #666);
|
|
103
|
-
font: var(--font-caption, 0.75rem/1.4 sans-serif);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.br-empty {
|
|
107
|
-
color: var(--color-on-offset, #666);
|
|
108
|
-
font: var(--font-caption, 0.875rem/1.4 sans-serif);
|
|
109
|
-
text-align: center;
|
|
110
|
-
padding: var(--space-m, 1rem);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.br-discover-section {
|
|
114
|
-
background: var(--color-offset, #f5f5f5);
|
|
115
|
-
border-radius: var(--border-radius-small, 0.5rem);
|
|
116
|
-
padding: var(--space-m, 1rem);
|
|
117
|
-
margin-block-end: var(--space-m, 1rem);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.br-discover-section .br-field {
|
|
121
|
-
margin-block-end: var(--space-s, 0.75rem);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.br-discover-input {
|
|
125
|
-
display: flex;
|
|
126
|
-
gap: var(--space-s, 0.75rem);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.br-discover-input input {
|
|
130
|
-
flex: 1;
|
|
131
|
-
appearance: none;
|
|
132
|
-
background-color: var(--color-background, #fff);
|
|
133
|
-
border: 1px solid var(--color-outline-variant, #ccc);
|
|
134
|
-
border-radius: var(--border-radius-small, 0.25rem);
|
|
135
|
-
font: var(--font-body, 0.875rem/1.4 sans-serif);
|
|
136
|
-
padding: calc(var(--space-s, 0.75rem) / 2) var(--space-s, 0.75rem);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.br-discover-result {
|
|
140
|
-
margin-block-start: var(--space-s, 0.75rem);
|
|
141
|
-
padding: var(--space-s, 0.75rem);
|
|
142
|
-
background: var(--color-background, #fff);
|
|
143
|
-
border-radius: var(--border-radius-small, 0.25rem);
|
|
144
|
-
font: var(--font-caption, 0.875rem/1.4 sans-serif);
|
|
145
|
-
}
|
|
1
|
+
{% extends "layouts/blogroll.njk" %}
|
|
2
|
+
|
|
3
|
+
{% block blogroll %}
|
|
4
|
+
<form method="post" action="{% if isNew %}{{ baseUrl }}/blogs{% else %}{{ baseUrl }}/blogs/{{ blog._id }}{% endif %}" class="blogroll-form">
|
|
5
|
+
{% if isNew %}
|
|
6
|
+
<div class="blogroll-discover">
|
|
7
|
+
<div class="blogroll-field">
|
|
8
|
+
<label for="discoverUrl">{{ __("blogroll.blogs.form.discoverUrl") }}</label>
|
|
9
|
+
<div class="blogroll-discover__input">
|
|
10
|
+
<input type="url" id="discoverUrl" placeholder="https://tantek.com">
|
|
11
|
+
{{ button({ type: "button", text: __("blogroll.blogs.form.discover"), classes: "button--secondary", attributes: { id: "discoverBtn" } }) }}
|
|
12
|
+
</div>
|
|
13
|
+
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.discoverHint") }}</span>
|
|
14
|
+
</div>
|
|
15
|
+
<div id="discoverResult" class="blogroll-discover__result" style="display: none;"></div>
|
|
16
|
+
</div>
|
|
17
|
+
<hr class="blogroll-divider">
|
|
18
|
+
{% endif %}
|
|
146
19
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
20
|
+
<div class="blogroll-field">
|
|
21
|
+
<label for="feedUrl">{{ __("blogroll.blogs.form.feedUrl") }}</label>
|
|
22
|
+
<input type="url" id="feedUrl" name="feedUrl" value="{{ blog.feedUrl if blog else '' }}" required placeholder="https://example.com/feed.xml">
|
|
23
|
+
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.feedUrlHint") }}</span>
|
|
24
|
+
</div>
|
|
150
25
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
26
|
+
<div class="blogroll-field">
|
|
27
|
+
<label for="title">{{ __("blogroll.blogs.form.title") }}</label>
|
|
28
|
+
<input type="text" id="title" name="title" value="{{ blog.title if blog else '' }}" placeholder="{{ __('blogroll.blogs.form.titlePlaceholder') }}">
|
|
29
|
+
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.titleHint") }}</span>
|
|
30
|
+
</div>
|
|
154
31
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
flex-direction: column;
|
|
161
|
-
gap: var(--space-xs, 0.5rem);
|
|
162
|
-
}
|
|
32
|
+
<div class="blogroll-field">
|
|
33
|
+
<label for="siteUrl">{{ __("blogroll.blogs.form.siteUrl") }}</label>
|
|
34
|
+
<input type="url" id="siteUrl" name="siteUrl" value="{{ blog.siteUrl if blog else '' }}" placeholder="https://example.com">
|
|
35
|
+
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.siteUrlHint") }}</span>
|
|
36
|
+
</div>
|
|
163
37
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
background: var(--color-offset, #f5f5f5);
|
|
170
|
-
border-radius: var(--border-radius-small, 0.25rem);
|
|
171
|
-
cursor: pointer;
|
|
172
|
-
}
|
|
38
|
+
<div class="blogroll-field">
|
|
39
|
+
<label for="category">{{ __("blogroll.blogs.form.category") }}</label>
|
|
40
|
+
<input type="text" id="category" name="category" value="{{ blog.category if blog else '' }}" placeholder="Technology">
|
|
41
|
+
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.categoryHint") }}</span>
|
|
42
|
+
</div>
|
|
173
43
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
44
|
+
<div class="blogroll-field">
|
|
45
|
+
<label for="tags">{{ __("blogroll.blogs.form.tags") }}</label>
|
|
46
|
+
<input type="text" id="tags" name="tags" value="{{ blog.tags | join(', ') if blog and blog.tags else '' }}" placeholder="indie, personal, tech">
|
|
47
|
+
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.tagsHint") }}</span>
|
|
48
|
+
</div>
|
|
177
49
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}
|
|
50
|
+
<div class="blogroll-field">
|
|
51
|
+
<label for="notes">{{ __("blogroll.blogs.form.notes") }}</label>
|
|
52
|
+
<textarea id="notes" name="notes" placeholder="{{ __('blogroll.blogs.form.notesPlaceholder') }}">{{ blog.notes if blog else '' }}</textarea>
|
|
53
|
+
<span class="blogroll-field-hint">{{ __("blogroll.blogs.form.notesHint") }}</span>
|
|
54
|
+
</div>
|
|
184
55
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
border-radius: 0.25rem;
|
|
190
|
-
font-size: 0.625rem;
|
|
191
|
-
text-transform: uppercase;
|
|
192
|
-
}
|
|
56
|
+
<div class="blogroll-field blogroll-field--inline">
|
|
57
|
+
<input type="checkbox" id="pinned" name="pinned" {% if blog and blog.pinned %}checked{% endif %}>
|
|
58
|
+
<label for="pinned">{{ __("blogroll.blogs.form.pinned") }}</label>
|
|
59
|
+
</div>
|
|
193
60
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
margin: var(--space-m, 1rem) 0;
|
|
198
|
-
}
|
|
199
|
-
</style>
|
|
200
|
-
|
|
201
|
-
<header class="page-header">
|
|
202
|
-
<a href="{{ baseUrl }}/blogs" class="page-header__back">{{ icon("previous") }} {{ __("blogroll.blogs.title") }}</a>
|
|
203
|
-
<h1 class="page-header__title">{{ title }}</h1>
|
|
204
|
-
</header>
|
|
205
|
-
|
|
206
|
-
{# Flash messages rendered by Indiekit's native notificationBanner via success/error template vars #}
|
|
207
|
-
|
|
208
|
-
<form method="post" action="{% if isNew %}{{ baseUrl }}/blogs{% else %}{{ baseUrl }}/blogs/{{ blog._id }}{% endif %}" class="br-form">
|
|
209
|
-
{% if isNew %}
|
|
210
|
-
<div class="br-discover-section">
|
|
211
|
-
<div class="br-field">
|
|
212
|
-
<label for="discoverUrl">{{ __("blogroll.blogs.form.discoverUrl") }}</label>
|
|
213
|
-
<div class="br-discover-input">
|
|
214
|
-
<input type="url" id="discoverUrl" placeholder="https://tantek.com">
|
|
215
|
-
<button type="button" id="discoverBtn" class="button button--secondary">
|
|
216
|
-
{{ __("blogroll.blogs.form.discover") }}
|
|
217
|
-
</button>
|
|
218
|
-
</div>
|
|
219
|
-
<span class="br-field-hint">{{ __("blogroll.blogs.form.discoverHint") }}</span>
|
|
61
|
+
<div class="blogroll-field blogroll-field--inline">
|
|
62
|
+
<input type="checkbox" id="hidden" name="hidden" {% if blog and blog.hidden %}checked{% endif %}>
|
|
63
|
+
<label for="hidden">{{ __("blogroll.blogs.form.hidden") }}</label>
|
|
220
64
|
</div>
|
|
221
|
-
<div id="discoverResult" class="br-discover-result" style="display: none;"></div>
|
|
222
|
-
</div>
|
|
223
|
-
<hr class="br-divider">
|
|
224
|
-
{% endif %}
|
|
225
65
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
</
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
<
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
<label for="tags">{{ __("blogroll.blogs.form.tags") }}</label>
|
|
252
|
-
<input type="text" id="tags" name="tags" value="{{ blog.tags | join(', ') if blog and blog.tags else '' }}" placeholder="indie, personal, tech">
|
|
253
|
-
<span class="br-field-hint">{{ __("blogroll.blogs.form.tagsHint") }}</span>
|
|
254
|
-
</div>
|
|
255
|
-
|
|
256
|
-
<div class="br-field">
|
|
257
|
-
<label for="notes">{{ __("blogroll.blogs.form.notes") }}</label>
|
|
258
|
-
<textarea id="notes" name="notes" placeholder="{{ __('blogroll.blogs.form.notesPlaceholder') }}">{{ blog.notes if blog else '' }}</textarea>
|
|
259
|
-
<span class="br-field-hint">{{ __("blogroll.blogs.form.notesHint") }}</span>
|
|
260
|
-
</div>
|
|
261
|
-
|
|
262
|
-
<div class="br-field br-field-inline">
|
|
263
|
-
<input type="checkbox" id="pinned" name="pinned" {% if blog and blog.pinned %}checked{% endif %}>
|
|
264
|
-
<label for="pinned">{{ __("blogroll.blogs.form.pinned") }}</label>
|
|
265
|
-
</div>
|
|
266
|
-
|
|
267
|
-
<div class="br-field br-field-inline">
|
|
268
|
-
<input type="checkbox" id="hidden" name="hidden" {% if blog and blog.hidden %}checked{% endif %}>
|
|
269
|
-
<label for="hidden">{{ __("blogroll.blogs.form.hidden") }}</label>
|
|
270
|
-
</div>
|
|
271
|
-
|
|
272
|
-
<div class="button-group">
|
|
273
|
-
<button type="submit" class="button button--primary">
|
|
274
|
-
{% if isNew %}{{ __("blogroll.blogs.create") }}{% else %}{{ __("blogroll.blogs.save") }}{% endif %}
|
|
275
|
-
</button>
|
|
276
|
-
<a href="{{ baseUrl }}/blogs" class="button button--secondary">{{ __("blogroll.cancel") }}</a>
|
|
277
|
-
</div>
|
|
278
|
-
</form>
|
|
279
|
-
|
|
280
|
-
{% if not isNew and items %}
|
|
281
|
-
<div class="br-section">
|
|
282
|
-
<h3>{{ __("blogroll.blogs.recentItems") }}</h3>
|
|
283
|
-
{% if items.length > 0 %}
|
|
284
|
-
<ul class="br-items-list">
|
|
285
|
-
{% for item in items %}
|
|
286
|
-
<li class="br-item">
|
|
287
|
-
<div class="br-item-title">
|
|
288
|
-
<a href="{{ item.url }}" target="_blank" rel="noopener">{{ item.title }}</a>
|
|
289
|
-
</div>
|
|
290
|
-
<div class="br-item-meta">
|
|
291
|
-
{{ item.published | date("PPpp") }}
|
|
292
|
-
</div>
|
|
293
|
-
</li>
|
|
294
|
-
{% endfor %}
|
|
295
|
-
</ul>
|
|
296
|
-
{% else %}
|
|
297
|
-
<p class="br-empty">{{ __("blogroll.blogs.noItems") }}</p>
|
|
66
|
+
<div class="blogroll-actions">
|
|
67
|
+
{{ button({ type: "submit", text: __("blogroll.blogs.create") if isNew else __("blogroll.blogs.save") }) }}
|
|
68
|
+
{{ button({ href: baseUrl + "/blogs", text: __("blogroll.cancel"), classes: "button--secondary" }) }}
|
|
69
|
+
</div>
|
|
70
|
+
</form>
|
|
71
|
+
|
|
72
|
+
{% if not isNew and items %}
|
|
73
|
+
{% call section({ title: __("blogroll.blogs.recentItems") }) %}
|
|
74
|
+
{% if items.length > 0 %}
|
|
75
|
+
<ul class="blogroll-items-list">
|
|
76
|
+
{% for item in items %}
|
|
77
|
+
<li>
|
|
78
|
+
<div class="blogroll-item__title">
|
|
79
|
+
<a href="{{ item.url }}" target="_blank" rel="noopener">{{ item.title }}</a>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="blogroll-item__meta">
|
|
82
|
+
{% if item.published %}{{ item.published | date("PPpp") }}{% endif %}
|
|
83
|
+
</div>
|
|
84
|
+
</li>
|
|
85
|
+
{% endfor %}
|
|
86
|
+
</ul>
|
|
87
|
+
{% else %}
|
|
88
|
+
{{ prose({ text: __("blogroll.blogs.noItems") }) }}
|
|
89
|
+
{% endif %}
|
|
90
|
+
{% endcall %}
|
|
298
91
|
{% endif %}
|
|
299
|
-
</div>
|
|
300
|
-
{% endif %}
|
|
301
92
|
|
|
302
93
|
{% if isNew %}
|
|
303
94
|
<script>
|
|
@@ -311,9 +102,9 @@
|
|
|
311
102
|
|
|
312
103
|
function showResult(message, isError, isSuccess) {
|
|
313
104
|
discoverResult.style.display = 'block';
|
|
314
|
-
discoverResult.className = '
|
|
315
|
-
(isError ? '
|
|
316
|
-
(isSuccess ? '
|
|
105
|
+
discoverResult.className = 'blogroll-discover__result' +
|
|
106
|
+
(isError ? ' blogroll-discover__result--error' : '') +
|
|
107
|
+
(isSuccess ? ' blogroll-discover__result--success' : '');
|
|
317
108
|
discoverResult.textContent = '';
|
|
318
109
|
|
|
319
110
|
const span = document.createElement('span');
|
|
@@ -323,7 +114,7 @@
|
|
|
323
114
|
|
|
324
115
|
function showFeedUrl(message, url) {
|
|
325
116
|
discoverResult.style.display = 'block';
|
|
326
|
-
discoverResult.className = '
|
|
117
|
+
discoverResult.className = 'blogroll-discover__result blogroll-discover__result--success';
|
|
327
118
|
discoverResult.textContent = '';
|
|
328
119
|
|
|
329
120
|
const span = document.createElement('span');
|
|
@@ -379,19 +170,19 @@
|
|
|
379
170
|
showResult('{{ __("blogroll.blogs.form.discoverFoundMultiple") }}', false, true);
|
|
380
171
|
|
|
381
172
|
const feedList = document.createElement('ul');
|
|
382
|
-
feedList.className = '
|
|
173
|
+
feedList.className = 'blogroll-discover__feeds';
|
|
383
174
|
|
|
384
175
|
data.feeds.forEach(function(feed) {
|
|
385
176
|
const li = document.createElement('li');
|
|
386
|
-
li.className = '
|
|
177
|
+
li.className = 'blogroll-discover__feed';
|
|
387
178
|
|
|
388
179
|
const typeSpan = document.createElement('span');
|
|
389
|
-
typeSpan.className = '
|
|
180
|
+
typeSpan.className = 'blogroll-discover__feed-type';
|
|
390
181
|
typeSpan.textContent = feed.type;
|
|
391
182
|
li.appendChild(typeSpan);
|
|
392
183
|
|
|
393
184
|
const urlSpan = document.createElement('span');
|
|
394
|
-
urlSpan.className = '
|
|
185
|
+
urlSpan.className = 'blogroll-discover__feed-url';
|
|
395
186
|
urlSpan.textContent = feed.url;
|
|
396
187
|
li.appendChild(urlSpan);
|
|
397
188
|
|
package/views/blogroll-blogs.njk
CHANGED
|
@@ -1,187 +1,67 @@
|
|
|
1
|
-
{% extends "
|
|
1
|
+
{% extends "layouts/blogroll.njk" %}
|
|
2
2
|
|
|
3
|
-
{% block
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
gap: var(--space-m, 1.5rem);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.br-filters {
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-wrap: wrap;
|
|
14
|
-
gap: var(--space-s, 0.75rem);
|
|
15
|
-
align-items: center;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.br-filter-select {
|
|
19
|
-
appearance: none;
|
|
20
|
-
background-color: var(--color-background, #fff);
|
|
21
|
-
border: 1px solid var(--color-outline-variant, #ccc);
|
|
22
|
-
border-radius: var(--border-radius-small, 0.25rem);
|
|
23
|
-
font: var(--font-body, 0.875rem/1.4 sans-serif);
|
|
24
|
-
padding: calc(var(--space-s, 0.75rem) / 2) var(--space-s, 0.75rem);
|
|
25
|
-
min-width: 150px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.br-blogs-list {
|
|
29
|
-
list-style: none;
|
|
30
|
-
padding: 0;
|
|
31
|
-
margin: 0;
|
|
32
|
-
display: flex;
|
|
33
|
-
flex-direction: column;
|
|
34
|
-
gap: var(--space-s, 0.75rem);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.br-blog-item {
|
|
38
|
-
background: var(--color-offset, #f5f5f5);
|
|
39
|
-
border-radius: var(--border-radius-small, 0.5rem);
|
|
40
|
-
padding: var(--space-m, 1rem);
|
|
41
|
-
display: flex;
|
|
42
|
-
justify-content: space-between;
|
|
43
|
-
align-items: flex-start;
|
|
44
|
-
flex-wrap: wrap;
|
|
45
|
-
gap: var(--space-s, 0.75rem);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.br-blog-item--pinned {
|
|
49
|
-
border-left: 3px solid var(--color-primary, #0066cc);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.br-blog-item--hidden {
|
|
53
|
-
opacity: 0.6;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.br-blog-info {
|
|
57
|
-
flex: 1;
|
|
58
|
-
min-width: 200px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.br-blog-title {
|
|
62
|
-
font: var(--font-subhead, bold 1rem/1.4 sans-serif);
|
|
63
|
-
margin-block-end: var(--space-2xs, 0.25rem);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.br-blog-title a {
|
|
67
|
-
color: inherit;
|
|
68
|
-
text-decoration: none;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.br-blog-title a:hover {
|
|
72
|
-
text-decoration: underline;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.br-blog-meta {
|
|
76
|
-
color: var(--color-on-offset, #666);
|
|
77
|
-
font: var(--font-caption, 0.875rem/1.4 sans-serif);
|
|
78
|
-
display: flex;
|
|
79
|
-
flex-wrap: wrap;
|
|
80
|
-
gap: var(--space-xs, 0.5rem);
|
|
81
|
-
align-items: center;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.br-blog-url {
|
|
85
|
-
color: var(--color-primary, #0066cc);
|
|
86
|
-
font: var(--font-caption, 0.75rem/1.4 monospace);
|
|
87
|
-
word-break: break-all;
|
|
88
|
-
margin-block-start: var(--space-2xs, 0.25rem);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.br-blog-error {
|
|
92
|
-
color: var(--color-error, #dc3545);
|
|
93
|
-
font: var(--font-caption, 0.75rem/1.4 sans-serif);
|
|
94
|
-
margin-block-start: var(--space-2xs, 0.25rem);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.br-blog-actions {
|
|
98
|
-
display: flex;
|
|
99
|
-
flex-wrap: wrap;
|
|
100
|
-
gap: var(--space-xs, 0.5rem);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.br-empty {
|
|
104
|
-
text-align: center;
|
|
105
|
-
padding: var(--space-xl, 2rem);
|
|
106
|
-
color: var(--color-on-offset, #666);
|
|
107
|
-
}
|
|
108
|
-
</style>
|
|
109
|
-
|
|
110
|
-
<header class="page-header">
|
|
111
|
-
<a href="{{ baseUrl }}" class="page-header__back">{{ icon("previous") }} {{ __("blogroll.title") }}</a>
|
|
112
|
-
<h1 class="page-header__title">{{ __("blogroll.blogs.title") }}</h1>
|
|
113
|
-
</header>
|
|
114
|
-
|
|
115
|
-
{# Flash messages are now rendered by Indiekit's native notificationBanner via success/error template vars #}
|
|
116
|
-
|
|
117
|
-
<div class="br-blogs">
|
|
118
|
-
<div class="br-filters">
|
|
119
|
-
<form method="get" action="{{ baseUrl }}/blogs" style="display: flex; gap: var(--space-s, 0.75rem); flex-wrap: wrap; align-items: center;">
|
|
120
|
-
<select name="category" class="br-filter-select" onchange="this.form.submit()">
|
|
3
|
+
{% block blogroll %}
|
|
4
|
+
<div class="blogroll-filters">
|
|
5
|
+
<form method="get" action="{{ baseUrl }}/blogs" style="display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center;">
|
|
6
|
+
<select name="category" class="blogroll-filter-select" onchange="this.form.submit()">
|
|
121
7
|
<option value="">{{ __("blogroll.blogs.allCategories") }}</option>
|
|
122
8
|
{% for cat in categories %}
|
|
123
9
|
<option value="{{ cat }}" {% if filterCategory == cat %}selected{% endif %}>{{ cat }}</option>
|
|
124
10
|
{% endfor %}
|
|
125
11
|
</select>
|
|
126
|
-
<select name="status" class="
|
|
12
|
+
<select name="status" class="blogroll-filter-select" onchange="this.form.submit()">
|
|
127
13
|
<option value="">{{ __("blogroll.blogs.allStatuses") }}</option>
|
|
128
14
|
<option value="active" {% if filterStatus == 'active' %}selected{% endif %}>{{ __("blogroll.blogs.statusActive") }}</option>
|
|
129
15
|
<option value="error" {% if filterStatus == 'error' %}selected{% endif %}>{{ __("blogroll.blogs.statusError") }}</option>
|
|
130
16
|
<option value="pending" {% if filterStatus == 'pending' %}selected{% endif %}>{{ __("blogroll.blogs.statusPending") }}</option>
|
|
131
17
|
</select>
|
|
132
18
|
{% if filterCategory or filterStatus %}
|
|
133
|
-
|
|
19
|
+
{{ button({ href: baseUrl + "/blogs", text: __("blogroll.blogs.clearFilters"), classes: "button--small button--secondary" }) }}
|
|
134
20
|
{% endif %}
|
|
135
21
|
</form>
|
|
136
22
|
</div>
|
|
137
23
|
|
|
138
|
-
<div class="
|
|
139
|
-
|
|
140
|
-
{{ __("blogroll.blogs.add") }}
|
|
141
|
-
</a>
|
|
24
|
+
<div class="blogroll-actions">
|
|
25
|
+
{{ button({ href: baseUrl + "/blogs/new", text: __("blogroll.blogs.add") }) }}
|
|
142
26
|
</div>
|
|
143
27
|
|
|
144
28
|
{% if blogs.length > 0 %}
|
|
145
|
-
<ul class="
|
|
29
|
+
<ul class="blogroll-list">
|
|
146
30
|
{% for blog in blogs %}
|
|
147
|
-
<li class="
|
|
148
|
-
<div class="
|
|
149
|
-
<h2 class="
|
|
31
|
+
<li class="blogroll-list__item {% if blog.pinned %}blogroll-list__item--pinned{% endif %} {% if blog.hidden %}blogroll-list__item--hidden{% endif %}">
|
|
32
|
+
<div class="blogroll-item__info">
|
|
33
|
+
<h2 class="blogroll-item__title">
|
|
150
34
|
{% if blog.siteUrl %}
|
|
151
35
|
<a href="{{ blog.siteUrl }}" target="_blank" rel="noopener">{{ blog.title }}</a>
|
|
152
36
|
{% else %}
|
|
153
37
|
{{ blog.title }}
|
|
154
38
|
{% endif %}
|
|
155
39
|
</h2>
|
|
156
|
-
<p class="
|
|
157
|
-
|
|
158
|
-
{{ blog.status }}
|
|
159
|
-
</span>
|
|
40
|
+
<p class="blogroll-item__meta">
|
|
41
|
+
{{ badge({ color: "green" if blog.status == "active" else ("red" if blog.status == "error" else "yellow"), text: blog.status }) }}
|
|
160
42
|
{% if blog.category %}
|
|
161
43
|
<span>{{ blog.category }}</span>
|
|
162
44
|
{% endif %}
|
|
163
|
-
<span
|
|
45
|
+
<span>· {{ blog.itemCount or 0 }} items</span>
|
|
164
46
|
{% if blog.pinned %}
|
|
165
|
-
<span
|
|
47
|
+
<span>· {{ __("blogroll.blogs.pinned") }}</span>
|
|
166
48
|
{% endif %}
|
|
167
49
|
{% if blog.hidden %}
|
|
168
|
-
<span
|
|
50
|
+
<span>· {{ __("blogroll.blogs.hidden") }}</span>
|
|
169
51
|
{% endif %}
|
|
170
52
|
</p>
|
|
171
|
-
<p class="
|
|
53
|
+
<p class="blogroll-item__url">{{ blog.feedUrl }}</p>
|
|
172
54
|
{% if blog.lastError %}
|
|
173
|
-
<p class="
|
|
55
|
+
<p class="blogroll-item__error">{{ blog.lastError }}</p>
|
|
174
56
|
{% endif %}
|
|
175
57
|
</div>
|
|
176
|
-
<div class="
|
|
58
|
+
<div class="blogroll-item__actions">
|
|
177
59
|
<form method="post" action="{{ baseUrl }}/blogs/{{ blog._id }}/refresh" style="display: inline;">
|
|
178
60
|
<button type="submit" class="button button--small button--secondary">
|
|
179
61
|
{{ icon("syndicate") }} {{ __("blogroll.refresh") }}
|
|
180
62
|
</button>
|
|
181
63
|
</form>
|
|
182
|
-
|
|
183
|
-
{{ icon("updatePost") }} {{ __("blogroll.edit") }}
|
|
184
|
-
</a>
|
|
64
|
+
{{ button({ href: baseUrl + "/blogs/" + blog._id, text: __("blogroll.edit"), classes: "button--small button--secondary" }) }}
|
|
185
65
|
<form method="post" action="{{ baseUrl }}/blogs/{{ blog._id }}/delete" style="display: inline;" onsubmit="return confirm('{{ __("blogroll.blogs.deleteConfirm") }}');">
|
|
186
66
|
<button type="submit" class="button button--small button--warning">
|
|
187
67
|
{{ icon("delete") }}
|
|
@@ -192,10 +72,9 @@
|
|
|
192
72
|
{% endfor %}
|
|
193
73
|
</ul>
|
|
194
74
|
{% else %}
|
|
195
|
-
<div class="
|
|
196
|
-
|
|
197
|
-
|
|
75
|
+
<div class="blogroll-empty">
|
|
76
|
+
{{ prose({ text: __("blogroll.blogs.empty") }) }}
|
|
77
|
+
{{ button({ href: baseUrl + "/blogs/new", text: __("blogroll.blogs.add") }) }}
|
|
198
78
|
</div>
|
|
199
79
|
{% endif %}
|
|
200
|
-
</div>
|
|
201
80
|
{% endblock %}
|