Merge pull request #44 from biolab/feature/seo

Next seo
biolab · Oct 21, 2023 · 03a2ae2 · 03a2ae2 · vercel · Oct 21, 2023
2 parents 3708530 + d75ce51
commit 03a2ae2
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 28 deletions.
diff --git a/components/UiKit/MainLayout.tsx b/components/UiKit/MainLayout.tsx
@@ -1,3 +1,6 @@
+import { NextSeo } from "next-seo";
+import { OpenGraph } from "next-seo/lib/types";
+import React from "react";
 import styled from "styled-components";
 import Adapt from "./Adapt";
 import { Heading1 } from "./Typography";
@@ -7,12 +10,46 @@ const H1 = styled(Heading1)`
   text-align: center;
 `;
 
-const MainLayout = ({ children, title }: { children: React.ReactNode | React.ReactNode[]; title?: string }) => {
+const MainLayout = ({
+  children,
+  title,
+  justSEO,
+  openGraph,
+}: {
+  children: React.ReactNode | React.ReactNode[];
+  title?: string;
+  justSEO?: boolean;
+  openGraph?: OpenGraph;
+}) => {
+  const seo = React.useMemo(
+    () => (
+      <NextSeo
+        title={`Orange Data Mining - ${title}`}
+        openGraph={{
+          title: `Orange Data Mining - ${title}`,
+          ...(openGraph ? openGraph : {}),
+        }}
+      />
+    ),
+    [openGraph, title]
+  );
+
+  if (justSEO) {
+    return (
+      <>
+        {seo}
+        {children}
+      </>
+    );
+  }
   return (
-    <Adapt $mt $mb>
-      {title && <H1> {title}</H1>}
-      {children}
-    </Adapt>
+    <>
+      {seo}
+      <Adapt $mt $mb>
+        {title && <H1> {title}</H1>}
+        {children}
+      </Adapt>
+    </>
   );
 };
 

diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "lunr": "^2.3.9",
     "next": "^13.5.6",
     "next-mdx-remote": "^4.2.0",
+    "next-seo": "^6.1.0",
     "probe-image-size": "^7.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,3 +1,4 @@
+import { DefaultSeo } from "next-seo";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { ThemeProvider } from "styled-components";
@@ -8,11 +9,23 @@ import { theme } from "../styles/theme";
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider theme={theme}>
+      <DefaultSeo
+        title="Orange Data Mining"
+        description="Orange Data Mining Toolbox"
+        openGraph={{
+          type: "website",
+          url: "https://orangedatamining.com",
+          siteName: "Orange Data Mining",
+        }}
+      />
+      <Head>
+        <meta
+          name="author"
+          content="Bioinformatics Laboratory, University of Ljubljana"
+        />
+      </Head>
       <GlobalStyle />
       <Layout>
-        <Head>
-          <title>Orange Data Mining</title>
-        </Head>
         <Component {...pageProps} />
       </Layout>
     </ThemeProvider>

diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -12,6 +12,7 @@ import Adapt from "@components/UiKit/Adapt";
 import { Heading1 } from "@components/UiKit/TypographyHomepage";
 import device from "@styles/utils/breakpoints";
 import formatDate from "@utils/formatDate";
+import MainLayout from "@components/UiKit/MainLayout";
 
 const BlogDetailWrapper = styled.div`
   padding: 80px 0;
@@ -85,7 +86,7 @@ export async function getStaticProps({
 }: {
   params: { slug: string };
 }) {
-  const { fullFilePath, publicFilePath } = getBlogsMetadata().find(
+  const { fullFilePath, publicFilePath, thumbImage } = getBlogsMetadata().find(
     (post: any) => post.url === slug
   );
   const mdFile = fs.readFileSync(fullFilePath, "utf-8");
@@ -105,37 +106,58 @@ export async function getStaticProps({
     props: {
       frontmatter,
       content: mdxSource,
+      thumbImage,
     },
   };
 }
 
 export default function BlogPost({
   frontmatter,
   content,
+  thumbImage,
 }: {
   frontmatter: any;
   content: any;
+  thumbImage: any;
 }) {
   return (
-    <BlogDetailWrapper>
-      <Adapt $width714>
-        <BlogDetailHeader>
-          <Text $colorPurple $capitalize>
-            <strong>{frontmatter.blog.join(", ")}</strong>
-          </Text>
-          <Heading1 $colorBlack>{frontmatter.title}</Heading1>
-        </BlogDetailHeader>
-        <BlogDetailContent>
-          <Author>
-            <Text>
-              <strong>{frontmatter.author}</strong>
+    <MainLayout
+      title={frontmatter.title}
+      justSEO
+      openGraph={{
+        type: "blog",
+        description: frontmatter.shortExcerpt,
+        images: thumbImage
+          ? [
+              {
+                width: thumbImage.width,
+                height: thumbImage.height,
+                url: thumbImage.src,
+              },
+            ]
+          : [],
+      }}
+    >
+      <BlogDetailWrapper>
+        <Adapt $width714>
+          <BlogDetailHeader>
+            <Text $colorPurple $capitalize>
+              <strong>{frontmatter.blog.join(", ")}</strong>
             </Text>
-            <Text>{formatDate(frontmatter.date)}</Text>
-          </Author>
-
-          <MdContent content={content} />
-        </BlogDetailContent>
-      </Adapt>
-    </BlogDetailWrapper>
+            <Heading1 $colorBlack>{frontmatter.title}</Heading1>
+          </BlogDetailHeader>
+          <BlogDetailContent>
+            <Author>
+              <Text>
+                <strong>{frontmatter.author}</strong>
+              </Text>
+              <Text>{formatDate(frontmatter.date)}</Text>
+            </Author>
+
+            <MdContent content={content} />
+          </BlogDetailContent>
+        </Adapt>
+      </BlogDetailWrapper>
+    </MainLayout>
   );
 }
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -8,6 +8,7 @@ import MainLayout from "@components/UiKit/MainLayout";
 import TagsList from "@components/TagsList/TagsList";
 import useTags from "@components/TagsList/useTags";
 import getTopTags from "@utils/getTopTags";
+import { NextSeo } from "next-seo";
 
 export interface BlogMetadata {
   title: string;

diff --git a/yarn.lock b/yarn.lock
@@ -4079,6 +4079,11 @@ next-mdx-remote@^4.2.0:
     vfile "^5.3.0"
     vfile-matter "^3.0.1"
 
+next-seo@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-6.1.0.tgz#b60b06958cc77e7ed56f0a61b2d6cd0afed88ebb"
+  integrity sha512-iMBpFoJsR5zWhguHJvsoBDxDSmdYTHtnVPB1ij+CD0NReQCP78ZxxbdL9qkKIf4oEuZEqZkrjAQLB0bkII7RYA==
+
 next@^13.5.6:
   version "13.5.6"
   resolved "https://registry.yarnpkg.com/next/-/next-13.5.6.tgz#e964b5853272236c37ce0dd2c68302973cf010b1"