fix: window is not defined (server)

src/components/Links/LinkFavicon.tsx

@@ -14,15 +14,17 @@ interface LinkFaviconProps {
 // The Favicon API should always return an image, so it's not really useful to keep the loader nor placeholder icon,
 // but for slow connections and other random stuff, I'll keep this
 export default function LinkFavicon({
-                                      url,
-                                      size = 32,
-                                      noMargin = false
-                                    }: LinkFaviconProps) {
+  url,
+  size = 32,
+  noMargin = false,
+}: LinkFaviconProps) {
   const [isFailed, setFailed] = useState<boolean>(false);
   const [isLoading, setLoading] = useState<boolean>(true);
-  const baseUrlApi = process.env.NEXT_PUBLIC_API_URL || (typeof window !== "undefined" && window)?.location?.origin + "/api";
+  const baseUrlApi =
+    process.env.NEXT_PUBLIC_API_URL ||
+    (typeof window !== "undefined" && window)?.location?.origin + "/api";
   if (!baseUrlApi) {
-    console.warn('Missing API URL')
+    console.warn("Missing API URL");
   }
 
   const setFallbackFavicon = () => setFailed(true);

src/pages/privacy.tsx

@@ -2,16 +2,16 @@ import LinkTag from "next/link";
 import PageTransition from "components/PageTransition";
 import styles from "styles/legal-pages.module.scss";
 import clsx from "clsx";
-import Navbar from "../components/Navbar/Navbar";
+import Navbar from "components/Navbar/Navbar";
 import { getServerSideTranslation } from "../i18n";
 import { useTranslation } from "next-i18next";
-import { TFunctionParam } from "../types/i18next";
+import { TFunctionParam } from "types/i18next";
 
 export default function Privacy() {
   const { t } = useTranslation("privacy");
 
   return (
-    <PageTransition className={clsx("App", styles["privacy"])}>
+    <PageTransition className={clsx("App", styles["legal"])}>
       <Navbar />
       <main>
         <h1>{t("privacy:title")}</h1>
@@ -55,9 +55,8 @@ export default function Privacy() {
         <p>
           {t("privacy:contact.description")}{" "}
           <LinkTag href="mailto:sonnyasdev@gmail.com" target="_blank">
-            sonnyasdev[at]gmail.com
+            sonnyasdev[at]gmail[dot]com
           </LinkTag>
-          .
         </p>
 
         <p>{t("privacy:footer.changes")}</p>

src/pages/terms.tsx

@@ -3,15 +3,15 @@ import styles from "styles/legal-pages.module.scss";
 import clsx from "clsx";
 import LinkTag from "next/link";
 import Navbar from "components/Navbar/Navbar";
-import { getServerSideTranslation } from "../i18n";
+import { getServerSideTranslation } from "i18n";
 import { Trans, useTranslation } from "next-i18next";
-import { TFunctionParam } from "../types/i18next";
+import { TFunctionParam } from "types/i18next";
 import PATHS from "constants/paths";
 
 export default function Terms() {
   const { t } = useTranslation("terms");
   return (
-    <PageTransition className={clsx("App", styles["privacy"])}>
+    <PageTransition className={clsx("App", styles["legal"])}>
       <Navbar />
       <main>
         <h1>{t("terms:title")}</h1>
@@ -61,9 +61,8 @@ export default function Terms() {
         <p>
           {t("terms:contact.description")}{" "}
           <LinkTag href="mailto:sonnyasdev@gmail.com" target="_blank">
-            sonnyasdev[at]gmail.com
+            sonnyasdev[at]gmail[dot]com
           </LinkTag>
-          .
         </p>
 
         <p>{t("terms:footer.changes")}</p>
@@ -76,7 +75,7 @@ export default function Terms() {
 export async function getServerSideProps({ locale }) {
   return {
     props: {
-      ...(await getServerSideTranslation(locale, ["terms"])),
-    },
+      ...(await getServerSideTranslation(locale, ["terms"]))
+    }
   };
 }

src/styles/globals.scss

@@ -33,6 +33,7 @@ body {
   width: 1280px;
   padding: 0.5em;
   display: flex;
+  flex-direction: column;
 }
 
 a {

src/styles/legal-pages.module.scss

@@ -1,24 +1,19 @@
-.privacy {
-  height: 100%;
-  flex-direction: column;
-}
-
-.privacy main {
+.legal main {
   overflow: auto;
 }
 
-.privacy h1 {
+.legal h1 {
   margin-top: 0.5em;
 }
 
-.privacy h2 {
+.legal h2 {
   margin-top: 1.5em;
 }
 
-.privacy h3 {
+.legal h3 {
   margin-top: 1em;
 }
 
-.privacy p {
+.legal p {
   margin-top: 0.5em;
 }