Skip to content
This repository was archived by the owner on Nov 20, 2025. It is now read-only.

Commit f75ba6c

Browse files
officialrajdeepsinghofficialrajdeepsingh
authored
Merge pull request #67 from frontendweb3/docs
update the readme
2 parents 1398245 + ba68361 commit f75ba6c

File tree

2 files changed

+62
-43
lines changed

2 files changed

+62
-43
lines changed

‎README.md‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1+
<div style="display: block; margin-left: auto; margin-right: auto;width: 40%;">
2+
<svg width="477" height="509" viewBox="0 0 477 509" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<path fill-rule="evenodd" clip-rule="evenodd" d="M247.177 104.672C242.99 97.1095 232.118 97.1095 227.93 104.672L68.3924 392.805C64.333 400.137 69.6354 409.133 78.0158 409.133H397.092C405.472 409.133 410.775 400.137 406.715 392.805L247.177 104.672ZM238.312 323.4C258.367 323.4 274.625 307.864 274.625 288.7C274.625 269.536 258.367 254 238.312 254C218.258 254 202 269.536 202 288.7C202 307.864 218.258 323.4 238.312 323.4Z" fill="white"></path>
4+
</svg>
5+
</div>
6+
7+
<div style="margin: 8px auto;width:100%;"></div>
8+
19
Start your blog journey with Next.js, Nextra, and MDX using section themes. You can start your blog in less than two minutes, and you need only one command and zero configuration. Section theme comes with an inbuilt dark mode, a search bar, Customize Navigation, and SEO Support.
210

311
### Tech Stack
412

5-
<div className="flex flex-row flex-wrap item-center md:justify-between" id="badges">
6-
<img style="margin: 5px auto;" title="typescript" alt="typescript" src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white"/>
13+
<div className="flex flex-row flex-wrap item-center md:justify-between">
714
<img style="margin: 5px auto;" title="pnpm" alt="pnpm" src="https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge&logo=pnpm&logoColor=f69220" />
8-
<img style="margin: 5px auto;" title="tailwind css" alt="tailwind css" src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" />
9-
<img style="margin: 5px auto;" title="markdown" alt="markdown" src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white"/>
1015
<img style="margin: 5px auto;" title="reactjs" alt="reactjs" src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"/>
1116
<img style="margin: 5px auto;" title="nextjs" alt="nextjs" src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white"/>
17+
<img style="margin: 5px auto;" title="typescript" alt="typescript" src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white"/>
1218
<img style="margin: 5px auto;" title="radix ui" alt="radix ui" src="https://img.shields.io/badge/radixui-%23DD0031.svg?style=for-the-badge&logo=radixui&logoColor=white"/>
13-
<img style="margin: 5px auto;" title="vercel" alt="vercel" src="https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white"/>
19+
<img style="margin: 5px auto;" title="tailwind css" alt="tailwind css" src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" />
20+
<img style="margin: 5px auto;" title="markdown" alt="markdown" src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white"/>
1421
<img style="margin: 5px auto;" title="turborepo" alt="turborepo" src="https://img.shields.io/badge/turborepo-000204?style=for-the-badge&logo=turborepo&logoColor=white">
15-
<img style="margin: 5px auto;" title="github pages" alt="github pages" src="https://img.shields.io/badge/github%20pages-121013?style=for-the-badge&logo=github&logoColor=white"/>
16-
<img style="margin: 5px auto;" title="netlify" alt="netlify" src="https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7"/>
17-
<a target="_blank" href="https://codesandbox.io/u/officialrajdeepsingh">
18-
<img title="Buy a Coffee" alt="Buy a Coffee" src="https://ko-fi.com/img/githubbutton_sm.svg"/>
19-
</a>
2022
</div>
2123

2224
<div style="margin: 5px auto;width:100%;"></div>
@@ -27,13 +29,9 @@ The Installation of the [section blog theme](https://www.npmjs.com/package/secti
2729

2830
```bash
2931
pnpm add nextra section-blog-theme
30-
```
31-
32-
```bash
32+
# or
3333
yarn add nextra section-blog-theme
34-
```
35-
36-
```bash
34+
# or
3735
npm install nextra section-blog-theme
3836
```
3937

@@ -57,6 +55,8 @@ module.exports = withNextra();
5755
Next step to import css file from section blog theme inside your `_app.mdx' file.
5856

5957
```javascript
58+
// _app.mdx
59+
6060
import "section-blog-theme/styles.css"
6161
export default function App({ Component, pageProps }) {
6262
return <Component {...pageProps} />
@@ -68,13 +68,13 @@ export default function App({ Component, pageProps }) {
6868
The lastly create a `theme.config.jsx` or `theme.config.tsx` file in your root level.
6969

7070
```javascript
71-
// theme.config.jsx
71+
// theme.config.jsx or theme.config.tsx
7272

7373
const themeConfig = {
7474
settings: {
7575
title: "My title",
7676
description: "my descript is here ",
77-
SiteURL:"https://section-theme-blog-docs.vercel.app",
77+
SiteURL:"https://officialrajdeepsingh.dev",
7878
defaultSEO: {
7979
title: "default SEO title is here",
8080
titleTemplate: '%s | Section Blog Theme',
@@ -85,24 +85,24 @@ const themeConfig = {
8585
}
8686
}
8787
},
88-
DateFormat: "MMM DD, YYYY",
89-
bannerMessage: "How are your <a style='margin: 0px 10px;' target='_blank' href='https://google.com'> learn more </a>",
88+
bannerMessage: "Start your markdown portfolio blog with nextjs, nextra, tailwind CSS, and Shadcn UI using <a style='margin: 0px 4px;text-decoration:underline;' target='_blank' href='https://www.npmjs.com/package/section-blog-theme'> the section blog theme. </a>",
9089
SocialLinks: [
9190
{
9291
name: "twitter",
93-
url: "https://twitter.com/Official_R_deep",
92+
url: "https://twitter.com/FrontendWeb3",
9493
},
9594
{
9695
name: "linkedin",
97-
url: "https://www.linkedin.com/in/officalrajdeepsingh/",
96+
url: "https://www.linkedin.com/company/frontendweb",
9897
},
9998
{
10099
name: "github",
101-
url: "https://github.com/officialrajdeepsingh",
100+
url: "https://github.com/frontendweb3/section-theme-blog",
102101
},
103102
],
104103
Logo: {
105-
TextLogo: "logo here"
104+
text: "Section",
105+
logo:'<svg width="477" height="509" viewBox="0 0 477 509" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M247.177 104.672C242.99 97.1095 232.118 97.1095 227.93 104.672L68.3924 392.805C64.333 400.137 69.6354 409.133 78.0158 409.133H397.092C405.472 409.133 410.775 400.137 406.715 392.805L247.177 104.672ZM238.312 323.4C258.367 323.4 274.625 307.864 274.625 288.7C274.625 269.536 258.367 254 238.312 254C218.258 254 202 269.536 202 288.7C202 307.864 218.258 323.4 238.312 323.4Z" fill="white"/></svg>'
106106
},
107107
PrimaryNavigation: [
108108
{
@@ -162,5 +162,6 @@ const themeConfig = {
162162
};
163163
export default themeConfig;
164164
```
165+
165166
## rename your file.
166-
Lastly, rename the file extension the .tsx or .jsx to a .mdx. for every file inside the pages folder. But does not change the `_document.jsx or _document.tsx` file extension.
167+
Lastly, rename the file extension the `.tsx ` or `.jsx` to a `.mdx`. for every file inside the pages folder. But does not change the `_document.jsx or _document.tsx` file extension.

‎packages/section-blog-theme/README.md‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,37 @@
1+
<div style="display: block; margin-left: auto; margin-right: auto;width: 40%;">
2+
<svg width="477" height="509" viewBox="0 0 477 509" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<path fill-rule="evenodd" clip-rule="evenodd" d="M247.177 104.672C242.99 97.1095 232.118 97.1095 227.93 104.672L68.3924 392.805C64.333 400.137 69.6354 409.133 78.0158 409.133H397.092C405.472 409.133 410.775 400.137 406.715 392.805L247.177 104.672ZM238.312 323.4C258.367 323.4 274.625 307.864 274.625 288.7C274.625 269.536 258.367 254 238.312 254C218.258 254 202 269.536 202 288.7C202 307.864 218.258 323.4 238.312 323.4Z" fill="white"></path>
4+
</svg>
5+
</div>
6+
7+
<div style="margin: 8px auto;width:100%;"></div>
8+
19
Start your blog journey with Next.js, Nextra, and MDX using section themes. You can start your blog in less than two minutes, and you need only one command and zero configuration. Section theme comes with an inbuilt dark mode, a search bar, Customize Navigation, and SEO Support.
210

3-
## Buy a Coffee
11+
### Tech Stack
12+
13+
<div className="flex flex-row flex-wrap item-center md:justify-between">
14+
<img style="margin: 5px auto;" title="pnpm" alt="pnpm" src="https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge&logo=pnpm&logoColor=f69220" />
15+
<img style="margin: 5px auto;" title="reactjs" alt="reactjs" src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB"/>
16+
<img style="margin: 5px auto;" title="nextjs" alt="nextjs" src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white"/>
17+
<img style="margin: 5px auto;" title="typescript" alt="typescript" src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white"/>
18+
<img style="margin: 5px auto;" title="radix ui" alt="radix ui" src="https://img.shields.io/badge/radixui-%23DD0031.svg?style=for-the-badge&logo=radixui&logoColor=white"/>
19+
<img style="margin: 5px auto;" title="tailwind css" alt="tailwind css" src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" />
20+
<img style="margin: 5px auto;" title="markdown" alt="markdown" src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white"/>
21+
<img style="margin: 5px auto;" title="turborepo" alt="turborepo" src="https://img.shields.io/badge/turborepo-000204?style=for-the-badge&logo=turborepo&logoColor=white">
22+
</div>
423

5-
[![Buy a Coffee](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/K3K2E87F0)
24+
<div style="margin: 5px auto;width:100%;"></div>
625

726
### Installation
827

9-
The Installation of the section blog theme is a lot easier. You can install the section blog theme with the following command.
28+
The Installation of the [section blog theme](https://www.npmjs.com/package/section-blog-theme) is a lot easier. You can install the section blog theme with the following command.
1029

1130
```bash
1231
pnpm add nextra section-blog-theme
13-
```
14-
15-
```bash
32+
# or
1633
yarn add nextra section-blog-theme
17-
```
18-
19-
```bash
34+
# or
2035
npm install nextra section-blog-theme
2136
```
2237

@@ -40,6 +55,8 @@ module.exports = withNextra();
4055
Next step to import css file from section blog theme inside your `_app.mdx' file.
4156

4257
```javascript
58+
// _app.mdx
59+
4360
import "section-blog-theme/styles.css"
4461
export default function App({ Component, pageProps }) {
4562
return <Component {...pageProps} />
@@ -51,13 +68,13 @@ export default function App({ Component, pageProps }) {
5168
The lastly create a `theme.config.jsx` or `theme.config.tsx` file in your root level.
5269

5370
```javascript
54-
// theme.config.jsx
71+
// theme.config.jsx or theme.config.tsx
5572

5673
const themeConfig = {
5774
settings: {
5875
title: "My title",
5976
description: "my descript is here ",
60-
SiteURL:"https://section-theme-blog-docs.vercel.app",
77+
SiteURL:"https://officialrajdeepsingh.dev",
6178
defaultSEO: {
6279
title: "default SEO title is here",
6380
titleTemplate: '%s | Section Blog Theme',
@@ -68,24 +85,24 @@ const themeConfig = {
6885
}
6986
}
7087
},
71-
DateFormat: "MMM DD, YYYY",
72-
bannerMessage: "How are your <a style='margin: 0px 10px;' target='_blank' href='https://google.com'> learn more </a>",
88+
bannerMessage: "Start your markdown portfolio blog with nextjs, nextra, tailwind CSS, and Shadcn UI using <a style='margin: 0px 4px;text-decoration:underline;' target='_blank' href='https://www.npmjs.com/package/section-blog-theme'> the section blog theme. </a>",
7389
SocialLinks: [
7490
{
7591
name: "twitter",
76-
url: "https://twitter.com/Official_R_deep",
92+
url: "https://twitter.com/FrontendWeb3",
7793
},
7894
{
7995
name: "linkedin",
80-
url: "https://www.linkedin.com/in/officalrajdeepsingh/",
96+
url: "https://www.linkedin.com/company/frontendweb",
8197
},
8298
{
8399
name: "github",
84-
url: "https://github.com/officialrajdeepsingh",
100+
url: "https://github.com/frontendweb3/section-theme-blog",
85101
},
86102
],
87103
Logo: {
88-
TextLogo: "logo here"
104+
text: "Section",
105+
logo:'<svg width="477" height="509" viewBox="0 0 477 509" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M247.177 104.672C242.99 97.1095 232.118 97.1095 227.93 104.672L68.3924 392.805C64.333 400.137 69.6354 409.133 78.0158 409.133H397.092C405.472 409.133 410.775 400.137 406.715 392.805L247.177 104.672ZM238.312 323.4C258.367 323.4 274.625 307.864 274.625 288.7C274.625 269.536 258.367 254 238.312 254C218.258 254 202 269.536 202 288.7C202 307.864 218.258 323.4 238.312 323.4Z" fill="white"/></svg>'
89106
},
90107
PrimaryNavigation: [
91108
{
@@ -145,5 +162,6 @@ const themeConfig = {
145162
};
146163
export default themeConfig;
147164
```
165+
148166
## rename your file.
149-
Lastly, rename the file extension the .tsx or .jsx to a .mdx. for every file inside the pages folder. But does not change the `_document.jsx or _document.tsx` file extension.
167+
Lastly, rename the file extension the `.tsx ` or `.jsx` to a `.mdx`. for every file inside the pages folder. But does not change the `_document.jsx or _document.tsx` file extension.

0 commit comments

Comments
 (0)