feat: add external slides

AhsanAyaz · Sep 25, 2024 · e08c0eb · e08c0eb
1 parent 883db18
commit e08c0eb
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 12 deletions.
diff --git a/css/customizations.scss b/css/customizations.scss
@@ -45,4 +45,4 @@ img.meme {
 
 .reveal code:not(.hljs) {
   color: yellow;
-}
+}
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,13 @@
+html,
+body {
+  font-family: 'Nunito', sans-serif;
+}
+a[data-external-link] {
+  position: relative;
+}
+a[data-external-link] svg {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 14px;
+}
diff --git a/data/externalSlides.json b/data/externalSlides.json
@@ -0,0 +1,6 @@
+[
+  {
+    "link": "https://docs.google.com/presentation/d/1nzollUhUS_u_aJGckj9YQKbdETduUDd4ostFdNcpCJE/edit#slide=id.g264034113a1_0_73",
+    "title": "The Offline AI in Your Pocket: How Google Gemini Nano Turns Chrome into a Secret Superpower"
+  }
+]
diff --git a/index.html b/index.html
@@ -14,17 +14,12 @@
       rel="stylesheet"
     />
     <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-      html,
-      body {
-        font-family: 'Nunito', sans-serif;
-      }
-    </style>
+    <link href="css/index.css" rel="stylesheet"/>
   </head>
   <body>
-    <div class="reveal max-w-lg mx-auto my-32">
+    <div class="reveal max-w-3xl mx-auto my-32">
       <h1 class="text-center text-4xl mb-5">Code with Ahsan - Slides</h1>
-      <div id="talksGrid" class="grid grid-cols-3 gap-6 justify-center"></div>
+      <div id="talksGrid" class="grid grid-cols-4 gap-2 justify-center"></div>
     </div>
     <script src="main.js"></script>
     <div class="watermark fixed bottom-4 left-0 right-0 justify-center mx-auto flex items-center">

diff --git a/main.js b/main.js
@@ -1,6 +1,10 @@
 const main = async () => {
-  const resp = await fetch('data/slides.json');
-  const slides = await resp.json();
+  const responses = await Promise.all([
+    fetch('data/slides.json'),
+    fetch('data/externalSlides.json'),
+  ]);
+  let slides = await Promise.all(responses.map((resp) => resp.json()));
+  slides = slides.flat();
   const grid = document.getElementById('talksGrid');
   slides.forEach((slide) => {
     const { link, title } = slide;
@@ -9,9 +13,18 @@ const main = async () => {
       'shadow-md border border-slate-300 rounded-md hover:bg-purple-700 duration-200 hover:text-white cursor-pointer';
     const anchorEl = document.createElement('a');
     anchorEl.className = 'p-4 w-full h-full block';
-    anchorEl.href = `talks/${link}`;
+    const isExternal = link.includes('http');
+    anchorEl.href = isExternal ? link : `talks/${link}`;
     anchorEl.target = '_blank';
     anchorEl.textContent = title;
+    if (isExternal) {
+      anchorEl.setAttribute('data-external-link', true);
+      const icon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+</svg>
+`;
+      anchorEl.innerHTML += icon;
+    }
     sectionEl.appendChild(anchorEl);
     grid.appendChild(sectionEl);
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,4 +45,4 @@ img.meme { @@
     .reveal code:not(.hljs) {
       color: yellow;
-    }
+    }