feat: major rewrite

the application is now rewritten in next.js. this commit also adds the ability to see trailers, did you know, more like this, etc. on title page.

BREAKING CHANGE: the whole application is rewritten from scratch.

src/layouts/Footer.tsx

@@ -0,0 +1,52 @@
+import { FC } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+import styles from '../styles/modules/layout/footer.module.scss';
+
+const Footer: FC = () => {
+  const { pathname } = useRouter();
+  const className = (link: string) =>
+    pathname === link ? styles.nav__linkActive : styles.nav__link;
+
+  return (
+    <footer id='footer' className={styles.footer}>
+      <nav aria-label='primary navigation' className={styles.nav}>
+        <ul className={styles.list}>
+          <li className={styles.nav__item}>
+            <Link href='/about'>
+              <a className={className('/about')}>About</a>
+            </Link>
+          </li>
+          <li className={styles.nav__item}>
+            <Link href='/privacy'>
+              <a className={className('/privacy')}>Privacy</a>
+            </Link>
+          </li>
+          <li className={styles.nav__item}>
+            <Link href='/contact'>
+              <a className={className('/contact')}>Contact</a>
+            </Link>
+          </li>
+          <li className={styles.nav__item}>
+            <a href='#' className={styles.nav__link}>
+              Back to top
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <p className={styles.licence}>
+        Licensed under&nbsp;
+        <a
+          className={styles.nav__link}
+          href='https://www.gnu.org/licenses/agpl-3.0-standalone.html'
+        >
+          GNU AGPLv3
+        </a>
+        .
+      </p>
+    </footer>
+  );
+};
+
+export default Footer;

src/layouts/Header.tsx

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+// import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import styles from '../styles/modules/layout/header.module.scss';
+import ThemeToggler from '../components/buttons/ThemeToggler';
+
+// const ThemeToggler = dynamic(
+//   () => import('../components/buttons/ThemeToggler'),
+//   { ssr: false }
+// );
+
+type Props = { full?: boolean; children?: ReactNode };
+
+const Header = (props: Props) => {
+  return (
+    <header
+      id='header'
+      className={`${styles.header} ${props.full ? styles.header__about : ''}`}
+    >
+      <div className={styles.topbar}>
+        <Link href='/about'>
+          <a aria-label='go to homepage' className={styles.logo}>
+            <svg
+              className={styles.logo__icon}
+              focusable='false'
+              role='img'
+              aria-hidden='true'
+            >
+              <use href='/svg/sprite.svg#icon-logo'></use>
+            </svg>
+            <span className={styles.logo__text}>libremdb</span>
+          </a>
+        </Link>
+        {props.full && (
+          <nav className={styles.nav}>
+            <ul className={styles.nav__list}>
+              <li className={styles.nav__item}>
+                <a href='#features' className='link'>
+                  Features
+                </a>
+              </li>
+              <li className={styles.nav__item}>
+                <a href='#faq' className='link'>
+                  FAQs
+                </a>
+              </li>
+              <li className={styles.nav__item}>
+                <a href='https://github.com/zyachel/libremdb' className='link'>
+                  Source
+                </a>
+              </li>
+            </ul>
+          </nav>
+        )}
+        <ThemeToggler className={styles.themeToggler} />
+      </div>
+      {props.full && (
+        <div className={styles.hero}>
+          <h1 className={`heading heading__primary ${styles.hero__text}`}>
+            A free & open source IMDb front-end
+          </h1>
+          <p className={styles.hero__more}>
+            inspired by projects like&nbsp;
+            <a href='https://codeberg.org/teddit/teddit' className='link'>
+              teddit
+            </a>
+            ,&nbsp;
+            <a href='https://github.com/zedeus/nitter' className='link'>
+              nitter
+            </a>
+            ,&nbsp; and&nbsp;
+            <a
+              href='https://github.com/digitalblossom/alternative-frontends'
+              className='link'
+            >
+              many others
+            </a>
+            .
+          </p>
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default Header;

src/layouts/Layout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Footer from './Footer';
+import Header from './Header';
+
+type Props = {
+  full?: boolean;
+  children: React.ReactNode;
+  className: string;
+};
+
+const Layout = ({ full, children, className }: Props) => {
+  return (
+    <>
+      <Header full={full} />
+      <main id='main' className={`main ${className}`}>
+        {children}
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;