Skip to content

Commit 9fb05b6

Browse files
kaungmyatshwe1397kaungmyatshwe1397
authored
💄 style(books-classes): U iconsistency (#271)
* ✨ feat(books-classes): refactor pages and adjust for headerstyle consistency * 📝 docs: update documentation
1 parent 21608e2 commit 9fb05b6

9 files changed

Lines changed: 558 additions & 208 deletions

File tree

‎README.md‎

Lines changed: 105 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@ MMSWE is an open-source platform where Myanmar software engineers can showcase t
3232

3333
## Tech Stack
3434

35-
| Layer | Technology |
36-
|-------|-----------|
37-
| **Framework** | Next.js 16 (App Router, Static Export) |
38-
| **Language** | TypeScript, React 19 |
39-
| **Styling** | Tailwind CSS 3 + DaisyUI + Sass |
40-
| **Content** | Contentlayer2 with MDX |
41-
| **Animation** | Framer Motion, Three.js, React Three Fiber |
42-
| **i18n** | next-intl (Myanmar & English) |
43-
| **Fonts** | Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono, KhitHaungg (Myanmar) |
44-
| **Package Manager** | Bun |
45-
| **Deployment** | GitHub Pages via GitHub Actions |
35+
| Layer | Technology |
36+
| ------------------- | ---------------------------------------------------------------------------- |
37+
| **Framework** | Next.js 16 (App Router, Static Export) |
38+
| **Language** | TypeScript, React 19 |
39+
| **Styling** | Tailwind CSS 3 + DaisyUI + Sass |
40+
| **Content** | Contentlayer2 with MDX |
41+
| **Animation** | Framer Motion, Three.js, React Three Fiber |
42+
| **i18n** | next-intl (Myanmar & English) |
43+
| **Fonts** | Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono, KhitHaungg (Myanmar) |
44+
| **Package Manager** | Bun |
45+
| **Deployment** | GitHub Pages via GitHub Actions |
4646

4747
## Quick Start
4848

@@ -119,12 +119,93 @@ Hello! I'm a software engineer from Myanmar...
119119

120120
### Frontmatter Fields
121121

122-
| Field | Required | Description |
123-
|-------|----------|-------------|
124-
| `name` | Yes | Your display name |
125-
| `description` | No | Short bio (shown on profile card) |
126-
| `image` | No | Avatar URL (GitHub avatar recommended) |
127-
| `tags` | No | Technology/skill tags |
122+
| Field | Required | Description |
123+
| ------------- | -------- | -------------------------------------- |
124+
| `name` | Yes | Your display name |
125+
| `description` | No | Short bio (shown on profile card) |
126+
| `image` | No | Avatar URL (GitHub avatar recommended) |
127+
| `tags` | No | Technology/skill tags |
128+
129+
## Add Your Book
130+
131+
1. **Fork** this repository
132+
2. Create a new file in `content/books/`:
133+
134+
```
135+
content/books/your-book-title.mdx
136+
```
137+
138+
3. Add frontmatter and content:
139+
140+
```mdx
141+
---
142+
title: book title
143+
authorName: the name of book author
144+
link: https://example.com/book-link
145+
image: https://example.com/book-cover.jpg
146+
authorEmail: author@example.com
147+
authorLink: https://example.com
148+
---
149+
150+
Short note about why this book is recommended.
151+
```
152+
153+
4. **Submit a Pull Request** to the `main` branch
154+
155+
### Frontmatter Fields
156+
157+
| Field | Required | Description |
158+
| ------------- | -------- | ------------------------------ |
159+
| `title` | Yes | Book title |
160+
| `authorName` | Yes | Author name |
161+
| `link` | Yes | Official/primary resource link |
162+
| `image` | No | Book cover image URL |
163+
| `authorEmail` | No | Author contact email |
164+
| `authorLink` | No | Author website/profile URL |
165+
166+
## Add Your Class
167+
168+
1. **Fork** this repository
169+
2. Create a new file in `content/classes/`:
170+
171+
```
172+
content/classes/your-class-title.mdx
173+
```
174+
175+
3. Add frontmatter and content:
176+
177+
```mdx
178+
---
179+
title: your class title
180+
description: short description of your class
181+
instructorName: class mentor name
182+
classLink: https://example.com/classes/react-bootcamp
183+
tags: tags for tech-stack that involve in this class
184+
classType: online or in-person
185+
status: upcoming/completed/incoming
186+
proofOfAssociation: Proof that submitter is affiliated with the class.
187+
image: https://example.com/class-cover.jpg
188+
---
189+
190+
Add trust context, schedule notes, and useful details for learners.
191+
This is important because PR without trust context for class will be denied.
192+
```
193+
194+
4. **Submit a Pull Request** to the `main` branch
195+
196+
### Frontmatter Fields
197+
198+
| Field | Required | Description |
199+
| -------------------- | -------- | ----------------------------------------- |
200+
| `title` | Yes | Class title |
201+
| `description` | Yes | Summary of class content |
202+
| `instructorName` | Yes | Instructor or organization |
203+
| `classLink` | Yes | Official class link |
204+
| `tags` | Yes | Topic tags (e.g. React, Python) |
205+
| `classType` | Yes | One of: `online`, `In-Person` |
206+
| `status` | Yes | One of: `active`, `completed`, `incoming` |
207+
| `proofOfAssociation` | Yes | Credibility/proof note for maintainers |
208+
| `image` | No | Class cover image URL |
128209

129210
## Project Structure
130211

@@ -161,14 +242,14 @@ messages/
161242

162243
MMSWE uses the **Obsidian Prism** theme — a dark interface with prismatic accent colors:
163244

164-
| Token | Color | Usage |
165-
|-------|-------|-------|
166-
| `obsidian` | `#09090b` | Base background |
167-
| `surface` | `#1a1a22` | Card backgrounds |
168-
| `prism-cyan` | `#22d3ee` | Primary accent |
245+
| Token | Color | Usage |
246+
| -------------- | --------- | ---------------- |
247+
| `obsidian` | `#09090b` | Base background |
248+
| `surface` | `#1a1a22` | Card backgrounds |
249+
| `prism-cyan` | `#22d3ee` | Primary accent |
169250
| `prism-violet` | `#a78bfa` | Secondary accent |
170-
| `prism-rose` | `#fb7185` | Tertiary accent |
171-
| `accent-gold` | `#fbbf24` | Highlight accent |
251+
| `prism-rose` | `#fb7185` | Tertiary accent |
252+
| `accent-gold` | `#fbbf24` | Highlight accent |
172253

173254
Typography uses **Bricolage Grotesque** for display, **Plus Jakarta Sans** for body, **JetBrains Mono** for code, and **KhitHaungg** for Myanmar script.
174255

‎content/books/sample-book.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
title: "Clean Code"
33
authorName: "Robert C. Martin"
4-
link: "https://www.oreilly.com/library/view/clean-code-a/9780136083238/"
5-
image: "https://m.media-amazon.com/images/I/41xShlnTZTL._SX374_BO1,204,203,200_.jpg"
6-
authorEmail: "unclebob@example.com"
7-
authorLink: "https://blog.cleancoder.com/"
4+
link: https://www.oreilly.com/library/view/clean-code-a/9780136083238/
5+
image: https://m.media-amazon.com/images/I/41xShlnTZTL._SX374_BO1,204,203,200_.jpg
6+
authorEmail: unclebob@example.com
7+
authorLink: https://blog.cleancoder.com/
88
---
99

1010
Recommended software craftsmanship reading.

‎messages/en.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -358,6 +358,16 @@
358358
"title": "Profiles",
359359
"subtitle": "Discover {count}+ software engineers from Myanmar. Browse by technology, search by name, and connect with the community."
360360
},
361+
"booksHero": {
362+
"label": "Tech Books & Resources",
363+
"title": "Books",
364+
"subtitle": "Recommended tech books and learning resources shared by Myanmar software engineers."
365+
},
366+
"classesHero": {
367+
"label": "Tech Classes & Workshops",
368+
"title": "Classes",
369+
"subtitle": "A trust-first, community-curated directory of tech classes in Myanmar. Listings are reviewed before publication."
370+
},
361371
"footer": {
362372
"tagline": {
363373
"prefix": "Empowering Myanmar's Software Engineers to ",

‎messages/mm.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -358,6 +358,16 @@
358358
"title": "ပရိုဖိုင်များ",
359359
"subtitle": "မြန်မာမှ ဆော့ဖ်ဝဲ အင်ဂျင်နီယာ {count}+ ဦးကို ရှာဖွေပါ။ နည်းပညာအလိုက် ရှာဖွေပါ၊ အမည်ဖြင့် ရှာပါ၊ အသိုင်းအဝိုင်းနှင့် ချိတ်ဆက်ပါ။"
360360
},
361+
"booksHero": {
362+
"label": "နည်းပညာ စာအုပ်များနှင့် အရင်းအမြစ်များ",
363+
"title": "စာအုပ်များ",
364+
"subtitle": "မြန်မာ software engineer များ မျှဝေထားသော နည်းပညာစာအုပ်များနှင့် လေ့လာရေးအရင်းအမြစ်များကို ရှာဖွေပါ။"
365+
},
366+
"classesHero": {
367+
"label": "နည်းပညာ သင်တန်းများနှင့် အလုပ်ရုံဆွေးနွေးပွဲများ",
368+
"title": "သင်တန်းများ",
369+
"subtitle": "ယုံကြည်စိတ်ချရမှုကို အခြေခံထားသော မြန်မာနည်းပညာသင်တန်းများ စာရင်းဖြစ်ပြီး၊ စာရင်းတင်သွင်းမှုများကို မထုတ်ပြန်မီ စစ်ဆေးအတည်ပြုပါသည်။"
370+
},
361371
"footer": {
362372
"tagline": {
363373
"prefix": "မြန်မာ့ ဆော့ဖ်ဝဲ အင်ဂျင်နီယာများကို ",

‎src/app/books/BooksPageClient.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
"use client";
2+
3+
import Container from "@/components/Common/Container/Container";
4+
import SectionHero from "@/components/Common/SectionHero/SectionHero";
5+
import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
6+
import { BookOpen, Bookmark, LibraryBig, NotebookPen } from "lucide-react";
7+
import { useTranslations } from "next-intl";
8+
9+
type BookItem = {
10+
_id: string;
11+
title: string;
12+
authorName: string;
13+
authorEmail?: string;
14+
authorLink?: string;
15+
image?: string;
16+
link: string;
17+
};
18+
19+
type BooksPageClientProps = {
20+
books: BookItem[];
21+
};
22+
23+
const BooksPageClient = ({ books }: BooksPageClientProps) => {
24+
const t = useTranslations("booksHero");
25+
26+
return (
27+
<Container>
28+
<section className="py-16">
29+
<SectionHero
30+
label={t("label")}
31+
title={t("title")}
32+
subtitle={t("subtitle")}
33+
labelIcon={NotebookPen}
34+
labelIconClassName="text-prism-violet"
35+
labelChipBackground="linear-gradient(135deg, #a78bfa12, #22d3ee08)"
36+
labelChipBorder="1px solid rgba(167,139,250,0.15)"
37+
shimmerBackground="linear-gradient(90deg, transparent 0%, rgba(167,139,250,0.1) 50%, transparent 100%)"
38+
myanmarTitleColorClass="text-prism-violet"
39+
floatingIcons={[
40+
{
41+
Icon: BookOpen,
42+
className: "text-prism-violet/40",
43+
style: { top: "8%", right: "6%" },
44+
delay: 0.25,
45+
sizeClass: "h-4 w-4",
46+
},
47+
{
48+
Icon: LibraryBig,
49+
className: "text-prism-cyan/40",
50+
style: { top: "65%", right: "14%" },
51+
delay: 0.35,
52+
sizeClass: "h-3.5 w-3.5",
53+
},
54+
{
55+
Icon: Bookmark,
56+
className: "text-prism-rose/35",
57+
style: { top: "80%", left: "3%" },
58+
delay: 0.45,
59+
sizeClass: "h-3.5 w-3.5",
60+
},
61+
]}
62+
/>
63+
64+
{books.length === 0 ? (
65+
<div className="mt-12 rounded-3xl border border-white/10 bg-surface/50 p-8 text-zinc-300">
66+
<h2 className="font-display text-2xl font-semibold text-zinc-100">
67+
No books yet
68+
</h2>
69+
<p className="mt-3 max-w-2xl text-sm leading-6 text-zinc-400">
70+
Community recommendations will appear here once contributors add
71+
book entries to the repository.
72+
</p>
73+
</div>
74+
) : (
75+
<div className="mt-12 grid gap-4">
76+
{books.map((book) => (
77+
<article
78+
key={book._id}
79+
className="rounded-3xl border border-white/10 bg-surface/50 p-6 transition-colors hover:border-white/20"
80+
>
81+
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
82+
<div className="flex flex-col gap-4 sm:flex-row sm:items-start">
83+
{book.image && (
84+
<img
85+
src={book.image}
86+
alt={`${book.title} cover`}
87+
className="h-32 w-24 rounded-xl border border-white/10 object-cover"
88+
/>
89+
)}
90+
91+
<div>
92+
<h2 className="font-display text-2xl font-semibold text-zinc-100">
93+
{book.title}
94+
</h2>
95+
<p className="mt-2 text-sm text-zinc-400">
96+
by {book.authorName}
97+
</p>
98+
{(book.authorEmail || book.authorLink) && (
99+
<div className="mt-3 flex flex-col gap-2 text-sm">
100+
{book.authorEmail && (
101+
<a
102+
href={`mailto:${book.authorEmail}`}
103+
className="text-zinc-400 transition-colors hover:text-prism-cyan"
104+
>
105+
{book.authorEmail}
106+
</a>
107+
)}
108+
{book.authorLink && (
109+
<a
110+
href={book.authorLink}
111+
target="_blank"
112+
rel="noopener noreferrer"
113+
className="text-zinc-400 transition-colors hover:text-prism-cyan"
114+
>
115+
{book.authorLink}
116+
</a>
117+
)}
118+
</div>
119+
)}
120+
</div>
121+
</div>
122+
123+
<a
124+
href={book.link}
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
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"
128+
>
129+
Open Resource
130+
</a>
131+
</div>
132+
</article>
133+
))}
134+
</div>
135+
)}
136+
</section>
137+
138+
<SpacingDivider size="lg" />
139+
</Container>
140+
);
141+
};
142+
143+
export default BooksPageClient;

0 commit comments

Comments
 (0)