easy-starter 2.0.0 → 2.1.0

package/template/server/index.tsx

@@ -25,6 +25,10 @@ import { UserProfile } from "../types";
 import puppeteer from "puppeteer";
 // --- OGIMAGE END ---
 
+// --- RESIZER START ---
+import { expressImageResizer } from "easy-image-resizer";
+// --- RESIZER END ---
+
 import App from "../src/App";
 import { API, Database } from "../types";
 
@@ -69,21 +73,21 @@ const authServer = new EasyLoginServer<UserProfile>({
     jwtSecret: process.env.JWT_SECRET || "fallback-secret-key-change-me",
     secureCookies: process.env.NODE_ENV === "production",
     db: {
-        insertUser: async (user) => insert("user", user),
-        getUserById: async (id) => select("user", id),
-        getUserByMail: async (mail) => {
+        insertUser: async (user: any) => insert("user", user),
+        getUserById: async (id: string) => select("user", id),
+        getUserByMail: async (mail: string) => {
             const users = await selectArray("user");
-            return users.find(u => u.mail.toLowerCase() === mail.toLowerCase()) || null;
+            return users.find((u: any) => u.mail.toLowerCase() === mail.toLowerCase()) || null;
         },
-        getUserByRecoveryToken: async (token) => {
+        getUserByRecoveryToken: async (token: string) => {
             const users = await selectArray("user");
-            return users.find(u => u.passwordRecovery?.token === token) || null;
+            return users.find((u: any) => u.passwordRecovery?.token === token) || null;
         },
-        updateUser: async (id, user) => {
+        updateUser: async (id: string, user: any) => {
             await update("user", id, user);
         },
     },
-    mailSender: async (lang, mailTo, token) => {
+    mailSender: async (lang: string, mailTo: string, token: string) => {
         await sendMailForgottenPassword(lang, mailTo, token, ORIGIN);
     },
 });
@@ -92,6 +96,14 @@ const authServer = new EasyLoginServer<UserProfile>({
 authServer.registerExpressRoutes(app);
 // --- AUTH END ---
 
+// --- RESIZER START ---
+// Serve and dynamically resize images from public directory with auto-caching
+app.use(expressImageResizer({
+    sourceDir: "./public",
+    cacheDir: "./cache/images",
+}));
+// --- RESIZER END ---
+
 // Serve static files generated by the bundler (JS, CSS)
 app.use(express.static("dist"));
 // Serve any public assets (like images, fonts)
@@ -135,7 +147,7 @@ app.get("/og-image.png", async (req, res) => {
         await page.setJavaScriptEnabled(true);
         // --- NO_SSR END ---
         await page.setViewport({ width: 600, height: 500 });
-        
+
         // Render target page
         await page.goto(`${LOCALHOST}${path}`, { waitUntil: 'networkidle0' });
         const base64 = await page.screenshot({ type: "png", encoding: "base64" });
@@ -213,16 +225,16 @@ setAPIBackend<API>(app, {
         return item;
     },
     async addItem({ name, value }) {
-        const id = await insert("item", { name, value });
+        const id = await insert("item", { name, value } as any);
         return id;
     },
     async removeItem({ id }) {
         await remove("item", id);
         return true;
     },
-    
-    // --- ADMIN_NO_AUTH START ---
-    async getEasyAnalyticsData({ password, month }) {
+
+    /* --- ADMIN_NO_AUTH START --- */
+    async getEasyAnalyticsData({ password, month }: { password?: string; month: string }) {
         const validPassword = process.env.ADMIN_PASSWORD;
         if (!validPassword || password !== validPassword) {
             throw new Error("Invalid password or server error");
@@ -234,10 +246,10 @@ setAPIBackend<API>(app, {
         return [];
         // --- NO_ANALYTICS END ---
     },
-    // --- ADMIN_NO_AUTH END ---
+    /* --- ADMIN_NO_AUTH END --- */
 
     // --- ADMIN_WITH_AUTH START ---
-    async getEasyAnalyticsData({ month }, req, res) {
+    async getEasyAnalyticsData({ month }: { month: string }, req?: any, res?: any) {
         const session = await authServer.checkLogin(req!, res!);
         const user = await select("user", session.userId);
         if (!user || user.role !== "admin") {
@@ -252,43 +264,43 @@ setAPIBackend<API>(app, {
     },
     // --- ADMIN_WITH_AUTH END ---
 
-    // --- ADMIN_ERRORS_NO_AUTH START ---
-    async getEasyAnalyticsErrors({ password, month }) {
+    /* --- ADMIN_ERRORS_NO_AUTH START --- */
+    async getEasyAnalyticsErrors({ password, month }: { password?: string; month: string }) {
         const validPassword = process.env.ADMIN_PASSWORD;
         if (!validPassword || password !== validPassword) {
             throw new Error("Invalid password or server error");
         }
-        return await selectArray(`easyAnalyticsError-${month}`);
+        return await selectArray(`easyAnalyticsError-${month}` as any);
     },
-    // --- ADMIN_ERRORS_NO_AUTH END ---
+    /* --- ADMIN_ERRORS_NO_AUTH END --- */
 
     // --- ADMIN_ERRORS_WITH_AUTH START ---
-    async getEasyAnalyticsErrors({ month }, req, res) {
+    async getEasyAnalyticsErrors({ month }: { month: string }, req?: any, res?: any) {
         const session = await authServer.checkLogin(req!, res!);
         const user = await select("user", session.userId);
         if (!user || user.role !== "admin") {
             throw new Error("Forbidden");
         }
-        return await selectArray(`easyAnalyticsError-${month}`);
+        return await selectArray(`easyAnalyticsError-${month}` as any);
     },
     // --- ADMIN_ERRORS_WITH_AUTH END ---
 
     // --- ADMIN_USERS START ---
-    async getUsers(params, req, res) {
+    async getUsers(_params: {}, req: any, res: any) {
         const session = await authServer.checkLogin(req!, res!);
         const user = await select("user", session.userId);
         if (!user || user.role !== "admin") {
             throw new Error("Forbidden");
         }
         const allUsers = await selectArray("user");
-        return allUsers.map(u => ({
+        return allUsers.map((u: any) => ({
             _id: u._id,
             email: u.mail,
             name: u.name || u.profile?.name || "",
             role: u.profile?.role || u.role || "user"
         }));
     },
-    async updateUserRole({ userId, role }, req, res) {
+    async updateUserRole({ userId, role }: { userId: string; role: "admin" | "user" }, req: any, res: any) {
         const session = await authServer.checkLogin(req!, res!);
         const user = await select("user", session.userId);
         if (!user || user.role !== "admin") {
@@ -299,8 +311,8 @@ setAPIBackend<API>(app, {
             throw new Error("User not found");
         }
         targetUser.role = role;
-        targetUser.profile = targetUser.profile || { name: targetUser.name || "", role: "user" };
-        targetUser.profile.role = role;
+        (targetUser as any).profile = (targetUser as any).profile || { name: (targetUser as any).name || "", role: "user" };
+        (targetUser as any).profile.role = role;
         await update("user", userId, targetUser);
         return true;
     },
@@ -308,12 +320,12 @@ setAPIBackend<API>(app, {
 });
 
 // --------------------------------- SEO ---------------------------------------
-app.get("/robots.txt", (_, res) => {
+app.get("/robots.txt", (_: express.Request, res: express.Response) => {
     res.type("text/plain");
     res.send(`User-agent: *\nAllow: /\n\nSitemap: ${ORIGIN}/sitemap.xml`);
 });
 
-app.get("/sitemap.xml", async (_, res) => {
+app.get("/sitemap.xml", async (_: express.Request, res: express.Response) => {
     const sitemap = [{
         url: ORIGIN + "/",
         lastModified: new Date().toISOString().slice(0, 10),
@@ -333,7 +345,7 @@ app.get("/sitemap.xml", async (_, res) => {
 
 // --------------------------------- SSR ---------------------------------------
 // --- SSR START ---
-app.get(/.*/, async (req, res) => {
+app.get(/.*/, async (req: express.Request, res: express.Response) => {
     try {
         const indexHtml = await readFile(INDEX_HTML_PATH, "utf-8");
         const html = await renderToHTML(ORIGIN, req.url, indexHtml, <App />);
@@ -346,7 +358,7 @@ app.get(/.*/, async (req, res) => {
 });
 // --- SSR END ---
 // --- NO_SSR START ---
-app.get(/.*/, async (req, res) => {
+app.get(/.*/, async (req: express.Request, res: express.Response) => {
     res.sendFile(INDEX_HTML_PATH);
 });
 // --- NO_SSR END ---

package/template/src/Router.tsx

@@ -15,7 +15,7 @@ import ResetPassword from "./pages/ResetPassword";
 
 export default function AppRouter() {
     return <Router
-        renderPage={({ path }) => {
+        renderPage={({ path }: { path: string[] }) => {
             // The 'path' variable is an array of strings representing the URL segments.
             // For example, "/users/123" would be ["users", "123"].
 
@@ -24,7 +24,7 @@ export default function AppRouter() {
 
             // --- ADMIN START ---
             if (path[0] === 'admin') return (
-                <Suspense fallback={<div style={{ padding: 40, textAlign: 'center' }}>Loading admin...</div>}>
+                <Suspense fallback={<div className="loading-fallback">Loading admin...</div>}>
                     <Admin path={path} />
                 </Suspense>
             );

package/template/src/components/Img.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+export type ImgProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    /** Target width in pixels */
+    w?: number | string;
+    /** Target height in pixels */
+    h?: number | string;
+    /** Max width in pixels */
+    mw?: number | string;
+    /** Max height in pixels */
+    mh?: number | string;
+    /** Max width in pixels (alias) */
+    maxWidth?: number | string;
+    /** Max height in pixels (alias) */
+    maxHeight?: number | string;
+    /** Output image format (default: "webp") */
+    format?: "webp" | "jpeg" | "png";
+    /** Output image format (alias) */
+    type?: "webp" | "jpeg" | "png";
+    /** Quality from 1 to 100 */
+    quality?: number;
+    /** Quality from 1 to 100 (alias) */
+    q?: number;
+    /** Smooth resize processing */
+    smooth?: boolean;
+    /** Smooth resize processing (alias) */
+    s?: boolean;
+};
+
+export function imgSrc(
+    src: string,
+    options: {
+        w?: number | string;
+        h?: number | string;
+        mw?: number | string;
+        mh?: number | string;
+        format?: "webp" | "jpeg" | "png";
+        quality?: number;
+        smooth?: boolean;
+    }
+): string | undefined {
+    if (!src) return src;
+
+    const targetFormat = options.format || "webp";
+
+    try {
+        const [base, queryString] = src.split("?");
+        const params = new URLSearchParams(queryString || "");
+
+        if (options.w !== undefined && !params.has("w") && !params.has("width")) {
+            params.set("w", String(options.w));
+        }
+        if (options.h !== undefined && !params.has("h") && !params.has("height")) {
+            params.set("h", String(options.h));
+        }
+        if (options.mw !== undefined && !params.has("mw") && !params.has("maxWidth")) {
+            params.set("mw", String(options.mw));
+        }
+        if (options.mh !== undefined && !params.has("mh") && !params.has("maxHeight")) {
+            params.set("mh", String(options.mh));
+        }
+        if (options.quality !== undefined && !params.has("q") && !params.has("quality")) {
+            params.set("q", String(options.quality));
+        }
+        if (options.smooth !== undefined && !params.has("s") && !params.has("smooth")) {
+            params.set("s", String(options.smooth));
+        }
+        if (targetFormat && !params.has("format") && !params.has("type") && !params.has("ext")) {
+            params.set("format", targetFormat);
+        }
+
+        const finalQuery = params.toString();
+        return finalQuery ? `${base}?${finalQuery}` : base;
+    } catch {
+        return src;
+    }
+}
+
+/**
+ * Smart image component wrapping HTML <img> with automatic easy-image-resizer URL formatting.
+ * Defaults to WebP format with optional width/height/quality scaling options.
+ */
+export function Img({
+    src,
+    width,
+    height,
+    w,
+    h,
+    mw,
+    mh,
+    maxWidth,
+    maxHeight,
+    format,
+    type,
+    quality,
+    q,
+    smooth,
+    s,
+    ...restProps
+}: ImgProps) {
+    const finalW = w ?? width;
+    const finalH = h ?? height;
+    const finalMw = mw ?? maxWidth;
+    const finalMh = mh ?? maxHeight;
+    const finalFormat = format ?? type ?? "webp";
+    const finalQuality = q ?? quality;
+    const finalSmooth = s ?? smooth;
+
+    const finalSrc = imgSrc(src || "", {
+        w: finalW,
+        h: finalH,
+        mw: finalMw,
+        mh: finalMh,
+        format: finalFormat,
+        quality: finalQuality,
+        smooth: finalSmooth,
+    });
+
+    return <img
+        src={finalSrc}
+        width={finalW}
+        height={finalH}
+        {...restProps}
+    />;
+};
+
+export default Img;

package/template/src/pages/Index.tsx

@@ -12,18 +12,9 @@ import { UserProfile } from "../../types";
 // --- AUTH END ---
 
 export default function Index() {
-    // --- OGIMAGE START ---
-    const ogImage = typeof window !== "undefined"
-        ? `${window.location.origin}/og-image.png?path=${encodeURIComponent(window.location.pathname)}`
-        : undefined;
-    // --- OGIMAGE END ---
-
     useHead({
         title: "Welcome to easy-starter",
         description: "The ultimate foundation for your next project."
-        // --- OGIMAGE START ---
-        , image: ogImage
-        // --- OGIMAGE END ---
     });
 
     // --- AUTH START ---
@@ -69,9 +60,9 @@ export default function Index() {
     return (
         <main>
             {/* --- AUTH START --- */}
-            <div style={{ display: "flex", justifyContent: "flex-end", padding: "10px 0", borderBottom: "1px solid var(--border)", marginBottom: 20 }}>
+            <div className="auth-bar">
                 {isLoggedIn ? (
-                    <div style={{ display: "flex", alignItems: "center", gap: 15 }}>
+                    <div className="auth-user-info">
                         <span>Logged in as: <strong>{user.name} ({user.role})</strong></span>
                         <button onClick={() => loginUser(null)}>Log Out</button>
                     </div>
@@ -85,9 +76,9 @@ export default function Index() {
                 <figure></figure>
                 <h1>Welcome to easy-starter!</h1>
                 <p>The ultimate foundation for your next project.</p>
-                
+
                 {/* --- ADMIN START --- */}
-                <div style={{ marginTop: 20 }}>
+                <div className="admin-link-wrapper">
                     <Link href="/admin">
                         → Go to Admin Dashboard
                     </Link>

package/template/src/pages/NotFound.tsx

@@ -6,7 +6,7 @@ export default function NotFound() {
     useHead({ title: "404 Not Found", description: "Page you are looking for does not exist." });
 
     return (
-        <div style={{ padding: "40px", textAlign: "center", fontFamily: "sans-serif" }}>
+        <div className="not-found">
             <h1>404</h1>
             <p>Oops, page not found.</p>
             <Link href="/">Go back home</Link>

package/template/src/pages/ResetPassword.tsx

@@ -58,15 +58,15 @@ export default function ResetPasswordPage() {
     };
 
     return (
-        <main style={{ maxWidth: 450, margin: "60px auto" }}>
-            <h2 className="easy-user-auth-title" style={{ marginBottom: 20 }}>🔑 {dict.userForgottenPasswordChange}</h2>
+        <main className="reset-password-main">
+            <h2 className="easy-user-auth-title">🔑 {dict.userForgottenPasswordChange}</h2>
             
             {error && !token && (
-                <div className="easy-user-auth-alert" style={{ marginBottom: 20 }}>{error}</div>
+                <div className="easy-user-auth-alert">{error}</div>
             )}
 
             {success ? (
-                <div className="easy-user-auth-alert" style={{ background: "rgba(16, 185, 129, 0.1)", border: "1px solid rgba(16, 185, 129, 0.2)", color: "#34d399", marginBottom: 20 }}>
+                <div className="easy-user-auth-alert alert-success">
                     {dict.userForgottenPasswordSuccessChange}
                 </div>
             ) : (
@@ -97,14 +97,13 @@ export default function ResetPasswordPage() {
                         </div>
 
                         {error && <div className="easy-user-auth-alert">{error}</div>}
-                        {validationError && <p className="easy-user-auth-info" style={{ color: "#ef4444" }}>{validationError}</p>}
+                        {validationError && <p className="easy-user-auth-info text-error">{validationError}</p>}
 
-                        <div style={{ display: "flex", gap: 15, marginTop: 10 }}>
+                        <div className="btn-group">
                             <button
                                 type="submit"
                                 className="easy-user-auth-submit-btn"
                                 disabled={!!validationError || !password || !passwordAgain || loading}
-                                style={{ flex: 1 }}
                             >
                                 {loading ? "Updating..." : dict.change}
                             </button>
@@ -113,7 +112,6 @@ export default function ResetPasswordPage() {
                                 className="easy-user-auth-back-btn"
                                 onClick={() => push("/")}
                                 disabled={loading}
-                                style={{ flex: 1 }}
                             >
                                 Cancel
                             </button>