showcase projects loading and displaying

axum_server/templates/components/post_preview.html

@@ -1,5 +1,6 @@
 <article class="grid grid-cols-[1fr_2fr] grid-flow-col gap-4">
 	<aside class="row-span-3">
+		<!-- TODO <figure> -->
 	  <svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
 	    <use xlink:href="/svg/icons-sprite.svg#mail" />
 	  </svg>

axum_server/templates/components/project_preview_card.html

@@ -0,0 +1,37 @@
+<article>
+  <header class="px-4 mb-3"> 
+    <h2 class="text-3xl font-semibold text-blue-900">
+     {{project.metadata.title}}
+    </h2>
+    <p class="px-5 text-gray-800">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
+  </header>
+  <!-- <hr class="border-blue-950 my-5"> -->
+
+  {% match project.metadata.cover_image %}
+  {% when Some with (source) %}
+  <figure>
+    <!-- <img src="{{source}}" /> -->
+		<!-- TODO <figure> -->
+	  <svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
+	    <use xlink:href="/svg/icons-sprite.svg#mail" />
+	  </svg>
+
+  </figure>
+  {% when None %}
+  {% endmatch %}
+
+
+	<footer class="text-sm">
+    <h3 class="text-3xl font-semibold text-blue-900">
+     TODO classification
+    </h3>
+    <ul class="inline-block">
+     {% for tag in project.metadata.tags %}
+      <li class="inline-block">
+        {{tag}}
+      </li>
+      {% endfor %}
+    </ul>
+	</footer>
+</article>

axum_server/templates/index.html

@@ -116,27 +116,20 @@
 
 </section>
 
-<section class="twitch-stream-promo">
-  <h2>Follow my twitch stream</h2>
-  <div class="twitch-embed">
-    <div class="twitch-video">
-      <!-- <iframe -->
-        <!-- title="My twitch channel" -->
-        <!-- src="https://player.twitch.tv/?channel=michalvankodev&parent=michalvanko.dev&parent=localhost&autoplay=false" -->
-        <!-- loading="lazy" -->
-        <!-- frameborder="0" -->
-        <!-- scrolling="no" -->
-        <!-- allowfullscreen -->
-        <!-- height="100%" -->
-        <!-- width="100%" -->
-        <!-- class="embed" -->
-      <!-- /> -->
-    </div>
-    <aside>
-      Come hang out and chat with me <strong>every Tuesday and Thursday</strong>
-      afternoon central Europe time. I stream working on my side-projects and talking
-      anything about the developer lifestyle.
-    </aside>
-  </div>
+<hr class="border-blue-950 m-5">
+
+<section id="showcase">
+  <h2 class="text-blue-950 font-semibold text-2xl m-5">Showcase</h2>
+
+  <ul class="mx-5">
+   {% for project in featured_projects %}
+    <li class="my-2">
+      {% include "components/project_preview_card.html" %}
+    </li>
+   {% endfor %}
+  </ul>
+
 </section>
+
+
 {% endblock %}