Merge in the nextjs / chakra website remake

Librum-Reader · Aug 28, 2023 · 7f3aefd · 7f3aefd
2 parents 89fba2b + aec1f1b
commit 7f3aefd
Show file tree

Hide file tree

Showing 109 changed files with 23,890 additions and 25,483 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -8,20 +8,30 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Local Netlify folder
-.netlify
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
diff --git a/.sanity/runtime/app.js b/.sanity/runtime/app.js
@@ -0,0 +1,11 @@
+
+// This file is auto-generated on 'sanity dev'
+// Modifications to this file is automatically discarded
+import {renderStudio} from "sanity"
+import studioConfig from "../../sanity.config.js"
+
+renderStudio(
+  document.getElementById("sanity"),
+  studioConfig,
+  {reactStrictMode: false, basePath: "/"}
+)
diff --git a/.sanity/runtime/index.html b/.sanity/runtime/index.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html><html lang="en">
+<!--
+This file is auto-generated from "sanity dev".
+Modifications to this file are automatically discarded.
+-->
+<head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><meta name="robots" content="noindex"/><meta name="referrer" content="same-origin"/><link rel="icon" href="/static/favicon.ico" sizes="any"/><link rel="icon" href="/static/favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/static/apple-touch-icon.png"/><link rel="manifest" href="/static/manifest.webmanifest"/><title>Sanity Studio</title><script>
+;(function () {
+  var _caughtErrors = []
+
+  var errorChannel = (function () {
+    var subscribers = []
+
+    function publish(msg) {
+      for (var i = 0; i < subscribers.length; i += 1) {
+        subscribers[i](msg)
+      }
+    }
+
+    function subscribe(subscriber) {
+      subscribers.push(subscriber)
+
+      return function () {
+        var idx = subscribers.indexOf(subscriber)
+
+        if (idx > -1) {
+          subscribers.splice(idx, 1)
+        }
+      }
+    }
+
+    return {publish, subscribe, subscribers}
+  })()
+
+  // NOTE: Store the error channel instance in the global scope so that the Studio application can
+  // access it and subscribe to errors.
+  window.__sanityErrorChannel = {
+    subscribe: errorChannel.subscribe,
+  }
+
+  function _nextTick(callback) {
+    setTimeout(callback, 0)
+  }
+
+  function _handleError(error, params) {
+    _nextTick(function () {
+      // - If there are error channel subscribers, then we notify them (no console error).
+      // - If there are no subscribers, then we log the error to the console and render the error overlay.
+      if (errorChannel.subscribers.length) {
+        errorChannel.publish({error, params})
+      } else {
+        console.error(error)
+
+        _renderErrorOverlay(error, params)
+      }
+    })
+  }
+
+  var ERROR_BOX_STYLE = [
+    'background: #fff',
+    'border-radius: 6px',
+    'box-sizing: border-box',
+    'color: #121923',
+    'flex: 1',
+    "font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','Liberation Sans',Helvetica,Arial,system-ui,sans-serif",
+    'font-size: 16px',
+    'line-height: 21px',
+    'margin: 0 auto',
+    'max-width: 960px',
+    'overflow: auto',
+    'padding: 20px',
+    'width: 100%',
+  ].join(';')
+
+  var ERROR_CODE_STYLE = [
+    'color: #972E2A',
+    "font-family: -apple-system-ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace",
+    'font-size: 13px',
+    'line-height: 17px',
+    'margin: 0',
+  ].join(';')
+
+  function _renderErrorOverlay(error, params) {
+    var errorElement = document.querySelector('#__sanityError') || document.createElement('div')
+    var colno = params.event.colno
+    var lineno = params.event.lineno
+    var filename = params.event.filename
+
+    errorElement.id = '__sanityError'
+    errorElement.innerHTML = [
+      '<div style="' + ERROR_BOX_STYLE + '">',
+      '<div style="font-weight: 700;">Uncaught error: ' + error.message + '</div>',
+      '<div style="color: #515E72; font-size: 13px; line-height: 17px; margin: 10px 0;">' +
+        filename +
+        ':' +
+        lineno +
+        ':' +
+        colno +
+        '</div>',
+      '<pre style="' + ERROR_CODE_STYLE + '">' + error.stack + '</pre>',
+      '</div>',
+    ].join('')
+
+    errorElement.style.position = 'fixed'
+    errorElement.style.zIndex = 1000000
+    errorElement.style.top = 0
+    errorElement.style.left = 0
+    errorElement.style.right = 0
+    errorElement.style.bottom = 0
+    errorElement.style.padding = '20px'
+    errorElement.style.background = 'rgba(16,17,18,0.66)'
+    errorElement.style.display = 'flex'
+    errorElement.style.alignItems = 'center'
+    errorElement.style.justifyContent = 'center'
+
+    document.body.appendChild(errorElement)
+  }
+
+  // NOTE:
+  // Yes – we're attaching 2 error listeners below 👀
+  // This is because React makes the same error throw twice (in development mode).
+  // See: https://github.com/facebook/react/issues/10384
+
+  // Error listener #1
+  window.onerror = function (event, source, lineno, colno, error) {
+    _nextTick(function () {
+      if (_caughtErrors.indexOf(error) !== -1) return
+
+      _caughtErrors.push(error)
+
+      _handleError(error, {
+        event,
+        lineno,
+        colno,
+        source,
+      })
+
+      _nextTick(function () {
+        var idx = _caughtErrors.indexOf(error)
+
+        if (idx > -1) _caughtErrors.splice(idx, 1)
+      })
+    })
+
+    // IMPORTANT: this callback must return `true` to prevent the error from being rendered in
+    // the browser’s console.
+    return true
+  }
+
+  // Error listener #2
+  window.addEventListener('error', function (event) {
+    if (_caughtErrors.indexOf(event.error) !== -1) return true
+
+    _caughtErrors.push(event.error)
+
+    _handleError(event.error, {
+      event,
+      lineno: event.lineno,
+      colno: event.colno,
+    })
+
+    _nextTick(function () {
+      _nextTick(function () {
+        var idx = _caughtErrors.indexOf(event.error)
+
+        if (idx > -1) _caughtErrors.splice(idx, 1)
+      })
+    })
+
+    return true
+  })
+})()
+</script><style>
+  html {
+    background-color: #f1f3f6;
+  }
+  html,
+  body,
+  #sanity {
+    height: 100%;
+  }
+  body {
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+  }
+</style></head><body><div id="sanity"></div><script type="module" src="/.sanity/runtime/app.js"></script><noscript><div class="sanity-app-no-js__root"><div class="sanity-app-no-js__content"><style type="text/css">
+.sanity-app-no-js__root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: #fff;
+}
+
+.sanity-app-no-js__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-family: helvetica, arial, sans-serif;
+}
+</style><h1>JavaScript disabled</h1><p>Please <a href="https://www.enable-javascript.com/">enable JavaScript</a> in your browser and reload the page to proceed.</p></div></div></noscript></body></html>
diff --git a/README.md b/README.md
@@ -2,7 +2,6 @@
 
 ![Untitled](https://github.com/Librum-Reader/Librum-Website/assets/69865187/ecb5e40d-dd60-4cd5-baff-54904da39dfe)
 
-
 Welcome to the official website of Librum, a powerful and intuitive application for managing your personal online library and reading your books. This repository contains the source code and assets for the Librum website, where you can learn more about the application, its features, and how to get started.
 
 <br>
@@ -36,23 +35,27 @@ We appreciate contributions to the Librum website that improve its content, desi
 If you would like to run the Librum website locally on your machine, follow the instructions below:
 
 1. Clone the repository:
+
 ```bash
 git clone https://github.com/Librum-Reader/Librum-Website.git
 ```
 
 2. Navigate to the project directory:
+
 ```bash
 cd Librum-Website
 ```
 
 3. Install the dependencies:
+
 ```bash
 npm install
 ```
 
 4. Start the development server:
+
 ```bash
-npm start
+npm run dev
 ```
 
 5. Open your browser and visit `http://localhost:3000` to view the Librum website.

diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,10 @@
+- [x] Add the privacy policy page
+- [x] Add the disclaimer page
+- [x] Reduce the font size of the other pages with legal documents, to look exactly like on the official version of the website
+- [x] Switch the whole theme of the website from the current blue-ish color (#47478f) to purple used on the website (#946BDE)
+- [x] Make the items in the navbar white instead of blue and increase the size of the items a bit (including the logo), to look similar to the official one
+- [ ] Add the theme switch ( @slrbristol said that this is mostly done )
+- [x] Fix the News page to look like the official website's news page
+- [x] Add a footer that looks like the ones of the official website
+- [ ] Add popup to the Register "page" that tells the user to confirm their email address (similar to the one on the website, feel free to improve the UI of it if you have anything in mind)
+- [ ] Add a popup that opens when the website is opened for the first time, which tells the user that the website is still in development and to accept the legal terms (You can look at https://github.com/Librum-Reader/Librum-Website/pull/33 to see what contents need to be present)
diff --git a/app/Hooks/useFormSubmit.js b/app/Hooks/useFormSubmit.js
@@ -0,0 +1,90 @@
+import { useState, useCallback, useRef } from "react";
+import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
+
+const useFormSubmit = () => {
+  const [res, setRes] = useState("");
+  const [error, setError] = useState("");
+  const [captchaError, setCaptchaError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const recaptchaRef = useRef(null);
+  const { executeRecaptcha } = useGoogleReCaptcha();
+
+  const verifyToken = async (token) => {
+    try {
+      await fetch(
+        `https://librum-dev.azurewebsites.net/api/recaptchaVerify?userToken=${token}`,
+        {
+          method: "POST",
+        }
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          if (data?.success === false) {
+            throw new Error("Something went wrong!");
+          }
+          recaptchaRef.current = data;
+        });
+    } catch (err) {
+      setCaptchaError(err);
+    }
+  };
+
+  // const handleReCaptchaVerify = useCallback(
+  //   async (e, values, captchaActionName) => {
+  //     e?.preventDefault();
+  //     try {
+  //       const token = await executeRecaptcha(captchaActionName);
+  //       if (!token) {
+  //         throw new Error("Something went wrong!");
+  //       }
+  //       await submitForm(e, token, values);
+  //     } catch (err) {
+  //       console.log(err);
+  //       setError(err);
+  //     }
+  //   },
+  //   [executeRecaptcha]
+  // );
+
+  const resetStates = () => {
+    setRes("");
+    setError("");
+    setCaptchaError("");
+  };
+
+  const submitForm = async (e, token, values) => {
+    e.preventDefault();
+    setIsLoading(true);
+    try {
+      await fetch("https://formsubmit.co/ajax/[email protected]", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(values),
+      })
+        .then((response) => response.json())
+        .then(async (data) => {
+          if ((await data?.success) !== "true") {
+            throw new Error("Something went wrong!");
+          }
+          setRes(data?.success);
+        });
+    } catch (err) {
+      setError(err);
+    }
+    setIsLoading(false);
+  };
+
+  return {
+    res,
+    error,
+    captchaError,
+    isLoading,
+    // handleReCaptchaVerify,
+    resetStates,
+  };
+};
+
+export default useFormSubmit;