Merge pull request #237 from dimityrmirchev/alerts

Improve blockquote alerts
gardener · Nov 27, 2024 · 2c78005 · 2c78005
2 parents 9194bdc + b2821b3
commit 2c78005
Show file tree

Hide file tree

Showing 4 changed files with 597 additions and 171 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ Before you can setup your local version of the website, you need to have:
 2. Enter `git submodule update --init --recursive`.
 3. Export the following environment variables:
 
-   `export GIT_OAUTH_TOKEN=<token>`
+   `export GITHUB_OAUTH_TOKEN=<token>`
 
 4. Run `npm install` in `hugo` and `hugo/themes/docsy` 
 

diff --git a/hugo/assets/sass/_base.scss b/hugo/assets/sass/_base.scss
@@ -434,3 +434,99 @@ h3 samp {
     }
   }
 }
+
+.td-content blockquote.alert{
+  color: var(--bs-primary-color);
+}
+
+blockquote {
+  &.alert {
+    --bs-alert-bg: none;
+  }
+
+  & p {
+    margin-bottom: 0;
+  }
+
+  &.alert-note {
+    border-left: 6px solid var(--bs-blue);
+    & div.alert-title {
+      & svg path {
+        fill: var(--bs-blue); 
+      } 
+      & p {
+        color: var(--bs-blue);
+      }
+    }
+  }
+
+  &.alert-tip {
+    border-left: 6px solid var(--bs-primary);
+
+    & div.alert-title {
+      & svg path {
+        fill: var(--bs-primary); 
+      }
+
+      & p {
+        color: var(--bs-primary);
+      }
+    }
+  }
+
+  &.alert-important {
+    border-left: 6px solid var(--bs-purple);
+
+    & div.alert-title {
+      & svg path {
+        fill: var(--bs-purple); 
+      }
+
+      & p {
+        color: var(--bs-purple);
+      }
+    }
+  }
+
+  &.alert-warning {
+    border-left: 6px solid var(--bs-warning);
+
+    & div.alert-title {
+      & svg path {
+        fill: var(--bs-warning); 
+      }
+
+      & p {
+        color: var(--bs-warning);
+      }
+    }
+  }
+
+  &.alert-caution {
+    border-left: 6px solid var(--bs-red);
+
+    & div.alert-title {
+      & svg path {
+        fill: var(--bs-red); 
+      } 
+      & p {
+        color: var(--bs-red);
+      }
+    }
+  }
+
+  & div.alert-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    & svg {
+      margin-right: 5px;
+    }
+
+    &  p {
+      margin-bottom: 0;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/hugo/layouts/_default/_markup/render-blockquote-alert.html b/hugo/layouts/_default/_markup/render-blockquote-alert.html
@@ -1,26 +1,26 @@
-
-{{ $emojis := dict
-  "caution" ":rotating_light:"
-  "important" ":exclamation:"
-  "note" ":information_source:"
-  "tip" ":bulb:"
-  "warning" ":warning:"
+{{ $icons := dict
+  "note" `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><title>information-outline</title><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>`
+  "tip" `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><title>lightbulb-on-outline</title><path d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z" /></svg>`
+  "important" `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><title>message-outline</title><path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M20 16H5.2L4 17.2V4H20V16Z" /></svg>`
+  "warning" `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><title>alert-outline</title><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>`
+  "caution" `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><title>alert-octagon-outline</title><path d="M8.27,3L3,8.27V15.73L8.27,21H15.73C17.5,19.24 21,15.73 21,15.73V8.27L15.73,3M9.1,5H14.9L19,9.1V14.9L14.9,19H9.1L5,14.9V9.1M11,15H13V17H11V15M11,7H13V13H11V7" /></svg>`
 }}
 
 {{ if eq .Type "alert" }}
   <blockquote class="alert alert-{{ .AlertType }}">
-    <p class="alert-heading">
-      {{ transform.Emojify (index $emojis .AlertType) }}
-      {{ with .AlertTitle }}
-        {{ . }}
-      {{ else }}
-        {{ or (i18n .AlertType) (title .AlertType) }}
-      {{ end }}
-    </p>
+    <div class="alert-title">
+      {{ transform.Emojify (index $icons .AlertType) }}
+      <p>
+        {{ with .AlertTitle }}
+        {{ else }}
+          {{ or (i18n .AlertType) (title .AlertType) }}
+        {{ end }}
+      </p>
+    </div>
     {{ .Text }}
   </blockquote>
 {{ else }}
   <blockquote>
     {{ .Text }}
   </blockquote>
-{{ end }}
+{{ end }}