Update the branch

update the branch

.github/workflows/preview.yaml

@@ -0,0 +1,24 @@
+name: GitHub Actions Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - canary
+    paths:
+        - docs/**
+
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@canary
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/production.yaml

@@ -0,0 +1,24 @@
+name: GitHub Actions Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+    paths:
+        - docs/**
+jobs:
+  Deploy-Production:
+    if: github.repository == 'frontendweb3/section-blog-theme'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@canary
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

CONTRIBUTING.md

@@ -0,0 +1 @@
+docs/src/pages/docs/contributing.mdx

docs/src/components/Showcase/Card.tsx

@@ -0,0 +1,21 @@
+import Image from 'next/image';
+import { Cards, Card } from 'nextra/components'
+import showcase from "@/src/showcase.json";
+
+export const ShowcaseCard = () => {
+    return (
+        <Cards style={{ marginTop: "64px" }}>
+
+            {
+                showcase.map(
+                    (item: { name: string; url: string; image: string }) => {
+                        return (<Card key={item.name} arrow={true} image={true} title={item.name} href={item.url} icon={" "}>
+                            <Image src={`/showcase/${item.image}`} alt={item.name} width={324} height={224} style={{ width: '100%', height: 'auto' }} />
+                        </Card>)
+                    }
+                )
+
+            }
+        </Cards>
+    );
+};

docs/src/pages/_meta.json

@@ -6,5 +6,14 @@
   "docs": {
     "type": "page",
     "title": "Documentation"
+  },
+  "showcase": {
+    "type": "page",
+    "title": "Showcase"
+  },
+  "contribution": {
+    "type": "page",
+    "title": "Contribution",
+    "href": "https://github.com/frontendweb3/section-blog-theme/contribute"
   }
-}
+}

docs/src/pages/docs/contributing.mdx

@@ -0,0 +1,107 @@
+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 NPM package with pnpm.
+```bash
+cd  section-blog-theme && pnpm  install
+```
+## Structure
+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.
+
+## 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
+```
+
+### Documentation server
+Start your documentation server with the following command.
+```bash
+pnpm  dev:docs
+```
+
+### Building
+Building theme for production.
+```bash
+pnpm build:core # buiding only 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
+```
+
+
+
+## What and where we found components?
+-  `components/Article/Article.tsx` article by front matter
+-  `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` Part of 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 development 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