{"id":25858182,"url":"https://github.com/frontendweb3/section-theme-blog","last_synced_at":"2025-03-01T20:01:05.485Z","repository":{"id":172960233,"uuid":"645285188","full_name":"frontendweb3/section-blog-theme","owner":"frontendweb3","description":"Section  blog theme is nextra based theme.","archived":false,"fork":false,"pushed_at":"2024-02-19T11:27:06.000Z","size":5768,"stargazers_count":3,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"canary","last_synced_at":"2024-03-19T11:05:11.680Z","etag":null,"topics":["blogging","mdx","mdx-next","mdx-nextjs","nextra","nextra-blog","nextra-markdown","nextra-markdown-blog","nextra-theme"],"latest_commit_sha":null,"homepage":"https://section-blog-theme-docs.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frontendweb3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"ko_fi":"officialrajdeepsingh"}},"created_at":"2023-05-25T10:14:14.000Z","updated_at":"2024-04-15T12:52:01.128Z","dependencies_parsed_at":"2023-08-20T06:39:23.322Z","dependency_job_id":"d5a3eb4e-81a5-401a-bd74-2e4dfaa2e564","html_url":"https://github.com/frontendweb3/section-blog-theme","commit_stats":null,"previous_names":["frontendweb3/section-theme-blog","frontendweb3/section-blog-theme"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendweb3%2Fsection-blog-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendweb3%2Fsection-blog-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendweb3%2Fsection-blog-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendweb3%2Fsection-blog-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontendweb3","download_url":"https://codeload.github.com/frontendweb3/section-blog-theme/tar.gz/refs/heads/canary","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241418270,"owners_count":19959736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blogging","mdx","mdx-next","mdx-nextjs","nextra","nextra-blog","nextra-markdown","nextra-markdown-blog","nextra-theme"],"created_at":"2025-03-01T20:00:42.995Z","updated_at":"2025-03-01T20:01:05.386Z","avatar_url":"https://github.com/frontendweb3.png","language":"TypeScript","funding_links":["https://ko-fi.com/officialrajdeepsingh"],"categories":["Next.js blog template"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://section-blog-theme-docs.vercel.app\"\u003e\n      \u003cimg src=\"https://cdn.jsdelivr.net/gh/frontendweb3/section-blog-theme/.github/logo.svg\" height=\"128\"\u003e\n    \u003ch1 align=\"center\"\u003eSection Blog Theme\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv style=\"display:flex; margin: 5px auto;\"\u003e\n\n  \u003cimg style=\"margin: 5px auto;\" title=\"pnpm\" alt=\"pnpm\" src=\"https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge\u0026logo=pnpm\u0026logoColor=f69220\" /\u003e\n  \u003cimg style=\"margin: 5px auto;\" title=\"reactjs\" alt=\"reactjs\"  src=\"https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\"/\u003e\n  \u003cimg style=\"margin: 5px auto;\" title=\"nextjs\" alt=\"nextjs\"  src=\"https://img.shields.io/badge/Next-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white\"/\u003e\n  \u003cimg style=\"margin: 5px auto;\" title=\"typescript\" alt=\"typescript\"  src=\"https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"/\u003e\n  \u003cimg style=\"margin: 5px auto;\" title=\"radix ui\" alt=\"radix ui\"  src=\"https://img.shields.io/badge/radixui-%23DD0031.svg?style=for-the-badge\u0026logo=radixui\u0026logoColor=white\"/\u003e\n  \u003cimg style=\"margin: 5px auto;\" title=\"tailwind css\" alt=\"tailwind css\" src=\"https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" /\u003e\n  \u003cimg style=\"margin: 5px auto;\" title=\"markdown\" alt=\"markdown\"  src=\"https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge\u0026logo=markdown\u0026logoColor=white\"/\u003e\n  \u003cimg style=\"margin: 5px auto;\" title=\"turborepo\" alt=\"turborepo\" src=\"https://img.shields.io/badge/turborepo-000204?style=for-the-badge\u0026logo=turborepo\u0026logoColor=white\"\u003e\n  \n\u003c/div\u003e\n\n\u003cdiv style=\"margin-top: 10px auto;width:100%;\"\u003e\u003c/div\u003e\n\nStart 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.\n\n\u003e 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). \n\n\u003cdiv style=\"margin: 5px auto;width:100%;\"\u003e\u003c/div\u003e\n\n## Installation\n\nThe 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.\n\n```bash\npnpm add nextra section-blog-theme\n# or\nyarn add nextra section-blog-theme\n# or\nnpm install nextra section-blog-theme\n```\n\n## Configure the section blog with nextra\n\nCreate the following `next.config.js` file in your project’s root directory:\n\n```javascript\n// next.config.js\n\nconst withNextra = require(\"nextra\")({\n  theme: \"section-blog-theme\",\n  themeConfig: \"./theme.config.jsx\",\n});\n\nmodule.exports = withNextra();\n```\n\n## import css\n\nNext step to import css file from section blog theme inside your `\\_app.mdx' file.\n\n```javascript\n// _app.mdx\n\nimport \"section-blog-theme/styles.css\";\nexport default function App({ Component, pageProps }) {\n  return \u003cComponent {...pageProps} /\u003e;\n}\n```\n\n## Create Theme Config file\n\nThe lastly create a `theme.config.jsx` or `theme.config.tsx` file in your root level.\n\n```javascript\n// theme.config.jsx or theme.config.tsx\n\nconst themeConfig = {\n  settings: {\n    title: \"Start your blog or portfolio using MDX, Next.Js, and Nextra.\",\n    description: \"Section blog theme is build with Nextjs and tailwind css.\",\n    SiteURL: \"https://officialrajdeepsingh.dev\",\n    defaultSEO: {\n      title: \"Start your blog or portfolio using MDX, Next.Js, and Nextra.\",\n      titleTemplate: \"%s | Section Blog Theme\",\n      twitter: {\n        handle: \"@FrontendWeb3\",\n        site: \"FrontendWeb3\",\n        cardType: \"summary_large_image\",\n      },\n    },\n  },\n  bannerMessage:\n    \"Start your markdown portfolio blog with nextjs, nextra, tailwind CSS, and Shadcn UI using \u003ca style='margin: 0px 4px;text-decoration:underline;' target='_blank' href='https://www.npmjs.com/package/section-blog-theme'\u003e  the section blog theme. \u003c/a\u003e\",\n  SocialLinks: [\n    {\n      name: \"twitter\",\n      url: \"https://twitter.com/FrontendWeb3\",\n    },\n    {\n      name: \"linkedin\",\n      url: \"https://www.linkedin.com/company/frontendweb\",\n    },\n    {\n      name: \"github\",\n      url: \"https://github.com/frontendweb3/section-theme-blog\",\n    },\n  ],\n  Logo: {\n    logo: (\n      \u003c\u003e\n        \u003csvg\n          width=\"36\"\n          height=\"36\"\n          viewBox=\"0 0 434 420\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        \u003e\n          \u003cpath\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            fill=\"currentColor\"\n            d=\"M226.569 66.5458C222.348 59.1514 211.686 59.1514 207.464 66.5458L63.4636 318.753C59.2767 326.086 64.5719 335.207 73.0163 335.207H361.018C369.462 335.207 374.757 326.086 370.57 318.753L226.569 66.5458ZM217.017 270.333C235.355 270.333 250.221 256.557 250.221 239.563C250.221 222.57 235.355 208.793 217.017 208.793C198.679 208.793 183.813 222.57 183.813 239.563C183.813 256.557 198.679 270.333 217.017 270.333Z\"\n          /\u003e\n        \u003c/svg\u003e\n      \u003c/\u003e\n    ),\n    link: \"/\",\n    target: \"_blank\",\n  },\n  PrimaryNavigation: [\n    {\n      href: \"/\",\n      title: \"Home\",\n    },\n    {\n      href: \"/posts\",\n      title: \"Blog\",\n    },\n    {\n      title: \"Projects\",\n      subNav: true,\n      subNavigation: [\n        {\n          title: \"Personal Blog\",\n          href: \"https://officialrajdeepsingh.dev/\",\n          description: \"Check out my personal portfolio blog website.\",\n        },\n        {\n          title: \"Section Blog Theme\",\n          href: \"https://github.com/frontendweb3/section-blog-theme\",\n          description: \"Section blog theme is nextra based theme.\",\n        },\n        {\n          title: \"Awesome Nextjs\",\n          href: \"https://github.com/officialrajdeepsingh/awesome-nextjs\",\n          description:\n            \"A curated list of awesome Nextjs-based libraries that help build small and large-scale applications with next.js.\",\n        },\n      ],\n    },\n    {\n      href: \"/about\",\n      title: \"About\",\n    },\n    {\n      href: \"/contact\",\n      title: \"Contact\",\n    },\n  ],\n  SecondaryNavigation: [\n    {\n      href: \"/disclaimer\",\n      title: \"Disclaimer\",\n    },\n    {\n      href: \"/privacy-policy\",\n      title: \"Privacy policy\",\n    },\n    {\n      href: \"/contact\",\n      title: \"Contact\",\n    },\n  ],\n};\nexport default themeConfig;\n```\n\n## rename your file\n\nLastly, 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendweb3%2Fsection-theme-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontendweb3%2Fsection-theme-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendweb3%2Fsection-theme-blog/lists"}