update (#105)

* update the changesets version * adding demo-section-blog , docs package in ignore list (#100) * adding demo-section-blog , docs package in ignore list * set the package into private * creating icons * move the lucide icon to simple icons #98 * introduce raw layout * adding raw layout support * create raw example page * update the page * update the social link and remove the unused code. * update the packages * delete the unused file * update the packages * introduce raw layout * remove the lucide icon and fetch search bar data useFetch to swr * remove the comment * remove the lucide icon type and add CardType * export the raw layout * update the ui * introduce multiple card * introduce multiple card * support two card layout * file formating change * adding hostname for raw layout * CardType for card * update the post * update the home page * raw image * write docs about cardType and update the sociallinks docs * introduce new raw page docs * update the docs * format the file * opengraph image docs * update the docs * no more lucide icon * update the icon * update the homepage url * update the image * update the cardtype * update the icon * update the package * V1.1.5 (#103) * update the changesets version * creating icons * move the lucide icon to simple icons #98 * introduce raw layout * adding raw layout support * create raw example page * update the page * update the social link and remove the unused code. * update the packages * delete the unused file * update the packages * introduce raw layout * remove the lucide icon and fetch search bar data useFetch to swr * remove the comment * remove the lucide icon type and add CardType * export the raw layout * update the ui * introduce multiple card * introduce multiple card * support two card layout * file formating change * adding hostname for raw layout * CardType for card * update the post * update the home page * raw image * write docs about cardType and update the sociallinks docs * introduce new raw page docs * update the docs * format the file * opengraph image docs * update the docs * no more lucide icon * update the icon * update the homepage url * update the image * update the cardtype * update the icon * update the package * adding demo-section-blog , docs package in ignore list (#104) * adding demo-section-blog , docs package in ignore list * set the package into private
frontendweb3 · Apr 15, 2024 · 92d2b78 · 92d2b78
1 parent 1cc2141
commit 92d2b78
Show file tree

Hide file tree

Showing 50 changed files with 3,458 additions and 1,491 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],

diff --git a/docs/public/icons.png b/docs/public/icons.png
diff --git a/docs/public/raw.png b/docs/public/raw.png
diff --git a/docs/src/pages/docs/Built-ins/Icons.mdx b/docs/src/pages/docs/Built-ins/Icons.mdx
@@ -17,7 +17,8 @@ The section blog theme provides icons to use with the Alert component.
  <BadgeAlert />
  <BadgeX />
  <Shield />
- <Braces />
+ <CommandIcon />
+ <FileIcon />
 ```
 
 ## How to use it?
@@ -29,7 +30,7 @@ import { AlertTriangle } from "section-blog-theme/icons"
 ```
 Next step is use inbuilt icons, inside you mdx file.
 ```javascript
-import { AlertTriangle, Ban, Check, CheckCircle, HelpCircle, Terminal, Braces, BadgeAlert, BadgeX, Shield, Lightbulb} from "section-blog-theme/icons"
+import { AlertTriangle, Ban, Check, CheckCircle, HelpCircle, Terminal, BadgeAlert, BadgeX, Shield, Lightbulb, CommandIcon, FileIcon } from "section-blog-theme/icons"
 
  <AlertTriangle />
  <Ban />
@@ -41,6 +42,6 @@ import { AlertTriangle, Ban, Check, CheckCircle, HelpCircle, Terminal, Braces, B
  <BadgeAlert />
  <BadgeX />
  <Shield />
- <Braces />
-
+ <CommandIcon />
+ <FileIcon />
 ```
diff --git a/docs/src/pages/docs/_meta.json b/docs/src/pages/docs/_meta.json
@@ -4,6 +4,7 @@
   "configuration": "",
   "theme":"Theme",
   "Built-ins": "Built-ins",
+  "opengraph-image":"Opengraph Image",
   "deploy":"Deploy",
   "contributing":"Contributing"
 }
diff --git a/docs/src/pages/docs/configuration.mdx b/docs/src/pages/docs/configuration.mdx
@@ -112,6 +112,16 @@ Change the date DateFormat in your blog site. By default date type is `MMM DD, Y
 ------------- | ------------- | ------- | -------------
 DateFormat  | `string`  |  `false` | Change the date format.
 
+
+## CardType
+Currently, we have three cards for the section blog theme. The card names are one, two and three. The one card is the default card. 
+
+Option       | TYPE          | Require|  Description 
+------------- | ------------- | ------- | -------------
+CardType.post  | `one` & `two` & `three` | `false` | Available card option for posts. 
+CardType.tag |  `two` & `three` | `false` | Available card option for tag.
+
+
 ## bannerMessage
 Show banner on top website.
 
@@ -166,4 +176,4 @@ Social media icon show on your website header. I all
 Option       | TYPE          | Require |  Description
 ------------- | ------------- | ------ | -------------
  url | `string`  | `true` | full link of social media  
- name | use any [Lucide icon(ex: facebook)](https://lucide.dev/icons/)    |  `true` | name of url
+ name | use any [Simple Icons(ex: facebook)](https://simpleicons.org/)    |  `true` | name of icon
diff --git a/docs/src/pages/docs/contributing.mdx b/docs/src/pages/docs/contributing.mdx
@@ -2,12 +2,12 @@
 
 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.
 
-1. Clone Repo
-2. Install Package
-3. Structure
-4. Start local development server
+1. [Clone Repository](#clone-repository)
+2. [Install Package](#install-package)
+3. [Structure](#structure)
+4. [Start local development server](#start-local-development-server)
 
-## Clone Repo
+## Clone Repository
 
 First, clone the section blog theme repository from GitHub.
 
@@ -31,26 +31,27 @@ Our repository is part of a Monorepo structure, it is managed with Turbo.
 
 **Folder :**
 
-1. Docs
-2. Package
-3. Example
+1. [Docs](#docs)
+2. [Packages](#packages)
+3. [Examples](#examples)
 
 ### 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.
+The packages folder contains the actual code of the section blog theme.
 
-### Example
+### Examples
 
-The example folder contains a demo site built or used with a section blog theme.
+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
 
@@ -73,51 +74,51 @@ pnpm  dev:docs
 Building theme for production.
 
 ```bash
-pnpm build:core # buiding only section-blog-theme
+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
 ```
 
-## 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
+## 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`
diff --git a/docs/src/pages/docs/deploy.mdx b/docs/src/pages/docs/deploy.mdx
@@ -227,4 +227,4 @@ jobs:
 ```
 Now push your local code into the GitHub repository and [enable GitHub pages permission](https://medium.com/frontendweb/how-to-deploy-the-next-js-app-router-application-on-github-pages-using-pnpm-54ac72424d80). 
 
-</Steps>
+</Steps>
diff --git a/docs/src/pages/docs/opengraph-image.mdx b/docs/src/pages/docs/opengraph-image.mdx
@@ -0,0 +1,70 @@
+---
+title : Opengraph image
+description: Generate an open graph image using the section blog theme.
+---
+
+To generate an [open graph image](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image) in the section theme blog, use the following code.
+
+```javascript filename="page/api/og-image.tsx"
+
+import { ImageResponse } from '@vercel/og'
+import { NextRequest } from 'next/server'
+export const config = {
+  runtime: 'edge',
+}
+
+export default async function handler(req: NextRequest) {
+  const { searchParams } = req.nextUrl
+  const title = searchParams.get('title')
+
+  if (!title) {
+    return new ImageResponse(<>{'Visit with "?title=what is markdown "'}</>, {
+      width: 1200,
+      height: 630,
+    })
+  }
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 60,
+          color: 'black',
+          background: '#f6f6f6',
+          width: '100%',
+          height: '100%',
+          paddingTop: 50,
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          display: 'flex',
+        }}
+      >
+        <h1>{title}</h1>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  )
+}
+
+```
+
+You can use it with the following syntax: `api/og-image?title=10 Things You Most Likely Didn't Know About Health`
+
+```mdx
+---
+type: post
+title: 10 Things You Most Likely Didn't Know About Health.
+description: Culpa laboris aliquip ea consectetur mollit ea ipsum sint qui culpa laboris dolor adipisicing proident. Et officia consequat do nulla tempor cupidatat elit.
+date: 2022-11-12T08:05:53.939Z
+
+
+image:  http://localhost:3000/api/og-image?title=10 Things You Most Likely Didn't Know About Health
+
+author: Curtis Lopez
+---
+```
+
diff --git a/docs/src/pages/docs/page-configuration.mdx b/docs/src/pages/docs/page-configuration.mdx
@@ -68,9 +68,21 @@ type: home
 title: Home Page - Rajdeep Singh
 description : Home page 
 image: https://cdn.pixabay.com/photo/2023/05/21/19/45/rose-8009275_1280.jpg
+---
+```
+
+## Raw Page
 
+A raw page is a raw page without any typography or other style. You can control everything. Similar to the home page, you can also build a home page using Raw. It gives you more control over your design.
+
+```mdx markdown {2}  filename="index.mdx"
+---
+type: raw
+title : Raw with Home Page
+description : Raw with Home Page
 ---
 ```
+![Raw Page](/raw.png "Raw Page")
 
 ## Basic Page
 ![Page](/Page.png "Page")

diff --git a/examples/demo-section-blog/next.config.js b/examples/demo-section-blog/next.config.js
@@ -10,6 +10,8 @@ module.exports = withNextra({
   reactStrictMode: true,
   images: {
     remotePatterns: [
+      { hostname:"assets.website-files.com" },
+      { hostname: "localhost"},
       {
         hostname: "flowbite.s3.amazonaws.com",
       },

diff --git a/examples/demo-section-blog/package.json b/examples/demo-section-blog/package.json
@@ -14,11 +14,12 @@
     "@types/node": "20.11.0",
     "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
+    "@vercel/og": "^0.6.2",
     "autoprefixer": "10.4.16",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.0",
     "next": "14.0.4",
-    "nextra": "^2.13.2",
+    "nextra": "^2.13.4",
     "postcss": "8.4.33",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -28,6 +29,6 @@
     "typescript": "5.3.3"
   },
   "devDependencies": {
-    "prettier": "^3.1.1"
+    "prettier": "^3.2.5"
   }
 }