Socials tiktok and twitch

axum_server/styles/output.css

@@ -570,6 +570,10 @@ video {
   margin: 1.25rem;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -610,16 +614,16 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
 
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -636,6 +640,10 @@ video {
   margin-top: 0.75rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -672,10 +680,34 @@ video {
   height: 1.5rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-64 {
+  height: 16rem;
+}
+
 .min-h-full {
   min-height: 100%;
 }
 
+.min-h-8 {
+  min-height: 2rem;
+}
+
+.min-h-80 {
+  min-height: 20rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -684,42 +716,30 @@ video {
   width: 1.5rem;
 }
 
-.flex-grow {
+.w-4 {
-  flex-grow: 1;
+  width: 1rem;
 }
 
-.auto-cols-auto {
+.w-8 {
-  grid-auto-columns: auto;
+  width: 2rem;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
+.flex-grow {
+  flex-grow: 1;
 }
 
 .grid-flow-col {
   grid-auto-flow: column;
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
-  grid-template-columns: minmax(0,1fr) auto;
-}
-
-.grid-cols-\[1fr\2c 2fx\] {
-  grid-template-columns: 1fr 2fx;
-}
-
-.grid-cols-\[1fr_2fx\] {
-  grid-template-columns: 1fr 2fx;
-}
-
 .grid-cols-\[1fr_2fr\] {
   grid-template-columns: 1fr 2fr;
 }
 
-.grid-rows-3 {
-  grid-template-rows: repeat(3, minmax(0, 1fr));
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -752,6 +772,14 @@ video {
   gap: 1rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -760,6 +788,10 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -793,11 +825,26 @@ video {
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
 }
 
+.bg-pink-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-pink-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+}
+
+.bg-pink-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
+
 .fill-blue-950 {
   fill: #172554;
 }
@@ -814,6 +861,10 @@ video {
   padding: 0.75rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -833,6 +884,10 @@ video {
   padding-right: 0.75rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-right {
   text-align: right;
 }
@@ -867,6 +922,10 @@ video {
   line-height: 1.25rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .font-extrabold {
   font-weight: 800;
 }
@@ -879,10 +938,6 @@ video {
   font-weight: 600;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
 .capitalize {
   text-transform: capitalize;
 }

axum_server/templates/components/social_card.html

@@ -0,0 +1,16 @@
+{% macro social_card_start(svg, heading) %}
+
+<section class="border rounded-md bg-pink-200 m-4 p-4">
+	<header class="flex text-center justify-center items-center gap-2 mb-2">
+		 <svg aria-hidden="true" class="h-7 w-7 fill-blue-950">
+	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
+	  </svg>
+		<h3 class="text-lg font-medium mb-1">{{heading|safe}}</h3>
+	</header>
+
+{% endmacro %}
+
+{% macro social_card_end() %}
+	</section>
+</section>
+{% endmacro %}

axum_server/templates/index.html

@@ -1,4 +1,5 @@
 {%- import "components/talent_card.html" as tc -%}
+{%- import "components/social_card.html" as sc -%}
 {% extends "base.html" %}
 
 {% block title %}Introduction{% endblock %}
@@ -39,7 +40,7 @@
 
 <section id="blog">
 <h2 class="text-blue-950 font-semibold text-2xl m-5">Blog</h2>
-  <section id="tags">
+  <section id="blog-tags">
     <ul class="mx-5">
      {% for tag in blog_tags %}
       <li class="inline-block mx-0.5 p-0.5">
@@ -60,21 +61,56 @@
   </ul>
 </section>
 
+<section id="socials">
+  <h2 class="text-blue-950 font-semibold text-2xl m-5">Socials</h2>
+  {% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
+    <script src= "https://player.twitch.tv/js/embed/v1.js"></script>
+    <div id="twitch-player" class="h-64 rounded overflow-hidden"></div>
+    <script type="text/javascript">
+      var options = {
+        width: "100%",
+        height: "100%",
+        channel: "michalvankodev",
+        parent: ["localhost"]
+      };
+      var player = new Twitch.Player("twitch-player", options);
+      player.setVolume(0.5);
+    </script>
+  {% call sc::social_card_end() %}
+
+  {% call sc::social_card_start("tiktok", "Highlight can be found on <em>TikTok</em>") %}
+  <!-- STYLES needed to overwrite tiktok embed css -->
+  <blockquote
+    class="overflow-hidden p-0 m-0 tiktok-embed bg-pink-200"
+    cite="https://www.tiktok.com/@michalvankodev"
+    data-unique-id="michalvankodev"
+    data-embed-from="embed_page"
+    data-embed-type="creator"
+    style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px"
+  >
+    <section>
+       <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a>
+    </section>
+  </blockquote>
+  <script async src="https://www.tiktok.com/embed.js"></script>
+  {% call sc::social_card_end() %}
+</section>
+
 <section class="twitch-stream-promo">
   <h2>Follow my twitch stream</h2>
   <div class="twitch-embed">
     <div class="twitch-video">
-      <iframe
+      <!-- <iframe -->
-        title="My twitch channel"
+        <!-- title="My twitch channel" -->
-        src="https://player.twitch.tv/?channel=michalvankodev&parent=michalvanko.dev&parent=localhost&autoplay=false"
+        <!-- src="https://player.twitch.tv/?channel=michalvankodev&parent=michalvanko.dev&parent=localhost&autoplay=false" -->
-        loading="lazy"
+        <!-- loading="lazy" -->
-        frameborder="0"
+        <!-- frameborder="0" -->
-        scrolling="no"
+        <!-- scrolling="no" -->
-        allowfullscreen
+        <!-- allowfullscreen -->
-        height="100%"
+        <!-- height="100%" -->
-        width="100%"
+        <!-- width="100%" -->
-        class="embed"
+        <!-- class="embed" -->
-      />
+      <!-- /> -->
     </div>
     <aside>
       Come hang out and chat with me <strong>every Tuesday and Thursday</strong>