Merge pull request #3199 from obsidian-tasks-group/docs-collapse-html…

…-samples docs: Collapse some long HTML samples in callouts
obsidian-tasks-group · Nov 22, 2024 · 4750a94 · 4750a94
2 parents 848d8bb + 2e18fc8
commit 4750a94
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 167 deletions.
diff --git a/docs/Advanced/Styling.md b/docs/Advanced/Styling.md
@@ -71,186 +71,31 @@ The reason for this additional internal span is that it allows CSS styles that c
 
 ### Sample HTML: Full mode
 
-To help visualise the structure above, here is the HTML for a sample Tasks search shown in [[Layout#Full Mode|full mode]].
+To help visualise the structure above, below is the HTML for a sample Tasks search shown in [[Layout#Full Mode|full mode]].
 
 > [!Note]
 > In Reading Mode:
 >
 > - all the classes and data inside the `li` are available,
 > - and none of the "Task extras" content is available.
 
-<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html -->
-```html
-<!--
-  - [ ] 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
--->
-
-<div>
-  <ul class="contains-task-list plugin-tasks-query-result">
-    <li
-      class="task-list-item plugin-tasks-list-item"
-      data-task-priority="medium"
-      data-task-created="past-4d"
-      data-task-start="past-3d"
-      data-task-scheduled="past-2d"
-      data-task-due="past-1d"
-      data-task-cancelled="future-1d"
-      data-task-done="today"
-      data-task=""
-      data-line="0"
-      data-task-status-name="Todo"
-      data-task-status-type="TODO">
-      <input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
-      <span class="tasks-list-text">
-        <span class="task-description"><span>Do exercises #todo #health</span></span>
-        <span class="task-id"><span>🆔 abcdef</span></span>
-        <span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
-        <span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
-        <span class="task-recurring"><span>🔁 every day when done</span></span>
-        <span class="task-onCompletion"><span>🏁 delete</span></span>
-        <span
-          class="task-created"
-          data-task-created="past-4d"
-          title="Click to edit created date, Right-click for more options">
-          <span>➕ 2023-07-01</span>
-        </span>
-        <span
-          class="task-start"
-          data-task-start="past-3d"
-          title="Click to edit start date, Right-click for more options">
-          <span>🛫 2023-07-02</span>
-        </span>
-        <span
-          class="task-scheduled"
-          data-task-scheduled="past-2d"
-          title="Click to edit scheduled date, Right-click for more options">
-          <span>⏳ 2023-07-03</span>
-        </span>
-        <span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
-          <span>📅 2023-07-04</span>
-        </span>
-        <span
-          class="task-cancelled"
-          data-task-cancelled="future-1d"
-          title="Click to edit cancelled date, Right-click for more options">
-          <span>❌ 2023-07-06</span>
-        </span>
-        <span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
-          <span>✅ 2023-07-05</span>
-        </span>
-        <span class="task-block-link"><span>^dcf64c</span></span>
-      </span>
-      <span class="task-extras">
-        <span class="tasks-urgency">18.157</span>
-        <span class="tasks-backlink">
-          (
-          <a rel="noopener" target="_blank" class="internal-link">fileName &gt; My Header</a>
-          )
-        </span>
-        <a class="tasks-edit" title="Edit task" href="#"></a>
-        <a class="tasks-postpone" title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
-      </span>
-    </li>
-  </ul>
-  <div class="task-count">1 task</div>
-</div>
-```
-<!-- endSnippet -->
+> [!example]- Sample HTML: Full mode
+> ![[Sample HTML - Full mode]]
 
 ### Sample HTML: Short mode
 
-Here is the same Tasks search in [[Layout#Short Mode|short mode]].
-
-The differences from full mode are:
-
-- the `ul` has an extra class `tasks-layout-short-mode`,
-- any text values after Tasks emoji are omitted,
-- the backlink is shorter and has an extra class `internal-link-short-mode`,
-- the postpone button has an extra class `tasks-postpone-short-mode`.
+Below is the same Tasks search in [[Layout#Short Mode|short mode]].
 
 > [!Note]
-> In Reading Mode:
+> The differences from Full mode are:
 >
-> - all the classes and data inside the `li` are available,
-> - and none of the "Task extras" content is available.
+> - the `ul` has an extra class `tasks-layout-short-mode`,
+> - any text values after Tasks emoji are omitted,
+> - the backlink is shorter and has an extra class `internal-link-short-mode`,
+> - the postpone button has an extra class `tasks-postpone-short-mode`.
 
-<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task_-_short_mode.approved.html -->
-```html
-<!--
-  - [ ] 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
--->
-
-<div>
-  <ul class="contains-task-list plugin-tasks-query-result tasks-layout-short-mode">
-    <li
-      class="task-list-item plugin-tasks-list-item"
-      data-task-priority="medium"
-      data-task-created="past-4d"
-      data-task-start="past-3d"
-      data-task-scheduled="past-2d"
-      data-task-due="past-1d"
-      data-task-cancelled="future-1d"
-      data-task-done="today"
-      data-task=""
-      data-line="0"
-      data-task-status-name="Todo"
-      data-task-status-type="TODO">
-      <input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
-      <span class="tasks-list-text">
-        <span class="task-description"><span>Do exercises #todo #health</span></span>
-        <span class="task-id"><span>🆔</span></span>
-        <span class="task-dependsOn"><span>⛔</span></span>
-        <span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
-        <span class="task-recurring"><span>🔁</span></span>
-        <span class="task-onCompletion"><span>🏁</span></span>
-        <span
-          class="task-created"
-          data-task-created="past-4d"
-          title="Click to edit created date, Right-click for more options">
-          <span>➕</span>
-        </span>
-        <span
-          class="task-start"
-          data-task-start="past-3d"
-          title="Click to edit start date, Right-click for more options">
-          <span>🛫</span>
-        </span>
-        <span
-          class="task-scheduled"
-          data-task-scheduled="past-2d"
-          title="Click to edit scheduled date, Right-click for more options">
-          <span>⏳</span>
-        </span>
-        <span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
-          <span>📅</span>
-        </span>
-        <span
-          class="task-cancelled"
-          data-task-cancelled="future-1d"
-          title="Click to edit cancelled date, Right-click for more options">
-          <span>❌</span>
-        </span>
-        <span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
-          <span>✅</span>
-        </span>
-        <span class="task-block-link"><span>^dcf64c</span></span>
-      </span>
-      <span class="task-extras">
-        <span class="tasks-urgency">18.157</span>
-        <span class="tasks-backlink">
-          <a rel="noopener" target="_blank" class="internal-link internal-link-short-mode">🔗</a>
-        </span>
-        <a class="tasks-edit" title="Edit task" href="#"></a>
-        <a
-          class="tasks-postpone tasks-postpone-short-mode"
-          title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
-      </span>
-    </li>
-  </ul>
-  <div class="task-count">1 task</div>
-</div>
-```
-<!-- endSnippet -->
+> [!example]- Sample HTML: Short mode
+> ![[Sample HTML - Short mode]]
 
 ## Generic Classes and Data Attributes
 

diff --git a/docs/snippets-embedded-in-multiple-pages/Sample HTML - Full mode.md b/docs/snippets-embedded-in-multiple-pages/Sample HTML - Full mode.md
@@ -0,0 +1,77 @@
+<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html -->
+```html
+<!--
+  - [ ] 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
+-->
+
+<div>
+  <ul class="contains-task-list plugin-tasks-query-result">
+    <li
+      class="task-list-item plugin-tasks-list-item"
+      data-task-priority="medium"
+      data-task-created="past-4d"
+      data-task-start="past-3d"
+      data-task-scheduled="past-2d"
+      data-task-due="past-1d"
+      data-task-cancelled="future-1d"
+      data-task-done="today"
+      data-task=""
+      data-line="0"
+      data-task-status-name="Todo"
+      data-task-status-type="TODO">
+      <input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
+      <span class="tasks-list-text">
+        <span class="task-description"><span>Do exercises #todo #health</span></span>
+        <span class="task-id"><span>🆔 abcdef</span></span>
+        <span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
+        <span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
+        <span class="task-recurring"><span>🔁 every day when done</span></span>
+        <span class="task-onCompletion"><span>🏁 delete</span></span>
+        <span
+          class="task-created"
+          data-task-created="past-4d"
+          title="Click to edit created date, Right-click for more options">
+          <span>➕ 2023-07-01</span>
+        </span>
+        <span
+          class="task-start"
+          data-task-start="past-3d"
+          title="Click to edit start date, Right-click for more options">
+          <span>🛫 2023-07-02</span>
+        </span>
+        <span
+          class="task-scheduled"
+          data-task-scheduled="past-2d"
+          title="Click to edit scheduled date, Right-click for more options">
+          <span>⏳ 2023-07-03</span>
+        </span>
+        <span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
+          <span>📅 2023-07-04</span>
+        </span>
+        <span
+          class="task-cancelled"
+          data-task-cancelled="future-1d"
+          title="Click to edit cancelled date, Right-click for more options">
+          <span>❌ 2023-07-06</span>
+        </span>
+        <span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
+          <span>✅ 2023-07-05</span>
+        </span>
+        <span class="task-block-link"><span>^dcf64c</span></span>
+      </span>
+      <span class="task-extras">
+        <span class="tasks-urgency">18.157</span>
+        <span class="tasks-backlink">
+          (
+          <a rel="noopener" target="_blank" class="internal-link">fileName &gt; My Header</a>
+          )
+        </span>
+        <a class="tasks-edit" title="Edit task" href="#"></a>
+        <a class="tasks-postpone" title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
+      </span>
+    </li>
+  </ul>
+  <div class="task-count">1 task</div>
+</div>
+```
+<!-- endSnippet -->
diff --git a/docs/snippets-embedded-in-multiple-pages/Sample HTML - Short mode.md b/docs/snippets-embedded-in-multiple-pages/Sample HTML - Short mode.md
@@ -0,0 +1,77 @@
+<!-- snippet: QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task_-_short_mode.approved.html -->
+```html
+<!--
+  - [ ] 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
+-->
+
+<div>
+  <ul class="contains-task-list plugin-tasks-query-result tasks-layout-short-mode">
+    <li
+      class="task-list-item plugin-tasks-list-item"
+      data-task-priority="medium"
+      data-task-created="past-4d"
+      data-task-start="past-3d"
+      data-task-scheduled="past-2d"
+      data-task-due="past-1d"
+      data-task-cancelled="future-1d"
+      data-task-done="today"
+      data-task=""
+      data-line="0"
+      data-task-status-name="Todo"
+      data-task-status-type="TODO">
+      <input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
+      <span class="tasks-list-text">
+        <span class="task-description"><span>Do exercises #todo #health</span></span>
+        <span class="task-id"><span>🆔</span></span>
+        <span class="task-dependsOn"><span>⛔</span></span>
+        <span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
+        <span class="task-recurring"><span>🔁</span></span>
+        <span class="task-onCompletion"><span>🏁</span></span>
+        <span
+          class="task-created"
+          data-task-created="past-4d"
+          title="Click to edit created date, Right-click for more options">
+          <span>➕</span>
+        </span>
+        <span
+          class="task-start"
+          data-task-start="past-3d"
+          title="Click to edit start date, Right-click for more options">
+          <span>🛫</span>
+        </span>
+        <span
+          class="task-scheduled"
+          data-task-scheduled="past-2d"
+          title="Click to edit scheduled date, Right-click for more options">
+          <span>⏳</span>
+        </span>
+        <span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
+          <span>📅</span>
+        </span>
+        <span
+          class="task-cancelled"
+          data-task-cancelled="future-1d"
+          title="Click to edit cancelled date, Right-click for more options">
+          <span>❌</span>
+        </span>
+        <span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
+          <span>✅</span>
+        </span>
+        <span class="task-block-link"><span>^dcf64c</span></span>
+      </span>
+      <span class="task-extras">
+        <span class="tasks-urgency">18.157</span>
+        <span class="tasks-backlink">
+          <a rel="noopener" target="_blank" class="internal-link internal-link-short-mode">🔗</a>
+        </span>
+        <a class="tasks-edit" title="Edit task" href="#"></a>
+        <a
+          class="tasks-postpone tasks-postpone-short-mode"
+          title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
+      </span>
+    </li>
+  </ul>
+  <div class="task-count">1 task</div>
+</div>
+```
+<!-- endSnippet -->
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "build": "node esbuild.config.mjs production",
     "build:dev": "node esbuild.config.mjs development",
     "lint": "eslint ./src --fix && eslint ./tests --fix && tsc --noEmit --pretty && svelte-check",
-    "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\" ",
+    "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\" ",
     "test": "jest --ci",
     "test:dev": "jest --watch",
     "deploy:local": "pwsh -ExecutionPolicy Unrestricted -NoProfile -File ./scripts/Test-TasksInLocalObsidian.ps1",