From a22d836f0519c33ff7a7a65b41a2731910b61a5a Mon Sep 17 00:00:00 2001
From: Michele Cereda <cereda.michele@gmail.com>
Date: Fri, 12 Apr 2024 20:12:47 +0200
Subject: [PATCH] refactor(snippets/info-blocks): move all block types under a
 single file

---
 knowledge base/html.placeholder |  1 +
 snippets/alert.md               | 17 --------
 snippets/info-blocks.md         | 69 +++++++++++++++++++++++++++++++++
 snippets/tip.md                 | 13 -------
 snippets/warning.md             | 13 -------
 5 files changed, 70 insertions(+), 43 deletions(-)
 create mode 100644 knowledge base/html.placeholder
 delete mode 100644 snippets/alert.md
 create mode 100644 snippets/info-blocks.md
 delete mode 100644 snippets/tip.md
 delete mode 100644 snippets/warning.md

diff --git a/knowledge base/html.placeholder b/knowledge base/html.placeholder
new file mode 100644
index 0000000..1c0a827
--- /dev/null
+++ b/knowledge base/html.placeholder	
@@ -0,0 +1 @@
+[color names chart]: https://htmlcolorcodes.com/color-names/
diff --git a/snippets/alert.md b/snippets/alert.md
deleted file mode 100644
index 04ee6f7..0000000
--- a/snippets/alert.md
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- markdownlint-disable-file MD041 -->
-
-<div class="alert" style="
-  background-color: rgba(255,0,0,0.0625);
-  border: solid tomato;  /* #FF6347 */
-  margin: 1em 0;
-  padding: 1em 1em 0;
-">
-<header style="
-  font-weight: bold;
-  margin-bottom: 0.5em;
-  text-align: center;
-">🛑 Alert 🛑</header>
-
-content
-
-</div>
diff --git a/snippets/info-blocks.md b/snippets/info-blocks.md
new file mode 100644
index 0000000..5401721
--- /dev/null
+++ b/snippets/info-blocks.md
@@ -0,0 +1,69 @@
+<!-- markdownlint-disable-file MD041 -->
+
+The idea here is to mimic Confluence's Info panel.
+
+<style>
+  .info-block {
+    margin: 1em 0;
+    padding: 1em 1em 0;
+  }
+  .info-block header {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+  .alert {
+    background-color: rgba(255,0,0,0.0625);    /* red #FF0000 rgb(255,0,0) */
+    border: solid tomato;                      /* tomato #FF6347 rgb(255,99,71) */
+  }
+  .info {
+    background-color: rgba(0,191,255,0.0625);  /* deepSkyBlue #00BFFF rgb(0,191,255) */
+    border: solid dodgerBlue;                  /* dodgerBlue #1E90FF rgb(30,144,255) */
+  }
+  .note {
+    background-color: rgba(128,0,128,0.0625);  /* purple #800080 rgb(128,0,128) */
+    border: solid mediumPurple;                /* mediumPurple #9370DB rgb(147,112,219) */
+  }
+  .tip {
+    background-color: rgba(0,255,0,0.0625);    /* green #00FF00 rgb(0,255,0) */
+    border: solid lightGreen;                  /* lightGreen #90EE90 rgb(144,238,144) */
+  }
+  .warning {
+    background-color: rgba(255,255,0,0.0625);  /* yellow #FFFF00 rgb(255,255,0) */
+    border: solid yellow;                      /* yellow #FFFF00 rgb(255,255,0) */
+  }
+</style>
+
+<div class="info-block tip">
+  <header>💡 Tip</header>
+
+content
+
+</div>
+
+<div class="info-block info">
+  <header>ⓘ Info</header>
+
+content
+
+</div>
+
+<div class="info-block note">
+  <header>🗒 Note</header>
+
+content
+
+</div>
+
+<div class="info-block warning">
+  <header>⚠ Warning</header>
+
+content
+
+</div>
+
+<div class="info-block alert">
+  <header>🛑 Alert</header>
+
+content
+
+</div>
diff --git a/snippets/tip.md b/snippets/tip.md
deleted file mode 100644
index c5a0cc4..0000000
--- a/snippets/tip.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- markdownlint-disable-file MD041 -->
-
-<div class="tip" style="
-  background-color: rgba(0,255,0,0.0625);
-  border: solid lightGreen;  /* #90EE90 */
-  margin: 1em 0;
-  padding: 1em 1em 0;
-">
-<header style="font-weight: bold; margin-bottom: 0.5em">Pro tip</header>
-
-content
-
-</div>
diff --git a/snippets/warning.md b/snippets/warning.md
deleted file mode 100644
index dd6b36c..0000000
--- a/snippets/warning.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- markdownlint-disable-file MD041 -->
-
-<div class="warning" style="
-  background-color: rgba(255,255,0,0.0625);
-  border: solid yellow;  /* #FFFF00 */
-  margin: 1em 0;
-  padding: 1em 1em 0;
-">
-<header style="font-weight: bold; margin-bottom: 0.5em">⚠ Warning ⚠️</header>
-
-content
-
-</div>