Add shortcodes

templates/shortcodes/timeline.html

@@ -0,0 +1,77 @@
+<style>
+#timeline-content {
+    margin-top: 50px;
+    text-align: center;
+  }
+  /* Timeline */
+  .timeline {
+    border-left: 4px solid var(--primary-color);
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+    background: var(--code-bg-color);
+    
+    margin: auto;
+    padding: 50px;
+    list-style: none;
+    text-align: left;
+    font-weight: 100;
+    max-width: 60%;
+  }
+  
+  .timeline .event {
+    /* border-bottom: 1px dashed var(--primary-color); */
+    padding-bottom: 25px;
+    margin-bottom: 50px;
+    position: relative;
+    list-style: none;
+    line-height: 1.5em;
+    font-size: 1.2em;
+    font-weight: 100;
+    width: 100%;
+    h3 p {
+      font-weight:700;
+    }
+  }
+  .timeline .event:last-of-type {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border: none;
+  }
+  .timeline .event:before,
+  .timeline .event:after {
+    position: absolute;
+    display: block;
+    top: 0;
+  }
+  .timeline .event:before {
+    left: -8em;
+    color: var(--primary-color);
+    content: attr(data-date);
+    text-align: right;
+    ul, li {
+      list-style: none;
+    }
+  }
+  .timeline .event:after {
+    box-shadow: 0 0 0 4px var(--primary-color);
+    left: -57.85px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    height: 11px;
+    width: 11px;
+    content: "";
+    top: 5px;
+  }
+</style>
+{% set dt = load_data(literal = body, format="json") %}
+  
+<div id="timeline-content">
+    <ul class="timeline">
+        {% for d in dt %}
+      <li class="event" data-date="{{ d.date |safe }}">
+        <h3>{{ d.title | markdown | safe}}</h3>
+        <p>{{ d.body |safe }}</p>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>

templates/shortcodes/youtube.html

@@ -0,0 +1,10 @@
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube-nocookie.com/embed/{{id}}"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen
+></iframe>