Merge pull request #77 from frontendweb3/v1.1.0

Introduce new version of section blog theme V1.1.0

Author: officialrajdeepsingh

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

README.md

@@ -1,165 +1 @@
-<div style="display: block; margin-left: auto; margin-right: auto;width: 40%;">
-<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>
-</div>
-
-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.
-
-## Tech Stack
-
-<div className="flex flex-row flex-wrap item-center md:justify-between">
-  <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" />
-  <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"/>
-  <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"/>
-  <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"/>
-  <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"/>
-  <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" />
-  <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"/>
-  <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">
-</div>
-
-<div style="margin: 5px auto;width:100%;"></div>
-
-## 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 <Component {...pageProps} />
-}
-```
-
-## 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: "My title",
-    description: "my descript is here ",
-    SiteURL:"https://officialrajdeepsingh.dev",
-    defaultSEO: {
-      title: "default SEO  title is here",
-      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 <a style='margin: 0px 4px;text-decoration:underline;' target='_blank' href='https://www.npmjs.com/package/section-blog-theme'>  the section blog theme. </a>",
-  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: {
-    text: "Section",
-    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>'
-  },
-  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.
+packages/section-blog-theme/README.md

contributing.md

@@ -1,97 +1,119 @@
 The section blog theme comes under an open-source license. Before starting the contribution, first read our [Code of Conduct](./CODE_OF_CONDUCT.md) guidelines.
 
 How to start a contribution?
+
 1. Clone Repo
 2. Install Package
 3. Structure
 4. Start local development server
 
 ## Clone Repo
+
 First, clone the section blog theme repository from GitHub.
+
 ```bash
  git clone https://github.com/frontendweb3/section-blog-theme.git
+ # or
+ gh repo clone frontendweb3/section-blog-theme
 ```
 
 ## Install-Package
+
 Install the package with pnpm.
 
 ```bash
 cd section-blog-theme && pnpm install
 ```
 
 ## Structure
-Our repository is part of a Monorepo structure, it is managed with Turbo. 
+
+Our repository is part of a Monorepo structure, it is managed with Turbo.
 
 ### Folder
+
 1. Docs
 2. Package
 3. Example
 
 ### Docs
+
 The Docs folder contains the documentation, the documentation site is built with the nextra and nextra docs theme.
 
 ### Packages
+
 The package folder contains the actual code of the section blog theme.
 
 ### Example
-The example folder contains a demo site built or used with a section blog theme.
 
+The example folder contains a demo site built or used with a section blog theme.
 
 ## Start local development server
+
 1. Section blog theme server
 2. Documentation server
 
 ### Section blog theme server
+
 You can start the local development server with the following command.
 
 ```bash
-pnpm dev --filter=section-blog-theme  --filter=demo-section-blog
+pnpm dev
 ```
+
 ### Documentation server
+
 Start your documentation server with following command.
 
 ```bash
-pnpm dev --filter=docs
+pnpm dev:docs
 ```
-## What and where we found components?
 
-* `components/Article/Article.tsx` > article by frontmatter
-* `components/banner/Banner.tsx` > Banner
-* `components/Card/Card.tsx` > posts card
-* `components/Command/Command.tsx` > command or cmd
-* `components/Footer/Footer.tsx` > footer component
-* `components/Header/Header.tsx` > header component
-* `components/Header/ThemeToggle.tsx` > theme toggle
-* `components/Layouts` > layouts folders
-* `components/Layouts/404.tsx` > 404 error page
-* `components/Layouts/500.tsx` > 500 error page
-* `components/Layouts/BlogLayout.tsx` > posts type
-* `components/Layouts/HomePage.tsx` > home type
-* `components/Layouts/index.tsx` > main file
-* `components/Layouts/Page.tsx` > page type
-* `components/Layouts/Posts.tsx` > posts type
-* `components/Layouts/Read.tsx` > read type
-* `components/Layouts/Tag.tsx` > Generate Dynamic Tag
-* `components/Navigation/ListItem.tsx` > Part of Header
-* `components/Navigation/NavgationItem.tsx` > Part of Header
-* `components/Navigation/NavigationItems.tsx` > Part of Header
-* `components/Seo/Seo.tsx` > SEO component
-* `components/SocialLink/DynmicIcon.tsx` > Part of Header
-* `components/SocialLink/SocialLink.tsx` > Part of Header
-* `components/ui/*` > Part of shadcn/ui
-* `components.json` > shadcn/ui
-* `src/index.tsx` > Main 
-* `src/tag.tsx` > Tag Page
-* `src/types.ts` > type 
-* `styles/globals.css` > tailwind css
-* `tsup.config.ts` > tsup config
-* `utility/NextURL.ts` > check develpment or production *
-* `utility/slugify.ts` > convert title slugify *
-* `utility/useContent.ts` > return all posts *
-* `utility/useTagContent.ts` > return post based on tag
-* `utility/useTags.ts` > return all tags based on posts
-* `utility/utils.ts` > use by shadcn/ui and tailwind css
-* `public/` > Public folder
-* `__TEST__/` > testing folder
-* `tsconfig.json` >  typescript config
+### Building
+
+Building theme for production.
+
+```bash
+pnpm build
+```
+
+## What and where we found components?
 
+- `components/Article/Article.tsx` > article by frontmatter
+- `components/banner/Banner.tsx` > Banner
+- `components/Card/Card.tsx` > posts card
+- `components/Command/Command.tsx` > command or cmd
+- `components/Footer/Footer.tsx` > footer component
+- `components/Header/Header.tsx` > header component
+- `components/Header/ThemeToggle.tsx` > theme toggle
+- `components/Layouts` > layouts folders
+- `components/Layouts/404.tsx` > 404 error page
+- `components/Layouts/500.tsx` > 500 error page
+- `components/Layouts/BlogLayout.tsx` > posts type
+- `components/Layouts/HomePage.tsx` > home type
+- `components/Layouts/index.tsx` > main file
+- `components/Layouts/Page.tsx` > page type
+- `components/Layouts/Posts.tsx` > posts type
+- `components/Layouts/Read.tsx` > read type
+- `components/Layouts/Tag.tsx` > Generate Dynamic Tag
+- `components/Navigation/ListItem.tsx` > Part of Header
+- `components/Navigation/NavgationItem.tsx` > Part of Header
+- `components/Navigation/NavigationItems.tsx` > Part of Header
+- `components/Seo/Seo.tsx` > SEO component
+- `components/SocialLink/DynmicIcon.tsx` > Part of Header
+- `components/SocialLink/SocialLink.tsx` > Part of Header
+- `components/ui/*` > Part of shadcn/ui
+- `components.json` > shadcn/ui
+- `src/index.tsx` > Main
+- `src/tag.tsx` > Tag Page
+- `src/types.ts` > type
+- `styles/globals.css` > tailwind css
+- `tsup.config.ts` > tsup config
+- `utility/NextURL.ts` > check develpment or production \*
+- `utility/slugify.ts` > convert title slugify \*
+- `utility/useContent.ts` > return all posts \*
+- `utility/useTagContent.ts` > return post based on tag
+- `utility/useTags.ts` > return all tags based on posts
+- `utility/utils.ts` > use by shadcn/ui and tailwind css
+- `public/` > Public folder
+- `__TEST__/` > testing folder
+- `tsconfig.json` > typescript config

docs/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "clean": "rimraf .next/ ",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
@@ -18,6 +19,7 @@
     "nextra-theme-docs": "^2.13.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "rimraf": "^5.0.5",
     "typescript": "5.3.3"
   }
 }