all repos — momix @ a8fe8b4539e1497ca40aa37d7535160fba38df61

A CLI tool to manage recipes for Thermomix

style: 💄 Improve style
Tim Izzo tim@5ika.ch
Sat, 03 Jan 2026 15:00:34 +0100
commit

a8fe8b4539e1497ca40aa37d7535160fba38df61

parent

a4589ea3d5ac14f43d7a7bfff7ffb8b71b170a88

5 files changed, 46 insertions(+), 26 deletions(-)

jump to
M .env.example → .env.example 
@@ -1,1 +1,3 @@ 
-MISTRAL_APIKEY=+MISTRAL_APIKEY=
+HTTP_USER=admin
+HTTP_PASS=admin
M server.tsx → server.tsx 
@@ -1,3 +1,4 @@ 
+import "@std/dotenv/load";
 import { Hono } from "hono";
 import { getGroceryList, getRecipesList, storeRecipe } from "./services.ts";
 import db from "./db.ts";

@@ -6,17 +7,21 @@ import { AddRecipe, GroceryList, RecipesList } from "./web/tsx/components.tsx";
 import { serveStatic } from "hono/deno";
 import { basicAuth } from "hono/basic-auth";
 
+const httpUser = Deno.env.get("HTTP_USER");
+const httpPass = Deno.env.get("HTTP_PASS");
+
 const app = new Hono();
 
 app.use("/style.css", serveStatic({ path: "./web/static/style.css" }));
 
-app.use(
-  "/*",
-  basicAuth({
-    username: "admin",
-    password: "admin",
-  })
-);
+if (httpUser && httpPass)
+  app.use(
+    "/*",
+    basicAuth({
+      username: httpUser,
+      password: httpPass,
+    })
+  );
 
 app.get("/", (c) => {
   const recipes = getRecipesList(db);
M services.ts → services.ts 
@@ -6,10 +6,12 @@ export const getRecipesList = (db: DatabaseSync, ids?: number[]): Recipe[] => {
   if (ids)
     return db
       .prepare(
-        `SELECT * FROM recipes WHERE id IN (${ids.map(() => "?").join(",")})`
+        `SELECT * FROM recipes WHERE id IN (${ids
+          .map(() => "?")
+          .join(",")}) ORDER BY name`
       )
       .all(...ids);
-  else return db.prepare("SELECT * FROM recipes").all();
+  else return db.prepare("SELECT * FROM recipes ORDER BY name").all();
 };
 
 export const storeRecipe = async (db: DatabaseSync, recipeId: string) => {
M web/static/style.css → web/static/style.css 
@@ -50,7 +50,6 @@ 
 main {
   max-width: 40rem;
   margin: 0 auto;
-  padding: 2rem 0 4rem;
 }
 
 h1 {

@@ -80,6 +79,8 @@ border-radius: var(--border-radius);
   border: none;
   padding: 0.5rem 1rem;
   cursor: pointer;
+  font-weight: bold;
+  transition: all 0.2s ease;
 
   input + & {
     border-top-left-radius: 0;

@@ -121,7 +122,7 @@ background-color: color-mix(in srgb, var(--red) 20%, var(--color-bg));
   }
 }
 
-ul {
+ul:has(input[type="checkbox"]) {
   padding-left: 0;
 }
M web/tsx/layout.tsx → web/tsx/layout.tsx 
@@ -1,21 +1,31 @@ 
 import type { Child, FC } from "hono/jsx";
 import { Message } from "./components.tsx";
 
+const DocType: FC = () => {
+  const s = new String("<!DOCTYPE html>") as any;
+  s.isEscaped = true;
+  return s;
+};
+
 export const Layout: FC<{ url: string; children: Child }> = (props) => {
   return (
-    <html>
-      <head>
-        <link href="/style.css" rel="stylesheet" />
-      </head>
-      <body>
-        <main>
-          <a href="/">
-            <h1>Momix</h1>
-          </a>
-          <Message url={props.url} />
-          {props.children}
-        </main>
-      </body>
-    </html>
+    <>
+      <DocType />
+      <html>
+        <head>
+          <meta name="viewport" content="width=device-width,initial-scale=1" />
+          <link href="/style.css" rel="stylesheet" />
+        </head>
+        <body>
+          <main>
+            <a href="/">
+              <h1>Momix</h1>
+            </a>
+            <Message url={props.url} />
+            {props.children}
+          </main>
+        </body>
+      </html>
+    </>
   );
 };