Add opengraph and other metatags

Rikthepixel · Rikthepixel · commit 8c986fa4c2e5 · 2023-03-31T00:53:16.000+02:00
diff --git a/example.env b/example.env
@@ -1,2 +1,6 @@
+# Application urls
 NEXT_PUBLIC_BACKEND_URL=https://backend.commitrocket.com
+NEXT_PUBLIC_FRONTEND_URL=https://www.commitrocket.com
+
+# Google analytics 
 NEXT_PUBLIC_GOOGLE_ANALYTICS_TAG_ID= [[ SOME GOOGLE ANALYTICS TAG ID]]
diff --git a/next.config.mjs b/next.config.mjs
@@ -10,8 +10,7 @@ const bundleAnalyzer = withBundleAnalyzer({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  compress: true,
-  output: "export"
+  compress: true
 };
 
 export default withPlugins([bundleAnalyzer], nextConfig);
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && next export",
     "analyze:build": "cross-env ANALYZE=true npm run build",
     "analyze:dev": "cross-env ANALYZE=true npm run dev",
     "script:gen-articles-index": "node ./scripts/generateArticlesIndex.js"
diff --git a/src/assets/images/icons/discord.tsx b/src/assets/images/icons/discord.tsx
@@ -1,4 +1,4 @@
-import React, { SVGProps, forwardRef, ForwardedRef } from "react";
+import { SVGProps, forwardRef, ForwardedRef } from "react";
 
 const DiscordIcon = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
diff --git a/src/assets/state/articles/1.tsx b/src/assets/state/articles/1.tsx
@@ -10,6 +10,8 @@ export default {
   thumbnail,
   thumbnailAlt: "A placeholder thumbnail",
 
+  vertical: "technology",
+
   slug: "1",
   tags: [
     tags.news,
diff --git a/src/assets/state/articles/2.tsx b/src/assets/state/articles/2.tsx
@@ -11,6 +11,8 @@ export default {
   thumbnail,
   thumbnailAlt: "A placeholder thumbnail",
 
+  vertical: "technology",
+
   slug: "2",
   tags: [
     tags.git
diff --git a/src/assets/state/articles/article.d.ts b/src/assets/state/articles/article.d.ts
@@ -6,9 +6,18 @@ type IArticle = {
   title: string;
   thumbnail: StaticImageData,
   thumbnailAlt: string;
+
   tags: string[];
+
+  /** 
+  * A high level overview of the article E.g. Technology 
+  */
+  vertical: string;
+  
   slug: string;
 
+
+
   author: IMember;
 
   teaser: string;
diff --git a/src/assets/state/contactMethods.tsx b/src/assets/state/contactMethods.tsx
@@ -1,16 +1,17 @@
+import { ReactNode, RefAttributes, SVGProps } from "react";
+
 import NewsIcon from "@heroicons/react/24/solid/NewspaperIcon";
 import EnvelopeIcon from "@heroicons/react/24/solid/EnvelopeIcon";
 import PencilSquareIcon from "@heroicons/react/24/solid/PencilSquareIcon";
 
 import DiscordIcon from "@/assets/images/icons/discord";
 
 
-import { ReactNode } from "react";
 
 interface IContactMethod {
   title: ReactNode;
   href?: string;
-  icon: React.ForwardRefExoticComponent<any>;
+  icon: React.ForwardRefExoticComponent<any> | React.FC<SVGProps<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
   iconAlt: string;
 }
 
diff --git a/src/assets/state/team.tsx b/src/assets/state/team.tsx
@@ -2,7 +2,10 @@ import { StaticImageData } from "next/image";
 import RikPicture from "@/assets/images/people/rik.webp";
 
 export interface IMember {
-  name: string;
+  fullName: string;
+  firstName?: string;
+  lastName?: string;
+  gender?: string; // Open Graph only accepts "male" & "female", but put in here whatever you want
   title: string;
   image: StaticImageData;
   links: {
@@ -14,7 +17,7 @@ export interface IMember {
 export const people = {
   "rik": {
     image: RikPicture,
-    name: "Rik den Breejen",
+    fullName: "Rik den Breejen",
     title: "Lead Developer & Founder",
     links: [
       {
diff --git a/src/components/head/KeywordsMeta.tsx b/src/components/head/KeywordsMeta.tsx
@@ -0,0 +1,12 @@
+export interface KeywordTagsProps {
+  tags: readonly string[];
+}
+
+const KeywordsMeta = ({ tags }: KeywordTagsProps) => (
+  <meta
+    name="keywords"
+    content={tags.map((tag) => tag.replace(",", "")).join(", ")}
+  />
+);
+
+export default KeywordsMeta;
diff --git a/src/components/head/OgArticleMeta.tsx b/src/components/head/OgArticleMeta.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import OgProfileMeta, { OgProfile } from "./OgProfileMeta";
+import toOpenGraph from "./utils/toOpenGraph";
+
+export interface OgArticle {
+  publishedTime: Date;
+  modifiedTime?: Date;
+  expirationTime?: Date;
+  section?: string;
+  tag?: string | string[];
+  author?: OgProfile | OgProfile[];
+}
+
+export interface OgArticleMetaProps extends OgArticle {
+}
+
+const OgArticleMeta = ({ author, ...props }: OgArticleMetaProps) => {
+
+  const computedAuthors = !author ? [] : Array.isArray(author) ? author : [author];
+
+  return (
+    <>
+      {toOpenGraph({ props, prefix: "article" })}
+      {computedAuthors.map((author, i) => <OgProfileMeta key={i} {...author} />)}
+    </>
+  );
+};
+
+export default OgArticleMeta;
diff --git a/src/components/head/OgImageMeta.tsx b/src/components/head/OgImageMeta.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import toOpenGraph from "./utils/toOpenGraph";
+
+export interface OgImage {
+  url?: string;
+  secureUrl?: string;
+  path?: string;
+  securePath?: string;
+  type?: string;
+  width?: number;
+  height?: number;
+  alt?: string;
+}
+
+export interface OgImageMetaProps extends OgImage {
+
+}
+
+const OgImageMeta = ({ url, path, securePath, secureUrl, ...props }: OgImageMetaProps) => {
+  const computedUrl = path ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}${path}` : url;
+  const computedSecureUrl = computedUrl?.startsWith("https") ? computedUrl : securePath ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}${securePath}` : secureUrl;
+
+  return (
+    <>
+      {toOpenGraph({ prefix: "og:image", props })}
+      {toOpenGraph({
+        prefix: "og:image",
+        props: {
+          url: computedUrl,
+          secureUrl: computedSecureUrl
+        }
+      })}
+    </>
+  );
+};
+
+export default OgImageMeta;
diff --git a/src/components/head/OgMeta.tsx b/src/components/head/OgMeta.tsx
@@ -0,0 +1,48 @@
+import { useRouter } from "next/router";
+import toOpenGraph from "./utils/toOpenGraph";
+
+
+export interface OgBase {
+  title: string;
+  siteName?: string;
+  description?: string;
+  url: string;
+  path?: string;
+  type: "article" | "profile" | "website";
+  image?: string;
+
+  locale?: string;
+  localeAlternate?: string | string[];
+
+  audio?: string;
+  video?: string;
+}
+
+export interface OgMetaProps extends Partial<OgBase> {
+
+}
+
+const DEFAULT_OG = {
+  title: "Commit Rocket",
+  description: "Commit Rocket, the next-gen git client",
+  url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}`,
+  type: "website",
+  locale: "en_US"
+} as OgBase;
+
+const OgMeta = ({ localeAlternate, path, url, image, ...props }: OgMetaProps = DEFAULT_OG) => {
+  const computedUrl = path ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}${path}` : url;
+  const computedImage = !image ? undefined : image.startsWith("http") ? image : `${process.env.NEXT_PUBLIC_FRONTEND_URL}${image}`;
+
+  return (
+    <>
+      {props.title && <title>{props.title}</title>}
+      {props.description && <meta name="description" content={props.description} />}
+      {toOpenGraph({ props, prefix: "og" })}
+      {toOpenGraph({ props: { url: computedUrl, image: computedImage }, prefix: "og" })}
+      {toOpenGraph({ props: { localeAlternate }, prefix: "og:locale" })}
+    </>
+  );
+};
+
+export default OgMeta;
diff --git a/src/components/head/OgProfileMeta.tsx b/src/components/head/OgProfileMeta.tsx
@@ -0,0 +1,23 @@
+export interface OgProfile {
+  userName: string;
+  firstName?: string;
+  lastName?: string;
+  gender?: string;
+}
+
+export interface OgProfileMetaProps extends OgProfile {
+
+}
+
+const OgProfileMeta = ({ userName, firstName, lastName, gender }: OgProfileMetaProps) => {
+  return (
+    <>
+      <meta property="profile:username" content={userName} />
+      {firstName && <meta property="profile:first_name" content={firstName} />}
+      {lastName && <meta property="profile:last_name" content={lastName} />}
+      {gender && <meta property="profile:gender" content={gender} />}
+    </>
+  );
+};
+
+export default OgProfileMeta;
diff --git a/src/components/head/utils/toOpenGraph.tsx b/src/components/head/utils/toOpenGraph.tsx
@@ -0,0 +1,35 @@
+
+
+interface Options {
+  props: Record<string, string | string[] | Date | number | undefined>;
+  prefix: "og" | "profile" | "article" | "book" | "og:image" | "og:audio" | "og:video" | "og:locale";
+}
+
+const toSnakeCase = (key: string) => {
+  return key.replace(/[A-Z]/g, (upper) => "_" + upper.toLowerCase());
+};
+
+const toOpenGraphValue = (val: string | number | Date) => {
+  if (typeof val === "string" || typeof val === "number") return String(val);
+  if (val instanceof Date) return val.toISOString();
+};
+
+const toOpenGraph = ({ props, prefix }: Options) => {
+  return Object.keys(props).map((key, i) => {
+    const givenValue = props[key];
+    if (!givenValue) return null;
+    const values = Array.isArray(givenValue) ? givenValue : [givenValue];
+    const propertyName = toSnakeCase(key);
+
+    return values.map((value, j) => {
+      return <meta
+        key={`${i}${j}${key}${prefix}`}
+        property={`${prefix}:${propertyName}`}
+        content={toOpenGraphValue(value)}
+      />;
+    });
+  }).flatMap((val) => val);
+
+};
+
+export default toOpenGraph;
diff --git a/src/components/pages/about/Member.tsx b/src/components/pages/about/Member.tsx
@@ -1,7 +1,7 @@
 import { IMember } from "@/assets/state/team";
 import LinkButton from "@/components/controls/LinkButton";
 
-const Member = ({ image, name, title, links }: IMember) => (
+const Member = ({ image, fullName, title, links }: IMember) => (
   <li
     className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-md border-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
     aria-label="Member"
@@ -16,7 +16,7 @@ const Member = ({ image, name, title, links }: IMember) => (
         height={image.height}
       />
       <div className="flex flex-col max-w-full gap-2 py-4 text-center w-72">
-        <p className="text-2xl font-semibold text-secondary" aria-label="Name">{name}</p>
+        <p className="text-2xl font-semibold text-secondary" aria-label="Name">{fullName}</p>
         <p className="font-semibold text-secondary" aria-label="Title / Role">{title}</p>
       </div>
     </div>
diff --git a/src/components/pages/blog/ArticleBrief.tsx b/src/components/pages/blog/ArticleBrief.tsx
@@ -9,6 +9,8 @@ import Link from "@/components/navigation/Link";
 import useSSGSafe from "@/hooks/useSSGSafe";
 
 import IArticle from "@/assets/state/articles/article";
+import makeTagUrl from "./utils/makeTagUrl";
+import { readtimeFormatter } from "@/utils/readtime";
 
 const listAnim = {
   in: {
@@ -41,17 +43,6 @@ export interface ArticleBriefProps extends IArticleBrief {
 
 }
 
-const readtimeFormatter = Intl.NumberFormat(undefined, {
-  style: "unit",
-  unit: "minute"
-});
-
-const makeTagUrl = (tag: string) => {
-  const url = new URL("/blog", "https://example.com");
-  url.searchParams.set("tag", tag);
-  return url.href.replace(url.origin, "");
-};
-
 const ArticleBrief = ({ title, thumbnail, thumbnailAlt, readtime, teaser, author, date, url, tags }: ArticleBriefProps) => {
   const safeToRender = useSSGSafe();
 
@@ -113,7 +104,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, readtime, teaser, author
               />
             </div>
             <div className="flex flex-col">
-              <div>{author.name}</div>
+              <div>{author.fullName}</div>
               <div className="text-sm">{author.title}</div>
             </div>
           </AuthorTag>
diff --git a/src/components/pages/blog/utils/makeTagUrl.ts b/src/components/pages/blog/utils/makeTagUrl.ts
@@ -0,0 +1,7 @@
+const makeTagUrl = (tag: string) => {
+  const url = new URL("/blog", "https://example.com");
+  url.searchParams.set("tag", tag);
+  return url.href.replace(url.origin, "");
+};
+
+export default makeTagUrl;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -56,12 +56,10 @@ export default function App({ Component, pageProps, router }: AppProps) {
       });
     }, 1);
   }, []);
+  console.log(router);
 
   return (
     <MotionConfig reducedMotion="user">
-      <Head>
-        <title>Commit Rocket</title>
-      </Head>
       <GoogleAnalytics />
       <div className="flex flex-col font-sans">
         <Header />
@@ -76,7 +74,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
             variants={reduceMotion ? {} : pageAnimation}
           >
             <Component
-              className=""
+              pathname={new URL(router.asPath, "http://example.com").pathname}
               initialLoad={initialLoad}
               reduceMotion={reduceMotion}
               {...pageProps}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
diff --git a/src/pages/blog/[pid]/[slug].tsx b/src/pages/blog/[pid]/[slug].tsx
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
diff --git a/src/types/page.d.ts b/src/types/page.d.ts
diff --git a/src/utils/readtime.ts b/src/utils/readtime.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { SVGProps, forwardRef, ForwardedRef } from "react";`
	`1`	`+import { SVGProps, forwardRef, ForwardedRef } from "react";`
`2`	`2`
`3`	`3`	`const DiscordIcon = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (`
`4`	`4`	`<svg`