Match admonition colors to the original site and allow hiding their icon

app/app.config.ts

@@ -37,6 +37,40 @@ export default defineAppConfig({
           header: 'bg-[#121110] border-[#201e1b]',
         },
       },
+      // Exact colors measured on the old site's ::alert boxes (note=info,
+      // tip=success, warning=warning, caution=danger/error).
+      callout: {
+        compoundVariants: [
+          {
+            color: 'info',
+            class: {
+              base: 'border-[#002235] bg-[#00131D] text-[#64C7FF]',
+              icon: 'text-[#64C7FF]',
+            },
+          },
+          {
+            color: 'success',
+            class: {
+              base: 'border-[#002817] bg-[#00190F] text-[#3CEEA5]',
+              icon: 'text-[#3CEEA5]',
+            },
+          },
+          {
+            color: 'warning',
+            class: {
+              base: 'border-[#292100] bg-[#1B1500] text-[#FFDC4E]',
+              icon: 'text-[#FFDC4E]',
+            },
+          },
+          {
+            color: 'error',
+            class: {
+              base: 'border-[#340A01] bg-[#1C0301] text-[#FFA692]',
+              icon: 'text-[#FFA692]',
+            },
+          },
+        ],
+      },
     },
     header: {
       slots: {

app/components/prose/ProseCaution.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::caution{icon=""}` in the markdown to hide the default icon for
+// that one instance (useful when the body already starts with its own
+// emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.caution)
+</script>
+
+<template>
+  <Callout
+    color="error"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>

app/components/prose/ProseNote.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::note{icon=""}` in the markdown to hide the default icon for that
+// one instance (useful when the body already starts with its own emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.info)
+</script>
+
+<template>
+  <Callout
+    color="info"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>

app/components/prose/ProseTip.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::tip{icon=""}` in the markdown to hide the default icon for that
+// one instance (useful when the body already starts with its own emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.tip)
+</script>
+
+<template>
+  <Callout
+    color="success"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>

app/components/prose/ProseWarning.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::warning{icon=""}` in the markdown to hide the default icon for
+// that one instance (useful when the body already starts with its own
+// emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.warning)
+</script>
+
+<template>
+  <Callout
+    color="warning"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>

content/en/2.general/1.networking/1.nat.md

@@ -5,9 +5,8 @@ description: Learn how NAT, port forwarding, and DHCP work on a home router. Con
 
 
 :ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
-# Router and NAT
 
-::note
+::note{icon=""}
 🎯  __Goals:__
 
 - Understand how port forwarding works