feat: add custom classes to stickynote and admonition

- adds props to stickynote and admonition compoents to allow styling of the font size and other elements of the title and content
- `custom` for the content `customTitle` for the title
- add docs and examples to the examples.md
- closes #13

Author: gureckis

components/Admonition.vue

@@ -18,6 +18,16 @@ const props = defineProps({
     type: String,
     default: '100%',
   },
+  custom: {
+    // add a custom class if you want
+    type: String,
+    default: '',
+  },
+  customTitle: {
+    // add a custom class if you want
+    type: String,
+    default: '',
+  },
 })
 
 const colorscheme = computed(() => {
@@ -27,10 +37,10 @@ const colorscheme = computed(() => {
 
 <template>
   <div class="markdown-alert markdown-alert-custom" :class="colorscheme">
-    <p class="markdown-alert-title-custom">
-      <span class="font-size-1.3rem"><Icon :icon="props.icon" /></span>&nbsp;&nbsp;{{ props.title }}
+    <p class="markdown-alert-title-custom" :class="props.customTitle">
+      <span :class="`[font-size-1.3rem, customTitle]`"><Icon :icon="props.icon" /></span>&nbsp;&nbsp;{{ props.title }}
     </p>
-    <p><slot></slot></p>
+    <p :class="props.custom"><slot></slot></p>
   </div>
 </template>
 

components/StickyNote.vue

@@ -18,6 +18,16 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  custom: {
+    // add a custom class if you want
+    type: String,
+    default: '',
+  },
+  customTitle: {
+    // add a custom class if you want
+    type: String,
+    default: 'block text-xs font-mono tracking-normal font-bold',
+  },
 })
 
 const colorscheme = computed(() => {
@@ -40,9 +50,9 @@ const stickyStyles = computed(() => ({
 <template>
   <div :class="stickyClasses" :style="stickyStyles">
     <template v-if="props.title !== ''"
-      ><strong>{{ props.title }}</strong></template
+      ><span :class="props.customTitle">{{ props.title }}</span></template
     >
-    <slot></slot>
+    <div :class="props.custom"><slot></slot></div>
   </div>
 </template>
 
@@ -61,11 +71,4 @@ const stickyStyles = computed(() => ({
   color: var(--text-color);
   border: 0.4px solid var(--border-color);
 }
-.sticky-note strong {
-  display: block;
-  font-size: 0.8rem;
-  font-family: monospace;
-  letter-spacing: 0em;
-  word-spacing: -0.3em;
-}
 </style>

docs/components/admonitions.md

@@ -16,6 +16,8 @@ The `Admonition` component is used to create a colored box with an icon and a ti
 - `color` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `amber-light`.
 - `width` (optional) the width of the admonition. Default is `100%`.
 - `icon` (optional) the icon to display. Default is `mdi-information-variant-circle-outline`.
+- `custom` (optional) a custom CSS class to apply to the admonition content. Default is empty.
+- `customTitle` (optional) a custom CSS class to apply to the admonition title. Default is empty.
 
 Example:
 
@@ -30,6 +32,19 @@ Renders as:
 This is my admonition content.
 </Admonition>
 
+You can also add custom CSS classes to style the admonition content and title:
+
+```vue
+<Admonition title="Custom Styled" color="purple-light" custom="text-lg font-bold" customTitle="text-red-500">
+This content has custom styling applied.
+</Admonition>
+```
+
+Renders as:
+<Admonition title="Custom Styled" color='purple-light' custom="text-lg font-bold" customTitle="text-red-500">
+This content has custom styling applied.
+</Admonition>
+
 If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the width to something fixed (e.g., `300px`):
 
 ```md

docs/components/stickynote.md

@@ -14,6 +14,8 @@ The `StickyNote` component is used to create a colored box with an title and con
 - `color` (optional) can be any of the [color scheme](/colors) options. If not provided, the default color is `amber-light`.
 - `width` (optional) the width of the admonition. Default is `180px`.
 - `textAlign` (optional) the text alignment of the content. Default is `left`.
+- `custom` (optional) a custom CSS class to apply to the sticky note content. Default is empty.
+- `customTitle` (optional) a custom CSS class to apply to the sticky note title. Default is `block text-xs font-mono tracking-normal font-bold`.
 
 Example:
 
@@ -30,6 +32,25 @@ Renders as:
 Hello, I'm a **sticky note**.
 </StickyNote>
 
+You can also add custom CSS classes to style the sticky note content and title:
+
+```vue
+<StickyNote
+  color="teal-light"
+  width="200px"
+  title="Custom Styled"
+  custom="text-lg font-bold text-center"
+  customTitle="text-red-500 text-lg"
+>
+  This content has custom styling applied.
+</StickyNote>
+```
+
+Renders as:
+<StickyNote color="teal-light" width="200px" title="Custom Styled" custom="text-lg font-bold text-center" customTitle="text-red-500 text-lg">
+This content has custom styling applied.
+</StickyNote>
+
 If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the width to something fixed (e.g., `300px`):
 
 ```md

example.md

@@ -1160,7 +1160,7 @@ This is a tip
 This is a tip
 </AdmonitionType>
 
-<AdmonitionType type='caution' >
+<AdmonitionType type='caution' custom="text-lg" customTitle="font-size-6">
 This is warning text
 </AdmonitionType>
 
@@ -1204,16 +1204,29 @@ title: Sticky Notes
 Hello, I'm a **sticky note**.
 </StickyNote>
 
-<StickyNote color="sky-light" textAlign="left" width="180px" title="This is my title" v-drag="[375,306,180,180,-15]">
+<StickyNote color="sky-light" textAlign="left" width="180px" title="This is my title" v-drag="[304,295,180,180,-15]">
 
 Hello, I'm also a **sticky note** but am blue sky title.
 </StickyNote>
 
-<StickyNote color="pink-light" textAlign="left" width="180px"  v-drag="[667,299,185,171,8]">
+<StickyNote color="pink-light" textAlign="left" width="180px"  v-drag="[549,292,185,171,8]">
 
 Hello, I'm also a **sticky note** but I lack a title.
 </StickyNote>
 
+
+<StickyNote color="pink-light" textAlign="left" width="180px"  v-drag="[549,292,185,171,8]">
+
+Hello, I'm also a **sticky note** but I lack a title.
+</StickyNote>
+
+<StickyNote color="emerald-light" textAlign="left" width="180px" title="This is my
+title" customTitle="font-size-6" custom="font-size-2"
+v-drag="[749,292,185,171,-8]">
+
+Hello, I'm also a **sticky note** but I'm customized with a title and a custom class.
+</StickyNote>
+
 # Sticky Notes
 
 - Sticky notes are moveable elements you can use for notes.