docs: extend readme

README.md

@@ -8,7 +8,7 @@ https://www.mvdam.dev/email-alias-generator/
 
 Given that you use a catch all e-mail domain you can:
 
-1. Enter your e-mail domain. For example: my-domain.com
-2. Enter the service you want to generate an adress for. For example: instagram
-3. The suggested alias is shown below the form. For example: [email protected]
-4. Press <enter> to copy the alias to the clipboard or click the "Copy to clipboard" button
+1. Enter your e-mail domain. For example: `my-domain.com`. This domain will be stored in LocalStorage for convience.
+2. Enter the service you want to generate an adress for. For example: `instagram`.
+3. The suggested alias is shown below the form. For example: `instagram.zv4af@my-domain.com`.
+4. Press <enter> to copy the alias to the clipboard or click the "Copy to clipboard" button.

src/App.tsx

@@ -26,40 +26,47 @@ function App() {
   };
 
   return (
-    <form onSubmit={onSubmit}>
-      <h1>E-mail alias generator</h1>
-      <div className="input-row">
-        <label htmlFor="domain-input">E-mail domain</label>
-        <input
-          id="domain-input"
-          type="text"
-          value={domain}
-          onChange={(e) => setEmailDomain(e.target.value)}
-        />
-      </div>
-      <div className="input-row">
-        <label htmlFor="service-input">Service</label>
-        <input
-          id="service-input"
-          type="text"
-          value={service}
-          autoFocus={true}
-          autoComplete="off"
-          autoCorrect="off"
-          onChange={(e) => setService(e.target.value)}
-        />
-      </div>
-      <div>
-        {domain && service ? (
-          <>
-            <h3>{alias}</h3>
-            <button type="submit" onClick={() => copyToClipboard(alias)}>
-              Copy to clipboard
-            </button>
-          </>
-        ) : null}
-      </div>
-    </form>
+    <>
+      <form onSubmit={onSubmit}>
+        <h1>E-mail alias generator</h1>
+        <div className="input-row">
+          <label htmlFor="domain-input">E-mail domain</label>
+          <input
+            id="domain-input"
+            type="text"
+            value={domain}
+            onChange={(e) => setEmailDomain(e.target.value)}
+          />
+        </div>
+        <div className="input-row">
+          <label htmlFor="service-input">Service</label>
+          <input
+            id="service-input"
+            type="text"
+            value={service}
+            autoFocus={true}
+            autoComplete="off"
+            autoCorrect="off"
+            onChange={(e) => setService(e.target.value)}
+          />
+        </div>
+        <div>
+          {domain && service ? (
+            <>
+              <h3>{alias}</h3>
+              <button type="submit" onClick={() => copyToClipboard(alias)}>
+                Copy to clipboard
+              </button>
+            </>
+          ) : null}
+        </div>
+      </form>
+      <small>
+        <a href="https://github.com/mvdam/email-alias-generator">
+          GitHub source
+        </a>
+      </small>
+    </>
   );
 }
 

src/index.css

@@ -22,6 +22,16 @@ a:hover {
   color: #535bf2;
 }
 
+small a {
+  color: white;
+  text-decoration: underline;
+}
+
+small {
+  display: block;
+  margin-top: 20px;
+}
+
 body {
   margin: 0;
   display: flex;