feat: add custom alerts

Author: kungfux

README.md

@@ -1,12 +1,8 @@
 # Blog
 Check it out at [kungfux.github.io](https://kungfux.github.io)
 
-# Rules
-- Image format is `.webp`
-- Cover image size `1200 x 630` with aspect ratio of `1.91 : 1`
-
-# Development
-## Commands
+## Development
+### Commands
 - Restore
 ```bash
 $ bundle
@@ -32,7 +28,7 @@ $ bundle exec jekyll s
 $ JEKYLL_ENV=production bundle exec jekyll s
 ```
 
-## Upgrade
+### Upgrade
 1. Update version number
 ```diff
 - gem "jekyll-theme-chirpy", "= 6.5.4"
@@ -41,25 +37,30 @@ $ JEKYLL_ENV=production bundle exec jekyll s
 
 2. Run `bundle`
 
-## Copy assets
+### Assets
+- Image format is `.webp`
+- Cover image size `1200 x 630` with aspect ratio of `1.91 : 1`
 
+- Copy assets to container
 ```bash
 $ docker cp cover.webp kungfux.github.io:/workspaces/kungfux.github.io/assets/media/2024
 ```
 
-## Customizations
+### Customizations
 
 - Wrap text in code blocks
   `assets/css/jekyll-theme-chirpy.scss`
 - Adjust styles for schemas and code blocks
   `assets/css/jekyll-theme-chirpy.scss`
 - Single line post titles
   `assets/css/jekyll-theme-chirpy.scss`
-- Update site title tag from `<h1>` to `<p>`
-  `_includes/sidebar.html`
+- GitHub alerts
+  `assets/css/github-alerts.css`
 - Add progress bar to back to top
   `assets/js/progress.js`, `assets/css/jekyll-theme-chirpy.scss`, `_includes/metadata-hook.html`
 - Trigger PWA update automatically
   `assets/js/auto-update.js`, `_includes/metadata-hook.html`
+- Update site title tag from `<h1>` to `<p>`
+  `_includes/sidebar.html`
 - Improve feed interoperability
   `assets/feed.xml`

_posts/2011/2011-08-30-fine-tuning-the-autostart-in-ubuntu-server.md

@@ -15,7 +15,7 @@ image: cover.webp
 The purpose of this post is to familiarize with the principles of autostart in the Ubuntu operating system using Ubuntu Server 10.04 LTS as an example and to demonstrate the configuration of a virtual machine autostart running under VirtualBox, and the correct termination of the latter in automatic mode when shutting down Ubuntu Server.
 
 > The example below does not apply to customizing the autostart of graphical applications for a specific system user in desktop versions of Ubuntu. To do this, use the "Running Applications" from the Ubuntu main menu
-{: .prompt-info }
+{: .gh-alert.note }
 
 ## What is autostart and how to configure it?
 Autostart is a process of automatically starting of services/applications when the operating system is started. Autostart can also ensure that these services/applications are properly terminated when the system is shut down or rebooted.
@@ -42,7 +42,7 @@ sudo cp /etc/init.d/skeleton /etc/init.d/myscript && vi /etc/init.d/myscript
 ```
 
 > When you create a new script, don't forget to give it execute privileges. To add execution privileges to a script, use the `sudo chmod +x /etc/init.d/myscript` command
-{: .prompt-info }
+{: .gh-alert.tip }
 
 ### How to add a script to the autostart?
 Some sources recommend creating symbolic links manually with the `ln` command, although special utilities exist. Before adding a script, the utility checks it for validity, and the `ln` command will create a link even if there is some error. So, tt is better to use specialized utilities, such as `update-rc.d`, which comes bundled with Ubuntu. It can be used to add a new script to any boot level, remove an existing script, and so on. Here's an example of how to use it:
@@ -167,4 +167,4 @@ As you can see from this example, the Ubuntu operating system provides many ways
 _Article competition diploma._
 
 > This material was written for the "First contest of Russian-language articles for Ubuntu OS 2011" (konkurs.ubuntu.ru) and published on [open-life.org](https://open-life.org/blog/1862.html)
-{: .prompt-tip }
+{: .gh-alert.note }

_posts/2024/2024-06-15-dive-into-development.md

@@ -15,7 +15,7 @@ image: cover.webp
 Software development can be as fun as it is challenging. Despite product development where you can usually launch an application or write tests to see if it works as expected or not, there is another world of software development where software development faces the real world. This juxtaposition brings even more challenges and makes the work more interesting. In this post, I will share some stories from my experience when software development is unusually fun.
 
 > Some of the projects described here are done more for fun than for real usage. I do not recommend taking them seriously. Use certified only software and equipment when your safety and health are at stake.
-{: .prompt-warning }
+{: .gh-alert.important }
 
 ## Dive depth gauge
 Once I decided to try snorkeling and discover the creatures that live in the Black Sea. Since there is no way to discover the underwater world without diving in these specific conditions, I had to train myself to use apnea to dive. I used the smartwatch to navigate underwater to know where the land was without having to surface and look around. The timer on my watch told me how long I could stay at depth, while the heart rate monitor told me how long I should pause while breathing through the snorkel.

_posts/2024/2024-09-13-custom-web-application-for-existing-service.md

@@ -191,7 +191,7 @@ $ npm run dev
 ```
 
 > If you don't want to install the certificate locally, you can simply type `thisunsafe` right in the Chrome tab to continue loading the application over an untrusted HTTPS connection.
-{: .prompt-info}
+{: .gh-alert.tip }
 
 #### User Interface
 

_posts/2024/2024-10-26-easy-software-updates.md

@@ -46,7 +46,7 @@ Here is a list of the most common commands:
 {: .m-auto }
 
 > `update` is a command alias for `upgrade`, so you can use either of them.
-{: .prompt-tip }
+{: .gh-alert.note }
 
 The good thing about winget is that it requires an installer that supports silent installation mode, so we can avoid clicking the "Next" button in the installer wizard by passing the `--silent` argument. This makes it possible to use winget in scripts or to update all software at once without any disturbance. However, some applications may not support this mode, so you may need to use a GUI to install or update them.
 

assets/css/github-alerts.css

@@ -0,0 +1,66 @@
+.gh-alert {
+  padding: 0.5rem 1rem;
+  border-left-width: 0.25em;
+  border-left-style: solid;
+
+  &::before {
+    display: block;
+    height: 1rem;
+    padding-top: 0.1rem;
+    padding-bottom: 2rem;
+    padding-left: 1.5rem;
+    background-size: 16px 16px;
+    background-position: left;
+    background-repeat: no-repeat;
+  }
+
+  &.note {
+    border-left-color: #1f6feb;
+
+    &::before {
+      content: 'Note';
+      color: #1f6feb;
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%231f6feb%22%20d%3D%22M0%208a8%208%200%201%201%2016%200A8%208%200%200%201%200%208m8-6.5a6.5%206.5%200%201%200%200%2013%206.5%206.5%200%200%200%200-13M6.5%207.75A.75.75%200%200%201%207.25%207h1a.75.75%200%200%201%20.75.75v2.75h.25a.75.75%200%200%201%200%201.5h-2a.75.75%200%200%201%200-1.5h.25v-2h-.25a.75.75%200%200%201-.75-.75M8%206a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
+
+  &.tip {
+    border-left-color: #238636;
+
+    &::before {
+      content: 'Tip';
+      color: #238636;
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23238636%22%20d%3D%22M8%201.5c-2.363%200-4%201.69-4%203.75%200%20.984.424%201.625.984%202.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621%201.49a.75.75%200%200%201-1.484.211c-.04-.282-.163-.547-.37-.847a9%209%200%200%200-.542-.68l-.268-.32C3.201%207.75%202.5%206.766%202.5%205.25%202.5%202.31%204.863%200%208%200s5.5%202.31%205.5%205.25c0%201.516-.701%202.5-1.328%203.259q-.142.172-.268.319c-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751%200%200%201-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848l.213-.253c.561-.679.985-1.32.985-2.304%200-2.06-1.637-3.75-4-3.75M5.75%2012h4.5a.75.75%200%200%201%200%201.5h-4.5a.75.75%200%200%201%200-1.5M6%2015.25a.75.75%200%200%201%20.75-.75h2.5a.75.75%200%200%201%200%201.5h-2.5a.75.75%200%200%201-.75-.75%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
+
+  &.important {
+    border-left-color: #8957e5;
+
+    &::before {
+      content: 'Important';
+      color: #8957e5;
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%238957e5%22%20d%3D%22M0%201.75C0%20.784.784%200%201.75%200h12.5C15.216%200%2016%20.784%2016%201.75v9.5A1.75%201.75%200%200%201%2014.25%2013H8.06l-2.573%202.573A1.458%201.458%200%200%201%203%2014.543V13H1.75A1.75%201.75%200%200%201%200%2011.25Zm1.75-.25a.25.25%200%200%200-.25.25v9.5c0%20.138.112.25.25.25h2a.75.75%200%200%201%20.75.75v2.19l2.72-2.72a.75.75%200%200%201%20.53-.22h6.5a.25.25%200%200%200%20.25-.25v-9.5a.25.25%200%200%200-.25-.25Zm7%202.25v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200M9%209a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
+
+  &.warning {
+    border-left-color: #9e6a03;
+
+    &::before {
+      content: 'Warning';
+      color: #9e6a03;
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%239e6a03%22%20d%3D%22M6.457%201.047c.659-1.234%202.427-1.234%203.086%200l6.082%2011.378A1.75%201.75%200%200%201%2014.082%2015H1.918a1.75%201.75%200%200%201-1.543-2.575Zm1.763.707a.25.25%200%200%200-.44%200L1.698%2013.132a.25.25%200%200%200%20.22.368h12.164a.25.25%200%200%200%20.22-.368Zm.53%203.996v2.5a.75.75%200%200%201-1.5%200v-2.5a.75.75%200%200%201%201.5%200M9%2011a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
+
+  &.caution {
+    border-left-color: #da3633;
+
+    &::before {
+      content: 'Caution';
+      color: #da3633;
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23da3633%22%20d%3D%22M4.47.22A.75.75%200%200%201%205%200h6c.199%200%20.389.079.53.22l4.25%204.25c.141.14.22.331.22.53v6a.75.75%200%200%201-.22.53l-4.25%204.25A.75.75%200%200%201%2011%2016H5a.75.75%200%200%201-.53-.22L.22%2011.53A.75.75%200%200%201%200%2011V5c0-.199.079-.389.22-.53Zm.84%201.28L1.5%205.31v5.38l3.81%203.81h5.38l3.81-3.81V5.31L10.69%201.5ZM8%204a.75.75%200%200%201%20.75.75v3.5a.75.75%200%200%201-1.5%200v-3.5A.75.75%200%200%201%208%204m0%208a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
+}

assets/css/jekyll-theme-chirpy.scss

@@ -46,6 +46,8 @@
  * Post styles
  */
 
+@import 'github-alerts.css';
+
 // Schemas and code blocks styles
 div.highlighter-rouge {
   max-height: 70vh;