From 59f1c7db6ef64eb5283950cc100533817264beb7 Mon Sep 17 00:00:00 2001
From: Wolvan <wolvan1@gmail.com>
Date: Sun, 30 Jan 2022 17:46:59 +0100
Subject: [PATCH] Appease crawlers and embbeders

`<meta>` tags have been added to relay information for websites trying
to pull information from the page (like discord) as well as web crawlers
to index the page.
---
 frontend/html/index.html     | 15 ++++++++++++++-
 frontend/html/poll.html      | 17 +++++++++++++++--
 frontend/html/result.html    | 17 +++++++++++++++--
 frontend/static/css/main.css |  8 ++++++--
 src/frontend.ts              | 11 ++++++++---
 src/main.ts                  |  5 +++++
 6 files changed, 63 insertions(+), 10 deletions(-)
diff --git a/frontend/html/index.html b/frontend/html/index.html
index f4b52ae..2b9a233 100644
--- a/frontend/html/index.html
+++ b/frontend/html/index.html
@@ -4,6 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ TITLE }}</title>
+    
+    <meta name="description" content="Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ TITLE }}" />
+    <meta property="og:description" content="Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!" />
+    <meta property="og:url" content="{{ CANONICAL_HOST }}" />
+    <meta property="og:image" content="" />
+    <meta property="og:site_name" content="Poll.Horse" />
+    <meta content="#FFD756" data-react-helmet="true" name="theme-color" />
+    
+    <link rel="canonical" href="{{ CANONICAL_HOST }}" />
+    <meta name=”robots” content=”index,nofollow”>
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
@@ -18,7 +31,7 @@
 <body>
     <header>
         <h1>Poll.horse</h1>
-        <h3>Make voting on things simpler</h3>
+        <h2>Make voting on things simpler</h2>
     </header>
     <main>
         <section class="error {{ FORM_SUBMISSION_ERROR_SHOWN_CLASS }}">
diff --git a/frontend/html/poll.html b/frontend/html/poll.html
index 72e4396..d3ff2ae 100644
--- a/frontend/html/poll.html
+++ b/frontend/html/poll.html
@@ -4,6 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ TITLE }}</title>
+    
+    <meta name="description" content="{{ POLL_META_DESCRIPTION }}">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ TITLE }}" />
+    <meta property="og:description" content="{{ POLL_META_DESCRIPTION }}" />
+    <meta property="og:url" content="{{ CANONICAL_HOST }}" />
+    <meta property="og:image" content="" />
+    <meta property="og:site_name" content="Poll.Horse" />
+    <meta content="#FFD756" data-react-helmet="true" name="theme-color" />
+
+    <link rel="canonical" href="{{ CANONICAL_HOST }}" />
+    <meta name=”robots” content=”noindex,nofollow”>
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
@@ -27,7 +40,7 @@
 <body>
     <header>
         <h1><a href="/">Poll.horse</a></h1>
-        <h3>Make voting on things simpler</h3>
+        <h2>Make voting on things simpler</h2>
     </header>
     <main>
         <section class="error {{ FORM_SUBMISSION_ERROR_SHOWN_CLASS }}">
@@ -49,7 +62,7 @@
                     <a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
                 </section>
             </form>
-            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
+            <aside id="qrcode"><img alt="QR Code to voting page" src="{{ QR_CODE }}"></aside>
         </section>
     </main>
     <footer>
diff --git a/frontend/html/result.html b/frontend/html/result.html
index 74441a1..328ae42 100644
--- a/frontend/html/result.html
+++ b/frontend/html/result.html
@@ -4,6 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ TITLE }}</title>
+
+    <meta name="description" content="{{ POLL_META_DESCRIPTION }}">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ TITLE }}" />
+    <meta property="og:description" content="{{ POLL_META_DESCRIPTION }}" />
+    <meta property="og:url" content="{{ CANONICAL_HOST }}" />
+    <meta property="og:image" content="" />
+    <meta property="og:site_name" content="Poll.Horse" />
+    <meta content="#FFD756" data-react-helmet="true" name="theme-color" />
+
+    <link rel="canonical" href="{{ CANONICAL_HOST }}" />
+    <meta name=”robots” content=”noindex,nofollow”>
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
@@ -21,7 +34,7 @@
 <body>
     <header>
         <h1><a href="/">Poll.horse</a></h1>
-        <h3>Make voting on things simpler</h3>
+        <h2>Make voting on things simpler</h2>
     </header>
     <main>
         <section class="poll-id">ID: {{ POLL_ID }}</section>
@@ -37,7 +50,7 @@
                 <a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
             </section>
             <aside id="chart"></aside>
-            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
+            <aside id="qrcode"><img alt="QR Code to voting page" src="{{ QR_CODE }}" crossorigin></aside>
         </section>
     </main>
     <footer>
diff --git a/frontend/static/css/main.css b/frontend/static/css/main.css
index e7dbd4c..c6b7026 100644
--- a/frontend/static/css/main.css
+++ b/frontend/static/css/main.css
@@ -21,6 +21,10 @@ body {
     font-family: 'Caveat', cursive;
 }
 
+h2 {
+    font-size: 1.17em;
+}
+
 input[type="text"] {
     width: 100%;
     height: 100%;
@@ -197,7 +201,7 @@ main .notepad .poll-footer button {
     height: 50px;
     border-radius: 10px;
     border: none;
-    background-color: #a8a8a8;
+    background-color: #404040;
     cursor: pointer;
     font-size: 1.25em;
     transition: background-color 0.2s;
@@ -206,7 +210,7 @@ main .notepad .poll-footer button {
 }
 main .notepad .poll-footer input[type="submit"]:hover,
 main .notepad .poll-footer button:hover {
-    background-color: #b6b6b6;
+    background-color: #707070;
 }
 
 #submit-button {
diff --git a/src/frontend.ts b/src/frontend.ts
index 4a9fbc8..d008c5e 100644
--- a/src/frontend.ts
+++ b/src/frontend.ts
@@ -58,9 +58,9 @@ const defaultReplacements = {
     "DEVELOPER_CONTACT_INFO": "developer@poll.horse",
     "FOOTER_COPYRIGHT": `© ${ (new Date()).getFullYear() } Based Department`,
     "FOOTER_LINKS": `
-        <li><a href="https://github.com/Wolvan/poll.horse" target="_blank">Github Repo</a></li>
-        <li><a href="https://www.mppp.horse/" target="_blank">/mppp/ - Mass Production plushies</a></li>
-        <li><a href="https://www.pon3.stream/" target="_blank">Pon3.Stream</a></li>
+        <li><a href="https://github.com/Wolvan/poll.horse" target="_blank" rel="noreferrer">Github Repo</a></li>
+        <li><a href="https://www.mppp.horse/" target="_blank" rel="noreferrer">/mppp/ - Mass Production plushies</a></li>
+        <li><a href="https://www.pon3.stream/" target="_blank" rel="noreferrer">Pon3.Stream</a></li>
     `,
     "SYSTEM_VERSION": ((): string => {
         try {
@@ -149,6 +149,8 @@ export default function init(router: Router): void {
                 "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
                 "POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64"),
                 "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
+                "CANONICAL_HOST": req.protocol + "://" + (req.headers.host || "") + "/" + id + "/r",
+                "POLL_META_DESCRIPTION": xss(poll.title || "Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!").substring(0, 150),
                 "CORS_SCRIPT_NONCE": res.locals.cspNonce
             });
         } catch (error) {
@@ -187,6 +189,8 @@ export default function init(router: Router): void {
                 "FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
                 "FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "",
                 "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
+                "CANONICAL_HOST": req.protocol + "://" + (req.headers.host || "") + "/" + id,
+                "POLL_META_DESCRIPTION": xss(poll.title || "Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!").substring(0, 150),
                 "CORS_SCRIPT_NONCE": res.locals.cspNonce
             });
         } catch (error) {
@@ -221,6 +225,7 @@ export default function init(router: Router): void {
             "FORM_OPTION_DIVS": pollOptionDivs,
             "MAX_POLL_OPTIONS": MAX_POLL_OPTIONS,
             "MAX_CHARACTER_LENGTH": MAX_CHARACTER_LENGTH,
+            "CANONICAL_HOST": req.protocol + "://" + (req.headers.host || ""),
             "CORS_SCRIPT_NONCE": res.locals.cspNonce
         });
     });
diff --git a/src/main.ts b/src/main.ts
index 27687ce..f10623c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -78,6 +78,11 @@ async function main(): Promise<void> {
         await frontend.default(frontendRouter);
 
         app.use("/static", express.static(resolve(__dirname, "../frontend/static")));
+        app.get("/robots.txt", (req, res) => res.send(`
+            User-Agent: *
+            Allow: /$
+            Disallow: /
+        `));
         app.use("/", frontendRouter);
     }
 
