update mdx

app/layout.tsx

@@ -9,8 +9,8 @@ import { Suspense } from 'react';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-	title: 'Simple App: Mark Melior',
-	description: 'Generated by create next app',
+	title: 'Simple App | Mark Melior',
+	description: `Small and modern pet-projects. Hi, I'am Mark Melior - Frontend developer.`,
 };
 
 export default function RootLayout({

app/projects/[category]/[name]/page.tsx

@@ -0,0 +1,41 @@
+import { getProject } from '@/entity/project';
+import { Header } from '@/widgets';
+import { Metadata } from 'next';
+import dynamic from 'next/dynamic';
+
+export type ProjectPageProps = {
+	params: { name: string; category: string };
+};
+
+export default async function ProjectPage({ params }: ProjectPageProps) {
+	const Project = dynamic(
+		() => import(`/projects/${params.category}/${params.name}/page.mdx`),
+	);
+
+	const { metadata } = await getProject(params.category, params.name);
+
+	return (
+		<>
+			<Header
+				note={metadata?.note}
+				title={metadata?.title}
+				description={metadata?.description}
+				tags={metadata?.tags}
+			/>
+			<Project />
+		</>
+	);
+}
+
+export async function generateMetadata({
+	params,
+}: ProjectPageProps): Promise<Metadata> {
+	const { metadata } = await getProject(params.category, params.name);
+
+	return {
+		title: `Simple App | ${metadata.title}`,
+		description: `${metadata.description}. Technologies: ${metadata.tags?.join(
+			', ',
+		)}`,
+	};
+}

app/projects/[category]/page.tsx

@@ -0,0 +1,33 @@
+import { getProjectsByCategory } from '@/entity/project';
+
+export type ProjectCategoryPageProps = {
+	params: { category: string };
+};
+
+export default async function ProjectCategoryPage({
+	params,
+}: ProjectCategoryPageProps) {
+	const projects = await getProjectsByCategory(params.category);
+
+	return (
+		<>
+			{projects.map(({ title }) => (
+				<></>
+			))}
+		</>
+	);
+}
+
+// todo
+// export async function generateMetadata({
+// 	params,
+// }: ProjectCategoryPageProps): Promise<Metadata> {
+// 	const { metadata } = await getProject(params.category, params.name);
+
+// 	return {
+// 		title: `Simple App | ${metadata.title}`,
+// 		description: `${metadata.description}. Technologies: ${metadata.tags?.join(
+// 			', ',
+// 		)}`,
+// 	};
+// }

next.config.mjs

@@ -4,7 +4,6 @@ import remarkGfm from 'remark-gfm';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
-	transpilePackages: ['next-mdx-remote'],
 };
 
 const withMDX = createMDX({

package.json

@@ -15,14 +15,12 @@
 		"@next/mdx": "^14.2.5",
 		"@nextui-org/react": "^2.4.2",
 		"@prisma/client": "^5.16.1",
-		"@types/mdx": "^2.0.13",
 		"bcryptjs": "^2.4.3",
 		"clsx": "^2.1.1",
 		"framer-motion": "^11.2.13",
 		"gray-matter": "^4.0.3",
 		"jose": "^5.6.3",
 		"next": "14.2.4",
-		"next-mdx-remote": "^5.0.0",
 		"next-themes": "^0.3.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
@@ -36,6 +34,7 @@
 	"devDependencies": {
 		"@tailwindcss/typography": "^0.5.13",
 		"@types/bcryptjs": "^2.4.6",
+		"@types/mdx": "^2.0.13",
 		"@types/node": "^20.14.10",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",

projects/best-practice/app-router-auth/page.mdx

@@ -0,0 +1,48 @@
+import { AuthExample } from './examples/auth';
+
+export const metadata = {
+	note: 'Auth',
+	title: 'Next.js: Authentication',
+	description: 'Best practices for Server Components, Actions, Middleware',
+	tags: ['TypeScript', 'Cookie', 'SSR', 'Prisma'],
+};
+
+<AuthExample />
+
+## About this approach
+
+Getting user data: `const user = await getUser();`. It's very simple :)
+
+- hi
+- man `test` good!
+- i'm good
+
+test))
+
+```TypeScript filename="src/features/auth/api/jwt.ts"
+import { SignJWT, jwtVerify } from 'jose';
+import { SessionPayload } from '../types/definitions';
+
+const secretKey = process.env.SESSION_SECRET;
+const encodedKey = new TextEncoder().encode(secretKey);
+
+export async function encrypt(payload: SessionPayload) {
+	return new SignJWT(payload)
+		.setProtectedHeader({ alg: 'HS256' })
+		.setIssuedAt()
+		.setExpirationTime('7d')
+		.sign(encodedKey);
+}
+
+export async function decrypt(session: string | undefined = '') {
+	try {
+		const { payload } = await jwtVerify(session, encodedKey, {
+			algorithms: ['HS256'],
+		});
+		return payload;
+	} catch (error) {
+		// console.log('Failed to verify session');
+		return null;
+	}
+}
+```

projects/best-practice/index.mdx

@@ -0,0 +1,3 @@
+export const metadata = {
+	title: 'Best Practice',
+};

src/entity/project/index.ts

@@ -1,5 +1,6 @@
-import { getProjectData, ProjectData } from './model/services/get-project-data';
-import { getProjectsData } from './model/services/get-projects-data';
+import { getProject, Project } from './model/services/get-project';
+import { getProjects } from './model/services/get-projects';
+import { getProjectsByCategory } from './model/services/get-projects-by-category';
 
-export { getProjectData, getProjectsData };
-export type { ProjectData };
+export { getProject, getProjects, getProjectsByCategory };
+export type { Project };

src/entity/project/model/services/get-project.ts

@@ -0,0 +1,43 @@
+import { StackVariants } from '@/shared/ui';
+import fs from 'fs';
+import matter from 'gray-matter';
+import path from 'path';
+
+export interface ProjectMetadata {
+	note: string;
+	title: string;
+	description: string;
+	tags?: StackVariants[];
+	publishDate: string;
+}
+
+export interface Project {
+	metadata: ProjectMetadata;
+	content: string;
+}
+
+export async function getProject(
+	category: string,
+	name: string,
+): Promise<Project> {
+	const { metadata: exportedMetadata } = (await import(
+		`/projects/${category}/${name}/page.mdx`
+	)) as Partial<{
+		metadata: ProjectMetadata;
+	}>;
+
+	const dir = path.join(process.cwd(), 'projects', category, name, 'page.mdx');
+	const mdxFile = fs.readFileSync(dir);
+	const matterData = matter(mdxFile);
+	const matterMetadata = matterData.data as ProjectMetadata;
+
+	if (!exportedMetadata && !matterMetadata)
+		throw new Error(
+			`Unable to find metadata in file /projects/${name}/page.mdx`,
+		);
+
+	return {
+		metadata: exportedMetadata || matterMetadata,
+		content: matterData.content,
+	};
+}

src/entity/project/model/services/get-projects-by-category.ts

@@ -0,0 +1,26 @@
+import { readdir } from 'fs/promises';
+import path from 'path';
+import { getProject, ProjectMetadata } from './get-project';
+
+export async function getProjectsByCategory(
+	category: string,
+): Promise<ProjectMetadata[]> {
+	// Retrieve slugs from post routes
+	const dir = path.join(process.cwd(), 'projects');
+	const slugs = (await readdir(dir, { withFileTypes: true })).filter((dirent) =>
+		dirent.isDirectory(),
+	);
+
+	// Retrieve metadata from MDX files
+	const posts = await Promise.all(
+		slugs.map(async ({ name }) => {
+			const { metadata } = await getProject(category, name);
+			return { slug: name, ...metadata };
+		}),
+	);
+
+	// Sort posts from newest to oldest
+	posts.sort((a, b) => +new Date(b.publishDate) - +new Date(a.publishDate));
+
+	return posts;
+}

src/entity/project/model/services/get-projects.ts

@@ -0,0 +1,25 @@
+import { readdir } from 'fs/promises';
+import path from 'path';
+import { getProject, ProjectMetadata } from './get-project';
+
+export async function getProjects(): Promise<ProjectMetadata[]> {
+	// Retrieve slugs from post routes
+	const dir = path.join(process.cwd(), 'projects');
+	const slugs = (await readdir(dir, { withFileTypes: true })).filter((dirent) =>
+		dirent.isDirectory(),
+	);
+
+	// Retrieve metadata from MDX files
+	const posts = await Promise.all(
+		slugs.map(async ({ name }) => {
+			// @ts-ignore // TODO: fix this
+			const { metadata } = await getProject(category, name);
+			return { slug: name, ...metadata };
+		}),
+	);
+
+	// Sort posts from newest to oldest
+	posts.sort((a, b) => +new Date(b.publishDate) - +new Date(a.publishDate));
+
+	return posts;
+}