Add noscript for browsers without JS (#2592)

* Make OwncastLogo more versatile

* Add noscript tag

* Commit updated API documentation

* Show all content on vertical overflow

---------

Co-authored-by: Owncast <owncast@owncast.online>

web/components/ui/Noscript/Noscript.module.scss

@@ -0,0 +1,50 @@
+@import '../../../styles/mixins.scss';
+
+.noscript {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2em;
+  font-size: large;
+  background-color: var(--theme-color-background-main);
+  z-index: 999;
+
+  h2 {
+    margin-top: 25px;
+    margin-bottom: 5px;
+    font-weight: bold;
+    font-size: inherit;
+  }
+}
+
+// Necessary in case content y-overflows becuase
+// align-items: center would otherwise hide some
+// of the content
+.scrollContainer {
+  max-height: 100%;
+  overflow: auto;
+}
+
+.content {
+  max-width: 100%;
+  width: 70ch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 70%;
+
+  // For some weir reason, the logo isn't displayed on screens <= 767px.
+  // This coincides with the tablet breakpoint, but god knows what exactly
+  // the issue is. Since it's just a design element, just hide the logo on
+  // those smaller screens. For more information, see
+  // https://github.com/owncast/owncast/pull/2592
+  @include screen(tablet) {
+    display: none;
+  }
+}

web/components/ui/Noscript/Noscript.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo';
+import styles from './Noscript.module.scss';
+
+export const Noscript: FC = () => (
+  <noscript className={styles.noscript}>
+    <div className={styles.scrollContainer}>
+      <div className={styles.content}>
+        <OwncastLogo className={styles.logo} />
+        <br />
+        <p>
+          This website is powered by&nbsp;
+          <a href="https://owncast.online" rel="noopener noreferrer" target="_blank">
+            Owncast
+          </a>
+          .
+        </p>
+        <p>
+          Owncast uses JavaScript for playing the HTTP Live Streaming (HLS) video, and its chat
+          client. But your web browser does not seem to support JavaScript, or you have it disabled.
+        </p>
+        <p>
+          For the best experience, you should use a different browser with JavaScript support. If
+          you have disabled JavaScript in your browser, you can re-enable it.
+        </p>
+        <h2>How can I watch this stream without JavaScript?</h2>
+        <p>
+          You can open the URL of this website in your media player (such as&nbsp;
+          <a href="https://mpv.io" rel="noopener noreferrer" target="_blank">
+            mpv
+          </a>
+          &nbsp;or&nbsp;
+          <a href="https://www.videolan.org/vlc/" rel="noopener noreferrer" target="_blank">
+            VLC
+          </a>
+          ) to watch the stream.
+        </p>
+        <h2>How can I chat with the others without JavaScript?</h2>
+        <p>Currently, there is no option to use the chat without JavaScript.</p>
+      </div>
+    </div>
+  </noscript>
+);