Skip to content

Commit 05ef33e

Browse files
mtakhirovmtakhirov
authored
Add MDX support with custom styles and syntax highlighting (#4)
* feat: Add MDX support with custom styles and syntax highlighting Introduces MDX parsing capabilities using `next-mdx-remote`. Custom components, syntax highlighting, and alert styles were added for better content rendering. The unused "justfile" was removed, and dependencies updated to support these changes. * feat: Add MDX support with custom styles and syntax highlighting Introduces MDX parsing capabilities using `next-mdx-remote`. Custom components, syntax highlighting, and alert styles were added for better content rendering. The unused "justfile" was removed, and dependencies updated to support these changes. * feat: Add utilities for metadata handling and enhance content flow Introduced helper functions for metadata validation, file operations, and Prettier formatting. Added post-install and pre-build scripts to generate metadata files dynamically. Improved routing and content management for blogs by enhancing slug configurations and removing extraneous text in the home page component. * refactor: reorganize src/features/mdx using FSD architecture - Moved `createHighlighter` function to `src/features/mdx/lib/createHighlighter.ts` - Moved `parseMDX` function to `src/features/mdx/model/parseMDX.ts` - Updated `src/features/mdx/index.ts` to export from new locations
1 parent 6d8ddc8 commit 05ef33e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+5456
-1892
lines changed

‎LICENSE

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
22
Version 2, December 2004
33

4-
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
4+
Copyright (C) 2025 Mukhammaddiyor Takhirov <opensource@takhirov.uz>
55

66
Everyone is permitted to copy and distribute verbatim or modified
77
copies of this license document, and changing it is allowed as long
@@ -10,4 +10,4 @@
1010
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
1111
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
1212

13-
0. You just DO WHAT THE FUCK YOU WANT TO.
13+
0. You just DO WHAT THE FUCK YOU WANT TO.

‎README.md

+14-14
Original file line numberDiff line numberDiff line change
@@ -58,25 +58,25 @@ package.json # Dependencies and scripts
5858

5959
To run the project locally, follow these steps:
6060

61-
1. ### Clone this repository:
61+
1. ### Clone this repository
6262

63-
```shell
64-
git clone <repository-url>
65-
```
63+
```shell
64+
git clone <repository-url>
65+
```
6666

67-
2. ### Install dependencies using pnpm (recommended):
67+
2. ### Install dependencies using pnpm (recommended)
6868

69-
```shell
70-
pnpm install
71-
```
69+
```shell
70+
pnpm install
71+
```
7272

73-
3. ### Run the development server:
73+
3. ### Run the development server
7474

75-
```shell
76-
pnpm run dev
77-
```
75+
```shell
76+
pnpm run dev
77+
```
7878

7979
## License
8080

81-
This project is licensed under the [WTFPL](./LICENSE) (Do What the F*ck You Want
82-
to Public License).
81+
This project is licensed under the [WTFPL](./LICENSE) (Do What the F\*ck You Want
82+
to Public License).

‎app.d.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import Locales from "./locales/uz.json";
1+
import type { locales as availableLocales } from "#features/i18n";
2+
import type Locales from "#locales/uz.json";
23

34
type Messages = typeof Locales;
45

6+
type $AvailableLocales = typeof availableLocales;
7+
type AvailableLocales = $AvailableLocales[number];
8+
59
declare global {
610
type IntlMessages = Messages;
711
}

‎content/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Ignore metadata file
2+
metadata.json
3+
metadata.tsx
4+
metadata.ts

‎content/hello-world/en.mdx

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
---
2+
title: "Hello World"
3+
description: "Description message"
4+
tags: [post, example]
5+
---
6+
7+
### **Headings:**
8+
9+
# H1 Example
10+
11+
## H2 Example
12+
13+
### H3 Example
14+
15+
#### H4 Example
16+
17+
##### H5 Example
18+
19+
###### H6 Example
20+
21+
### **Paragraph:**
22+
23+
Quis fugiat ea fugiat consectetur id magna occaecat cillum irure. Sunt ullamco ex id esse Lorem eu deserunt anim non ut minim. Ipsum sunt sint ea laboris nulla et minim quis aliqua nostrud culpa ex. Exercitation deserunt dolor nisi voluptate minim. Sint ipsum in anim tempor fugiat.
24+
25+
### **Unordered List:**
26+
27+
- Unordered List #1
28+
- Unordered List #2
29+
- Unordered List #3
30+
31+
### **Ordered List:**
32+
33+
1. Ordered List #1
34+
2. Ordered List #2
35+
3. Ordered List #3
36+
37+
### **Checkbox List:**
38+
39+
- [x] Checked list input
40+
- [ ] Unchecked list input
41+
42+
### **Table:**
43+
44+
_Left aligned:_
45+
46+
| id | title | description | slug | created_at | updated_at |
47+
| :-: | :-------------------- | :------------- | :-------------------: | --------------: | --------------: |
48+
| 1 | Salom Dunyo | Lorem... | salom-dunyo | Tue Sep 11 2001 | Tue Sep 11 2001 |
49+
| 2 | Funksional dasturlash | Lorem ipsum... | funksional-dasturlash | Fri Aug 27 2004 | Fri Aug 27 2004 |
50+
51+
### **Image:**
52+
53+
![Image alt text](https://images-porsche.imgix.net/-/media/0B3F90A75B0141FF8BED694C3C1A323B_7C02423B08CB49C8801E208B2D16A51E_CZ25W18OX0004-911-gt3-white-side?w=2560&h=1440&q=45&crop=faces%2Centropy%2Cedges&auto=format)
54+
55+
### **Code Blocks:**
56+
57+
```tsx filename="button.tsx"
58+
export const Button: React.FC = (props) => {
59+
return <button {...props} />;
60+
};
61+
```
62+
63+
### **Code Block (with focus)**
64+
65+
```tsx filename="button.tsx"
66+
import type React from "react";
67+
68+
import { cn } from "#shared/utils";
69+
import { buttonVariants, type ButtonProps } from "./variants";
70+
71+
// [!code focus:10]
72+
export const Button: React.FC<ButtonProps> = ({
73+
variant,
74+
size,
75+
className,
76+
...props
77+
}) => {
78+
const buttonClassNames = cn(buttonVariants({ variant, size }), className);
79+
return <button className={buttonClassNames} {...props} />;
80+
};
81+
Button.displayName = "Button component";
82+
```
83+
84+
### **Code Block (with diff)**
85+
86+
```tsx filename="button.tsx"
87+
import type React from "react";
88+
89+
import { cn } from "#shared/utils";
90+
import { buttonVariants, type ButtonProps } from "./variants";
91+
92+
export const Button: React.FC<ButtonProps> = ({
93+
variant,
94+
size,
95+
className,
96+
...props // [!code --]
97+
...restProps // [!code ++]
98+
}) => {
99+
const buttonClassNames = cn(buttonVariants({ variant, size }), className);
100+
return <button className={buttonClassNames} {...props} />; // [!code --]
101+
return <button className={buttonClassNames} {...restProps} />; // [!code ++]
102+
};
103+
Button.displayName = "Button component";
104+
```
105+
106+
### **Alerts:**
107+
108+
> [!NOTE]
109+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
110+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
111+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
112+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
113+
114+
_With custom title:_
115+
116+
> [!NOTE/Eslatma]
117+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
118+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
119+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
120+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
121+
122+
---
123+
124+
> [!TIP]
125+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
126+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
127+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
128+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
129+
130+
_With custom title:_
131+
132+
> [!TIP/Maslahat]
133+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
134+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
135+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
136+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
137+
138+
---
139+
140+
> [!IMPORTANT]
141+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
142+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
143+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
144+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
145+
146+
_With custom title:_
147+
148+
> [!IMPORTANT/Muhim]
149+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
150+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
151+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
152+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
153+
154+
---
155+
156+
> [!WARNING]
157+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
158+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
159+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
160+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
161+
162+
_With custom title:_
163+
164+
> [!WARNING/Ogohlantirish]
165+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
166+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
167+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
168+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
169+
170+
---
171+
172+
> [!CAUTION]
173+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
174+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
175+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
176+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.
177+
178+
_With custom title:_
179+
180+
> [!CAUTION/Ehtiyot bo'ling]
181+
> Tempor aliquip ad consectetur cillum exercitation anim. Exercitation ex esse quis ut nisi labore
182+
> eiusmod ipsum commodo exercitation cillum ut. Aliqua enim aliqua eu in do. Dolor qui minim occaecat
183+
> esse sit reprehenderit id. Velit culpa magna esse excepteur aute reprehenderit minim qui veniam mollit
184+
> nostrud et. Aliqua sit aute nisi voluptate culpa exercitation laboris.

0 commit comments

Comments
 (0)