Dev

components/Header/Header.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useSession, signIn, signOut, getSession } from "next-auth/react";
+import { useSession, signIn, signOut } from "next-auth/react";
 import Cookies from "js-cookie";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { GitSt } from "@services/gitstory";
@@ -17,7 +17,6 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p
   const [openApiPopup, setOpenApiPopup] = React.useState(false);
 
   const router = useRouter();
-  const slug = router.query.slug || [];
 
   const handleHeaderSearchTextChange = (e) => {
     let parsedValues = e.target.value.split("/");
@@ -41,8 +40,7 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p
   }
 
   async function saveGitHubSessionToCookie() {
-    const sessionInfo = await getSession();
-    sessionInfo ? Cookies.set("github_at", sessionInfo.accessToken) : Cookies.remove("github_at");
+    session ? Cookies.set("github_at", session.accessToken) : Cookies.remove("github_at");
   }
 
   const keyPress = (e) => {
@@ -95,25 +93,26 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p
         {/* SEO */}
         <meta name="description" content={props.desc} />
         <meta name="referrer" content="no-referrer-when-downgrade" />
-        <meta property="og:site_name" content="Gitstory" />
+        <meta property="og:site_name" content="GitStory" />
+        <meta name="apple-mobile-web-app-title" content="GitStory"></meta>
+        <meta content="en" http-equiv="Content-Language"></meta>
         <meta property="og:type" content="website" />
         <meta property="og:title" content={props.title} />
         <meta property="og:description" content={props.desc} />
-        <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
+        <link rel="shortcut icon" href={process.env.WEBSITE_HOST + "/img/favicon.ico"} type="image/x-icon" />
         <meta property="og:url" content="/" />
-        <meta property="og:image" content="/img/gitstory.png" />
+        <meta property="og:image" content={process.env.WEBSITE_HOST + "/img/gitstory.png"} />
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content={props.title} />
         <meta name="twitter:description" content={props.desc} />
-        <meta name="twitter:url" content="/" />
-        <meta name="twitter:image" content="/img/gitstory.png" />
+        <meta name="twitter:url" content={process.env.WEBSITE_HOST} />
+        <meta name="twitter:image" content={process.env.WEBSITE_HOST + "/img/gitstory.png"} />
         <meta name="twitter:site" content="@graphicmade" />
-        <meta property="og:site_name" content="gitstory"></meta>
+        <meta property="og:site_name" content="Gitstory"></meta>
         <meta property="og:type" content="website"></meta>
         <meta property="og:locale" content="en-EN"></meta>
         <meta name="twitter:creator" content="@graphicmade"></meta>
         <meta name="theme-color" content="#17161b"></meta>
-
         {/* SEO */}
 
         <link key="0" rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png"></link>
@@ -216,4 +215,3 @@ const LeftWrapper: any = styled.div`
     margin-top: 5px;
   }
 `;
-

next.config.js

@@ -7,5 +7,6 @@ module.exports = {
     // This is the default value, but we want to be explicit
     GITHUB_SECRET: process.env.GITHUB_SECRET,
     GITHUB_ID: process.env.GITHUB_ID,
+    WEBSITE_HOST: process.env.WEBSITE_HOST,
   },
 };

pages/_document.tsx

@@ -0,0 +1,24 @@
+import Document, { DocumentContext } from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}