diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..88280d0
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "i18n-ally.localesPaths": ["src/locales"]
+}
diff --git a/README.md b/README.md
index 58d144a..fc48f23 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-
+
# Hammercode Web
diff --git a/next.config.mjs b/next.config.mjs
index 38bc19a..cfc9717 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -4,6 +4,7 @@ const withNextIntl = createNextIntlPlugin("./src/lib/i18n.ts");
/** @type {import('next').NextConfig} */
const nextConfig = {
+ pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
images: {
remotePatterns: [
{
diff --git a/package.json b/package.json
index 9a55518..dd78c95 100644
--- a/package.json
+++ b/package.json
@@ -41,17 +41,22 @@
"motion": "^12.7.4",
"next": "15.3.2",
"next-intl": "^4.1.0",
+ "next-mdx-remote": "^5.0.0",
"next-themes": "^0.3.0",
"prettier-plugin-tailwindcss": "^0.6.11",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-hook-form": "^7.56.2",
+ "rehype-pretty-code": "^0.14.1",
+ "remark-gfm": "^4.0.1",
+ "shiki": "^3.7.0",
"tailwind-merge": "^3.3.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.24.4"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.4",
+ "@tailwindcss/typography": "^0.5.16",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/react": "^16.0.0",
diff --git a/public/assets/contents/welcome.png b/public/assets/contents/welcome.png
new file mode 100644
index 0000000..a15c943
Binary files /dev/null and b/public/assets/contents/welcome.png differ
diff --git a/public/assets/images/hammercode.png b/public/assets/images/hammercode.png
new file mode 100644
index 0000000..40f1a4f
Binary files /dev/null and b/public/assets/images/hammercode.png differ
diff --git a/public/images/hammercode.png b/public/images/hammercode.png
new file mode 100644
index 0000000..40f1a4f
Binary files /dev/null and b/public/images/hammercode.png differ
diff --git a/src/app/[locale]/blogs/[slug]/page.tsx b/src/app/[locale]/blogs/[slug]/page.tsx
new file mode 100644
index 0000000..ed11a46
--- /dev/null
+++ b/src/app/[locale]/blogs/[slug]/page.tsx
@@ -0,0 +1,30 @@
+import { getBlogBySlug } from "@/lib/mdx";
+import BlogDetailPage from "@/features/blog/BlogDetailPage";
+
+interface BlogPostPageProps {
+ params: Promise<{
+ slug: string;
+ }>;
+}
+
+export async function generateMetadata({ params }: BlogPostPageProps) {
+ const { slug } = await params;
+ const post = await getBlogBySlug(slug);
+
+ if (!post) {
+ return {
+ title: "Blog Post Not Found",
+ description: "The blog post you are looking for does not exist.",
+ };
+ }
+
+ return {
+ title: post.metadata.title,
+ description: post.metadata.description,
+ };
+}
+
+export default async function BlogPostPage({ params }: BlogPostPageProps) {
+ const { slug } = await params;
+ return ;
+}
diff --git a/src/app/[locale]/blogs/page.tsx b/src/app/[locale]/blogs/page.tsx
new file mode 100644
index 0000000..1cff076
--- /dev/null
+++ b/src/app/[locale]/blogs/page.tsx
@@ -0,0 +1,20 @@
+import { BlogPage } from "@/features/blog";
+
+interface BlogsPageProps {
+ searchParams: Promise<{
+ category?: string;
+ }>;
+}
+
+export function generateMetadata() {
+ return {
+ title: "Blogs",
+ description: "Read our latest blog posts and articles.",
+ };
+}
+
+export default async function BlogsPage({ searchParams }: BlogsPageProps) {
+ const { category } = await searchParams;
+
+ return ;
+}
diff --git a/src/app/[locale]/globals.css b/src/app/[locale]/globals.css
index c06aa27..a849363 100644
--- a/src/app/[locale]/globals.css
+++ b/src/app/[locale]/globals.css
@@ -1,4 +1,5 @@
@import "tailwindcss";
+@plugin "@tailwindcss/typography";
@custom-variant dark (&:is(.dark *));
diff --git a/src/app/api/posts/[slug]/route.ts b/src/app/api/posts/[slug]/route.ts
new file mode 100644
index 0000000..c1acdf1
--- /dev/null
+++ b/src/app/api/posts/[slug]/route.ts
@@ -0,0 +1,101 @@
+import { NextResponse } from "next/server";
+
+// Mock data - same as in the main API route
+const mockPosts = [
+ {
+ id: "1",
+ title: "Building Modern Web Apps with API",
+ description: "Learn how to build modern web applications using APIs and dynamic content.",
+ content: `
+ Introduction
+ This post comes from a custom API endpoint. It demonstrates how you can combine static MDX content with dynamic API content.
+
+ Key Benefits
+
+ - Dynamic content management
+ - Real-time updates
+ - Flexible data sources
+ - Content versioning
+
+
+ Implementation
+ The API endpoint provides structured data that gets seamlessly integrated with your static MDX files.
+
+
+ This approach gives you the flexibility to manage content through both static files and dynamic APIs.
+
+ `,
+ date: "2024-01-20T10:00:00Z",
+ publishedAt: "2024-01-20T10:00:00Z",
+ author: {
+ name: "API Author",
+ },
+ tags: ["api", "web development", "next.js"],
+ slug: "building-modern-web-apps-api",
+ },
+ {
+ id: "2",
+ title: "Content Management with APIs",
+ description: "Understanding how to manage content through API endpoints.",
+ content: `
+ API-First Content Strategy
+ An API-first approach to content management provides several advantages:
+
+ Advantages
+
+ - Scalability: Easy to scale content across multiple platforms
+ - Flexibility: Content can be updated without redeployment
+ - Integration: Easy integration with headless CMS systems
+
+
+ Use Cases
+ Perfect for:
+
+ - News and blog platforms
+ - E-commerce product catalogs
+ - Documentation sites
+ - Multi-language content
+
+
+ This post demonstrates how API content can be seamlessly integrated with your static MDX content.
+ `,
+ date: "2024-01-18T14:30:00Z",
+ publishedAt: "2024-01-18T14:30:00Z",
+ author: {
+ name: "Content Manager",
+ },
+ tags: ["cms", "api", "content management"],
+ slug: "content-management-apis",
+ },
+];
+
+export async function GET(request: Request, { params }: { params: Promise<{ slug: string }> }) {
+ try {
+ const { slug } = await params;
+ const post = mockPosts.find((p) => p.slug === slug);
+
+ if (!post) {
+ return NextResponse.json(
+ {
+ success: false,
+ message: "Post not found",
+ },
+ { status: 404 }
+ );
+ }
+
+ return NextResponse.json({
+ post,
+ success: true,
+ });
+ } catch (error) {
+ return NextResponse.json(
+ {
+ success: false,
+ message: "Failed to fetch post",
+ error,
+ },
+ { status: 500 }
+ );
+ }
+}
diff --git a/src/app/api/posts/route.ts b/src/app/api/posts/route.ts
new file mode 100644
index 0000000..593fc22
--- /dev/null
+++ b/src/app/api/posts/route.ts
@@ -0,0 +1,137 @@
+import { NextResponse } from "next/server";
+
+// Mock data - replace with your actual data source
+const mockPosts = [
+ {
+ id: "1",
+ title: "Building Modern Web Apps with API",
+ description: "Learn how to build modern web applications using APIs and dynamic content.",
+ content: `
+ Introduction
+ This post comes from a custom API endpoint. It demonstrates how you can combine static MDX content with dynamic API content.
+
+ Key Benefits
+
+ - Dynamic content management
+ - Real-time updates
+ - Flexible data sources
+ - Content versioning
+
+
+ Implementation
+ The API endpoint provides structured data that gets seamlessly integrated with your static MDX files.
+
+
+ This approach gives you the flexibility to manage content through both static files and dynamic APIs.
+
+ `,
+ date: "2024-01-20T10:00:00Z",
+ publishedAt: "2024-01-20T10:00:00Z",
+ author: {
+ name: "API Author",
+ },
+ tags: ["api", "web development", "next.js"],
+ slug: "building-modern-web-apps-api",
+ },
+ {
+ id: "2",
+ title: "Content Management with APIs",
+ description: "Understanding how to manage content through API endpoints.",
+ content: `
+ API-First Content Strategy
+ An API-first approach to content management provides several advantages:
+
+ Advantages
+
+ - Scalability: Easy to scale content across multiple platforms
+ - Flexibility: Content can be updated without redeployment
+ - Integration: Easy integration with headless CMS systems
+
+
+ Use Cases
+ Perfect for:
+
+ - News and blog platforms
+ - E-commerce product catalogs
+ - Documentation sites
+ - Multi-language content
+
+
+ This post demonstrates how API content can be seamlessly integrated with your static MDX content.
+ `,
+ date: "2024-01-18T14:30:00Z",
+ publishedAt: "2024-01-18T14:30:00Z",
+ author: {
+ name: "Content Manager",
+ },
+ tags: ["cms", "api", "content management"],
+ slug: "content-management-apis",
+ },
+];
+
+export async function GET() {
+ try {
+ return NextResponse.json({
+ posts: mockPosts,
+ success: true,
+ });
+ } catch (error) {
+ return NextResponse.json(
+ {
+ posts: [],
+ success: false,
+ message: "Failed to fetch posts",
+ error,
+ },
+ { status: 500 }
+ );
+ }
+}
+
+export async function POST(request: Request) {
+ try {
+ const body = await request.json();
+
+ if (!body.title || !body.content) {
+ return NextResponse.json(
+ {
+ success: false,
+ message: "Title and content are required",
+ },
+ { status: 400 }
+ );
+ }
+
+ const newPost = {
+ id: Date.now().toString(),
+ title: body.title,
+ description: body.description || body.content.substring(0, 150) + "...",
+ content: body.content,
+ date: new Date().toISOString(),
+ publishedAt: new Date().toISOString(),
+ author: {
+ name: body.author || "Anonymous",
+ },
+ tags: body.tags || [],
+ slug: body.title
+ .toLowerCase()
+ .replace(/\s+/g, "-")
+ .replace(/[^a-z0-9-]/g, ""),
+ };
+
+ return NextResponse.json({
+ post: newPost,
+ success: true,
+ message: "Post created successfully",
+ });
+ } catch (error) {
+ return NextResponse.json(
+ {
+ success: false,
+ message: "Failed to create post",
+ error,
+ },
+ { status: 500 }
+ );
+ }
+}
diff --git a/src/components/layout/Navbar/constant.ts b/src/components/layout/Navbar/constant.ts
index 6b57a68..6b3db56 100644
--- a/src/components/layout/Navbar/constant.ts
+++ b/src/components/layout/Navbar/constant.ts
@@ -13,6 +13,10 @@ export const LINKS = [
},
{
id: "4",
+ href: "/blogs",
+ },
+ {
+ id: "5",
href: "/support-us",
},
];
diff --git a/src/content/welcome-to-hammercode.mdx b/src/content/welcome-to-hammercode.mdx
new file mode 100644
index 0000000..aaf7d11
--- /dev/null
+++ b/src/content/welcome-to-hammercode.mdx
@@ -0,0 +1,34 @@
+---
+title: "Selamat Datang di Hammercode!"
+description: "Perkenalan dan langkah awal bersama komunitas teknologi Hammercode"
+date: "2025-12-12"
+author: "Hammercode Team"
+category: "announcement"
+tags: ["hammercode", "komunitas", "teknologi", "perkenalan"]
+images: "/assets/contents/welcome.png"
+published: true
+---
+
+
+
+Halo dan selamat datang di blog pertama Hammercode!
+
+Kami adalah komunitas teknologi berbasis di Palu, Indonesia, yang berfokus pada pembelajaran, kolaborasi, dan pengembangan proyek teknologi bersama. Blog ini akan menjadi pusat informasi, tutorial, pengumuman acara, dan dokumentasi perjalanan komunitas kita.
+
+## Apa yang Akan Kamu Temukan di Sini?
+
+Di blog ini, kamu akan menemukan:
+
+- Tutorial dan tips seputar pengembangan perangkat lunak
+- Insight dari proyek-proyek open source yang kami kembangkan
+- Cerita dari anggota komunitas
+- Dokumentasi event, workshop, dan meetup Hammercode
+
+## Bergabung dengan Hammercode
+
+Mau terlibat lebih jauh? Berikut langkah mudah untuk bergabung:
+
+1. **Gabung Discord**: Tempat diskusi utama komunitas
+2. **Ikuti Instagram & GitHub**: Untuk update event dan proyek
+3. **Kontribusi Proyek**: Cek repositori dan mulai kontribusi
+4. **Datang ke Meetup**: Kami rutin mengadakan pertemuan offline
diff --git a/src/features/blog/BlogDetailPage.tsx b/src/features/blog/BlogDetailPage.tsx
new file mode 100644
index 0000000..c44771b
--- /dev/null
+++ b/src/features/blog/BlogDetailPage.tsx
@@ -0,0 +1,69 @@
+import Link from "next/link";
+import { getBlogBySlug } from "@/lib/mdx";
+import { ArrowLeft } from "lucide-react";
+import Badge from "@/components/ui/Badge";
+import { notFound } from "next/navigation";
+
+interface BlogDetailPageProps {
+ slug: string;
+}
+
+const BlogDetailPage = async ({ slug }: BlogDetailPageProps) => {
+ const post = await getBlogBySlug(slug);
+
+ if (!post) {
+ notFound();
+ }
+
+ return (
+
+
+
+
+ Back to Blogs
+
+
+
+
+ {post.metadata.title}
+
+ {post.metadata.tags && (
+
+ {post.metadata.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+
+ {post.metadata.author && (
+ <>
+ By {post.metadata.author}
+ •
+
+ )}
+ {post.metadata.category && (
+ <>
+ {post.metadata.category}
+ •
+
+ )}
+ {new Date(post.metadata.date).toLocaleDateString()}
+
+
+
+
+ {post.content}
+
+ );
+};
+
+export default BlogDetailPage;
diff --git a/src/features/blog/BlogPage.tsx b/src/features/blog/BlogPage.tsx
new file mode 100644
index 0000000..f0624f7
--- /dev/null
+++ b/src/features/blog/BlogPage.tsx
@@ -0,0 +1,70 @@
+import { getAllBlogs, getBlogsByCategory } from "@/lib/mdx";
+import { Link } from "@/lib/navigation";
+import BlogCard from "./components/BlogCard";
+
+const BlogPage = async ({ category }: { category?: string }) => {
+ const sanitizedCategory = category?.replace(/\/$/, "");
+ const blogs = sanitizedCategory ? await getBlogsByCategory(sanitizedCategory) : await getAllBlogs();
+ const categories = ["technology", "tutorial", "news", "announcement"];
+
+ return (
+
+
+
+ {sanitizedCategory
+ ? `${sanitizedCategory.charAt(0).toUpperCase() + sanitizedCategory.slice(1)} Blogs`
+ : "All Blogs"}
+
+
+ Temukan berbagai artikel seputar teknologi, tutorial, dan berita terbaru.
+
+
+
+
+ All
+
+ {categories.map((cat) => {
+ console.log(category, cat);
+ return (
+
+ {cat.charAt(0).toUpperCase() + cat.slice(1)}
+
+ );
+ })}
+
+
+
+ {blogs.length === 0 ? (
+
+
+ No blogs found {sanitizedCategory && `in ${sanitizedCategory} category`}.
+
+
+ {blogs.map((blog) => (
+
+
+
+ ))}
+
+
+
+ {blog.metadata.title}
+
+
+
+
{blog.metadata.description}
+
+ {blog.metadata.tags && (
+
+ {blog.metadata.tags.slice(0, 3).map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+
+
+ {blog.metadata.author && By {blog.metadata.author}}
+ {blog.metadata.category && (
+ <>
+ •
+ {blog.metadata.category}
+
+ )}
+
+
{new Date(blog.metadata.date).toLocaleDateString()}
+
+