feat; update blog styling + images

articles/10-ways-to-contribute-to-geeksblabla.md → articles/10-ways-to-contribute-to-geeksblabla/index.md

@@ -6,6 +6,7 @@ pubDatetime: 2024-12-01
 authors: ["abdelati"]
 slug: contribute-to-geeksblabla
 description: "Explore how you can contribute to GeeksBlabla, from sharing feedback to joining the core team, and make a meaningful impact in the Moroccan tech community."
+ogImage: "./images/10-ways.png"
 ---
 
 **"How can I contribute to the GeeksBlabla community?"** This is one of the most common questions we receive, and this blog post is here to answer it.

articles/geeksblabla-story.md → articles/geeksblabla-story/index.md

@@ -5,6 +5,7 @@ keywords: ["GeeksBlabla", "Moroccan tech community"]
 pubDatetime: 2024-12-01
 authors: ["aboullaite"] # the name of the author file
 description: "Discover the inspiring journey of GeeksBlaBla, from its humble beginnings as a Ramadan discussion series to becoming a thriving Moroccan tech community built on knowledge sharing, diversity, and social impact."
+ogImage: "./images/geeksblabla-timeline.png"
 ---
 
 It is still surreal to me how Geeksblabla grew from this small community of enthusiasts, just talking about anything and everything, to a community as big as it is today, with everything that comes with it (Drama included\!).
@@ -14,7 +15,7 @@ But that hasn't always been the case, and probably wasn't in our bingo card for
 ## The Very Beginning
 
 You may have heard about it before, or maybe not. But Geeksblabla today owes some of its success to its ancestor community Developer Circles Casablanca. A hybrid community that was built on a Facebook group with support from Facebook (now Meta) back in 2016\.
-![Geeksblabla beginning](./images/image2.jpg)
+![Geeksblabla beginning](./images/devc-casablanca.jpg)
 
 At some point, DevC Casa was the most active DevC community online in terms of engagement, which lead our efforts towards more online content creation given that it was easier to host and scale (if the internet allows it for sure).
 
@@ -23,11 +24,10 @@ However, I was, and still am, a strong believer in offline meetups and face-to-f
 At its core, DevC Casa is what helped us meet and build a core team. This team later on embarked on a journey to build Geeksblabla as it is today.
 I owe a lot to Meryem Zaid, one of the earliest members who has been with me for most of the journey\!
 
-**GeeksBlaBla is Born.**
-
+## GeeksBlaBla is Born
 
 Geeksblabla came out from a very unexpected, very simple idea, in a relatively weird timing\! We wanted to build upon the online success that we had in the online group and host a small, Ramadan-exclusive series of very informal tech discussions during Ramadan nights. In total, we were planning 4 episodes, 1 hour-ish each and moving on. That's really it\! No big plans, no defined structure … just having fun.
-![Geeksblabla is born](./images/image1.jpg)
+![Geeksblabla is born](./images/geeksblabla-devc-logo.jpg)
 
 On our 1st night, what was intended to be an hour-long discussion, ended up being 3-hour-long fun and informal discussions on the DevC Facebook group. We certainly liked the vibes and the fruits of that session, and everyone was certain that we needed to keep this lively session alive.
 
@@ -37,15 +37,15 @@ We try as much as possible to not kill initiatives and plan thoroughly for them.
 
 Combining these two principles, we started with a 1-month cadence afterwards, then bi-weekly and settled on a weekly cadence. Both Soufiane El Foukahi and Youssouf El Azizi played a fundamental role in pushing the limit and turning Geeksblabla into what it has become now.
 
-## So What ?
+**So What ?**
 
 If you've made it this far, first, thank you for bearing with my writing. You might be more curious about Geeksblabla now, eager to understand what makes us tick, rather than just dwelling on our past. Let me show you what we're all about.
 
 ## Our North Star: Mission and Values
 
 In the vast landscape of technology, communities are more than just groups—they're catalysts of change, learning, and collective growth. GeeksBlaBla might not be the largest or most famous community in Morocco, but we have something unique: a genuine passion for bringing people together, breaking down barriers, and helping each tech enthusiast find their path.
 
-### Our Mission
+## Our Mission
 
 > **To Empower Moroccan 🇲🇦 IT enthusiasts and beyond to thrive through continuous learning, exchange, collaboration, and innovation.**
 
@@ -57,7 +57,7 @@ Our journey hasn't just been about growth—it's been a transformation. Since ou
 - **Inclusive Diversity**: We embrace different perspectives and backgrounds, understanding that true innovation comes from varied experiences and inclusive thinking.
 - **Tech for Social Impact:** We believe in harnessing the collective power of our community to drive positive change, using technology as a tool for social good.
 
-### Our Guiding Values
+## Our Guiding Values
 
 Every community needs a structure, a rhythm, and a base that shows what its actions are all about. A set of values acts as a compass, guiding us honestly and giving us something to hold onto when we're not sure what to do. We have found six core values that, even though they don't cover everything, show who we are the most. We want to keep these values and live by them all the time.
 

src/components/blog/article-details.astro

@@ -7,6 +7,8 @@ import { getEntries, render } from "astro:content";
 import Header from "@/components/header.astro";
 import ArticleComments from "./article-comments.astro";
 import ShareArticle from "./share-article.astro";
+import BlogImage from "./blog-image.astro";
+import ArticleNavigation from "./article-navigation.astro";
 
 export interface Props {
   article: CollectionEntry<"blog">;
@@ -27,19 +29,64 @@ const authors = article.data.authors
   title={title}
   author={authors?.map(author => author.data.name).join(", ")}
   description={description}
-  ogImage={ogImage}
+  ogImage={ogImage?.src}
 >
   <Header />
   <main id="main-content" class="container mx-auto pb-10">
-    <div class="mx-auto max-w-3xl border-b border-gray-300 pb-4 pt-10">
-      <h1 class="text-heading-sm font-semibold">{title}</h1>
-      <p class="text-sm text-gray-500">{minutesRead}</p>
-      <div class="my-3 flex flex-row flex-wrap items-end">
-        <Datetime datetime={pubDatetime} size="lg" className="mr-2" />
+    <div class="mx-auto max-w-3xl border-b border-gray-300 pb-0 pt-10">
+      <h1 class="text-4xl font-semibold">{title}</h1>
+      <div
+        class="relative flex flex-row items-center text-base italic text-gray-600"
+      >
+        <div class="my-3 flex flex-row flex-wrap items-end">
+          <Datetime datetime={pubDatetime} size="lg" className="mr-2" />
+        </div>
+        <div class="mx-3 h-3 w-px bg-gray-500"></div>
+        <div class="flex items-center text-base">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-1 h-5 w-5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M12 6v6l4 2"></path>
+          </svg>
+          {minutesRead}
+        </div>
+        <div class="mx-3 h-3 w-px bg-gray-500"></div>
+        <div class="flex items-center text-base">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-1 h-5 w-5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+            ></path>
+          </svg>
+          {authors?.map(author => author.data.name).join(", ")}
+        </div>
       </div>
-      <p class="text-sm text-gray-500">
-        by: {authors?.map(author => author.data.name).join(", ")}
-      </p>
+      {
+        ogImage && (
+          <>
+            <BlogImage
+              slug={article.data.slug}
+              title={title}
+              ogImage={ogImage}
+            />
+            <div class="mt-4" />
+          </>
+        )
+      }
     </div>
 
     <article
@@ -50,6 +97,7 @@ const authors = article.data.authors
       <Content />
     </article>
     <ShareArticle />
+    <ArticleNavigation article={article} />
 
     <div class="mx-auto mt-10 w-full max-w-3xl">
       <ArticleComments />

src/components/blog/article-navigation.astro

@@ -0,0 +1,62 @@
+---
+import { Icon } from "astro-icon/components";
+import type { CollectionEntry } from "astro:content";
+import { getCollection } from "astro:content";
+import { getSortedArticles } from "@/lib/utils";
+
+export interface Props {
+  article: CollectionEntry<"blog">;
+}
+
+const { article } = Astro.props;
+
+// Get all articles and find current article index
+const articles = await getCollection("blog");
+const sortedArticles = getSortedArticles(articles);
+const currentIndex = sortedArticles.findIndex(a => a.id === article.id);
+
+// Get next and previous articles
+const previousArticle =
+  currentIndex < sortedArticles.length - 1
+    ? sortedArticles[currentIndex + 1]
+    : null;
+const nextArticle = currentIndex > 0 ? sortedArticles[currentIndex - 1] : null;
+---
+
+<nav class="mx-auto mt-2 max-w-3xl" aria-label="Article navigation">
+  <div class="flex justify-between">
+    {
+      previousArticle && (
+        <a
+          href={`/blog/${previousArticle.data.slug}`}
+          class="group flex max-w-[45%] flex-col items-start gap-2 hover:text-neutral-dark-50"
+        >
+          <div class="flex items-center gap-2 text-sm text-neutral-dark-50">
+            <Icon name="arrow-left" class="h-4 w-4" />
+            <span>Previous Article</span>
+          </div>
+          <span class="line-clamp-2 text-base font-medium">
+            {previousArticle.data.title}
+          </span>
+        </a>
+      )
+    }
+
+    {
+      nextArticle && (
+        <a
+          href={`/blog/${nextArticle.data.slug}`}
+          class="group ml-auto flex max-w-[45%] flex-col items-end gap-2 text-right hover:text-neutral-dark-50"
+        >
+          <div class="flex items-center gap-2 text-sm text-neutral-dark-50">
+            <span>Next Article</span>
+            <Icon name="arrow-right" class="h-4 w-4" />
+          </div>
+          <span class="line-clamp-2 text-base font-medium">
+            {nextArticle.data.title}
+          </span>
+        </a>
+      )
+    }
+  </div>
+</nav>

src/components/blog/blog-card-home-page.astro

@@ -1,6 +1,7 @@
 ---
 import type { ArticleFrontmatter } from "@/content/schema";
 import { getEntries } from "astro:content";
+import BlogImage from "./blog-image.astro";
 
 export interface Props {
   href?: string;
@@ -14,17 +15,16 @@ const authors = frontmatter.authors
   : undefined;
 
 const { title, description, ogImage, slug } = frontmatter;
-const imageUrl = ogImage ? ogImage : `/blog/${slug}.png`;
 ---
 
-<div class="group flex flex-col px-4">
+<div class="group flex flex-col px-0 py-4 md:px-4">
   <div class="w-full">
-    <img src={imageUrl} alt={title} />
+    <BlogImage slug={slug} title={title} ogImage={ogImage} />
   </div>
-  <div class="flex h-full flex-col border-neutral-300 pl-3">
+  <div class="flex h-full flex-col border-neutral-200">
     <div class="flex flex-1 flex-row justify-between">
       <a href={href} class="block text-label-lg">
-        <h2 class="text-label-lg">{title}</h2>
+        <h2 class="text-label-lg font-medium">{title}</h2>
       </a>
     </div>
     <p class="mb-4 line-clamp-2 text-paragraph-sm text-neutral-dark-20">

src/components/blog/blog-card.astro

@@ -1,6 +1,7 @@
 ---
 import type { ArticleFrontmatter } from "@/content/schema";
 import { getEntries } from "astro:content";
+import BlogImage from "./blog-image.astro";
 
 export interface Props {
   href?: string;
@@ -16,7 +17,6 @@ const authors = frontmatter.authors
   : undefined;
 
 const { title, description, ogImage, slug } = frontmatter;
-const imageUrl = ogImage ? ogImage : `/blog/${slug}.png`;
 ---
 
 <div
@@ -25,7 +25,7 @@ const imageUrl = ogImage ? ogImage : `/blog/${slug}.png`;
   {
     withCover && (
       <div class="w-full md:w-1/2">
-        <img src={imageUrl} alt={title} />
+        <BlogImage slug={slug} title={title} ogImage={ogImage} />
       </div>
     )
   }

src/components/blog/blog-image.astro

@@ -0,0 +1,27 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+interface Props {
+  slug: string;
+  title: string;
+  ogImage?: ImageMetadata;
+}
+
+const { slug, title, ogImage } = Astro.props;
+---
+
+{
+  ogImage && (
+    <Image src={ogImage} alt={title} class="h-full w-full object-cover" />
+  )
+}
+{
+  !ogImage && (
+    <img
+      class="h-full w-full bg-neutral-300"
+      src={`/blog/${slug}.png`}
+      alt={title}
+    />
+  )
+}

src/components/blog/datetime.tsx

@@ -8,13 +8,15 @@ export interface Props {
 
 export default function Datetime({ datetime, size = "sm", className }: Props) {
   return (
-    <div className={`flex items-center space-x-2 opacity-80 ${className}`}>
+    <div className={`flex items-center space-x-2 ${className}`}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className={`${
           size === "sm" ? "scale-90" : "scale-100"
-        } inline-block h-6 w-6 fill-gray-500`}
+        } inline-block h-5 w-5`}
+        viewBox="0 0 24 24"
         aria-hidden="true"
+        fill="currentColor"
       >
         <path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>
         <path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path>

src/components/home/faq-item.astro

@@ -8,12 +8,14 @@ const { open, label }: Props = Astro.props;
 
 <details open={open}>
   <summary
-    class="mt-2 flex cursor-pointer items-center justify-between rounded-lg border border-[#C3CAD4] bg-white px-4 py-2 text-paragraph-sm font-semibold text-gray-700"
+    class="mt-2 flex cursor-pointer flex-row items-center justify-between rounded-lg border border-[#C3CAD4] bg-white px-4 py-2 text-paragraph-sm font-semibold text-gray-700"
   >
-    {label}
+    <div class="flex flex-1 flex-row items-center gap-2 pr-3">
+      <span class="text-paragraph-sm font-semibold text-gray-700">{label}</span>
+    </div>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="h-6 w-6 transform text-gray-500 transition-transform duration-300"
+      class="block h-6 !w-6 transform text-gray-500 transition-transform duration-300"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"

src/components/layout.astro

@@ -61,6 +61,11 @@ const socialImageURL = new URL(
       href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap"
       rel="stylesheet"
     />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap"
+      rel="stylesheet"
+    />
   </head>
 
   <body>

src/content/config.ts

@@ -15,7 +15,7 @@ const podcast = defineCollection({
 
 const blog = defineCollection({
   loader: glob({ pattern: "**/[^_]*.md", base: "articles" }),
-  schema: blogSchema,
+  schema: arg => blogSchema(arg),
 });
 
 export const authors = defineCollection({