Section-theme-blog NPM

Note: the section-theme-blog package is deprecated and moved to a different location. Check out the new package now.

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.

Installation

The Installation of the section theme blog is a lot easier. You can install the section theme blog with the following command.

pnpm add nextra section-theme-blog

yarn add nextra section-theme-blog

npm install nextra section-theme-blog

Configure the section theme with Nextra

Create the following next.config.js file in your project’s root directory:

// next.config.js

const withNextra = require("nextra")({
  theme: "section-theme-blog",
  themeConfig: "./theme.config.tsx",
});

module.exports = withNextra();

Create Theme Config file

The lastly create a theme.config.tsx or theme.config.jsx file in your root level.

// theme.config.tsx

import type { SectionBlogTheme } from "section-theme-blog";

const themeConfig: SectionBlogTheme = {
  siteURL: "http://localhost:3000",
  logo: {
    text: "Section",
    svg: (
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V12"
          stroke="black"
          strokeWidth="1.4"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
  primary_navigation: [
    {
      route: "/",
      name: "Home",
    },
    {
      route: "/posts",
      name: "Blog",
    },
    {
      route: "/about",
      name: "About",
    },
    {
      route: "/contact",
      name: "Contact",
    },
  ],
  secondary_navigation: [
    {
      route: "/disclaimer",
      name: "Disclaimer",
    },
    {
      route: "/privacy-policy",
      name: "Privacy policy",
    },
  ],
  social_links: [
    {
      name: "Twitter",
      url: "https://facebook.com/officialrajdeepsingh",
    },
    {
      name: "Github",
      url: "https://facebook.com/officialrajdeepsingh",
    },
  ],
};

export default themeConfig;