Update documentation

README.md

@@ -1,7 +1,13 @@
 # Custom Callout Extension For Quarto <img src="https://github.com/user-attachments/assets/7edadf64-a304-436c-b54f-2f76def14c14" align ="right" alt="" width ="150"/>
 
 The `{quarto-custom-callout}` extension provides a YAML interface to configure a 
-Quarto Callout Block with custom values.
+Quarto Callout with custom values such as its title, icon, icon symbol, color,
+appearance, and collapsibility.
+
+> [!IMPORTANT]
+> 
+> This extension is designed for Quarto HTML documents. 
+> We hope to extend this to other formats in the future.
 
 ## Installing
 
@@ -28,7 +34,7 @@ Here's a quick overview of the available YAML options:
 |--------|-------------|---------|-----------------|---------|
 | `title` | Default title for the callout | Callout name | Any string | `title: "Important Note"` |
 | `icon` | Display an icon | `false` | `true`, `false` | `icon: true` |
-| `icon-symbol` | Custom symbol or text for the icon | None | Any string or Unicode character | `icon-symbol: "📝"` |
+| `icon-symbol` | Custom symbol or text for the icon | None | Any string, unicode, or [FontAwesome](https://fontawesome.com/search?o=r&m=free) class | `icon-symbol: "📝"` |
 | `color` | Color for the callout's left border and background | None | Any valid CSS color name or hex | `color: "#FFA500"` |
 | `appearance` | Callout appearance | `"default"` | `"default"`, `"simple"`, `"minimal"` | `appearance: "simple"` |
 | `collapse` | Make the callout collapsible | `false` | `true`, `false` | `collapse: true` |
@@ -45,6 +51,11 @@ custom-callout:
     title: "Testing Note"
     icon-symbol: "⚠️"
     color: "#FFA500"
+  thumbs-up:
+    title: "Great job!"
+    icon: true
+    icon-symbol: "fa-thumbs-up"
+    color: "#008000"
 filters:
 - custom-callout
 ```
@@ -60,11 +71,16 @@ Remember to complete this section.
 ::: test
 This information is crucial for understanding the concept.
 :::
+
+::: {.thumbs-up title="That was a hard task!"}
+You did a great job completing this task.
+:::
 ```
 
-The above example will render two custom callouts in your document: 
-one with a pink border and a "📝" icon and the other with an orange
-border and a "⚠️" icon. 
+The above example will render three custom callouts in your document: 
+one with a pink border and a "📝" icon, an orange
+border and a "⚠️" icon, and a green border with a thumbs-up icon from 
+[FontAwesome](https://fontawesome.com/search?o=r&m=free).
 
 
 ## Notes

_extensions/custom-callout/fa.lua

@@ -1888,9 +1888,6 @@ local fa_icons = {
 
 -- Function to get Unicode value for a FontAwesome icon name
 local function fa_unicode(icon_name)
-  quarto.log.output("icon_name: " .. icon_name)
-  quarto.log.output("fa_unicode: " .. fa_icons[icon_name])
-
   return fa_icons[icon_name] or nil
 end
 

docs/index.qmd

@@ -11,17 +11,22 @@ custom-callout:
     title: "Testing Note"
     icon-symbol: "⚠️"
     color: "#FFA500"
+  thumbs-up:
+    title: "Great job!"
+    icon: true
+    icon-symbol: "fa-thumbs-up"
+    color: "#008000"
 filters:
 - custom-callout
 ---
 
-The `custom-callout` extension enhances Quarto's built-in callout functionality by allowing you to
+The `{quarto-custom-callout}` extension enhances Quarto's built-in callout functionality by allowing you to
 create and use custom callouts in your Quarto documents. With this extension, you can define your 
 own callout types with custom colors, icons, and appearances.
 
 ## Installation
 
-To install the `custom-callout` extension, follow these steps:
+To install the `{quarto-custom-callout}` extension, follow these steps:
 
 1. Open your terminal.
 2. Navigate to your Quarto project directory.
@@ -36,18 +41,18 @@ If you're using version control, make sure to include this directory in your rep
 
 ## Usage
 
-The `custom-callout` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents.
+The `{quarto-custom-callout}` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents.
 Here's a quick overview of the available YAML options:
 
 ## Usage
 
-The `custom-callout` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents. Here's a quick overview of the available YAML options:
+The `{quarto-custom-callout}` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents. Here's a quick overview of the available YAML options:
 
 | Option | Description | Default | Possible Values | Example |
 |--------|-------------|---------|-----------------|---------|
 | `title` | Default title for the callout | Callout name | Any string | `title: "Important Note"` |
 | `icon` | Display an icon | `false` | `true`, `false` | `icon: true` |
-| `icon-symbol` | Custom symbol or text for the icon | None | Any string or Unicode character | `icon-symbol: "📝"` |
+| `icon-symbol` | Custom symbol or text for the icon | None | Any string, unicode, or [FontAwesome](https://fontawesome.com/search?o=r&m=free) class | `icon-symbol: "📝"` |
 | `color` | Color for the callout's left border and background | None | Any valid CSS color name or hex | `color: "#FFA500"` |
 | `appearance` | Callout appearance | `"default"` | `"default"`, `"simple"`, `"minimal"` | `appearance: "simple"` |
 | `collapse` | Make the callout collapsible | `false` | `true`, `false` | `collapse: true` |
@@ -63,6 +68,11 @@ custom-callout:
     title: "Testing Note"
     icon-symbol: "⚠️"
     color: "#FFA500"
+  thumbs-up:
+    title: "Great job!"
+    icon: true
+    icon-symbol: "fa-thumbs-up"
+    color: "#008000"
 filters:
 - custom-callout
 ```
@@ -79,7 +89,6 @@ Remember to complete this section.
 This information is crucial for understanding the concept.
 :::
 
-
 ::: {.todo title="Collapsed Custom Todo (Click to Expand)" collapse="true"}
 This is a custom 'todo' callout that is collapsible and has a custom title.
 :::
@@ -93,6 +102,10 @@ Here are some examples of custom callouts in action:
 This is a custom 'todo' callout with a pink border and a pencil icon.
 :::
 
+::: test
+This information is crucial for understanding the concept.
+:::
+
 ::: {.todo title="Collapsed Custom Todo (Click to Expand)" collapse="true"}
 This is a custom 'todo' callout that is collapsible and has a custom title.
 :::
@@ -109,4 +122,8 @@ This is a custom 'todo' callout that uses a **minimal** appearance with a custom
 This is a custom 'test' callout with an orange border and a warning icon.
 :::
 
-For more detailed information on how to use and customize the `custom-callout` extension, please refer to our [FAQ](qcustom-callout-faq.qmd).
+::: {.thumbs-up}
+Great job on completing this task!
+:::
+
+For more detailed information on how to use and customize the `{quarto-custom-callout}` extension, please refer to our [Custom Callout Examples](qcustom-callout-example.qmd) or [FAQ](qcustom-callout-faq.qmd).

docs/qcustom-callout-example.qmd

@@ -1,8 +1,6 @@
 ---
 title: "Custom Callout Examples"
-format:
-  html:
-    css: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
+format: html
 
 custom-callout:    
   todo:
@@ -17,6 +15,11 @@ custom-callout:
     title: "Test feature"
     icon: true
     color: "#801410"
+  thumbs-up:
+    title: "Great job!"
+    icon: true
+    icon-symbol: "fa-thumbs-up"
+    color: "#008000"
 filters:
   - custom-callout
 ---
@@ -44,6 +47,11 @@ custom-callout:
     title: "Test feature"
     icon: true
     color: "#801410"
+  thumbs-up:
+    title: "Great job!"
+    icon: true
+    icon-symbol: "fa-thumbs-up"
+    color: "#008000"
 filters:
   - custom-callout
 ---
@@ -71,6 +79,10 @@ Please address this issue ...
 Let's do a feature test!
 :::
 
+::: thumbs-up
+Hey, a [FontAwesome](https://fontawesome.com/) icon!
+:::
+
 ### Source
 ````md
 ::: todo
@@ -84,6 +96,10 @@ Please address this issue ...
 ::: test
 Let's do a feature test!
 :::
+
+::: thumbs-up
+Hey, a [FontAwesome](https://fontawesome.com/) icon!
+:::
 ````
 :::
 
@@ -206,6 +222,14 @@ This section provides examples of the built-in [Quarto Callout](https://quarto.o
 Hello!
 :::
 
+::: {.callout-note title="Note with Custom Title"}
+Demo of `title="Note with Custom Title"`
+:::
+
+::: {.callout-note icon="false" title="Note with Title and No Icon"}
+Demo of `icon="false"`
+:::
+
 ::: {.callout-note collapse="true" title="Collapsed Note with Title"}
 Demo of `collapse="true"`
 :::
@@ -233,6 +257,14 @@ Demo of `appearance="minimal"` and `collapse="true"`.
 Hello!
 :::
 
+::: {.callout-note title="Note with Custom Title"}
+Demo of `title="Note with Custom Title"`
+:::
+
+::: {.callout-note icon="false" title="Note with Title and No Icon"}
+Demo of `icon="false"`
+:::
+
 ::: {.callout-note collapse="true" title="Collapsed Note with Title"}
 Demo of `collapse="true"`
 :::

docs/qcustom-callout-faq.qmd

@@ -91,7 +91,7 @@ Please fix this issue.
 
 ## Can I override a property for a specific callout instance?
 
-Yes, you can override various properties title for a specific callout instance by adding them as attributes to the callout block. 
+Yes, you can override various properties for a specific callout instance by adding them as attributes to the callout block. 
 
 For example, to set a custom title for a todo item, you can use the `title` attribute:
 
@@ -105,6 +105,8 @@ This needs to be done ASAP.
 This needs to be done ASAP.
 :::
 
+You may not override the `icon-symbol` property for a specific callout instance.
+
 ## Do custom callouts support collapsible content?
 
 Yes, custom callouts support collapsible content. You can set the `collapse` option to `true` in your callout definition to make it collapsible.
@@ -113,6 +115,30 @@ Yes, custom callouts support collapsible content. You can set the `collapse` opt
 
 Yes, you can use custom callouts alongside Quarto's built-in callouts. The custom-callout extension doesn't interfere with the standard callout syntax.
 
+## How do I add FontAwesome icons to my callouts?
+
+To use FontAwesome icons in your callouts, set the `icon-symbol` property to the desired FontAwesome class. For example:
+
+```yaml
+custom-callout:
+  user:
+    title: "User Feedback"
+    icon: true
+    icon-symbol: "fa-user"
+```
+
+Then, use the custom callout in your document:
+
+```markdown
+::: user
+Please provide your feedback.
+:::
+```
+
+This will display the [user](https://fontawesome.com/icons/user?f=classic&s=regular) icon in the callout.
+
+You can find a list of available FontAwesome icons [here](https://fontawesome.com/search?o=r&m=free).
+
 ## How are custom callout styles applied?
 
 The extension automatically generates CSS for your custom callouts based on the defined colors and icons.