Skip to content

Commit 4750a94

Browse files
claremacraeclaremacrae
authored
Merge pull request #3199 from obsidian-tasks-group/docs-collapse-html-samples
docs: Collapse some long HTML samples in callouts
2 parents 848d8bb + 2e18fc8 commit 4750a94

File tree

4 files changed

+166
-167
lines changed

4 files changed

+166
-167
lines changed

‎docs/Advanced/Styling.md‎

Lines changed: 11 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -71,186 +71,31 @@ The reason for this additional internal span is that it allows CSS styles that c
7171

7272
### Sample HTML: Full mode
7373

74-
To help visualise the structure above, here is the HTML for a sample Tasks search shown in [[Layout#Full Mode|full mode]].
74+
To help visualise the structure above, below is the HTML for a sample Tasks search shown in [[Layout#Full Mode|full mode]].
7575

7676
> [!Note]
7777
> In Reading Mode:
7878
>
7979
> - all the classes and data inside the `li` are available,
8080
> - and none of the "Task extras" content is available.
8181
82-
<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html -->
83-
```html
84-
<!--
85-
- [ ] Do exercises #todo #health 🆔 abcdef ⛔ 123456,abc123 🔼 🔁 every day when done 🏁 delete ➕ 2023-07-01 🛫 2023-07-02 ⏳ 2023-07-03 📅 2023-07-04 ❌ 2023-07-06 ✅ 2023-07-05 ^dcf64c
86-
-->
87-
88-
<div>
89-
<ul class="contains-task-list plugin-tasks-query-result">
90-
<li
91-
class="task-list-item plugin-tasks-list-item"
92-
data-task-priority="medium"
93-
data-task-created="past-4d"
94-
data-task-start="past-3d"
95-
data-task-scheduled="past-2d"
96-
data-task-due="past-1d"
97-
data-task-cancelled="future-1d"
98-
data-task-done="today"
99-
data-task=""
100-
data-line="0"
101-
data-task-status-name="Todo"
102-
data-task-status-type="TODO">
103-
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
104-
<span class="tasks-list-text">
105-
<span class="task-description"><span>Do exercises #todo #health</span></span>
106-
<span class="task-id"><span>🆔 abcdef</span></span>
107-
<span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
108-
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
109-
<span class="task-recurring"><span>🔁 every day when done</span></span>
110-
<span class="task-onCompletion"><span>🏁 delete</span></span>
111-
<span
112-
class="task-created"
113-
data-task-created="past-4d"
114-
title="Click to edit created date, Right-click for more options">
115-
<span>➕ 2023-07-01</span>
116-
</span>
117-
<span
118-
class="task-start"
119-
data-task-start="past-3d"
120-
title="Click to edit start date, Right-click for more options">
121-
<span>🛫 2023-07-02</span>
122-
</span>
123-
<span
124-
class="task-scheduled"
125-
data-task-scheduled="past-2d"
126-
title="Click to edit scheduled date, Right-click for more options">
127-
<span>⏳ 2023-07-03</span>
128-
</span>
129-
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
130-
<span>📅 2023-07-04</span>
131-
</span>
132-
<span
133-
class="task-cancelled"
134-
data-task-cancelled="future-1d"
135-
title="Click to edit cancelled date, Right-click for more options">
136-
<span>❌ 2023-07-06</span>
137-
</span>
138-
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
139-
<span>✅ 2023-07-05</span>
140-
</span>
141-
<span class="task-block-link"><span>^dcf64c</span></span>
142-
</span>
143-
<span class="task-extras">
144-
<span class="tasks-urgency">18.157</span>
145-
<span class="tasks-backlink">
146-
(
147-
<a rel="noopener" target="_blank" class="internal-link">fileName &gt; My Header</a>
148-
)
149-
</span>
150-
<a class="tasks-edit" title="Edit task" href="#"></a>
151-
<a class="tasks-postpone" title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
152-
</span>
153-
</li>
154-
</ul>
155-
<div class="task-count">1 task</div>
156-
</div>
157-
```
158-
<!-- endSnippet -->
82+
> [!example]- Sample HTML: Full mode
83+
> ![[Sample HTML - Full mode]]
15984
16085
### Sample HTML: Short mode
16186

162-
Here is the same Tasks search in [[Layout#Short Mode|short mode]].
163-
164-
The differences from full mode are:
165-
166-
- the `ul` has an extra class `tasks-layout-short-mode`,
167-
- any text values after Tasks emoji are omitted,
168-
- the backlink is shorter and has an extra class `internal-link-short-mode`,
169-
- the postpone button has an extra class `tasks-postpone-short-mode`.
87+
Below is the same Tasks search in [[Layout#Short Mode|short mode]].
17088

17189
> [!Note]
172-
> In Reading Mode:
90+
> The differences from Full mode are:
17391
>
174-
> - all the classes and data inside the `li` are available,
175-
> - and none of the "Task extras" content is available.
92+
> - the `ul` has an extra class `tasks-layout-short-mode`,
93+
> - any text values after Tasks emoji are omitted,
94+
> - the backlink is shorter and has an extra class `internal-link-short-mode`,
95+
> - the postpone button has an extra class `tasks-postpone-short-mode`.
17696
177-
<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task_-_short_mode.approved.html -->
178-
```html
179-
<!--
180-
- [ ] Do exercises #todo #health 🆔 abcdef ⛔ 123456,abc123 🔼 🔁 every day when done 🏁 delete ➕ 2023-07-01 🛫 2023-07-02 ⏳ 2023-07-03 📅 2023-07-04 ❌ 2023-07-06 ✅ 2023-07-05 ^dcf64c
181-
-->
182-
183-
<div>
184-
<ul class="contains-task-list plugin-tasks-query-result tasks-layout-short-mode">
185-
<li
186-
class="task-list-item plugin-tasks-list-item"
187-
data-task-priority="medium"
188-
data-task-created="past-4d"
189-
data-task-start="past-3d"
190-
data-task-scheduled="past-2d"
191-
data-task-due="past-1d"
192-
data-task-cancelled="future-1d"
193-
data-task-done="today"
194-
data-task=""
195-
data-line="0"
196-
data-task-status-name="Todo"
197-
data-task-status-type="TODO">
198-
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
199-
<span class="tasks-list-text">
200-
<span class="task-description"><span>Do exercises #todo #health</span></span>
201-
<span class="task-id"><span>🆔</span></span>
202-
<span class="task-dependsOn"><span>⛔</span></span>
203-
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
204-
<span class="task-recurring"><span>🔁</span></span>
205-
<span class="task-onCompletion"><span>🏁</span></span>
206-
<span
207-
class="task-created"
208-
data-task-created="past-4d"
209-
title="Click to edit created date, Right-click for more options">
210-
<span>➕</span>
211-
</span>
212-
<span
213-
class="task-start"
214-
data-task-start="past-3d"
215-
title="Click to edit start date, Right-click for more options">
216-
<span>🛫</span>
217-
</span>
218-
<span
219-
class="task-scheduled"
220-
data-task-scheduled="past-2d"
221-
title="Click to edit scheduled date, Right-click for more options">
222-
<span>⏳</span>
223-
</span>
224-
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
225-
<span>📅</span>
226-
</span>
227-
<span
228-
class="task-cancelled"
229-
data-task-cancelled="future-1d"
230-
title="Click to edit cancelled date, Right-click for more options">
231-
<span>❌</span>
232-
</span>
233-
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
234-
<span>✅</span>
235-
</span>
236-
<span class="task-block-link"><span>^dcf64c</span></span>
237-
</span>
238-
<span class="task-extras">
239-
<span class="tasks-urgency">18.157</span>
240-
<span class="tasks-backlink">
241-
<a rel="noopener" target="_blank" class="internal-link internal-link-short-mode">🔗</a>
242-
</span>
243-
<a class="tasks-edit" title="Edit task" href="#"></a>
244-
<a
245-
class="tasks-postpone tasks-postpone-short-mode"
246-
title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
247-
</span>
248-
</li>
249-
</ul>
250-
<div class="task-count">1 task</div>
251-
</div>
252-
```
253-
<!-- endSnippet -->
97+
> [!example]- Sample HTML: Short mode
98+
> ![[Sample HTML - Short mode]]
25499
255100
## Generic Classes and Data Attributes
256101

‎docs/snippets-embedded-in-multiple-pages/Sample HTML - Full mode.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html -->
2+
```html
3+
<!--
4+
- [ ] Do exercises #todo #health 🆔 abcdef ⛔ 123456,abc123 🔼 🔁 every day when done 🏁 delete ➕ 2023-07-01 🛫 2023-07-02 ⏳ 2023-07-03 📅 2023-07-04 ❌ 2023-07-06 ✅ 2023-07-05 ^dcf64c
5+
-->
6+
7+
<div>
8+
<ul class="contains-task-list plugin-tasks-query-result">
9+
<li
10+
class="task-list-item plugin-tasks-list-item"
11+
data-task-priority="medium"
12+
data-task-created="past-4d"
13+
data-task-start="past-3d"
14+
data-task-scheduled="past-2d"
15+
data-task-due="past-1d"
16+
data-task-cancelled="future-1d"
17+
data-task-done="today"
18+
data-task=""
19+
data-line="0"
20+
data-task-status-name="Todo"
21+
data-task-status-type="TODO">
22+
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
23+
<span class="tasks-list-text">
24+
<span class="task-description"><span>Do exercises #todo #health</span></span>
25+
<span class="task-id"><span>🆔 abcdef</span></span>
26+
<span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
27+
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
28+
<span class="task-recurring"><span>🔁 every day when done</span></span>
29+
<span class="task-onCompletion"><span>🏁 delete</span></span>
30+
<span
31+
class="task-created"
32+
data-task-created="past-4d"
33+
title="Click to edit created date, Right-click for more options">
34+
<span>➕ 2023-07-01</span>
35+
</span>
36+
<span
37+
class="task-start"
38+
data-task-start="past-3d"
39+
title="Click to edit start date, Right-click for more options">
40+
<span>🛫 2023-07-02</span>
41+
</span>
42+
<span
43+
class="task-scheduled"
44+
data-task-scheduled="past-2d"
45+
title="Click to edit scheduled date, Right-click for more options">
46+
<span>⏳ 2023-07-03</span>
47+
</span>
48+
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
49+
<span>📅 2023-07-04</span>
50+
</span>
51+
<span
52+
class="task-cancelled"
53+
data-task-cancelled="future-1d"
54+
title="Click to edit cancelled date, Right-click for more options">
55+
<span>❌ 2023-07-06</span>
56+
</span>
57+
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
58+
<span>✅ 2023-07-05</span>
59+
</span>
60+
<span class="task-block-link"><span>^dcf64c</span></span>
61+
</span>
62+
<span class="task-extras">
63+
<span class="tasks-urgency">18.157</span>
64+
<span class="tasks-backlink">
65+
(
66+
<a rel="noopener" target="_blank" class="internal-link">fileName &gt; My Header</a>
67+
)
68+
</span>
69+
<a class="tasks-edit" title="Edit task" href="#"></a>
70+
<a class="tasks-postpone" title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
71+
</span>
72+
</li>
73+
</ul>
74+
<div class="task-count">1 task</div>
75+
</div>
76+
```
77+
<!-- endSnippet -->

‎docs/snippets-embedded-in-multiple-pages/Sample HTML - Short mode.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task_-_short_mode.approved.html -->
2+
```html
3+
<!--
4+
- [ ] Do exercises #todo #health 🆔 abcdef ⛔ 123456,abc123 🔼 🔁 every day when done 🏁 delete ➕ 2023-07-01 🛫 2023-07-02 ⏳ 2023-07-03 📅 2023-07-04 ❌ 2023-07-06 ✅ 2023-07-05 ^dcf64c
5+
-->
6+
7+
<div>
8+
<ul class="contains-task-list plugin-tasks-query-result tasks-layout-short-mode">
9+
<li
10+
class="task-list-item plugin-tasks-list-item"
11+
data-task-priority="medium"
12+
data-task-created="past-4d"
13+
data-task-start="past-3d"
14+
data-task-scheduled="past-2d"
15+
data-task-due="past-1d"
16+
data-task-cancelled="future-1d"
17+
data-task-done="today"
18+
data-task=""
19+
data-line="0"
20+
data-task-status-name="Todo"
21+
data-task-status-type="TODO">
22+
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
23+
<span class="tasks-list-text">
24+
<span class="task-description"><span>Do exercises #todo #health</span></span>
25+
<span class="task-id"><span>🆔</span></span>
26+
<span class="task-dependsOn"><span>⛔</span></span>
27+
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
28+
<span class="task-recurring"><span>🔁</span></span>
29+
<span class="task-onCompletion"><span>🏁</span></span>
30+
<span
31+
class="task-created"
32+
data-task-created="past-4d"
33+
title="Click to edit created date, Right-click for more options">
34+
<span>➕</span>
35+
</span>
36+
<span
37+
class="task-start"
38+
data-task-start="past-3d"
39+
title="Click to edit start date, Right-click for more options">
40+
<span>🛫</span>
41+
</span>
42+
<span
43+
class="task-scheduled"
44+
data-task-scheduled="past-2d"
45+
title="Click to edit scheduled date, Right-click for more options">
46+
<span>⏳</span>
47+
</span>
48+
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
49+
<span>📅</span>
50+
</span>
51+
<span
52+
class="task-cancelled"
53+
data-task-cancelled="future-1d"
54+
title="Click to edit cancelled date, Right-click for more options">
55+
<span>❌</span>
56+
</span>
57+
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
58+
<span>✅</span>
59+
</span>
60+
<span class="task-block-link"><span>^dcf64c</span></span>
61+
</span>
62+
<span class="task-extras">
63+
<span class="tasks-urgency">18.157</span>
64+
<span class="tasks-backlink">
65+
<a rel="noopener" target="_blank" class="internal-link internal-link-short-mode">🔗</a>
66+
</span>
67+
<a class="tasks-edit" title="Edit task" href="#"></a>
68+
<a
69+
class="tasks-postpone tasks-postpone-short-mode"
70+
title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
71+
</span>
72+
</li>
73+
</ul>
74+
<div class="task-count">1 task</div>
75+
</div>
76+
```
77+
<!-- endSnippet -->

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"build": "node esbuild.config.mjs production",
1212
"build:dev": "node esbuild.config.mjs development",
1313
"lint": "eslint ./src --fix && eslint ./tests --fix && tsc --noEmit --pretty && svelte-check",
14-
"lint:markdown": "markdownlint-cli2 --fix \"**/*.md\" \"#contributing/_meta\" \"#docs/_meta\" \"#docs-snippets\" \"#node_modules\" \"#tests\" \"#resources/sample_vaults/Tasks-Demo/_meta/templates\" \"#resources/sample_vaults/Tasks-Demo/Test Data\" \"#resources/sample_vaults/Tasks-Demo/Manual Testing/Smoke test Kanban Integration.md\" ",
14+
"lint:markdown": "markdownlint-cli2 --fix \"**/*.md\" \"#contributing/_meta\" \"#docs/_meta\" \"#docs/snippets-embedded-in-multiple-pages\" \"#docs-snippets\" \"#node_modules\" \"#tests\" \"#resources/sample_vaults/Tasks-Demo/_meta/templates\" \"#resources/sample_vaults/Tasks-Demo/Test Data\" \"#resources/sample_vaults/Tasks-Demo/Manual Testing/Smoke test Kanban Integration.md\" ",
1515
"test": "jest --ci",
1616
"test:dev": "jest --watch",
1717
"deploy:local": "pwsh -ExecutionPolicy Unrestricted -NoProfile -File ./scripts/Test-TasksInLocalObsidian.ps1",

0 commit comments

Comments
 (0)