From c88f9507ce2080d52f68af3489b06d18dfee6437 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Tue, 28 May 2024 20:53:43 +0300
Subject: [PATCH] add htmx emoji picker

---
 src/components/Header.astro                   |  4 +--
 src/images/1f44d.svg                          |  1 +
 src/images/1f44e.svg                          |  1 +
 src/images/1f602.svg                          |  1 +
 src/images/1f603.svg                          |  1 +
 src/images/1f611.svg                          |  1 +
 src/images/1f922.svg                          |  1 +
 src/layouts/Layout.astro                      |  1 +
 .../category/[category]/[slug]/index.astro    | 29 +++++++++++++++++++
 src/styles/main.css                           |  6 +++-
 10 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/images/1f44d.svg
 create mode 100644 src/images/1f44e.svg
 create mode 100644 src/images/1f602.svg
 create mode 100644 src/images/1f603.svg
 create mode 100644 src/images/1f611.svg
 create mode 100644 src/images/1f922.svg

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 31f670a..3536c0f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -56,10 +56,10 @@ const base = import.meta.env.BASE_URL;
 <script>
   import ConwaySimulator from "../scripts/conway-simulator";
   let cols = 24;
-  let pixelSize = 6;
+  let pixelSize = 4;
   if (screen.availWidth > 768) {
     cols = 46;
-    pixelSize = 10;
+    pixelSize = 8;
   }
 
   let gol = new ConwaySimulator(8, cols, pixelSize, 250);
diff --git a/src/images/1f44d.svg b/src/images/1f44d.svg
new file mode 100644
index 0000000..595672d
--- /dev/null
+++ b/src/images/1f44d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFDB5E" d="M34.956 17.916c0-.503-.12-.975-.321-1.404-1.341-4.326-7.619-4.01-16.549-4.221-1.493-.035-.639-1.798-.115-5.668.341-2.517-1.282-6.382-4.01-6.382-4.498 0-.171 3.548-4.148 12.322-2.125 4.688-6.875 2.062-6.875 6.771v10.719c0 1.833.18 3.595 2.758 3.885C8.195 34.219 7.633 36 11.238 36h18.044c1.838 0 3.333-1.496 3.333-3.334 0-.762-.267-1.456-.698-2.018 1.02-.571 1.72-1.649 1.72-2.899 0-.76-.266-1.454-.696-2.015 1.023-.57 1.725-1.649 1.725-2.901 0-.909-.368-1.733-.961-2.336.757-.611 1.251-1.535 1.251-2.581z"/><path fill="#EE9547" d="M23.02 21.249h8.604c1.17 0 2.268-.626 2.866-1.633.246-.415.109-.952-.307-1.199-.415-.247-.952-.108-1.199.307-.283.479-.806.775-1.361.775h-8.81c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583H28.7c.483 0 .875-.392.875-.875s-.392-.875-.875-.875h-5.888c-1.838 0-3.333 1.495-3.333 3.333 0 1.025.475 1.932 1.205 2.544-.615.605-.998 1.445-.998 2.373 0 1.028.478 1.938 1.212 2.549-.611.604-.99 1.441-.99 2.367 0 1.12.559 2.108 1.409 2.713-.524.589-.852 1.356-.852 2.204 0 1.838 1.495 3.333 3.333 3.333h5.484c1.17 0 2.269-.625 2.867-1.632.247-.415.11-.952-.305-1.199-.416-.245-.953-.11-1.199.305-.285.479-.808.776-1.363.776h-5.484c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583h6.506c1.17 0 2.27-.626 2.867-1.633.247-.416.11-.953-.305-1.199-.419-.251-.954-.11-1.199.305-.289.487-.799.777-1.363.777h-7.063c-.873 0-1.583-.711-1.583-1.584s.71-1.583 1.583-1.583h8.091c1.17 0 2.269-.625 2.867-1.632.247-.415.11-.952-.305-1.199-.417-.246-.953-.11-1.199.305-.289.486-.799.776-1.363.776H23.02c-.873 0-1.583-.71-1.583-1.583s.709-1.584 1.583-1.584z"/></svg>
\ No newline at end of file
diff --git a/src/images/1f44e.svg b/src/images/1f44e.svg
new file mode 100644
index 0000000..1569ad0
--- /dev/null
+++ b/src/images/1f44e.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFDB5E" d="M34.956 18.084c0 .503-.12.975-.321 1.404-1.341 4.326-7.619 4.01-16.549 4.221-1.493.035-.639 1.798-.115 5.668.341 2.517-1.282 6.382-4.01 6.382-4.498 0-.171-3.548-4.148-12.322-2.125-4.688-6.875-2.062-6.875-6.771V5.948c0-1.833.18-3.595 2.758-3.885C8.195 1.781 7.633 0 11.238 0h18.044c1.838 0 3.333 1.496 3.333 3.334 0 .762-.267 1.456-.698 2.018 1.02.571 1.72 1.649 1.72 2.899 0 .76-.266 1.454-.696 2.015 1.023.57 1.725 1.649 1.725 2.901 0 .909-.368 1.733-.961 2.336.757.611 1.251 1.535 1.251 2.581z"/><path fill="#EE9547" d="M23.02 14.751h8.604c1.17 0 2.268.626 2.866 1.633.246.415.109.952-.307 1.199-.415.247-.952.108-1.199-.307-.283-.479-.806-.775-1.361-.775h-8.81c-.873 0-1.583.71-1.583 1.583s.71 1.583 1.583 1.583H28.7c.483 0 .875.392.875.875s-.392.875-.875.875h-5.888c-1.838 0-3.333-1.495-3.333-3.333 0-1.025.475-1.932 1.205-2.544-.615-.605-.998-1.445-.998-2.373 0-1.028.478-1.938 1.212-2.549-.611-.604-.99-1.441-.99-2.367 0-1.12.559-2.108 1.409-2.713-.524-.589-.852-1.356-.852-2.204 0-1.838 1.495-3.333 3.333-3.333h5.484c1.17 0 2.269.625 2.867 1.632.247.415.11.952-.305 1.199-.416.245-.953.11-1.199-.305-.285-.479-.808-.776-1.363-.776h-5.484c-.873 0-1.583.71-1.583 1.583s.71 1.583 1.583 1.583h6.506c1.17 0 2.27.626 2.867 1.633.247.416.11.953-.305 1.199-.419.251-.954.11-1.199-.305-.289-.487-.799-.777-1.363-.777h-7.063c-.873 0-1.583.711-1.583 1.584s.71 1.583 1.583 1.583h8.091c1.17 0 2.269.625 2.867 1.632.247.415.11.952-.305 1.199-.417.246-.953.11-1.199-.305-.289-.486-.799-.776-1.363-.776H23.02c-.873 0-1.583.71-1.583 1.583s.709 1.584 1.583 1.584z"/></svg>
\ No newline at end of file
diff --git a/src/images/1f602.svg b/src/images/1f602.svg
new file mode 100644
index 0000000..1ec7937
--- /dev/null
+++ b/src/images/1f602.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="#664500" d="M28.457 17.797c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.145.591.175.142.426.147.61.014.012-.009 1.262-.902 3.702-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.177-.142.238-.386.145-.594zm-12 0c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.144.591.176.142.427.147.61.014.013-.009 1.262-.902 3.703-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.178-.142.237-.386.145-.594zM31 16c-.396 0-.772-.238-.929-.629-1.778-4.445-6.223-5.381-6.268-5.391-.541-.108-.893-.635-.784-1.177.108-.542.635-.891 1.177-.784.226.045 5.556 1.168 7.732 6.608.205.513-.045 1.095-.558 1.3-.12.05-.246.073-.37.073zM5 16c-.124 0-.249-.023-.371-.072-.513-.205-.762-.787-.557-1.3 2.176-5.44 7.506-6.563 7.732-6.608.543-.106 1.068.243 1.177.784.108.54-.242 1.066-.781 1.176-.185.038-4.506.98-6.271 5.391-.157.391-.533.629-.929.629zm13 6c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"/><path fill="#FFF" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/><path fill="#5DADEC" d="M10.847 28.229c-.68 2.677-3.4 4.295-6.077 3.615-2.676-.679-4.295-3.399-3.616-6.076.679-2.677 6.337-8.708 7.307-8.462.97.247 3.065 8.247 2.386 10.923zm14.286 0c.68 2.677 3.4 4.295 6.077 3.615 2.677-.679 4.296-3.399 3.616-6.076-.68-2.677-6.338-8.708-7.308-8.462-.968.247-3.064 8.247-2.385 10.923z"/></svg>
\ No newline at end of file
diff --git a/src/images/1f603.svg b/src/images/1f603.svg
new file mode 100644
index 0000000..25d4b96
--- /dev/null
+++ b/src/images/1f603.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="#664500" cx="11.5" cy="12.5" rx="2.5" ry="5.5"/><ellipse fill="#664500" cx="24.5" cy="12.5" rx="2.5" ry="5.5"/><path fill="#664500" d="M18 22c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"/><path fill="#FFF" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/></svg>
\ No newline at end of file
diff --git a/src/images/1f611.svg b/src/images/1f611.svg
new file mode 100644
index 0000000..55be4fd
--- /dev/null
+++ b/src/images/1f611.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="#664500" d="M25 26H11c-.552 0-1-.447-1-1s.448-1 1-1h14c.553 0 1 .447 1 1s-.447 1-1 1zm-10-8H8c-.552 0-1-.448-1-1s.448-1 1-1h7c.552 0 1 .448 1 1s-.448 1-1 1zm13 0h-7c-.553 0-1-.448-1-1s.447-1 1-1h7c.553 0 1 .448 1 1s-.447 1-1 1z"/></svg>
\ No newline at end of file
diff --git a/src/images/1f922.svg b/src/images/1f922.svg
new file mode 100644
index 0000000..ed7c86c
--- /dev/null
+++ b/src/images/1f922.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#77B255" d="M35.99 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18 0-9.94 8.06-18 18-18s18 8.06 18 18"/><path fill="#292F33" d="M15.364 26.122l-1.515-2.295c1.154-.762 2.606-1.182 4.089-1.182 1.49 0 2.895.402 4.062 1.162l-1.502 2.305c-1.425-.928-3.721-.924-5.134.01zm12.664-13.086c-.244-.3-6.771-1.502-6.826-1.502-.118 0-.251.089-.275.205-.218 1.027-.052 2.071.466 2.941.521.876 1.337 1.47 2.296 1.673.232.049.471.074.707.074 1.746 0 3.296-1.336 3.686-3.177.014-.075-.006-.156-.054-.214zm-13.272-1.502c-.056 0-6.583 1.202-6.827 1.502-.048.059-.068.14-.052.213.389 1.84 1.939 3.176 3.686 3.176.236 0 .474-.025.707-.074 1.972-.417 3.211-2.486 2.762-4.613-.024-.115-.157-.204-.276-.204z"/><path fill="#3E721D" d="M11.647 29.647c-.444 0-.857-.28-1.005-.724-.185-.555.115-1.155.669-1.339.095-.033 2.453-.877 2.453-3.231s-2.358-3.198-2.458-3.232c-.55-.191-.846-.791-.659-1.342.187-.552.78-.852 1.334-.665.159.053 3.9 1.344 3.9 5.239s-3.741 5.187-3.9 5.239c-.11.037-.223.055-.334.055zm12.705 0c-.111 0-.223-.018-.334-.055-.159-.053-3.9-1.344-3.9-5.239s3.741-5.187 3.9-5.239c.559-.187 1.154.115 1.339.669.185.553-.113 1.151-.664 1.338-.1.034-2.458.878-2.458 3.232s2.358 3.198 2.458 3.232c.551.191.847.791.66 1.342-.15.442-.561.72-1.001.72z"/></svg>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index dd22a67..5939ae5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -16,6 +16,7 @@ import "../styles/main.css";
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
   </head>
   <body class="flex justify-center font-sans">
     <div
diff --git a/src/pages/category/[category]/[slug]/index.astro b/src/pages/category/[category]/[slug]/index.astro
index 4f47f34..3c7eb89 100644
--- a/src/pages/category/[category]/[slug]/index.astro
+++ b/src/pages/category/[category]/[slug]/index.astro
@@ -1,5 +1,13 @@
 ---
 import { getCollection } from "astro:content";
+import { Image } from "astro:assets";
+
+import smiley from "@/images/1f603.svg";
+import thumbsUp from "@/images/1f44d.svg";
+import thumbsDown from "@/images/1f44e.svg";
+import lolFace from "@/images/1f602.svg";
+import pukeFace from "@/images/1f922.svg";
+import disappointed from "@/images/1f611.svg";
 
 import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
@@ -17,8 +25,29 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 ---
 
+<style>
+  .emoji-label {
+    @apply cursor-pointer bg-zinc-200 p-1 rounded-full;
+  }
+  .emoji-input {
+    display: none;
+  }
+  .emoji-input:checked + .emoji-label {
+    @apply cursor-pointer bg-zinc-200 p-1 rounded-full outline outline-1;
+  }
+</style>
+
 <Layout title="log101">
   <Header />
   <Post post={entry} componentType="full" />
+  <div
+    class="flex flex-row"
+    hx-get="http://localhost:8000/forms/emoji"
+    hx-trigger="load"
+    hx-swap="innerHTML"
+  >
+  </div>
   <Footer />
+
+  <script></script>
 </Layout>
diff --git a/src/styles/main.css b/src/styles/main.css
index 7ecf89c..78cb1ef 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -4,16 +4,20 @@
 :root {
   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
   font-size: 18px;
+
   @media (min-width: 768px) {
     font-size: 20px;
   }
-  background-color: #f5fffa;
 }
 
 * {
   margin: 0;
 }
 
+body {
+  background-color: #f5fffa;
+}
+
 @layer components {
   .posts {
     @apply flex flex-col gap-10 md:gap-8;