feat: draw user-generated text

sicamp · May 31, 2024 · 1021704 · 1021704
1 parent 5839689
commit 1021704
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -7,14 +7,25 @@
     </head>
     <body>
         <div id="app">
-            <svg
-                class="cover"
-                viewBox="0 0 1280 720"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <rect class="background" width="100%" height="100%" />
-                <text class="title" x="600" y="360" text-anchor="middle"></text>
-            </svg>
+            <form class="settings" action="#">
+                <label for="title">Title:</label>
+                <textarea id="title" rows="8">Hello world</textarea>
+            </form>
+            <div class="preview">
+                <svg
+                    class="cover"
+                    viewBox="0 0 1280 720"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <rect class="background" width="100%" height="100%" />
+                    <text
+                        class="title"
+                        x="600"
+                        y="360"
+                        text-anchor="middle"
+                    ></text>
+                </svg>
+            </div>
         </div>
         <script type="module" src="/src/main.ts"></script>
     </body>

diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,2 @@
+export const BACKGROUND = "#343a42";
+export const TEXT_COLOR = "#fff";
diff --git a/src/main.ts b/src/main.ts
@@ -9,10 +9,22 @@ if (!svg) {
     throw new Error("Cannot find SVG");
 }
 
-const cover = new SvgBuilder(svg);
+const inputTextArea = document.querySelector<HTMLTextAreaElement>("textarea");
+
+if (!inputTextArea) {
+    throw new Error("No text area");
+}
 
-cover.setBackground(BACKGROUND).setTitle({
-    text: `Hello\nworld`,
-    color: TEXT_COLOR,
-    fontSize: 80,
+inputTextArea.addEventListener("input", () => {
+    cover.setTitle({
+        text: inputTextArea.value,
+        color: TEXT_COLOR,
+        fontSize: 80,
+    });
 });
+
+const cover = new SvgBuilder(svg);
+
+cover
+    .setBackground(BACKGROUND)
+    .setTitle({ text: inputTextArea.value, color: TEXT_COLOR, fontSize: 80 });
diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,44 @@
+:root {
+    --content-gap: 20px;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 #app {
-    max-width: 520px;
+    display: flex;
+}
+
+.settings {
+    padding: var(--content-gap);
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+}
+
+label {
+    margin-bottom: 5px;
+}
+
+input,
+select,
+textarea {
+    padding: 5px;
+    margin-bottom: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.preview {
+    padding: var(--content-gap);
+    flex-grow: 1;
 }
 
 svg {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const BACKGROUND = "#343a42";
		export const TEXT_COLOR = "#fff";