Improved display of advanced settings

* Don't hide in details box on summary page, as the right-side links
won't work correctly

* Show advanced settings on topic pages (i.e. plugin settings) to
accurately document all levers available

* Add a red-box to the detail information if this is an advanced setting,
to make clear it should not normally be changed.

components/SettingsComponent.vue

@@ -2,17 +2,18 @@
 import { data } from '../lib/data/settings.data.js'
 
 /* Properties for this component:
- * 'advanced' (boolean): If set, only show advanced settings. Otherwise, only
- *                       regular settings are shown.
+ * 'filter' (string): One of three options, 'all' (DEFAULT), 'advanced', or
+ *                    'no_advanced.
  * 'level' (integer): The header level to display entries as. Default: '2'
  * 'plugin' (string): Filter entries by this plugin.
  * 'show_plugin' (boolean): If set, add plugin name to output.
  * 'tag' (string): Filter by tag. Tag matches either plugin OR tag field.
  */
 const props = defineProps(
-    ['advanced', 'level', 'plugin', 'show_plugin', 'tag']
+    ['filter', 'level', 'plugin', 'show_plugin', 'tag']
 )
 
+const filter = props.filter ?? 'all'
 const level = (props.level ? Number(props.level) : 2) + 1
 
 const d = Object.fromEntries(Object.entries(data).filter(([k, v]) =>
@@ -23,9 +24,10 @@ const d = Object.fromEntries(Object.entries(data).filter(([k, v]) =>
 	 (props.tag &&
 	  ((v.plugin && v.plugin == props.tag) ||
 	   (v.tags.includes(props.tag))))) &&
-	/* Always need to filter advanced entries. */
-	((props.advanced && v.advanced) ||
-	 (!props.advanced && !v.advanced))
+	/* Apply filter. */
+	((filter == 'all') ||
+	 ((filter == 'advanced') && v.advanced) ||
+	 ((filter == 'no_advanced') && !v.advanced))
 ).sort())
 </script>
 
@@ -42,6 +44,10 @@ const d = Object.fromEntries(Object.entries(data).filter(([k, v]) =>
 .dovecotSettings :deep(ul) {
   margin: 0;
 }
+.advancedWarn {
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+}
 </style>
 
 <template>
@@ -107,6 +113,11 @@ const d = Object.fromEntries(Object.entries(data).filter(([k, v]) =>
       </ul>
      </td>
     </tr>
+    <tr v-if="v.advanced">
+     <td class="advancedWarn" colspan="2">
+      Advanced Setting; this should not normally be changed.
+     </td>
+    </tr>
    </tbody>
   </table>
 

docs/core/summaries/settings.md

@@ -9,14 +9,12 @@ dovecotlinks:
 
 ## Settings
 
-<SettingsComponent :show_plugin="true" />
+<SettingsComponent filter="no_advanced" :show_plugin="true" />
 
 ## Advanced Settings
 
 ::: danger NOTE
 These settings should not normally be changed.
 :::
 
-::: details Click to Display
-<SettingsComponent :advanced="true" :show_plugin="true" />
-:::
+<SettingsComponent filter="advanced" :show_plugin="true" />