From acb33f86b2209f96884cfd33385800f17c7de3d4 Mon Sep 17 00:00:00 2001 From: Kaung Myat Shwe <225817956+kaungmyatshwe1397@users.noreply.github.com> Date: Wed, 25 Mar 2026 16:22:15 +0700 Subject: [PATCH 1/2] :sparkles: feat(books-classes): refactor pages and adjust for headerstyle consistency --- content/books/sample-book.mdx | 8 +- messages/en.json | 10 ++ messages/mm.json | 10 ++ src/app/books/BooksPageClient.tsx | 143 +++++++++++++++++ src/app/books/page.tsx | 95 +----------- src/app/classes/ClassesPageClient.tsx | 138 +++++++++++++++++ src/app/classes/page.tsx | 89 +---------- .../Common/SectionHero/SectionHero.tsx | 144 ++++++++++++++++++ 8 files changed, 453 insertions(+), 184 deletions(-) create mode 100644 src/app/books/BooksPageClient.tsx create mode 100644 src/app/classes/ClassesPageClient.tsx create mode 100644 src/components/Common/SectionHero/SectionHero.tsx diff --git a/content/books/sample-book.mdx b/content/books/sample-book.mdx index b0a0fd6..4436cfc 100644 --- a/content/books/sample-book.mdx +++ b/content/books/sample-book.mdx @@ -1,10 +1,10 @@ --- 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/" +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/ --- Recommended software craftsmanship reading. diff --git a/messages/en.json b/messages/en.json index 2e4b633..0820f0a 100644 --- a/messages/en.json +++ b/messages/en.json @@ -358,6 +358,16 @@ "title": "Profiles", "subtitle": "Discover {count}+ software engineers from Myanmar. Browse by technology, search by name, and connect with the community." }, + "booksHero": { + "label": "Tech Books & Resources", + "title": "Books", + "subtitle": "Recommended tech books and learning resources shared by Myanmar software engineers." + }, + "classesHero": { + "label": "Tech Classes & Workshops", + "title": "Classes", + "subtitle": "A trust-first, community-curated directory of tech classes in Myanmar. Listings are reviewed before publication." + }, "footer": { "tagline": { "prefix": "Empowering Myanmar's Software Engineers to ", diff --git a/messages/mm.json b/messages/mm.json index 96b2a2a..c1073b6 100644 --- a/messages/mm.json +++ b/messages/mm.json @@ -358,6 +358,16 @@ "title": "ပရိုဖိုင်များ", "subtitle": "မြန်မာမှ ဆော့ဖ်ဝဲ အင်ဂျင်နီယာ {count}+ ဦးကို ရှာဖွေပါ။ နည်းပညာအလိုက် ရှာဖွေပါ၊ အမည်ဖြင့် ရှာပါ၊ အသိုင်းအဝိုင်းနှင့် ချိတ်ဆက်ပါ။" }, + "booksHero": { + "label": "နည်းပညာ စာအုပ်များနှင့် အရင်းအမြစ်များ", + "title": "စာအုပ်များ", + "subtitle": "မြန်မာ software engineer များ မျှဝေထားသော နည်းပညာစာအုပ်များနှင့် လေ့လာရေးအရင်းအမြစ်များကို ရှာဖွေပါ။" + }, + "classesHero": { + "label": "နည်းပညာ သင်တန်းများနှင့် အလုပ်ရုံဆွေးနွေးပွဲများ", + "title": "သင်တန်းများ", + "subtitle": "ယုံကြည်စိတ်ချရမှုကို အခြေခံထားသော မြန်မာနည်းပညာသင်တန်းများ စာရင်းဖြစ်ပြီး၊ စာရင်းတင်သွင်းမှုများကို မထုတ်ပြန်မီ စစ်ဆေးအတည်ပြုပါသည်။" + }, "footer": { "tagline": { "prefix": "မြန်မာ့ ဆော့ဖ်ဝဲ အင်ဂျင်နီယာများကို ", diff --git a/src/app/books/BooksPageClient.tsx b/src/app/books/BooksPageClient.tsx new file mode 100644 index 0000000..7312dd2 --- /dev/null +++ b/src/app/books/BooksPageClient.tsx @@ -0,0 +1,143 @@ +"use client"; + +import Container from "@/components/Common/Container/Container"; +import SectionHero from "@/components/Common/SectionHero/SectionHero"; +import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider"; +import { BookOpen, Bookmark, LibraryBig, NotebookPen } from "lucide-react"; +import { useTranslations } from "next-intl"; + +type BookItem = { + _id: string; + title: string; + authorName: string; + authorEmail?: string; + authorLink?: string; + image?: string; + link: string; +}; + +type BooksPageClientProps = { + books: BookItem[]; +}; + +const BooksPageClient = ({ books }: BooksPageClientProps) => { + const t = useTranslations("booksHero"); + + return ( + +
+ + + {books.length === 0 ? ( +
+

+ No books yet +

+

+ Community recommendations will appear here once contributors add + book entries to the repository. +

+
+ ) : ( +
+ {books.map((book) => ( + + ))} +
+ )} +
+ + + + ); +}; + +export default BooksPageClient; diff --git a/src/app/books/page.tsx b/src/app/books/page.tsx index 1773caf..907e8af 100644 --- a/src/app/books/page.tsx +++ b/src/app/books/page.tsx @@ -1,9 +1,8 @@ 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"; +import BooksPageClient from "./BooksPageClient"; export const metadata: Metadata = { title: `Books | ${APP_CONFIG.title}`, @@ -22,97 +21,7 @@ const BooksPage = async () => { return ( - -
-
-

- Community Library -

-

- Books -

-

- Recommended tech books and learning resources shared by Myanmar - software engineers. -

-
- - {books.length === 0 ? ( -
-

- No books yet -

-

- Community recommendations will appear here once contributors add - book entries to the repository. -

-
- ) : ( -
- {books.map((book) => ( - - ))} -
- )} -
- - - + ); }; diff --git a/src/app/classes/ClassesPageClient.tsx b/src/app/classes/ClassesPageClient.tsx new file mode 100644 index 0000000..4957ee3 --- /dev/null +++ b/src/app/classes/ClassesPageClient.tsx @@ -0,0 +1,138 @@ +"use client"; + +import Container from "@/components/Common/Container/Container"; +import SectionHero from "@/components/Common/SectionHero/SectionHero"; +import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider"; +import { BookOpenCheck, GraduationCap, Presentation, School } from "lucide-react"; +import { useTranslations } from "next-intl"; + +type ClassItem = { + _id: string; + title: string; + status: string; + classType: string; + description: string; + instructorName: string; + tags: string[]; + classLink: string; +}; + +type ClassesPageClientProps = { + classes: ClassItem[]; +}; + +const ClassesPageClient = ({ classes }: ClassesPageClientProps) => { + const t = useTranslations("classesHero"); + + return ( + +
+ + + {classes.length === 0 ? ( +
+

+ No classes yet +

+

+ Verified class listings will appear here after maintainers review + and approve class submissions. +

+
+ ) : ( +
+ {classes.map((classItem) => ( +
+
+
+
+

+ {classItem.title} +

+ + {classItem.status} + + + {classItem.classType} + +
+ +

+ {classItem.description} +

+ +

+ Instructor: {classItem.instructorName} +

+ +
+ {classItem.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + +
+
+ ))} +
+ )} +
+ + + + ); +}; + +export default ClassesPageClient; diff --git a/src/app/classes/page.tsx b/src/app/classes/page.tsx index 3fbe2f3..9f5642f 100644 --- a/src/app/classes/page.tsx +++ b/src/app/classes/page.tsx @@ -1,9 +1,8 @@ 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 { allClasses } from "contentlayer/generated"; import { Metadata } from "next"; +import ClassesPageClient from "./ClassesPageClient"; export const metadata: Metadata = { title: `Classes | ${APP_CONFIG.title}`, @@ -22,91 +21,7 @@ const ClassesPage = async () => { return ( - -
-
-

- Verified Registry -

-

- Classes -

-

- A trust-first, community-curated directory of tech classes in - Myanmar. Listings are reviewed before publication. -

-
- - {classes.length === 0 ? ( -
-

- No classes yet -

-

- Verified class listings will appear here after maintainers review - and approve class submissions. -

-
- ) : ( -
- {classes.map((classItem) => ( -
-
-
-
-

- {classItem.title} -

- - {classItem.status} - - - {classItem.classType} - -
- -

- {classItem.description} -

- -

- Instructor: {classItem.instructorName} -

- -
- {classItem.tags.map((tag) => ( - - {tag} - - ))} -
-
- - -
-
- ))} -
- )} -
- - - + ); }; diff --git a/src/components/Common/SectionHero/SectionHero.tsx b/src/components/Common/SectionHero/SectionHero.tsx new file mode 100644 index 0000000..efe64d0 --- /dev/null +++ b/src/components/Common/SectionHero/SectionHero.tsx @@ -0,0 +1,144 @@ +"use client"; + +import { khitHaungg } from "@/fonts/fonts"; +import { useLanguage } from "@/hooks/useLanguage"; +import { LucideIcon } from "lucide-react"; +import { motion, useInView } from "motion/react"; +import { CSSProperties, useRef } from "react"; + +type FloatingIconConfig = { + Icon: LucideIcon; + className: string; + style: CSSProperties; + delay: number; + sizeClass: string; +}; + +type SectionHeroProps = { + label: string; + title: string; + subtitle: string; + labelIcon: LucideIcon; + labelIconClassName: string; + labelChipBackground: string; + labelChipBorder: string; + shimmerBackground: string; + myanmarTitleColorClass: string; + floatingIcons: FloatingIconConfig[]; +}; + +const SectionHero = ({ + label, + title, + subtitle, + labelIcon: LabelIcon, + labelIconClassName, + labelChipBackground, + labelChipBorder, + shimmerBackground, + myanmarTitleColorClass, + floatingIcons, +}: SectionHeroProps) => { + const heroRef = useRef(null); + const heroInView = useInView(heroRef, { amount: 0.3, once: true }); + const { isMyanmar } = useLanguage(); + const mmFont = isMyanmar ? khitHaungg.className : ""; + + return ( +
+ {floatingIcons.map(({ Icon, className, style, delay, sizeClass }, index) => ( + + + + ))} + + + + + + + {label} + + + + + + + {title} + + + + + {subtitle} + + + +
+ ); +}; + +export default SectionHero; From 9a9329b2a1068997365048efe4c97e8f70ded636 Mon Sep 17 00:00:00 2001 From: Kaung Myat Shwe <225817956+kaungmyatshwe1397@users.noreply.github.com> Date: Wed, 25 Mar 2026 16:40:33 +0700 Subject: [PATCH 2/2] :memo: docs: update documentation --- README.md | 129 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 105 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 20c6a62..ee191f6 100644 --- a/README.md +++ b/README.md @@ -32,17 +32,17 @@ MMSWE is an open-source platform where Myanmar software engineers can showcase t ## Tech Stack -| Layer | Technology | -|-------|-----------| -| **Framework** | Next.js 16 (App Router, Static Export) | -| **Language** | TypeScript, React 19 | -| **Styling** | Tailwind CSS 3 + DaisyUI + Sass | -| **Content** | Contentlayer2 with MDX | -| **Animation** | Framer Motion, Three.js, React Three Fiber | -| **i18n** | next-intl (Myanmar & English) | -| **Fonts** | Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono, KhitHaungg (Myanmar) | -| **Package Manager** | Bun | -| **Deployment** | GitHub Pages via GitHub Actions | +| Layer | Technology | +| ------------------- | ---------------------------------------------------------------------------- | +| **Framework** | Next.js 16 (App Router, Static Export) | +| **Language** | TypeScript, React 19 | +| **Styling** | Tailwind CSS 3 + DaisyUI + Sass | +| **Content** | Contentlayer2 with MDX | +| **Animation** | Framer Motion, Three.js, React Three Fiber | +| **i18n** | next-intl (Myanmar & English) | +| **Fonts** | Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono, KhitHaungg (Myanmar) | +| **Package Manager** | Bun | +| **Deployment** | GitHub Pages via GitHub Actions | ## Quick Start @@ -119,12 +119,93 @@ Hello! I'm a software engineer from Myanmar... ### Frontmatter Fields -| Field | Required | Description | -|-------|----------|-------------| -| `name` | Yes | Your display name | -| `description` | No | Short bio (shown on profile card) | -| `image` | No | Avatar URL (GitHub avatar recommended) | -| `tags` | No | Technology/skill tags | +| Field | Required | Description | +| ------------- | -------- | -------------------------------------- | +| `name` | Yes | Your display name | +| `description` | No | Short bio (shown on profile card) | +| `image` | No | Avatar URL (GitHub avatar recommended) | +| `tags` | No | Technology/skill tags | + +## Add Your Book + +1. **Fork** this repository +2. Create a new file in `content/books/`: + +``` +content/books/your-book-title.mdx +``` + +3. Add frontmatter and content: + +```mdx +--- +title: book title +authorName: the name of book author +link: https://example.com/book-link +image: https://example.com/book-cover.jpg +authorEmail: author@example.com +authorLink: https://example.com +--- + +Short note about why this book is recommended. +``` + +4. **Submit a Pull Request** to the `main` branch + +### Frontmatter Fields + +| Field | Required | Description | +| ------------- | -------- | ------------------------------ | +| `title` | Yes | Book title | +| `authorName` | Yes | Author name | +| `link` | Yes | Official/primary resource link | +| `image` | No | Book cover image URL | +| `authorEmail` | No | Author contact email | +| `authorLink` | No | Author website/profile URL | + +## Add Your Class + +1. **Fork** this repository +2. Create a new file in `content/classes/`: + +``` +content/classes/your-class-title.mdx +``` + +3. Add frontmatter and content: + +```mdx +--- +title: your class title +description: short description of your class +instructorName: class mentor name +classLink: https://example.com/classes/react-bootcamp +tags: tags for tech-stack that involve in this class +classType: online or in-person +status: upcoming/completed/incoming +proofOfAssociation: Proof that submitter is affiliated with the class. +image: https://example.com/class-cover.jpg +--- + +Add trust context, schedule notes, and useful details for learners. +This is important because PR without trust context for class will be denied. +``` + +4. **Submit a Pull Request** to the `main` branch + +### Frontmatter Fields + +| Field | Required | Description | +| -------------------- | -------- | ----------------------------------------- | +| `title` | Yes | Class title | +| `description` | Yes | Summary of class content | +| `instructorName` | Yes | Instructor or organization | +| `classLink` | Yes | Official class link | +| `tags` | Yes | Topic tags (e.g. React, Python) | +| `classType` | Yes | One of: `online`, `In-Person` | +| `status` | Yes | One of: `active`, `completed`, `incoming` | +| `proofOfAssociation` | Yes | Credibility/proof note for maintainers | +| `image` | No | Class cover image URL | ## Project Structure @@ -161,14 +242,14 @@ messages/ MMSWE uses the **Obsidian Prism** theme — a dark interface with prismatic accent colors: -| Token | Color | Usage | -|-------|-------|-------| -| `obsidian` | `#09090b` | Base background | -| `surface` | `#1a1a22` | Card backgrounds | -| `prism-cyan` | `#22d3ee` | Primary accent | +| Token | Color | Usage | +| -------------- | --------- | ---------------- | +| `obsidian` | `#09090b` | Base background | +| `surface` | `#1a1a22` | Card backgrounds | +| `prism-cyan` | `#22d3ee` | Primary accent | | `prism-violet` | `#a78bfa` | Secondary accent | -| `prism-rose` | `#fb7185` | Tertiary accent | -| `accent-gold` | `#fbbf24` | Highlight accent | +| `prism-rose` | `#fb7185` | Tertiary accent | +| `accent-gold` | `#fbbf24` | Highlight accent | Typography uses **Bricolage Grotesque** for display, **Plus Jakarta Sans** for body, **JetBrains Mono** for code, and **KhitHaungg** for Myanmar script.