Expand callouts functionality (#130)

* Expand callouts functionality

Expand the callouts functionality to include a base set of types and allow for more customization.

* Grammar

* Include documentation for callouts in `README.md`

README.md

@@ -65,6 +65,45 @@ Note: CSS files should be placed under the `assets` directory e.g. `assets/css/f
 	customcss = ["css/first.css", "css/second.css"]
 ```
 
+### Callouts
+
+There are five different types of callout, including this themes original callout and a custom one as well. These callouts are compatible with both light and dark theme modes. 
+
+![Screenshot from 2025-01-04 19-22-43](https://github.com/user-attachments/assets/bcaf7c3c-2339-449f-8bcb-8a2906d7ddcf)
+
+
+#### Original
+
+This steup is to ensure backwards compatibility for previous callouts.
+
+```markdown                                                                                                                                                                                                    
+{{< callout emoji="⚡️" text="Original callout." >}}
+```
+
+#### Alert
+```markdown
+{{< callout type="alert" text="This is an alert callout." >}}
+```
+
+#### Custom
+
+This include the ability to set your own callout emoji, title, and css style element.
+
+```markdown
+{{< callout type="custom" emoji="⚡️" title="Custom callout" text="This is custom text for a custom callout." style="background-color: transparent; border: 3px solid #d340e0;" >}}
+```
+
+#### Tip
+
+```markdown
+{{< callout type="tip" text="This is a tip callout." >}}
+```
+
+#### Warning
+
+```markdown
+{{< callout type="warning" text="This is a warning callout." >}}
+```
 
 ## Config of the Demo Site
 

assets/css/dark.css

@@ -162,3 +162,31 @@ a:hover {
   background: royalblue;
   color: whitesmoke ;
 }
+
+.callout-alert {
+  color: #ffffff;
+  background-color: transparent;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #ff6347;
+}
+
+.callout-custom {
+  color: #ffffff;
+}
+
+.callout-tip {
+  color: #ffffff;
+  background-color: transparent;
+  border-width: 3px;
+  border-style: solid;
+  border-color: dodgerblue;
+}
+
+.callout-warning {
+  color: #ffffff;
+  background-color: transparent;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #ffd700;
+}

assets/css/main.css

@@ -244,6 +244,34 @@ article .title {
   color: var(--callouctcolor);
 }
 
+.callout-alert {
+  color: #000000;
+  background-color: transparent;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #ff6347;
+}
+
+.callout-custom {
+  color: #000000;
+}
+
+.callout-tip {
+  color: #000000;
+  background-color: transparent;
+  border-width: 3px;
+  border-style: solid;
+  border-color: dodgerblue;
+}
+
+.callout-warning {
+  color: #000000;
+  background-color: transparent;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #ffd700;
+}
+
 .site-description {
 display: flex;
 justify-content: space-between;

exampleSite/content/posts/post-6.md

@@ -10,7 +10,6 @@ description: Here is a demo of all shortcodes available in Hugo.
 
 {{< figure src="https://images.unsplash.com/photo-1560032779-0a8809186efd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" title="Dave Herring" >}}
 
-
 ## Github Gist
 
 {{< gist spf13 7896402 >}}
@@ -33,4 +32,22 @@ description: Here is a demo of all shortcodes available in Hugo.
 
 ## Callouts
 
-{{< callout emoji="⚡️" text="I guess this works" >}}
+### Original
+
+{{< callout emoji="⚡️" text="Original callout." >}}
+
+### Alert
+
+{{< callout type="alert" text="This is an alert callout." >}}
+
+### Custom
+
+{{< callout type="custom" emoji="⚡️" title="Custom callout" text="This is custom text for a custom callout." style="background-color: transparent; border: 3px solid #d340e0;" >}}
+
+### Tip
+
+{{< callout type="tip" text="This is a tip callout." >}}
+
+### Warning
+
+{{< callout type="warning" text="This is a warning callout." >}}

layouts/shortcodes/callout.html

@@ -1,6 +1,24 @@
-
-<div class="callout" style="">
+{{ $type := .Get "type" }}
+<div class='callout callout-{{ $type }}' style='{{ if eq $type "custom" }}{{ .Get "style" | safeCSS }}{{ end }}'>
   <div class="callout-inner">
+    {{ if eq $type "alert" }}
+    🚨 <u>Alert</u>
+    <br />
+    {{ .Get "text" }}
+    {{ else if eq $type "custom" }}
+    {{ .Get "emoji" }} <u>{{ .Get "title" }}</u>
+    <br />
+    {{ .Get "text" }}
+    {{ else if eq $type "tip" }}
+    🔎 <u>Tip</u>
+    <br />
+    {{ .Get "text" }}
+    {{ else if eq $type "warning" }}
+    ⚠️  <u>Warning</u>
+    <br />
+    {{ .Get "text" }}
+    {{ else}}
     💡 {{ .Get "text" }}
+    {{ end }}
     </div>
 </div>