mevebu 1.9.0 → 1.11.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**188 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**198 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
 
 A private toolbox for the small jobs that do not deserve a whole app: format JSON, decode a JWT, make a password, build a cron line, pick a color, scan a QR code, and a lot more.
 
@@ -10,7 +10,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 [![npm downloads](https://img.shields.io/npm/dm/mevebu?color=2ea44f)](https://www.npmjs.com/package/mevebu)
 [![License: MIT](https://img.shields.io/github/license/mevebu/mevebu?color=blue)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/mevebu/mevebu?style=flat&color=yellow)](https://github.com/mevebu/mevebu/stargazers)
-![Tools](https://img.shields.io/badge/tools-188-brightgreen)
+![Tools](https://img.shields.io/badge/tools-198-brightgreen)
 ![Privacy](https://img.shields.io/badge/privacy-100%25%20in--browser-blue)
 
 [Quick start](#quick-start) · [What's inside](#whats-inside) · [Privacy](#privacy-by-design) · [Host it yourself](#host-it-yourself) · [Development](#development) · [FAQ](#faq)
@@ -23,7 +23,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 
 ## What is mevebu?
 
-mevebu is a collection of **188 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
+mevebu is a collection of **198 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
 
 Think of it as a clean, private alternative to the usual "free online tools" websites. There are no accounts, no ads in your way, no uploads, and no tracking. Your text, passwords, tokens, and files stay on your device.
 
@@ -65,14 +65,14 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **188 tools in 20 categories**. Here is the full breakdown:
+mevebu has **198 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
 | Random             |     3 |
 | Passwords and keys |    10 |
 | Developer          |    21 |
-| Convert            |     5 |
+| Convert            |    15 |
 | Text and data      |    14 |
 | Daily use          |     8 |
 | Math               |    17 |
@@ -89,7 +89,7 @@ mevebu has **188 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **188** |
+| **Total**          | **198** |
 
 The counts come straight from the tool registry, so this table and the app never drift apart.
 
@@ -109,7 +109,7 @@ Browse everything from the home page or by category, or just press `Ctrl+K` and
 
 ## Privacy by design
 
-mevebu is built so that your data has nowhere to go. Every tool is a static HTML file, a tiny JavaScript module, and a Lucide icon. There is no server side code, no analytics, and no API key.
+mevebu is built so that your data has nowhere to go. Every tool is a static HTML file and a small JavaScript module. Icons are Lucide, brand marks are Simple Icons, and the libraries that do real work (mathjs, pdf-lib, pdf.js, jsQR) are vendored into the folder rather than fetched from a CDN. There is no server side code, no analytics, and no API key.
 
 When you paste a password, a token, or a CSV into a tool:
 
@@ -148,6 +148,7 @@ cd mevebu
 npm install
 npm run css      # build the stylesheet from tailwind.src.css
 npm run icons    # regenerate the vendored Lucide icon set
+npm run social   # regenerate the vendored Simple Icons brand marks
 npm start        # serve the static folder on http://localhost:5555
 ```
 
@@ -179,7 +180,7 @@ That is all. The catalog, search, breadcrumbs, and category pages pick it up aut
 ## FAQ
 
 **What is mevebu?**
-mevebu is a free, open source collection of 188 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
+mevebu is a free, open source collection of 198 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
 
 **Is mevebu really free?**
 Yes. It is MIT licensed, with no paid tier, no account, and no usage limits.

package/mevebu/app/mevebu.js

@@ -2,6 +2,7 @@
 // wiring, the home page, the tool index, and the bench a tool mounts into.
 
 import { CATEGORIES, TOOLS, getTool, getCategory, toolsInCategory, toolHref } from "../libs/js/registry.js";
+import { socialIcon } from "../libs/js/social-icons.js";
 import { route, start, match, currentPath, go } from "../libs/js/router.js";
 import {
   $, $$, el, icon, getFavorites, isFavorite, toggleFavorite, setTheme,
@@ -11,6 +12,28 @@ import {
 } from "../libs/js/core.js";
 
 const REPO_URL = "https://github.com/mevebu/mevebu";
+const WAITSEC_URL = "https://github.com/mevebu/waitsec";
+const ORG_URL = "https://github.com/mevebu";
+const CREATOR = {
+  name: "Ilyas Mukhlisin",
+  instagram: "https://www.instagram.com/ilyas.mukhlisin",
+  threads: "https://www.threads.com/@ilyas.mukhlisin",
+};
+
+/* One list drives the footer modal and the about page, so an account is added
+   in one place and both surfaces follow. */
+const MEVEBU_SOCIALS = [
+  { name: "GitHub", handle: "@mevebu", href: ORG_URL, icon: "github" },
+  { name: "Instagram", handle: "@mevebu01", href: "https://www.instagram.com/mevebu01", icon: "instagram" },
+  { name: "Threads", handle: "@mevebu01", href: "https://www.threads.net/@mevebu01", icon: "threads" },
+  { name: "TikTok", handle: "@mevebu01", href: "https://www.tiktok.com/@mevebu01", icon: "tiktok" },
+  { name: "Facebook", handle: "mevebu", href: "https://www.facebook.com/mevebu", icon: "facebook" },
+  { name: "YouTube", handle: "@mevebu", href: "https://www.youtube.com/@mevebu", icon: "youtube" },
+];
+const CREATOR_SOCIALS = [
+  { name: "Instagram", handle: "@ilyas.mukhlisin", href: CREATOR.instagram, icon: "instagram" },
+  { name: "Threads", handle: "@ilyas.mukhlisin", href: CREATOR.threads, icon: "threads" },
+];
 
 const NAV = [
   { path: "/", label: "Home" },
@@ -276,6 +299,46 @@ async function startVersionChip() {
   });
 }
 
+function followRow(item) {
+  return el(
+    "a",
+    {
+      class:
+        "flex items-center gap-3 rounded-r1 border border-orbit bg-deck-2 p-2.5 text-ink no-underline transition-colors duration-150 hover:border-orbit-hard hover:bg-deck",
+      href: item.href,
+      target: "_blank",
+      rel: "noopener",
+    },
+    el("span", { class: "grid size-9 flex-none place-items-center rounded-lg bg-jade-soft text-jade" }, socialIcon(item.icon, "size-[18px]")),
+    el("span", { class: "grid min-w-0 gap-0.5" },
+      el("span", { class: "text-sm font-semibold" }, item.name),
+      el("span", { class: "truncate text-2xs text-ink-3" }, item.handle)),
+    icon("external-link", "ms-auto size-4 flex-none text-ink-3")
+  );
+}
+
+function followGroup(title, items) {
+  return el(
+    "section",
+    { class: "grid gap-2" },
+    el("h3", { class: "m-0 text-2xs font-bold tracking-[0.08em] text-ink-3 uppercase" }, title),
+    el("div", { class: "grid gap-1.5" }, ...items.map(followRow))
+  );
+}
+
+function openFollow() {
+  modal({
+    label: "Follow mevebu",
+    body: [
+      modalHead("users-round", "Follow mevebu"),
+      el("p", { class: "m-0 text-sm leading-[1.6] text-ink-2" },
+        "Release notes, new tools, and the small updates in between. Pick a network."),
+      followGroup("mevebu", MEVEBU_SOCIALS),
+      followGroup(`${CREATOR.name}, creator`, CREATOR_SOCIALS),
+    ],
+  });
+}
+
 function footer() {
   // A finger needs 44px on a phone, so the whole list is a comfortable target
   // there. The desktop row stays as it was, at text height.
@@ -322,6 +385,17 @@ function footer() {
         "div",
         { class: "mt-[clamp(26px,4vw,44px)] flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-orbit pt-5 text-2xs text-ink-3" },
         el("p", { class: "m-0 flex items-center gap-2" }, "MIT licensed."),
+        el(
+          "button",
+          {
+            class:
+              "inline-flex min-h-7 cursor-pointer items-center gap-1.5 rounded-full border border-orbit bg-transparent px-2.5 py-[3px] font-sans text-2xs font-semibold text-ink-2 transition-colors duration-150 hover:border-jade hover:bg-jade-soft hover:text-jade max-[45rem]:min-h-11",
+            type: "button",
+            onclick: () => openFollow(),
+          },
+          icon("users-round", "size-3.5"),
+          "Follow us"
+        ),
         el(
           "p",
           { class: "m-0 flex items-center gap-2" },
@@ -872,16 +946,69 @@ async function toolPage(tool, category) {
 }
 
 function aboutPage() {
+  const H1 = "m-0 text-[clamp(34px,6vw,52px)] font-bold tracking-[-0.03em]";
+  const SUB = "mt-3 mb-0 max-w-[64ch] text-pretty text-md leading-[1.6] text-ink-2";
   const block = (title, ...nodes) =>
     el("section", { class: ABOUT_BLOCK }, el("h2", { class: "text-lg font-bold tracking-[-0.01em]" }, title), ...nodes);
 
+  const stat = (value, label) =>
+    el("div", { class: "grid gap-0.5 rounded-r2 border border-orbit bg-deck-2 px-4 py-3" },
+      el("span", { class: "text-2xl font-bold tracking-[-0.02em] text-ink tabular-nums" }, value),
+      el("span", { class: "text-2xs font-semibold tracking-[0.06em] text-ink-3 uppercase" }, label));
+
+  const repoCard = (name, body, href) =>
+    el("a", {
+      class: "grid content-start gap-1.5 rounded-r2 border border-orbit bg-deck p-4 no-underline transition-colors duration-150 hover:border-orbit-hard hover:bg-deck-2",
+      href,
+      target: "_blank",
+      rel: "noopener",
+    },
+      el("span", { class: "flex items-center gap-2 text-md font-bold text-ink" },
+        icon("git-branch", "size-4 flex-none text-jade"), name),
+      el("span", { class: "text-sm leading-[1.55] text-ink-2" }, body),
+      el("span", { class: "mt-1 inline-flex items-center gap-1.5 font-mono text-2xs font-semibold text-jade" },
+        href.replace("https://", ""), icon("external-link", "size-3")));
+
+  const creatorLink = (item) =>
+    el("a", {
+      class: "inline-flex min-h-11 items-center gap-2 rounded-r1 border border-orbit bg-deck px-3 text-sm font-semibold text-ink no-underline transition-colors duration-150 hover:border-orbit-hard hover:bg-deck-2",
+      href: item.href,
+      target: "_blank",
+      rel: "noopener",
+    }, socialIcon(item.icon, "size-[17px] text-jade"), item.name);
+
   document.title = "About · mevebu";
   return el(
     "div",
     { class: PAGE_NARROW },
-    el("h1", { class: LEAD }, "About mevebu"),
-    el("p", { class: LEDE },
-      `mevebu is ${TOOLS.length} small tools that run in your browser. Each one has its own page and does a single job.`),
+    el("div", { class: "flex items-start gap-4" },
+      el("img", { class: "mt-1 block size-14 flex-none", src: "./assets/logo.png", alt: "", width: "56", height: "56" }),
+      el("div", { class: "min-w-0" },
+        el("h1", { class: H1 }, "About mevebu"),
+        el("p", { class: SUB },
+          "mevebu is a GitHub organization that builds small tools for the browser. Every tool runs on your device, with no account and nothing to upload."))),
+
+    el("div", { class: "mt-7 grid grid-cols-2 gap-2.5 sm:grid-cols-4" },
+      stat(String(TOOLS.length), "Tools"),
+      stat(String(CATEGORIES.length), "Categories"),
+      stat("2", "Repositories"),
+      stat("MIT", "License")),
+
+    block("The organization",
+      el("p", { class: "m-0 leading-[1.65] text-ink-2" },
+        "Everything sits under ", el("a", { class: TEXT_LINK, href: ORG_URL, target: "_blank", rel: "noopener" }, "github.com/mevebu"),
+        ". The organization holds two repositories: Mevebu, the toolbox you are using right now, and Waitsec, a set of guardrails for coding agents.")),
+
+    block("The repositories",
+      el("div", { class: "grid gap-2.5 sm:grid-cols-2" },
+        repoCard("Mevebu", `${TOOLS.length} browser tools in one static folder. No build step on your machine, no server behind it.`, REPO_URL),
+        repoCard("Waitsec", "Guardrails for coding agents: stop first, think first, and write less code.", WAITSEC_URL))),
+
+    block("The creator",
+      el("p", { class: "m-0 leading-[1.65] text-ink-2" },
+        el("strong", { class: "font-semibold text-ink" }, CREATOR.name),
+        " designs, builds and maintains both repositories. Follow the work on Instagram or Threads."),
+      el("div", { class: "flex flex-wrap gap-2" }, ...CREATOR_SOCIALS.map(creatorLink))),
 
     block("Running it",
       el("p", {}, "Install it once from npm. The command starts a local server and opens your browser at the address it prints."),
@@ -892,7 +1019,7 @@ function aboutPage() {
       el("p", {}, "Add one object to ", el("code", { class: CODE }, "mevebu/libs/js/registry.js"), " and one file in ", el("code", { class: CODE }, "mevebu/libs/js/tools/"), ". The home page, the index, the categories, search and the route all come from that entry.")),
 
     block("Built with",
-      el("p", {}, "Hand written HTML, CSS and JavaScript, with Tailwind for the stylesheet. Icons are Lucide and the QR decoder is jsQR."),
+      el("p", {}, "Hand written HTML, CSS and JavaScript, with Tailwind for the stylesheet. The scientific calculator runs on mathjs, icons are Lucide, brand marks are Simple Icons, and the QR decoder is jsQR."),
       el("p", {}, "Source and issues: ",
         el("a", { class: TEXT_LINK, href: REPO_URL, target: "_blank", rel: "noopener" }, "github.com/mevebu/mevebu")),
       el("p", {}, copyButton(() => location.href, "Copy this page link")))