feat: blog updates

components/blog/blog-article-card.tsx

@@ -22,34 +22,22 @@ export const BlogArticleCard = ({
   date,
   authors,
 }: Article) => {
-  const imageUrl = `/articles/${id}/${image}`
+  const imageUrl =
+    (image ?? "")?.length > 0 ? `/articles/${id}/${image}` : "/fallback.webp"
   return (
     <div className="flex flex-col h-full w-full">
       <div className="relative h-48 w-full overflow-hidden bg-gray-100">
-        {!!image && (
-          <Image
-            src={imageUrl}
-            alt={title}
-            fill
-            className="object-cover"
-            quality={90}
-          />
-        )}
+        <Image
+          src={imageUrl}
+          alt={title}
+          fill
+          className="object-cover"
+          quality={90}
+        />
       </div>
 
       <div className="p-5 flex flex-col flex-grow gap-5 lg:gap-8 min-h-[180px]">
         <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-1">
-            <Image
-              src="/logos/pse-logo-bg.svg"
-              alt="Privacy and Scaling Explorations"
-              width={24}
-              height={24}
-            />
-            <span className="text-black/50 font-medium text-sm">
-              Privacy and Scaling Explorations
-            </span>
-          </div>
           <h2 className="text-2xl font-bold leading-7 text-black duration-200 cursor-pointer hover:text-anakiwa-500">
             {title}
           </h2>

components/blog/blog-articles.tsx

@@ -30,7 +30,6 @@ function ArticlesGrid({
       )}
       {articles.map(
         ({ id, title, image, tldr = "", date, authors, content }: Article) => {
-          // Use lang parameter for correct article URL
           const url = `/${lang}/blog/${id}`
           return (
             <div key={id} className="flex h-full">

components/blog/blog-recent-articles.tsx

@@ -8,7 +8,7 @@ import { Button } from "../ui/button"
 import { Icons } from "../icons"
 
 export async function BlogRecentArticles({ lang }: { lang: any }) {
-  const articles = getArticles({ limit: 5 })
+  const articles = getArticles({ limit: 6 })
   const { t } = await useTranslation(lang, "blog-page")
 
   const lastArticle = articles[0]
@@ -24,8 +24,8 @@ export async function BlogRecentArticles({ lang }: { lang: any }) {
             {t("recentArticles")}
           </h3>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
-            <div className="flex flex-col gap-5 lg:col-span-2">
+          <div className="grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-x-14 lg:max-w-[1200px] mx-auto">
+            <div className="flex flex-col gap-5 lg:col-span-3">
               <Image
                 src={imageUrl}
                 alt={lastArticle.title}
@@ -50,7 +50,7 @@ export async function BlogRecentArticles({ lang }: { lang: any }) {
                 )}
               </Link>
             </div>
-            <div className="flex flex-col gap-6 lg:col-span-1">
+            <div className="flex flex-col gap-6 lg:col-span-2">
               {otherArticles.map((article, index) => (
                 <Link
                   key={article.id}
@@ -67,7 +67,7 @@ export async function BlogRecentArticles({ lang }: { lang: any }) {
                   )}
                 </Link>
               ))}
-              <Link href="/blog">
+              <Link href="/blog" className="mt-auto">
                 <Button className="uppercase">
                   <div className="flex items-center gap-2">
                     <span>{t("seeMore")}</span>

components/ui/markdown.tsx

@@ -108,10 +108,10 @@ const remarkCustomNewlines = () => {
 }
 
 // Styling for HTML attributes for markdown component
-const REACT_MARKDOWN_CONFIG: Components = {
+const REACT_MARKDOWN_CONFIG = (darkMode: boolean): Components => ({
   a: ({ ...props }) =>
     createMarkdownElement("a", {
-      className: "text-anakiwa-500 hover:text-orange duration-200",
+      className: `${darkMode ? "text-anakiwa-300" : "text-anakiwa-500"} hover:text-orange duration-200`,
       target: "_blank",
       ...props,
     }),
@@ -147,7 +147,7 @@ const REACT_MARKDOWN_CONFIG: Components = {
     }),
   p: ({ ...props }) =>
     createMarkdownElement("p", {
-      className: "text-tuatara-700 font-sans text-base font-normal",
+      className: `${darkMode ? "text-white" : "text-tuatara-700 "} font-sans text-base font-normal`,
       ...props,
     }),
   ul: ({ ordered, ...props }) =>
@@ -189,19 +189,24 @@ const REACT_MARKDOWN_CONFIG: Components = {
       className: "w-auto w-auto mx-auto rounded-lg object-cover",
       ...props,
     }),
-}
+})
 
 interface MarkdownProps {
   children: string
   components?: Components // components overrides the default components
+  darkMode?: boolean
 }
 
-export const Markdown = ({ children, components }: MarkdownProps) => {
+export const Markdown = ({
+  children,
+  components,
+  darkMode = false,
+}: MarkdownProps) => {
   return (
     <ReactMarkdown
       skipHtml={false}
       components={{
-        ...REACT_MARKDOWN_CONFIG,
+        ...REACT_MARKDOWN_CONFIG(darkMode),
         ...components,
       }}
       remarkPlugins={[remarkGfm, remarkMath, remarkCustomNewlines]}