feat: refining the project and adding a qr-code api

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Salvatore Laisa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,16 +1,43 @@
-# Fresh project
+# sl-utils
 
-Your new Fresh project is ready to go. You can follow the Fresh "Getting
-Started" guide here: https://fresh.deno.dev/docs/getting-started
+> A small collection of utilities for myself 🤓
 
-### Usage
+https://sl-utils.deno.dev/
 
-Make sure to install Deno: https://deno.land/manual/getting_started/installation
+Some simple and small APIs to make my life easier.
 
-Then start the project:
+## Tech stack
+
+Built on top of:
+
+- [Deno](https://deno.land/) - Typescript native runtime
+- [Fresh](https://fresh.deno.dev/) - 1st party Web framework
+
+and some modules:
+
+- [qrcode](https://jsr.io/@libs/qrcode)
+
+published on [Deno Deploy](https://deno.com/deploy) free tier.
+
+## How to use
+
+Make sure to install Deno on your machine: https://deno.land/manual/getting_started/installation
+
+Then, clone the repository:
 
 ```
-deno task start
+$ git clone https://github.com/salvatorelaisa/sl-utils.git
+$ cd sl-utils
+```
+
+Start the project:
+
+```
+$ deno task start
 ```
 
 This will watch the project directory and restart as necessary.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

components/Footer.tsx

@@ -0,0 +1,22 @@
+export const Footer = () => {
+  return (
+    <footer>
+      <p class="text-xs text-gray-600">
+        Made with ❤️ by{" "}
+        <a
+          class="underline text-blue-500"
+          href="https://github.com/moebiusmania"
+        >
+          Salvatore Laisa
+        </a>{" "}
+        <span class="text-gray-600">·</span>{" "}
+        <a
+          class="underline text-blue-500"
+          href="https://github.com/moebiusmania/sl-utils"
+        >
+          Source Code
+        </a>
+      </p>
+    </footer>
+  );
+};

components/Hero.tsx

@@ -0,0 +1,19 @@
+export const Hero = () => {
+  return (
+    <>
+      <figure class="overflow-hidden mb-4">
+        <img
+          src="sl.png"
+          alt=""
+          class="w-24 h-24 object-cover border border-gray-300 rounded-full mx-auto"
+        />
+      </figure>
+      <h1 class="text-4xl md:text-5xl font-bold mb-4">
+        sl-utils
+      </h1>
+      <p class="text-lg md:text-xl text-gray-600">
+        A small collection of utilities for myself 🤓
+      </p>
+    </>
+  );
+};

deno.json

@@ -23,6 +23,7 @@
   "nodeModulesDir": "auto",
   "imports": {
     "$fresh/": "https://deno.land/x/fresh@1.7.3/",
+    "@libs/qrcode": "jsr:@libs/qrcode@^2.0.0",
     "preact": "https://esm.sh/preact@10.22.0",
     "preact/": "https://esm.sh/preact@10.22.0/",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",

fresh.gen.ts

@@ -5,6 +5,7 @@
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $api_password from "./routes/api/password.ts";
+import * as $api_qr_code from "./routes/api/qr-code.ts";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $index from "./routes/index.tsx";
 
@@ -15,6 +16,7 @@ const manifest = {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/api/password.ts": $api_password,
+    "./routes/api/qr-code.ts": $api_qr_code,
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/index.tsx": $index,
   },

routes/_app.tsx

@@ -7,6 +7,7 @@ export default function App({ Component }: PageProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>sl-utils</title>
         <link rel="stylesheet" href="/styles.css" />
+        <link rel="icon" href="/sl.png" />
       </head>
       <body>
         <Component />

routes/api/qr-code.ts

@@ -0,0 +1,18 @@
+import { qrcode } from "@libs/qrcode";
+
+export const handler = (_req: Request): Response => {
+  const { searchParams } = new URL(_req.url);
+  const url = searchParams.get("url");
+
+  if (!url) {
+    return new Response(
+      "URL is required: add '?url=<url> in the address bar'",
+      { status: 400 },
+    );
+  }
+
+  const qr = qrcode(url, { output: "svg" });
+  return new Response(qr, {
+    headers: { "Content-Type": "image/svg+xml" },
+  });
+};

routes/index.tsx

@@ -1,31 +1,25 @@
 import { Code } from "../components/Code.tsx";
+import { Footer } from "../components/Footer.tsx";
+import { Hero } from "../components/Hero.tsx";
 
 const data = [
   {
     endpoint: "/api/password",
     methods: "GET",
     description: "Generate a random password",
   },
+  {
+    endpoint: "/api/qr-code",
+    methods: "GET",
+    description: "Create a QR code for a given URL",
+  },
 ];
 
 export default function Home() {
   return (
     <main class="min-h-screen flex items-center justify-center p-4">
       <div class="max-w-2xl w-full mx-auto text-center">
-        {/* center the image and add a light border */}
-        <figure class="overflow-hidden mb-4">
-          <img
-            src="sl.png"
-            alt=""
-            class="w-24 h-24 object-cover border border-gray-200 rounded-full mx-auto"
-          />
-        </figure>
-        <h1 class="text-4xl md:text-5xl font-bold mb-4">
-          sl-utils
-        </h1>
-        <p class="text-lg md:text-xl text-gray-600">
-          A small collection of utilities for myself 🤓
-        </p>
+        <Hero />
         <hr class="my-6 border-none" />
         <table class="w-full text-center border-collapse border-spacing-0 border-gray-200">
           <thead>
@@ -38,17 +32,19 @@ export default function Home() {
           <tbody>
             {data.map((item) => (
               <tr>
-                <td>
+                <td class="py-1">
                   <Code>
                     <a href={item.endpoint}>{item.endpoint}</a>
                   </Code>
                 </td>
-                <td>{item.methods}</td>
-                <td>{item.description}</td>
+                <td class="py-1">{item.methods}</td>
+                <td class="py-1">{item.description}</td>
               </tr>
             ))}
           </tbody>
         </table>
+        <hr class="my-6 border-none" />
+        <Footer />
       </div>
     </main>
   );