feat(blog): migrate sunshine community guides

_config_theme.yml

@@ -59,8 +59,11 @@ navbar-text-col: "#e4e6eb"
 page-col: "#303436"
 text-col: "#e4e4e4"
 mobile-theme-col: "#05FF3B"
+sass:
+  sass_dir: _sass
+  style: compressed
 site-css:
-  - "/assets/css/custom-styles.css"
+  - "/assets/css/styles.css"
 gtag: "G-SSW90X5YZX"
 giscus:
   hostname: giscus.app  # Replace with your giscus instance's hostname if self-hosting

_includes/admonition.html

@@ -0,0 +1,35 @@
+{% comment %}
+    credit: https://www.adamsdesk.com/posts/admonitions-jekyll
+{% endcomment %}
+
+{% if include.type.size > 0 and include.body.size > 0 %}
+    {% assign types = "
+        attention:Attention,
+        caution:Caution,
+        danger:Danger,
+        error:Error,
+        hint:Hint,
+        important:Important,
+        note:Note,
+        seealso:See also,
+        tip:Tip,
+        todo: TODO,
+        warning:Warning" | split: "," %}
+        {% assign title = include.title | default: "" %}
+        {% if title == "" %}
+        {% for type in types %}
+            {% assign typeKeyVal = type | split: ":" %}
+            {% assign typeKey = typeKeyVal[0] | strip %}
+            {% assign typeValue = typeKeyVal[1] | strip %}
+            {% if typeKey == include.type %}
+                {% assign title = typeValue %}
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+<div class="admonition {{ include.type }} rounded">
+    <p class="admonition-title">{{ title }}</p>
+    <p>
+        {{ include.body | markdownify }}
+    </p>
+</div>
+{% endif %}

_includes/tabs.html

@@ -0,0 +1,35 @@
+<div class="tabs">
+    <ul class="nav nav-underline" role="tablist">
+        {% for tab in include.tabs %}
+        <li class="nav-item" role="presentation">
+            <button
+                    class="nav-link {% if forloop.first %}active{% endif %}"
+                    id="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-pane"
+                    type="button"
+                    role="tab"
+                    aria-controls="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-pane"
+                    aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
+            >{{ tab.name }}</button>
+        </li>
+        {% endfor %}
+    </ul>
+    <div class="tab-content">
+        {% for tab in include.tabs %}
+        <div
+                class="tab-pane fade {% if forloop.first %}show active{% endif %}"
+                id="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-pane"
+                role="tabpanel"
+                aria-labelledby="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-tab"
+                tabindex="0"
+        >
+            {% if include.index and include.index >= 0 %}
+                {{ tab.content[include.index] | markdownify }}
+            {% else %}
+                {{ tab.content | markdownify }}
+            {% endif %}
+        </div>
+        {% endfor %}
+    </div>
+</div>