Merge pull request #63 from dalurness/livechat

Add sidenote live chat component
dalurness · Dec 1, 2024 · f0091e5 · f0091e5
2 parents fb172f1 + 741eb36
commit f0091e5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -29,6 +29,15 @@ const { title } = Astro.props;
       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
+    <script
+      type="module"
+      crossorigin="anonymous"
+      src="https://sidenoteapp.com/embedded/index.js"></script>
+    <link
+      rel="stylesheet"
+      crossorigin="anonymous"
+      href="https://sidenoteapp.com/embedded/index.css"
+    />
   </head>
   <!-- Setup some base styles as a theme -->
   <body

diff --git a/src/pages/day/[day]/index.astro b/src/pages/day/[day]/index.astro
@@ -36,22 +36,33 @@ const { title } = entry.data;
   </Question>
 
   <DynamicSolution day={day} client:load />
-
   <h2 class="mt-20">Solutions</h2>
-  <ul class="mb-10 list-inside list-disc">
-    {
-      solutionList.map(({ username, descriptions }) => (
-        <li>
-          <Link href={`./solution/${username}/`}>
-            {username} -{" "}
-            {descriptions.map((description) => (
-              <span class="border-yeti-light-9 border-2 rounded-lg bg-yeti-light-3 px-1 mx-1">
-                {description}
-              </span>
-            ))}
-          </Link>
-        </li>
-      ))
-    }
-  </ul>
+  <div class="flex flex-col-reverse md:flex-row md:justify-between">
+    <div>
+      <ul class="mb-20 list-inside list-disc">
+        {
+          solutionList.map(({ username, descriptions }) => (
+            <li>
+              <Link href={`./solution/${username}/`}>
+                {username} -{" "}
+                {descriptions.map((description) => (
+                  <span class="border-yeti-light-9 border-2 rounded-lg bg-yeti-light-3 px-1 mx-1">
+                    {description}
+                  </span>
+                ))}
+              </Link>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+    <div class="mx-4 mb-20 md:mb-0 flex justify-center">
+      <div
+        id="sidenote-embedded-live-chat"
+        data-height="400px"
+        data-width="300px"
+      >
+      </div>
+    </div>
+  </div>
 </LayoutNavbarLayout>