feat: new callout type "tip"

src/components/shortcodes/Callout.astro

@@ -31,6 +31,11 @@ const { icon, type = 'info'} = Astro.props;
         --callout-text: #2e3440;
     }
 
+    .callout-tip {
+        --callout-bg: var(--secondary-color);
+        --callout-text: #2e3440;
+    }
+
     .callout-warning {
         --callout-bg: var(--terminal-yellow);
         --callout-text: #2e3440;

src/components/shortcodes/timeline/TimeLine.astro

@@ -15,8 +15,14 @@ import TimeLineItem from "./TimeLineItem.astro";
 import { parse } from "ultrahtml";
 import {querySelectorAll} from 'ultrahtml/selector'
 
+interface TimelineItem {
+    date: string;
+    title: string;
+    descriptionHTML: string;
+}
+
 /* These code has a lot of children LoL */
-function parseTimeLineContent(content: string) {
+function parseTimeLineContent(content: string): TimelineItem[] {
     if (!content) return [];
     const html = parse(content);
 
@@ -47,18 +53,24 @@ function parseTimeLineContent(content: string) {
     return items;
 }
 
-const renderedHTML = await Astro.slots.render('default');
-const timelineItems = parseTimeLineContent(renderedHTML);
+let timelineItems: TimelineItem[] = []
 
+const { parseFromText = true } = Astro.props;
+
+if (parseFromText) {
+    const renderedHTML = await Astro.slots.render('default');
+    timelineItems = parseTimeLineContent(renderedHTML);
+}
 ---
 <ol class="timeline">
-    {timelineItems.map(item => (
+    {parseFromText && timelineItems.map(item => (
             <li>
                 <TimeLineItem date={item.date} title={item.title}>
                     <Fragment set:html={item.descriptionHTML} />
                 </TimeLineItem>
             </li>
     ))}
+    {!parseFromText && <slot/>}
 </ol>
 <style>
     ol.timeline {

src/styles/global.css

@@ -22,7 +22,7 @@
         --text-color: #2e3440;
         --secondary-text-color: #4c566a;
         --accent-color: #486090;
-        --secondary--color: #6078a8;
+        --secondary-color: #6078a8;
         --border-color: #d1d5db;
         --header-color: #2e3440;
         --terminal-green: #4b644b;
@@ -275,6 +275,14 @@ div.content {
         text-decoration: underline 1px;
     }
 
+
+    div.callout-info div.callout-content a {
+        color: dodgerblue;
+    }
+    div.callout-warning div.callout-content a {
+        color: steelblue;
+    }
+
     blockquote {
         border-left: 1px solid var(--accent-color);
         color: var(--text-color);