Merge pull request #152 from forbole/port-styles

feat: migrate styles to static and add schema for authors

src/components/intro_card/index.module.scss

@@ -0,0 +1,77 @@
+@import "src/styles/sass.scss";
+
+.wrapper {
+  background: #fff;
+  border-radius: 24px;
+  box-shadow:
+    0 10px 32px -4px rgba(96, 60, 238, 0.1),
+    0 6px 14px -6px rgba(96, 60, 238, 0.28);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: calc(100vw - 40px);
+  overflow: hidden;
+  position: relative;
+}
+
+.imageWrapper {
+  height: 200px;
+  position: relative;
+  width: 100%;
+}
+
+.contentWrapper {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  padding: 24px;
+  row-gap: 24px;
+}
+
+.title {
+  color: #202a43;
+  font-size: 20px;
+  font-weight: 590;
+  margin-bottom: 12px;
+}
+
+.listItem {
+  color: #202a43;
+  display: flex;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  &::before {
+    background-color: #202a43;
+    border-radius: 4px;
+    content: " ";
+    display: inline-block;
+    flex: 0 0 auto;
+    height: 4px;
+    margin-right: 10px;
+    margin-top: 10px;
+    vertical-align: middle;
+    width: 4px;
+  }
+}
+
+.desc {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.image {
+  object-fit: cover;
+}
+
+.ctaButton {
+  align-self: flex-start;
+  font-family: "590";
+}

src/components/intro_card/index.tsx

@@ -3,6 +3,7 @@ import Box from "@mui/material/Box";
 import Image from "next/image";
 
 import CtaButton from "../cta-button";
+import * as styles from "./index.module.scss";
 
 type Props = {
   title?: string;
@@ -25,112 +26,40 @@ const IntroCard = (props: Props) => {
   } = props;
 
   return (
-    <Box
-      component="div"
-      sx={{
-        background: "#FFF",
-        borderRadius: "24px",
-        boxSizing: "border-box",
-        boxShadow:
-          "0px 10px 32px -4px rgba(96, 60, 238, 0.10), 0px 6px 14px -6px rgba(96, 60, 238, 0.28)",
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        maxWidth: "calc(100vw - 40px)",
-        overflow: "hidden",
-        position: "relative",
-      }}
-    >
-      <Box
-        sx={{
-          height: 200,
-          position: "relative",
-          width: "100%",
-        }}
-      >
+    <Box className={styles.wrapper} component="div">
+      <Box className={styles.imageWrapper}>
         {imageHref && (
           <Image
             alt={title ? `${title} image` : ""}
+            className={styles.image}
             fill
             src={imageHref}
-            style={{ objectFit: "cover" }}
           />
         )}
       </Box>
-      <Box
-        component="div"
-        sx={{
-          flex: 1,
-          padding: "24px",
-          boxSizing: "border-box",
-          display: "flex",
-          flexWrap: "wrap",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          rowGap: "24px",
-          justifyContent: "space-between",
-        }}
-      >
+      <Box className={styles.contentWrapper} component="div">
         <Box>
-          <Typography
-            sx={{
-              fontWeight: "590",
-              fontSize: "20px",
-              marginBottom: "12px",
-              color: "#202A43",
-            }}
-          >
-            {title}
-          </Typography>
+          <Typography className={styles.title}>{title}</Typography>
 
           {typeof desc && (
-            <Typography
-              sx={{
-                fontSize: "16px",
-                lineHeight: "22px",
-              }}
-            >
-              {desc}
-            </Typography>
+            <Typography className={styles.desc}>{desc}</Typography>
           )}
           <ul style={{ listStyle: "none" }}>
             {list?.map((item, index) => (
               <Typography
+                className={styles.listItem}
                 component="li"
                 key={index}
-                px="10px"
-                sx={{
-                  "display": "flex",
-                  "fontSize": "16px",
-                  "lineHeight": "22px",
-                  "fontWeight": "400",
-                  "color": "#202A43",
-                  "&:before": {
-                    content: '" "',
-                    display: "inline-block",
-                    width: "4px",
-                    height: "4px",
-                    backgroundColor: "#202A43",
-                    borderRadius: "4px",
-                    verticalAlign: "middle",
-                    marginRight: "10px",
-                    marginTop: "10px",
-                    flex: "0 0 auto",
-                  },
-                }}
               >
                 {item}
               </Typography>
             ))}
           </ul>
         </Box>
         <CtaButton
+          className={styles.ctaButton}
           disabled={disabled}
           onClick={btnClick}
-          sx={{
-            fontFamily: "590",
-            alignSelf: " flex-start",
-          }}
         >
           {btnName}
         </CtaButton>

src/pages/author/[author]/index.tsx

@@ -14,6 +14,7 @@ export async function getServerSideProps(context: { query: any }) {
   let formattedTags: Tag[] = [];
   let meta = {};
   let error = false;
+
   try {
     const { query } = context;
     const fetchQuery: any = {};

src/screens/author/components/author_posts/index.tsx

@@ -1,15 +1,20 @@
 import { Box, Pagination } from "@mui/material";
-import { pathOr } from "ramda";
 
 import Post from "@src/screens/blog/components/blog_posts/components/post";
 
+import type { AuthorMeta } from "../../types";
 import { useBlogPostsHook } from "./hooks";
 import * as styles from "./index.module.scss";
-import type { IProps } from "./interface";
+
+interface IProps {
+  blogs: any[];
+  main: any;
+  meta: AuthorMeta;
+}
 
 const AuthorPosts = ({ main, blogs, meta }: IProps) => {
-  const currentPage = pathOr(0, ["pagination", "page"], meta);
-  const totalPages = pathOr(0, ["pagination", "pages"], meta);
+  const currentPage = meta.pagination?.page || 0;
+  const totalPages = meta.pagination?.pages || 0;
 
   const { handleAuthorPageChange } = useBlogPostsHook();
 

src/screens/author/index.tsx

@@ -1,13 +1,22 @@
 import { Box, Typography } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
+import Head from "next/head";
 
 import Layout from "@src/components/layout";
 
 import AuthorPosts from "./components/author_posts";
 import { useBlogHook } from "./hooks";
 import * as styles from "./index.module.scss";
+import type { AuthorMeta } from "./types";
 
-const AuthorTitlePosts = (props: any) => {
+type Props = {
+  author: any;
+  meta: AuthorMeta;
+  post: any;
+  tags: any;
+};
+
+const AuthorTitlePosts = (props: Props) => {
   const { t } = useTranslation("blog");
   const { post, tags, author, meta } = props;
   const { featureImage, excerpt, error } = post;
@@ -25,6 +34,35 @@ const AuthorTitlePosts = (props: any) => {
       title={post.title}
       type="article"
     >
+      <Head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              "@context": "https://schema.org",
+              "@type": "ProfilePage",
+              "mainEntity": {
+                "@type": "Person",
+                "name": author.name,
+                "alternateName": author.slug,
+                "identifier": author.id,
+                "url": `https://www.forbole.com/author/${author.slug}/`,
+                "image": author.profile_image,
+                "brand": {
+                  "@type": "Organization",
+                  "name": "Forbole",
+                  "url": "https://www.forbole.com/",
+                },
+                "agentInteractionStatistic": {
+                  "@type": "InteractionCounter",
+                  "interactionType": "https://schema.org/WriteAction",
+                  "userInteractionCount": meta.pagination?.total,
+                },
+              },
+            }),
+          }}
+          type="application/ld+json"
+        />
+      </Head>
       <Box className={styles.container}>
         <Box className={styles.content}>
           <Box className={styles.innerContent}>

src/screens/author/types.ts

@@ -0,0 +1,7 @@
+export type AuthorMeta = {
+  pagination: {
+    page: number;
+    pages: number;
+    total: number;
+  };
+};

src/screens/blog_details/index.tsx

@@ -70,6 +70,8 @@ const BlogDetails = ({ post }: any) => {
               "author": [
                 {
                   "@type": "Person",
+                  "alternateName": author.slug,
+                  "image": author.profileImage,
                   "name": author.name,
                   "url": `https://www.forbole.com/author/${author.slug}`,
                 },