Add support for github style markdown alerts

_sass/alerts.scss

@@ -0,0 +1,60 @@
+blockquote.markdown-alert, .markdown-alert {
+    padding: var(--base-size-8) var(--base-size-16);
+    margin-bottom: var(--base-size-16);
+    color: inherit;
+    border-left: .25em solid var(--borderColor-default, var(--color-border-default));
+}
+
+.markdown-alert>:first-child {
+    margin-top: 0;
+}
+
+.markdown-alert>:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-alert .markdown-alert-title {
+    display: flex;
+    font-weight: var(--base-text-weight-medium, 500);
+    align-items: center;
+    line-height: 1;
+}
+.markdown-alert.markdown-alert-note {
+    border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+}
+
+.markdown-alert.markdown-alert-note .markdown-alert-title {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+}
+
+.markdown-alert.markdown-alert-important {
+    border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
+}
+
+.markdown-alert.markdown-alert-important .markdown-alert-title {
+    color: var(--fgColor-done, var(--color-done-fg));
+}
+
+.markdown-alert.markdown-alert-warning {
+    border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
+}
+
+.markdown-alert.markdown-alert-warning .markdown-alert-title {
+    color: var(--fgColor-attention, var(--color-attention-fg));
+}
+
+.markdown-alert.markdown-alert-tip {
+    border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
+}
+
+.markdown-alert.markdown-alert-tip .markdown-alert-title {
+    color: var(--fgColor-success, var(--color-success-fg));
+}
+
+.markdown-alert.markdown-alert-caution {
+    border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
+}
+
+.markdown-alert.markdown-alert-caution .markdown-alert-title {
+    color: var(--fgColor-danger, var(--color-danger-fg));
+}

_sass/jekyll-v4-theme-primer.scss

@@ -17,6 +17,9 @@
 @import "@primer/css/markdown/index.scss";
 @import "@primer/css/buttons/index.scss";
 @import "@primer/css/tooltips/index.scss";
+
+@import "alerts.scss";
+
 [data-color-mode=light][data-light-theme*=light],
 [data-color-mode=dark][data-dark-theme*=light] {
   @import "rouge-light.scss";
@@ -47,4 +50,3 @@ clipboard-copy {
     height: 28px;
     width: 28px;
 }
-

index.md

@@ -114,6 +114,23 @@ end
 <dd>Green</dd>
 </dl>
 
+### Here are GitHub style alerts:
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
 ```
 Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
 ```

jekyll-v4-theme-primer.gemspec

@@ -18,6 +18,7 @@ Gem::Specification.new do |s|
   s.required_ruby_version = ">= 2.4.0"
 
   s.add_dependency "jekyll", ">= 4.0", "< 5.0"
+  s.add_runtime_dependency "jekyll-github-alerts", "~> 0.1"
   s.add_runtime_dependency "jekyll-github-metadata", "~> 2.16"
   s.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"
   s.add_runtime_dependency "jekyll-sass-converter", "~> 3.0"