Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frontendweb3/section-blog-theme
Section blog theme is nextra based theme.
https://github.com/frontendweb3/section-blog-theme
blogging mdx mdx-next mdx-nextjs nextra nextra-blog nextra-markdown nextra-markdown-blog nextra-theme
Last synced: about 2 months ago
JSON representation
Section blog theme is nextra based theme.
- Host: GitHub
- URL: https://github.com/frontendweb3/section-blog-theme
- Owner: frontendweb3
- License: mit
- Created: 2023-05-25T10:14:14.000Z (over 1 year ago)
- Default Branch: canary
- Last Pushed: 2024-02-19T11:27:06.000Z (10 months ago)
- Last Synced: 2024-03-19T11:05:11.680Z (9 months ago)
- Topics: blogging, mdx, mdx-next, mdx-nextjs, nextra, nextra-blog, nextra-markdown, nextra-markdown-blog, nextra-theme
- Language: TypeScript
- Homepage: https://section-blog-theme-docs.vercel.app
- Size: 5.5 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-nextjs - Section blog theme - The section blog theme is nextra-based MDX theme. (Blogging)
README
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.
> Adding your [existing website](https://github.com/frontendweb3/section-blog-theme/blob/canary/docs/src/showcase.json) to the [showcase page](https://section-blog-theme-docs.vercel.app/showcase).
## Installation
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.
```bash
pnpm add nextra section-blog-theme
# or
yarn add nextra section-blog-theme
# or
npm install nextra section-blog-theme
```
## Configure the section blog with nextra
Create the following `next.config.js` file in your project’s root directory:
```javascript
// next.config.js
const withNextra = require("nextra")({
theme: "section-blog-theme",
themeConfig: "./theme.config.jsx",
});
module.exports = withNextra();
```
## import css
Next step to import css file from section blog theme inside your `\_app.mdx' file.
```javascript
// _app.mdx
import "section-blog-theme/styles.css";
export default function App({ Component, pageProps }) {
return ;
}
```
## Create Theme Config file
The lastly create a `theme.config.jsx` or `theme.config.tsx` file in your root level.
```javascript
// theme.config.jsx or theme.config.tsx
const themeConfig = {
settings: {
title: "Start your blog or portfolio using MDX, Next.Js, and Nextra.",
description: "Section blog theme is build with Nextjs and tailwind css.",
SiteURL: "https://officialrajdeepsingh.dev",
defaultSEO: {
title: "Start your blog or portfolio using MDX, Next.Js, and Nextra.",
titleTemplate: "%s | Section Blog Theme",
twitter: {
handle: "@FrontendWeb3",
site: "FrontendWeb3",
cardType: "summary_large_image",
},
},
},
bannerMessage:
"Start your markdown portfolio blog with nextjs, nextra, tailwind CSS, and Shadcn UI using the section blog theme. ",
SocialLinks: [
{
name: "twitter",
url: "https://twitter.com/FrontendWeb3",
},
{
name: "linkedin",
url: "https://www.linkedin.com/company/frontendweb",
},
{
name: "github",
url: "https://github.com/frontendweb3/section-theme-blog",
},
],
Logo: {
logo: (
<>
>
),
link: "/",
target: "_blank",
},
PrimaryNavigation: [
{
href: "/",
title: "Home",
},
{
href: "/posts",
title: "Blog",
},
{
title: "Projects",
subNav: true,
subNavigation: [
{
title: "Personal Blog",
href: "https://officialrajdeepsingh.dev/",
description: "Check out my personal portfolio blog website.",
},
{
title: "Section Blog Theme",
href: "https://github.com/frontendweb3/section-blog-theme",
description: "Section blog theme is nextra based theme.",
},
{
title: "Awesome Nextjs",
href: "https://github.com/officialrajdeepsingh/awesome-nextjs",
description:
"A curated list of awesome Nextjs-based libraries that help build small and large-scale applications with next.js.",
},
],
},
{
href: "/about",
title: "About",
},
{
href: "/contact",
title: "Contact",
},
],
SecondaryNavigation: [
{
href: "/disclaimer",
title: "Disclaimer",
},
{
href: "/privacy-policy",
title: "Privacy policy",
},
{
href: "/contact",
title: "Contact",
},
],
};
export default themeConfig;
```
## rename your file
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.
