feat: add basic screen size selection + update readme

README.md

@@ -1,3 +1,10 @@
+<h1 align="center">marilena</h1>
+<p align="center">a tool to build emails with cool stuff like mjml and different template engine like handlebars or eta.js</p>
+
+<p align="center">
+  <img alt="version" src="https://img.shields.io/npm/v/marilena.svg" />
+</p>
+
 ## The problem
 
 We know emails are `VERY HARD` to develop from scratch. Even if there are tools like Maiject, SendPulse, MailerSend, Stripo.email etc (maybe with a good drag-n-drop UI) sometimes you find yourself in one of the following cases:

src/client/index.css

@@ -34,3 +34,17 @@ body {
   right: 1rem;
   top: 1rem;
 }
+
+#email-frame {
+  transition: width 200ms ease-in-out;
+}
+
+.email-frame-container,
+.frame-settings {
+  display: flex;
+  justify-content: center;
+}
+
+.frame-settings {
+  margin: 1rem 0;
+}

src/client/pages/Email.tsx

@@ -6,13 +6,16 @@ import type { Params } from "../../routes/post-send-email.js";
 import ReactModal from "react-modal";
 import { SerializedConfig } from "src/routes/get-config.js";
 
-let socket: WebSocket;
+// let socket: WebSocket;
 export const Email = () => {
   let { emailName, locale } = useParams();
-  const formRef = useRef<HTMLIFrameElement>(null);
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const socketRef = useRef<WebSocket>();
   const [isModalOpen, setModalOpen] = useState(false);
   const [sendTo, setSendTo] = useState("");
   const [fillFakeMetaData, setFillFakeMetaData] = useState(false);
+  const [screenMode, setScreenMode] = useState<"DEKSTOP" | "MOBILE">("DEKSTOP");
+  const screenSize = screenMode === "DEKSTOP" ? 800 : 375;
 
   const { data: config } = useQuery<SerializedConfig>("getConfig", () =>
     fetch("/api/config").then((r) => r.json()),
@@ -36,22 +39,25 @@ export const Email = () => {
     document.title = `${emailName} - ${locale}`;
 
     // setup socket
-    socket = new WebSocket(`ws://localhost:8080`);
+    socketRef.current = new WebSocket(`ws://localhost:${SERVER_PORT}`);
 
-    socket.addEventListener("open", (event) => {
+    socketRef.current.addEventListener("open", (event) => {
       console.log("socket open");
     });
     // Listen for messages
-    socket.addEventListener("message", (event) => {
+    socketRef.current.addEventListener("message", (event) => {
       const message = event.data;
       if (message === "need_refresh") {
-        formRef.current?.contentWindow?.location.reload();
+        frameRef.current?.contentWindow?.location.reload();
       }
     });
 
     return () => {
-      if (socket.readyState === WebSocket.OPEN) {
-        socket.close();
+      if (
+        !!socketRef.current &&
+        socketRef.current.readyState === WebSocket.OPEN
+      ) {
+        socketRef.current.close();
       }
     };
   }, []);
@@ -69,6 +75,13 @@ export const Email = () => {
     }
   }, [config]);
 
+  useEffect(() => {
+    const iframe = frameRef.current;
+    if (iframe) {
+      iframe.style.width = `${screenSize}px`;
+    }
+  }, [screenSize]);
+
   function sendEmail() {
     if (emailName && locale && config?.sendTestOptions?.to) {
       const params = {
@@ -94,18 +107,27 @@ export const Email = () => {
     setFillFakeMetaData(e.target.checked);
   }
 
+  const setScreen = (screen: "DEKSTOP" | "MOBILE") =>
+    function handleChangeFillFakeData() {
+      setScreenMode(screen);
+    };
+
   return (
     <div className="page-wrapper">
+      <div className="frame-settings">
+        <button onClick={setScreen("DEKSTOP")}>DEKSTOP</button>
+        <button onClick={setScreen("MOBILE")}>MOBILE</button>
+        <span>{screenSize}px</span>
+      </div>
       <div className="email-frame-container">
         <iframe
           id="email-frame"
-          ref={formRef}
+          ref={frameRef}
           src={`/api/email-list/${emailName}/${locale}?fillFakeMetaData=${String(
             fillFakeMetaData,
           )}`}
         ></iframe>
       </div>
-
       <div className="send-to">
         <input type="email" placeholder={sendTo} onChange={handleChangeEmail} />
         <button onClick={sendEmail}>
@@ -124,7 +146,6 @@ export const Email = () => {
           <label htmlFor="scales">Fill with fake data</label>
         </div>
       </div>
-
       <ReactModal isOpen={isModalOpen}>
         <div className="send-to__modal">
           <button onClick={closeModal} className="">

src/create-example/create-config.ts

@@ -4,7 +4,7 @@ import { CONFIG_FILE_NAME } from "../const.js";
 
 const config = `
 import path from "node:path";
-import nodemailer from 'nodemailer'
+import nodemailer from "nodemailer"
 /**
  * this is of config file. Is used only inside playground
  */