fix: dark mode, updated readme and some refinments

moebiusmania · Nov 17, 2024 · c602cc4 · c602cc4
1 parent 09b7fad
commit c602cc4
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # sl-utils
 
-> 🛠️ A small collection of utilities for myself 🤓
+> 🛠️ A collection of small utilities for myself 🤓
 
 https://sl-utils.deno.dev/
 

diff --git a/components/Code.tsx b/components/Code.tsx
@@ -2,7 +2,7 @@ import { JSX } from "preact/jsx-runtime";
 
 export const Code = ({ children }: { children: JSX.Element }) => {
   return (
-    <span class="font-mono text-sm text-gray-600 px-1 py-0.5 rounded-md bg-gray-100">
+    <span class="font-mono text-sm text-gray-600 px-1 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 dark:text-gray-400">
       {children}
     </span>
   );

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,7 +1,7 @@
 export const Footer = () => {
   return (
     <footer>
-      <p class="text-xs text-gray-600">
+      <p class="text-xs text-gray-600 dark:text-gray-400">
         Made with ❤️ by{" "}
         <a
           class="underline text-blue-500"

diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -1,18 +1,20 @@
-export const Hero = () => {
+export const Hero = ({ isDark }: { isDark: boolean }) => {
   return (
     <>
       <figure class="overflow-hidden mb-4">
-        <img
-          src="sl.png"
-          alt="my pixel-art avatar"
-          class="w-24 h-24 object-cover border border-gray-300 rounded-full mx-auto"
-        />
+        <a href={isDark ? "/" : "/?dark"}>
+          <img
+            src="sl.png"
+            alt="my pixel-art avatar"
+            class="w-24 h-24 object-cover border border-gray-300 rounded-full mx-auto"
+          />
+        </a>
       </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 class="text-lg md:text-xl text-gray-600 dark:text-gray-400">
+        🛠️ A collection of small utilities for myself 🤓
       </p>
     </>
   );

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -1,11 +1,18 @@
 import { type PageProps } from "$fresh/server.ts";
-export default function App({ Component }: PageProps) {
+export default function App({ Component, url }: PageProps) {
+  const isDark = new URL(url.href).searchParams.has("dark");
+
   return (
-    <html>
+    <html class={isDark ? "dark" : ""}>
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>🛠️ sl-utils</title>
+        <title>sl-utils 🛠️</title>
+        <meta
+          name="description"
+          content="A collection of small utilities for myself 🤓"
+        />
+        <meta name="author" content="Salvatore Laisa" />
         <link rel="stylesheet" href="/styles.css" />
         <link rel="icon" href="/sl.png" />
       </head>

diff --git a/routes/api/mit-license.ts b/routes/api/mit-license.ts
@@ -1,4 +1,4 @@
-export const handler = (_req: Request): Response => {
+export const handler = (): Response => {
   const year = new Date().getFullYear();
   return new Response(
     `MIT License

diff --git a/routes/api/password.ts b/routes/api/password.ts
@@ -44,6 +44,7 @@ export const handler = (_req: Request): Response => {
   const { searchParams } = new URL(_req.url);
   const options = Object.fromEntries(searchParams.entries());
   const password = generatePassword(options);
-  const body = { password };
-  return new Response(JSON.stringify(body));
+  return new Response(password, {
+    headers: { "Content-Type": "text/plain" },
+  });
 };
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -22,9 +22,9 @@ const data = [
 
 export default function Home() {
   return (
-    <main class="min-h-screen flex items-center justify-center p-4">
+    <main class="min-h-screen flex items-center justify-center p-4 dark:bg-black dark:text-white">
       <div class="max-w-2xl w-full mx-auto text-center">
-        <Hero />
+        <Hero isDark={false} />
         <hr class="my-6 border-none" />
         <table class="w-full text-center border-collapse border-spacing-0 border-gray-200">
           <thead>

diff --git a/static/sl.png b/static/sl.png
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import { type Config } from "tailwindcss";
 
 export default {
+  darkMode: "class",
   content: [
     "{routes,islands,components}/**/*.{ts,tsx}",
   ],