feat(project): add static page

src/components/Root/Root.tsx

@@ -11,6 +11,7 @@ import Movie from '../../screens/Movie/Movie';
 import Search from '../../screens/Search/Search';
 import ErrorPage from '../ErrorPage/ErrorPage';
 import AccountModal from '../../containers/AccountModal/AccountModal';
+import About from '../../screens/About/About';
 
 type Props = {
   error?: Error | null;
@@ -36,6 +37,7 @@ const Root: FC<Props> = ({ error }: Props) => {
         <Route path="/s/:id/:slug?" component={Series} />
         <Route path="/q/:query?" component={Search} />
         <Route path="/u/:page?" component={User} />
+        <Route path="/o/about" component={About} />
       </Switch>
       <AccountModal />
     </Layout>

src/screens/About/About.module.scss

@@ -0,0 +1,37 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.about {
+  max-width: 960px;
+  margin: 24px auto;
+  padding: 16px;
+  font-size: 16px;
+  line-height: 1.4em;
+  background-color: rgba(variables.$white, 0.1);
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+
+  a,
+  a:visited {
+    color: theme.$link-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/screens/About/About.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import About from './About';
+
+describe('<About>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<About />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/screens/About/About.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import MarkdownComponent from '../../components/MarkdownComponent/MarkdownComponent';
+
+import styles from './About.module.scss';
+
+const About = () => {
+  const markdownPage = `# About JW OTT Webapp
+    JW OTT Webapp is an open-source, dynamically generated video website built around JW Player and JW Platform services. It enables you to easily publish your JW Player-hosted video content with no coding and minimal configuration.
+
+To see an example of JW OTT Webapp in action, see [https://jw-ott-webapp.netlify.app/](https://jw-ott-webapp.netlify.app/).
+
+## Supported Features
+
+- Works with any JW Player edition, from Free to Enterprise (note that usage will count against your monthly JW streaming limits). Only cloud-hosted JW Players are supported.
+- It looks great on any device. The responsive UI automatically optimizes itself for desktop, tablet, and mobile screens.
+- Populates your site's media content using JSON feeds. If you are using JW Platform, this happens auto-magically based on playlists that you specify. Using feeds from other sources will require you to hack the source code.
+- Video titles, descriptions and hero images are populated from JW Platform JSON feed metadata.
+- Playback of HLS video content from the JW Platform CDN. You can add external URLs (for example, URLS from your own server or CDN) to your playlists in the Content section of your JW Player account dashboard, but they must be HLS streams (\`.m3u8\` files).
+- Support for live video streams (must be registered as external .m3u8 URLs in your JW Dashboard).
+- Customize the user interface with your own branding. The default app is configured for JW Player branding and content, but you can easily change this to use your own assets by modifying the \`config.json\` file. Advanced customization is possible (for example, editing the CSS files), but you will need to modify the source code and [build from source](docs/build-from-source.md).
+- Site-wide video search and related video recommendations powered by [JW Recommendations](https://support.jwplayer.com/customer/portal/articles/2191721-jw-recommendations).
+- Basic playback analytics is reported to your JW Dashboard.
+- Ad integrations (VAST, VPAID, GoogleIMA, etc.). These features require a JW Player Ads Edition license. For more information, see the [JW Player pricing page](https://www.jwplayer.com/pricing/).
+- A "Favorites" feature for users to save videos for watching later. A separate list for "Continue Watching" is also kept so users can resume watching videos from where they left off. The lists are per-browser at this time (i.e., lists do not sync across user's browsers or devices). The "Continue Watching" list can be disabled in your JW OTT Webapp's \`config.json\` file.
+- A grid view for a particular playlist of videos, with the ability to deep-link to the playlist through a static URL.
+- Social sharing options using the device native sharing dialog.
+
+## Unsupported Features
+
+- Security-related features (encrypted HLS, DRM, signed URLs)
+- Self-hosted JW Players`;
+
+  return (
+    <div className={styles.about}>
+      <MarkdownComponent markdownString={markdownPage} />
+    </div>
+  );
+};
+
+export default About;

src/styles/_theme.scss

@@ -44,6 +44,10 @@ $btn-icon-nested-active-color: variables.$white !default;
 
 $btn-effect-bg: rgba(variables.$gray-light, 0.1) !default;
 
+// Link
+
+$link-color: #3990ff !default;
+
 // Card
 
 $card-watch-progress-color: $primary-color !default;