From 0de4e95a874551a8b83a058888c6bf3edea9f559 Mon Sep 17 00:00:00 2001
From: Kyle Donnelly <35639037+kadonnelly13@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:19:48 -0800
Subject: [PATCH] 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                           | 39 +++++++++++++++++++++++++++++
 assets/css/dark.css                 | 30 +++++++++++++++++++++-
 assets/css/main.css                 | 28 +++++++++++++++++++++
 exampleSite/content/posts/post-6.md | 21 ++++++++++++++--
 layouts/shortcodes/callout.html     | 28 +++++++++++++++++----
 5 files changed, 138 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 81b3ce8..b195319 100644
--- a/README.md
+++ b/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
 
diff --git a/assets/css/dark.css b/assets/css/dark.css
index e5bdc85..5b3f8fe 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -161,4 +161,32 @@ a:hover {
   content: 'Markdown';
   background: royalblue;
   color: whitesmoke ;
-}
\ No newline at end of file
+}
+
+.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;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index a936b04..2fa1724 100644
--- a/assets/css/main.css
+++ b/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;
diff --git a/exampleSite/content/posts/post-6.md b/exampleSite/content/posts/post-6.md
index da32634..fd95a62 100644
--- a/exampleSite/content/posts/post-6.md
+++ b/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" >}}
\ No newline at end of file
+### 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." >}}
diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html
index 5557aad..75d328d 100644
--- a/layouts/shortcodes/callout.html
+++ b/layouts/shortcodes/callout.html
@@ -1,6 +1,24 @@
-
-<div class="callout" style="">
-	<div class="callout-inner">
+{{ $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" }}
-  </div>
-</div>
\ No newline at end of file
+    {{ end }}
+    </div>
+</div>