feat: meta description for profile

models/Profile.js

@@ -67,6 +67,12 @@ const ProfileSchema = new Schema(
       min: 2,
       max: 256,
     },
+    metaDescription: {
+      type: String,
+      required: false,
+      min: 2,
+      max: 160,
+    },
     tags: {
       type: [String],
       default: [],

pages/[username].js

@@ -1,8 +1,6 @@
 import { useEffect, useState } from "react";
 import { IconContext } from "react-icons";
 import { FaArrowsRotate, FaEye, FaRegFaceSmileWink } from "react-icons/fa6";
-import { remark } from "remark";
-import strip from "strip-markdown";
 import requestIp from "request-ip";
 import { authOptions } from "./api/auth/[...nextauth]";
 import { getServerSession } from "next-auth/next";
@@ -44,14 +42,6 @@ export async function getServerSideProps(context) {
 
   logger.info(`data loaded for username: ${username}`);
 
-  try {
-    const processedBio = await remark().use(strip).process(profile.bio);
-    profile.cleanBio = processedBio.toString();
-  } catch (e) {
-    logger.error(e, `cannot strip markdown for: ${username}`);
-    profile.cleanBio = profile.bio;
-  }
-
   // override hiding navbar and footer if custom domain matches
   if (
     profile.settings?.domain &&
@@ -87,9 +77,9 @@ export default function User({ data, BASE_URL, isLoggedIn }) {
     <>
       <PageHead
         title={data.name}
-        description={data.cleanBio}
+        description={data.metaDescription}
         ogTitle={data.name}
-        ogDescription={data.cleanBio}
+        ogDescription={data.metaDescription}
         ogUrl={`https://biodrop.io/${data.username}`}
         ogImage={`https://github.com/${data.username}.png`}
         ogType="image/png"

pages/account/manage/profile.js

@@ -4,6 +4,8 @@ import path from "path";
 import { authOptions } from "../../api/auth/[...nextauth]";
 import { getServerSession } from "next-auth/next";
 import { useRef, useState } from "react";
+import { remark } from "remark";
+import strip from "strip-markdown";
 
 import { clientEnv } from "@config/schemas/clientSchema";
 import config from "@config/app.json";
@@ -38,6 +40,14 @@ export async function getServerSideProps(context) {
     profile.name = session.user.name;
   }
 
+  try {
+    const processedBio = await remark().use(strip).process(profile.bio);
+    profile.cleanBio = processedBio.toString();
+  } catch (e) {
+    logger.error(e, `cannot strip markdown for: ${username}`);
+    profile.cleanBio = profile.bio;
+  }
+
   const filePath = path.join(process.cwd(), "data", username);
   let fileExists;
   try {
@@ -65,8 +75,10 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
   const [isStatsPublic, setIsStatsPublic] = useState(
     profile.isStatsPublic ? true : false,
   );
-  const [bio, setBio] = useState(
-    profile.bio || "Have a look at my links below...",
+  const defaultBio = "Have a look at my links below...";
+  const [bio, setBio] = useState(profile.bio || defaultBio);
+  const [metaDescription, setMetaDescription] = useState(
+    profile.metaDescription || profile.cleanBio || defaultBio,
   );
   const [tags, setTags] = useState(profile.tags || ["EddieHub"]);
   const layouts = config.layouts.map((l) => {
@@ -101,7 +113,15 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ name, bio, tags, layout, pronoun, isStatsPublic }),
+      body: JSON.stringify({
+        name,
+        bio,
+        tags,
+        layout,
+        pronoun,
+        isStatsPublic,
+        metaDescription,
+      }),
     });
     const update = await res.json();
 
@@ -261,6 +281,18 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
                         max 32 characters).
                       </p>
                     </div>
+
+                    <div className="col-span-3 sm:col-span-4">
+                      <Textarea
+                        name="metaDescription"
+                        label="Meta Description"
+                        value={metaDescription}
+                        onChange={(e) => setMetaDescription(e.target.value)}
+                        required
+                        minLength="2"
+                        maxLength="160"
+                      />
+                    </div>
                   </div>
                   <div className="mt-3">
                     <Toggle

pages/api/account/manage/profile.js

@@ -73,6 +73,7 @@ export async function updateProfileApi(
     name: data.name,
     isStatsPublic: data.isStatsPublic,
     bio: data.bio,
+    metaDescription: data.metaDescription,
     pronoun: data.pronoun,
     tags: data.tags
       .filter((tag) => Boolean(tag.trim()))
@@ -85,6 +86,7 @@ export async function updateProfileApi(
       "layout",
       "name",
       "bio",
+      "metaDescription",
       "isStatsPublic",
     ]);
   } catch (e) {