Skip to content

Commit 8b9a34b

Browse files
ajay-dhangarajay-dhangar
committed
added new content
1 parent dfec440 commit 8b9a34b

File tree

7 files changed

+611
-2
lines changed

7 files changed

+611
-2
lines changed

‎docs/blog.mdx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
description: Learn how to build and manage a complete blog using Docusaurus.
3+
---
4+
5+
# Blog
6+
7+
The **Blog** feature in Docusaurus lets you create a full-featured, customizable blog with minimal setup.
8+
It supports Markdown/MDX posts, authors, tags, feeds, and multiple configuration options—perfect for sharing updates, tutorials, or news.
9+
10+
:::info
11+
See the [Blog Plugin API Reference](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog) for the full list of options and advanced configuration.
12+
:::
13+
14+
## Getting Started {#getting-started}
15+
16+
1. **Create a `blog` directory** in the root of your project.
17+
2. Add a navbar item to point to the blog in `docusaurus.config.js`:
18+
19+
```js title="docusaurus.config.js"
20+
export default {
21+
themeConfig: {
22+
navbar: {
23+
items: [
24+
// highlight-next-line
25+
{ to: 'blog', label: 'Blog', position: 'left' },
26+
],
27+
},
28+
},
29+
};
30+
````
31+
32+
Once added, Docusaurus will automatically generate routes for your blog posts.
33+
34+
## Writing Posts {#writing-posts}
35+
36+
Each post is a Markdown (`.md`) or MDX (`.mdx`) file inside the `blog` folder.
37+
Use [front matter](/docs/guides/markdown-features/markdown-features-intro#front-matter) to define metadata such as title, description, author, and tags.
38+
39+
Example:
40+
41+
```md title="blog/2025-09-01-hello-blog.md"
42+
---
43+
title: Hello Blog
44+
description: My first Docusaurus blog post!
45+
authors:
46+
- name: Ajay Dhangar
47+
url: https://github.com/ajay-dhangar
48+
image_url: https://github.com/ajay-dhangar.png
49+
tags: [introduction, welcome]
50+
image: /img/blog-banner.png
51+
hide_table_of_contents: false
52+
---
53+
54+
Welcome to my new CodeHarborHub blog!
55+
This is where I’ll share updates, tips, and tutorials.
56+
57+
<!-- truncate -->
58+
59+
Everything below the truncate marker will only appear on the full post page.
60+
```
61+
62+
* The `<!-- truncate -->` marker defines the preview shown on the blog list page.
63+
* MDX files can use `{/* truncate */}` instead.
64+
65+
## Customizing the Blog {#customizing}
66+
67+
You can tweak blog behavior in the `@docusaurus/preset-classic` configuration:
68+
69+
```js title="docusaurus.config.js"
70+
export default {
71+
presets: [
72+
[
73+
'@docusaurus/preset-classic',
74+
{
75+
blog: {
76+
blogTitle: 'CodeHarborHub Blog',
77+
blogDescription: 'Updates, tutorials, and tech insights.',
78+
postsPerPage: 'ALL', // Disable pagination
79+
blogSidebarTitle: 'All Posts',
80+
blogSidebarCount: 'ALL', // Show all posts in sidebar
81+
showReadingTime: true, // Display estimated reading time
82+
},
83+
},
84+
],
85+
],
86+
};
87+
```
88+
89+
### Reading Time
90+
91+
You can provide a custom reading time algorithm:
92+
93+
```js title="docusaurus.config.js"
94+
export default {
95+
presets: [
96+
[
97+
'@docusaurus/preset-classic',
98+
{
99+
blog: {
100+
readingTime: ({ content, defaultReadingTime }) =>
101+
defaultReadingTime({ content, options: { wordsPerMinute: 250 } }),
102+
},
103+
},
104+
],
105+
],
106+
};
107+
```
108+
109+
### Feeds
110+
111+
Generate **RSS/Atom/JSON** feeds for subscribers:
112+
113+
```js title="docusaurus.config.js"
114+
export default {
115+
presets: [
116+
[
117+
'@docusaurus/preset-classic',
118+
{
119+
blog: {
120+
feedOptions: {
121+
type: 'all',
122+
copyright: `© ${new Date().getFullYear()} CodeHarborHub`,
123+
},
124+
},
125+
},
126+
],
127+
],
128+
};
129+
```
130+
131+
Feeds are available at:
132+
133+
<Tabs>
134+
<TabItem value="rss">`/blog/rss.xml`</TabItem>
135+
<TabItem value="atom">`/blog/atom.xml`</TabItem>
136+
<TabItem value="json">`/blog/feed.json`</TabItem>
137+
</Tabs>
138+
139+
## Blog-only Mode {#blog-only-mode}
140+
141+
Want your blog to be the homepage?
142+
Disable docs and serve the blog at the root:
143+
144+
```js title="docusaurus.config.js"
145+
export default {
146+
presets: [
147+
[
148+
'@docusaurus/preset-classic',
149+
{
150+
docs: false,
151+
blog: {
152+
routeBasePath: '/', // Serve blog at site root
153+
},
154+
},
155+
],
156+
],
157+
};
158+
```
159+
160+
Remove `src/pages/index.js` if it exists to avoid route conflicts.
161+
162+
## Multiple Blogs {#multiple-blogs}
163+
164+
You can run more than one blog by adding additional plugin instances:
165+
166+
```js title="docusaurus.config.js"
167+
export default {
168+
plugins: [
169+
[
170+
'@docusaurus/plugin-content-blog',
171+
{
172+
id: 'news',
173+
routeBasePath: 'news',
174+
path: './news',
175+
},
176+
],
177+
],
178+
};
179+
```
180+
181+
This creates a second blog at `/news` with its own posts.
182+
183+
---
184+
185+
With these options, you can quickly deploy a modern, SEO-friendly blog, customize layouts, manage multiple authors, and grow your content with ease.

‎docs/guides/markdown-features/markdown-features-intro.mdx‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
id: introduction
3+
description: Learn how Docusaurus extends Markdown with MDX, front matter, components, and interactive elements.
4+
slug: /markdown-features
5+
---
6+
7+
# Markdown Features
8+
9+
Docusaurus uses **[Markdown](https://commonmark.org/)** as the primary format for writing documentation,
10+
but it extends it with **[MDX](https://mdxjs.com/)**, enabling React components inside Markdown files.
11+
12+
:::tip Quick Start
13+
Need a refresher? [Learn Markdown in 10 minutes](https://commonmark.org/help/) to get started quickly.
14+
:::
15+
16+
## MDX Power {#mdx-power}
17+
18+
MDX transforms Markdown into **React components**, allowing you to mix text, JSX, and interactive UI elements in a single file.
19+
This is what makes Docusaurus docs highly customizable and interactive.
20+
21+
Example:
22+
23+
```mdx title="hello.mdx"
24+
# Hello World
25+
26+
Welcome to my page!
27+
28+
<MyComponent />
29+
````
30+
31+
This renders both the Markdown heading and the `<MyComponent />` React component.
32+
33+
:::info MDX Playground
34+
Use the [MDX Playground](https://mdxjs.com/playground/) to see how your Markdown+JSX compiles to React.
35+
:::
36+
37+
## MDX vs CommonMark {#mdx-vs-commonmark}
38+
39+
Docusaurus supports two Markdown parsing modes:
40+
41+
* **MDX format** – Allows JSX and components.
42+
* **CommonMark format** – Standard Markdown with no JSX.
43+
44+
By default, `.md` and `.mdx` files both use MDX.
45+
You can opt in to CommonMark with the `markdown.format` config or `mdx.format: md` front matter.
46+
47+
```js title="docusaurus.config.js"
48+
export default {
49+
markdown: {
50+
format: 'detect', // auto: .md → CommonMark, .mdx → MDX
51+
},
52+
};
53+
```
54+
55+
:::danger Experimental
56+
CommonMark support is still experimental and may differ from other renderers.
57+
:::
58+
59+
## Standard Markdown Features {#standard-features}
60+
61+
All familiar Markdown syntax works:
62+
63+
```md title="hello.mdx"
64+
### My Section
65+
66+
Some **bold** text, some _italic_, and a [link](/).
67+
```
68+
69+
```mdx-code-block
70+
<BrowserWindow url="http://localhost:3000/docs/hello">
71+
<h3>My Section</h3>
72+
Some **bold** text, some _italic_, and a [link](/).
73+
</BrowserWindow>
74+
```
75+
76+
## Front Matter {#front-matter}
77+
78+
Front matter lets you add **metadata** to your Markdown files.
79+
It’s written in YAML between triple dashes at the top of a file.
80+
81+
```md title="getting-started.mdx"
82+
---
83+
title: Getting Started
84+
description: Quick introduction to my guide
85+
tags: [intro, tutorial]
86+
---
87+
```
88+
89+
Different plugins support different front matter fields:
90+
91+
* [Docs Front Matter](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-front-matter)
92+
* [Blog Front Matter](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog#markdown-front-matter)
93+
* [Pages Front Matter](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-pages#markdown-front-matter)
94+
95+
You can even customize the parser:
96+
97+
```js title="docusaurus.config.js"
98+
export default {
99+
markdown: {
100+
parseFrontMatter: async (params) => {
101+
const result = await params.defaultParseFrontMatter(params);
102+
if (result.frontMatter.shortTitle) {
103+
result.frontMatter.title = result.frontMatter.shortTitle;
104+
}
105+
return result;
106+
},
107+
},
108+
};
109+
```
110+
111+
## Quotes and Callouts {#quotes}
112+
113+
> Docusaurus makes open source documentation easy.
114+
>
115+
> — The Team
116+
117+
Quotes render with elegant styling.
118+
119+
## Details & Collapsible Sections {#details}
120+
121+
Docusaurus supports `<details>` for collapsible content:
122+
123+
```md
124+
<details>
125+
<summary>Click to expand</summary>
126+
127+
Hidden content **with Markdown** inside!
128+
</details>
129+
```
130+
131+
```mdx-code-block
132+
<BrowserWindow>
133+
<details>
134+
<summary>Click to expand</summary>
135+
136+
Hidden content **with Markdown** inside!
137+
</details>
138+
</BrowserWindow>
139+
```
140+
141+
## Assets & Images {#assets}
142+
143+
Use relative paths to reference images and files:
144+
145+
```md
146+
![Logo](/img/nav-logo.jpg)
147+
```
148+
149+
```mdx-code-block
150+
<BrowserWindow>
151+
![Logo](/img/nav-logo.jpg)
152+
</BrowserWindow>
153+
```
154+
155+
Docusaurus will automatically optimize and resolve the asset URLs.
156+
157+
---
158+
159+
With **Markdown + MDX**, you can start with simple text and gradually enhance pages with
160+
dynamic React components, interactive demos, and custom UI elements—all in one file.

0 commit comments

Comments
 (0)