myanmar-software-engineers · lwinmoepaing · Mar 23, 2026 · Mar 22, 2026 · Mar 22, 2026 · Mar 23, 2026
diff --git a/content/books/sample-book.mdx b/content/books/sample-book.mdx
@@ -0,0 +1,8 @@
+---
+title: "Clean Code"
+authorName: "Robert C. Martin"
+link: "https://www.oreilly.com/library/view/clean-code-a/9780136083238/"
+image: "https://m.media-amazon.com/images/I/41xShlnTZTL._SX374_BO1,204,203,200_.jpg"
+authorEmail: "unclebob@example.com"
+authorLink: "https://blog.cleancoder.com/"
+---
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -53,9 +53,26 @@ export const Profile = defineDocumentType(() => ({
   computedFields: computedFields,
 }));
 
+const bookFields: FieldDefs = {
+  title: { type: "string", required: true },
+  authorName: { type: "string", required: true },
+  link: { type: "string", required: true },
+  image: { type: "string", required: false },
+  authorEmail: { type: "string", required: false },
+  authorLink: { type: "string", required: false },
+};
+
+export const Book = defineDocumentType(() => ({
+  name: "Book",
+  filePathPattern: `./books/**/*.mdx`,
+  fields: bookFields,
+  contentType: "mdx",
+  computedFields: computedFields,
+}));
+
 export default makeSource({
   contentDirPath: "./content",
-  documentTypes: [Blog, Profile],
+  documentTypes: [Blog, Profile, Book],
   mdx: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [

diff --git a/messages/en.json b/messages/en.json
@@ -59,6 +59,7 @@
   "nav": {
     "home": "Home",
     "profiles": "Profiles",
+    "books": "Books",
     "editor": "Editor",
     "howTo": "How to",
     "blog": "Blog",
@@ -368,6 +369,7 @@
     "navigate": "Navigate",
     "home": "Home",
     "profiles": "Profiles",
+    "books": "Books",
     "profileEditor": "Profile Editor",
     "blog": "Blog",
     "contactUs": "Contact Us",

diff --git a/messages/mm.json b/messages/mm.json
@@ -59,6 +59,7 @@
   "nav": {
     "home": "ပင်မစာမျက်နှာ",
     "profiles": "ပရိုဖိုင်များ",
+    "books": "စာအုပ်များ",
     "editor": "အယ်ဒီတာ",
     "howTo": "လမ်းညွှန်",
     "blog": "ဘလော့ဂ်",
@@ -368,6 +369,7 @@
     "navigate": "လမ်းညွှန်",
     "home": "ပင်မစာမျက်နှာ",
     "profiles": "ပရိုဖိုင်များ",
+    "books": "စာအုပ်များ",
     "profileEditor": "ပရိုဖိုင် အယ်ဒီတာ",
     "blog": "ဘလော့ဂ်",
     "contactUs": "ဆက်သွယ်ရန်",

diff --git a/src/app/books/page.tsx b/src/app/books/page.tsx
@@ -0,0 +1,120 @@
+import PageTransitionWrapper from "@/components/Animate/PageTransitionWrapper/PageTransitionWrapper";
+import Container from "@/components/Common/Container/Container";
+import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
+import APP_CONFIG from "@/config/config";
+import { allBooks } from "contentlayer/generated";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: `Books | ${APP_CONFIG.title}`,
+  description:
+    "Discover recommended tech books and learning resources shared by the MMSWE community.",
+  openGraph: {
+    title: `Books | ${APP_CONFIG.title}`,
+    description:
+      "Discover recommended tech books and learning resources shared by the MMSWE community.",
+    images: "https://mmswe.com/images/mmswe-seo.png",
+  },
+};
+
+const BooksPage = async () => {
+  const books = [...allBooks].sort((a, b) => a.title.localeCompare(b.title));
+
+  return (
+    <PageTransitionWrapper>
+      <Container>
+        <section className="py-16">
+          <div className="max-w-3xl">
+            <p className="font-mono text-xs uppercase tracking-[0.25em] text-zinc-500">
+              Community Library
+            </p>
+            <h1 className="mt-4 font-display text-4xl font-bold text-zinc-100 sm:text-5xl">
+              Books
+            </h1>
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-400">
+              Recommended tech books and learning resources shared by Myanmar
+              software engineers.
+            </p>
+          </div>
+
+          {books.length === 0 ? (
+            <div className="mt-12 rounded-3xl border border-white/10 bg-surface/50 p-8 text-zinc-300">
+              <h2 className="font-display text-2xl font-semibold text-zinc-100">
+                No books yet
+              </h2>
+              <p className="mt-3 max-w-2xl text-sm leading-6 text-zinc-400">
+                Community recommendations will appear here once contributors add
+                book entries to the repository.
+              </p>
+            </div>
+          ) : (
+            <div className="mt-12 grid gap-4">
+              {books.map((book) => (
+                <article
+                  key={book._id}
+                  className="rounded-3xl border border-white/10 bg-surface/50 p-6 transition-colors hover:border-white/20"
+                >
+                  <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+                      {book.image && (
+                        <img
+                          src={book.image}
+                          alt={`${book.title} cover`}
+                          className="h-32 w-24 rounded-xl border border-white/10 object-cover"
+                        />
+                      )}
+
+                      <div>
+                        <h2 className="font-display text-2xl font-semibold text-zinc-100">
+                          {book.title}
+                        </h2>
+                        <p className="mt-2 text-sm text-zinc-400">
+                          by {book.authorName}
+                        </p>
+                        {(book.authorEmail || book.authorLink) && (
+                          <div className="mt-3 flex flex-col gap-2 text-sm">
+                            {book.authorEmail && (
+                              <a
+                                href={`mailto:${book.authorEmail}`}
+                                className="text-zinc-400 transition-colors hover:text-prism-cyan"
+                              >
+                                {book.authorEmail}
+                              </a>
+                            )}
+                            {book.authorLink && (
+                              <a
+                                href={book.authorLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-zinc-400 transition-colors hover:text-prism-cyan"
+                              >
+                                {book.authorLink}
+                              </a>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    <a
+                      href={book.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center justify-center rounded-full border border-prism-cyan/40 px-4 py-2 text-sm font-medium text-prism-cyan transition-colors hover:border-prism-cyan hover:bg-prism-cyan/10"
+                    >
+                      Open Resource
+                    </a>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <SpacingDivider size="lg" />
+      </Container>
+    </PageTransitionWrapper>
+  );
+};
+
+export default BooksPage;
diff --git a/src/components/Common/Footer/Footer.tsx b/src/components/Common/Footer/Footer.tsx
@@ -339,27 +339,36 @@ const Footer = () => {
                 {t("profiles")}
               </FooterLink>
               <FooterLink
-                href="/profile/editor"
+                href="/books"
                 color="#22d3ee"
                 index={2}
                 isInView={isInView}
                 mmFont={mmFont}
               >
-                {t("profileEditor")}
+                {t("books")}
               </FooterLink>
               <FooterLink
-                href="/blog"
+                href="/profile/editor"
                 color="#fb7185"
                 index={3}
                 isInView={isInView}
                 mmFont={mmFont}
+              >
+                {t("profileEditor")}
+              </FooterLink>
+              <FooterLink
+                href="/blog"
+                color="#fbbf24"
+                index={4}
+                isInView={isInView}
+                mmFont={mmFont}
               >
                 {t("blog")}
               </FooterLink>
               <FooterLink
                 href="/contact-us"
                 color="#fbbf24"
-                index={4}
+                index={5}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -368,8 +377,8 @@ const Footer = () => {
 
               <FooterLink
                 href="/jobs"
-                color="#fbbf24"
-                index={4}
+                color="#fb7185"
+                index={6}
                 isInView={isInView}
                 mmFont={mmFont}
               >
@@ -378,7 +387,7 @@ const Footer = () => {
               <FooterLink
                 href="/how-to-develop-setup"
                 color="#fb7185"
-                index={5}
+                index={7}
                 isInView={isInView}
                 mmFont={mmFont}
               >

diff --git a/src/components/Common/Navbar/Navbar.tsx b/src/components/Common/Navbar/Navbar.tsx
@@ -17,6 +17,7 @@ import SignInButton from "@/components/Auth/SignInButton";
 const linkKeys = [
   { key: "home", href: "/" },
   { key: "profiles", href: "/profile" },
+  { key: "books", href: "/books" },
   { key: "editor", href: "/profile/editor" },
   { key: "howTo", href: "/how-to" },
   { key: "blog", href: "/blog" },