Documentation
Contributing

How to start a contribution?

The section blog theme comes under an open-source license. Before starting the contribution, first read our Code of Conduct guidelines.

  1. Clone Repository
  2. Install Package
  3. Structure
  4. Start local development server

Clone Repository

First, clone the section blog theme repository from GitHub.

git  clone  https://github.com/frontendweb3/section-blog-theme.git
# or
gh  repo  clone  frontendweb3/section-blog-theme

Install-Package

Install the NPM package with pnpm.

cd  section-blog-theme && pnpm  install

Structure

Our repository is part of a Monorepo structure, it is managed with Turbo.

Folder :

  1. Docs
  2. Packages
  3. Examples

Docs

The Docs folder contains the documentation, the documentation site is built with the nextra and nextra docs theme.

Packages

The packages folder contains the actual code of the section blog theme.

Examples

The examples 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
  3. Building

Section blog theme server

You can start the local development server with the following command.

pnpm  dev

Documentation server

Start your documentation server with the following command.

pnpm  dev:docs

Building

Building theme for production.

pnpm build:core # buiding only code of section-blog-theme
# and
pnpm build # buiding section-blog-theme, and demo-section-blog package
# or
pnpm build:all # buiding section-blog-theme, demo-section-blog and docs

Where do we find reactjs components?

  • Article component located at: components/Article/Article.tsx.
  • Banner component located at: components/banner/Banner.tsx.
  • Card component located at:components/Card/Card.tsx.
  • Command component located at: components/Command/Command.tsx.
  • Footer component located at:components/Footer/Footer.tsx.
  • Header component located at:components/Header/Header.tsx.
  • Theme Toggle component located at:components/Header/ThemeToggle.tsx.
  • Layouts component located at:components/Layouts.
  • 404 component located at:components/Layouts/404.tsx.
  • 505 component located at:components/Layouts/500.tsx.
  • Posts component located at:components/Layouts/BlogLayout.tsx.
  • Home component located at:components/Layouts/HomePage.tsx.
  • Main component located at:components/Layouts/index.tsx.
  • Page component located at:components/Layouts/Page.tsx.
  • Posts component located at:components/Layouts/Posts.tsx.
  • Read component located at:components/Layouts/Read.tsx.
  • Tag component located at:components/Layouts/Tag.tsx.
  • ListItem component located at:components/Navigation/ListItem.tsx.
  • NavgationItem component located at:components/Navigation/NavgationItem.tsx.
  • NavigationItems component located at:components/Navigation/NavigationItems.tsx.
  • SEO component located at:components/Seo/Seo.tsx.
  • DynmicIcon component located at:components/SocialLink/DynmicIcon.tsx.
  • SocialLink component located at:components/SocialLink/SocialLink.tsx.
  • Shadcn UI component located at:components/ui/*
  • Shadcn UI components located at:components.json
  • Main component located at:src/index.tsx
  • Tag component located at:src/tag.tsx
  • Section blog theme type located at:src/types.ts
  • Tailwind CSS file located at:styles/globals.css
  • Tsup Config file located at:tsup.config.ts
  • Check development or production locat at:utility/NextURL.ts
  • Command component located at:utility/slugify.ts
  • Hook return posts located at:utility/useContent.ts
  • Hook return tag-related posts located at:utility/useTagContent.ts
  • Hook return all tags based on posts located at:utility/useTags.ts
  • Used by shadcn UI and tailwind CSS components located at:utility/utils.ts
  • Public folder located at:public/
  • Testing folder located at: __TEST__/
  • Typescript config located at:tsconfig.json
Deploy