From 3a32408d2d0136011a454175de6377cf48ebf469 Mon Sep 17 00:00:00 2001
From: kaf-lamed-beyt <belac335@gmail.com>
Date: Fri, 20 Dec 2024 01:26:38 +0100
Subject: [PATCH] chore(ui): add preview template for url/resources

---
 .../2023-01-02-AeroRust-3-years-birthday.md   |  2 +-
 frontend/scss/main.scss                       | 57 ++++++++++++++-----
 templates/shortcodes/preview.html             | 10 ++++
 3 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 templates/shortcodes/preview.html

diff --git a/content/blog/2023-01-02-AeroRust-3-years-birthday.md b/content/blog/2023-01-02-AeroRust-3-years-birthday.md
index 9cac6a4..a2ed2a7 100644
--- a/content/blog/2023-01-02-AeroRust-3-years-birthday.md
+++ b/content/blog/2023-01-02-AeroRust-3-years-birthday.md
@@ -173,4 +173,4 @@ ESA has accepted a few project ideas proposals to evaluate Rust for space on-boa
 
 - [Using game engine techniques and Rust to modernize On Board software](https://ideas.esa.int/servlet/hype/IMT?documentTableId=45087137960624414&userAction=Browse&templateName=&documentId=53298a0c4c4b392accb7c6ea5ba971db)
 - [cRustacea in Space - Co-operative Rust and C embedded applications in Space - Theory and Practice](https://ideas.esa.int/servlet/hype/IMT?documentTableId=45087137960624414&userAction=Browse&templateName=&documentId=6acab7a7ba0da1ea05c864552665bcb5)
-- Evaluation of Rust usage in space application by developing BSP and RTOS targeting SAMV71 (link will be added when ESA publishes the project idea)
\ No newline at end of file
+- Evaluation of Rust usage in space application by developing BSP and RTOS targeting SAMV71 (link will be added when ESA publishes the project idea)
diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss
index 4714ac2..a819f18 100644
--- a/frontend/scss/main.scss
+++ b/frontend/scss/main.scss
@@ -6,59 +6,59 @@
 }
 
 .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
+    animation: octocat-wave 560ms ease-in-out;
 }
 
 .github-corner:hover .octo-arm {
-    animation: none
+    animation: none;
 }
 
 @include media-breakpoint-up(sm) {
     .github-corner:hover .octo-arm {
-        animation: octocat-wave 560ms ease-in-out
+        animation: octocat-wave 560ms ease-in-out;
     }
 
     .github-corner .octo-arm {
-        animation: none
+        animation: none;
     }
 }
 
 @keyframes octocat-wave {
     0%,
     100% {
-        transform: rotate(0)
+        transform: rotate(0);
     }
 
     20%,
     60% {
-        transform: rotate(-25deg)
+        transform: rotate(-25deg);
     }
 
     40%,
     80% {
-        transform: rotate(10deg)
+        transform: rotate(10deg);
     }
 }
 
 .form-control-dark:focus {
     border-color: $white;
-    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
+    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
 }
 
 .crate {
-
-    .card-header a, .card-title a {
+    .card-header a,
+    .card-title a {
         text-decoration: none;
     }
 }
 
 .youtube {
     position: relative;
-    padding-bottom: 56.10%;
+    padding-bottom: 56.1%;
     height: 0;
     overflow: hidden;
 }
- 
+
 .youtube iframe,
 .youtube object,
 .youtube embed {
@@ -76,4 +76,35 @@
 
 .scroller {
     overflow: auto;
-}
\ No newline at end of file
+}
+
+/* social preview card */
+.social-preview {
+    display: flex;
+    overflow: hidden;
+    margin: 1rem 0;
+    width: 100%;
+    height: fit-content;
+
+    img {
+        height: 200px;
+        width: 100%;
+        border-radius: 8px;
+        object-fit: cover;
+    }
+
+    div {
+        padding: 0.5rem;
+    }
+
+    h3 {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    p {
+        margin: 0.5rem 0 0;
+        color: $white;
+        text-decoration: none;
+    }
+}
diff --git a/templates/shortcodes/preview.html b/templates/shortcodes/preview.html
new file mode 100644
index 0000000..beca1bd
--- /dev/null
+++ b/templates/shortcodes/preview.html
@@ -0,0 +1,10 @@
+{% set metadata = load_data(url="https://api.dub.co/metatags?url=" ~ url, format="json") %}
+<div class="social-preview">
+    <a href="{{ url }}" target="_blank">
+        <img src="{{ metadata.image | default(path="static/images/aerorust_logo.png") }}" alt="{{ metadata.title  }}" />
+        <div>
+            <h3>{{ metadata.title }}</h3>
+            <p>{{ metadata.description }}</p>
+        </div>
+    </a>
+</div>