add meet page and update image style

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

src/Pages/Meet.elm

@@ -1,12 +1,17 @@
 module Pages.Meet exposing (page)
 
 import Components.Footer exposing (footerLinksToSide)
-import Html 
+import Html
+import Html.Attributes exposing (class, id)
 import View exposing (View)
 
 
 page : View msg
 page =
     { title = "Schedule a meet with me"
-    , body = [ footerLinksToSide, Html.node "calcom" [] [] ]
+    , body =
+        [ Html.div [ class "aspect-square flex items-center justify-center flex-col h-screen m-2" ]
+            [ Html.node "cal-com" [ id "calcom-widget", class "w-full p-2 " ] [] ]
+        , footerLinksToSide
+        ]
     }

src/Utils/Constants.elm

@@ -20,7 +20,7 @@ footerLinks =
     [ { text = "About", url = "/pages/about-me" }
     , { text = "Blog", url = "/posts" }
     , { text = "Projects", url = "/pages/projects" }
-    , { text = "GSoC", url = "https://gsoc.avinal.space" }
+    , { text = "GSoC", url = "/posts/gsoc" }
     ]
 
 
@@ -31,6 +31,7 @@ iconLinks =
     , { url = "https://instagram.com/avinal.k", icon = "fa-brands fa-instagram" }
     , { url = "https://twitter.com/Avinal_", icon = "fa-brands fa-twitter" }
     , { url = "mailto:ripple@avinal.space", icon = "fa-solid fa-envelope" }
+    , { url = "/meet", icon = "fa-solid fa-video" }
     ]
 
 

src/interop.js

@@ -1,4 +1,4 @@
 import "./web-components/MarkedRender.js";
-
+import "./web-components/Calcom.js";
 
 export const onReady = ({ app, env }) => {};

src/web-components/Calcom.js

@@ -0,0 +1,54 @@
+customElements.define(
+  "cal-com",
+  class extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      (function (C, A, L) {
+        let p = function (a, ar) {
+          a.q.push(ar);
+        };
+        let d = C.document;
+        C.Cal =
+          C.Cal ||
+          function () {
+            let cal = C.Cal;
+            let ar = arguments;
+            if (!cal.loaded) {
+              cal.ns = {};
+              cal.q = cal.q || [];
+              d.head.appendChild(d.createElement("script")).src = A;
+              cal.loaded = true;
+            }
+            if (ar[0] === L) {
+              const api = function () {
+                p(api, arguments);
+              };
+              const namespace = ar[1];
+              api.q = api.q || [];
+              typeof namespace === "string"
+                ? (cal.ns[namespace] = api) && p(api, ar)
+                : p(cal, ar);
+              return;
+            }
+            p(cal, ar);
+          };
+      })(window, "https://app.cal.com/embed/embed.js", "init");
+      Cal("init", { origin: "https://app.cal.com" });
+
+      Cal("inline", {
+        elementOrSelector: "#calcom-widget",
+        calLink: "avinal",
+      });
+      Cal("ui", {
+        theme: "dark",
+        styles: {
+          branding: { brandColor: "#009fb1" },
+        },
+        hideEventTypeDetails: false,
+      });
+    }
+  }
+);

src/web-components/MarkedRender.js

@@ -41,6 +41,10 @@ customElements.define(
         return `<p>${text}</p>`;
       };
 
+      renderer.image = (href, title, text) => {
+        return `<img class="max-w-xs grow-0 shrink-0 basis-auto w-full" src=${href} alt="${text}">`;
+      };
+
       marked.setOptions({
         renderer: renderer,
         highlight: function (code, lang) {