Skip to content

Commit e19cebb

Browse files
officialrajdeepsinghofficialrajdeepsingh
committed
Merge branch 'v1.1.5' into canary
2 parents 759acc1 + 0ff8ecb commit e19cebb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+3458
-1491
lines changed

‎.changeset/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
2+
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
33
"changelog": "@changesets/cli/changelog",
44
"commit": false,
55
"fixed": [],

‎docs/public/icons.png

-4.95 KB
Loading

‎docs/public/raw.png

195 KB
Loading

‎docs/src/pages/docs/Built-ins/Icons.mdx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ The section blog theme provides icons to use with the Alert component.
1717
<BadgeAlert />
1818
<BadgeX />
1919
<Shield />
20-
<Braces />
20+
<CommandIcon />
21+
<FileIcon />
2122
```
2223

2324
## How to use it?
@@ -29,7 +30,7 @@ import { AlertTriangle } from "section-blog-theme/icons"
2930
```
3031
Next step is use inbuilt icons, inside you mdx file.
3132
```javascript
32-
import { AlertTriangle, Ban, Check, CheckCircle, HelpCircle, Terminal, Braces, BadgeAlert, BadgeX, Shield, Lightbulb} from "section-blog-theme/icons"
33+
import { AlertTriangle, Ban, Check, CheckCircle, HelpCircle, Terminal, BadgeAlert, BadgeX, Shield, Lightbulb, CommandIcon, FileIcon } from "section-blog-theme/icons"
3334

3435
<AlertTriangle />
3536
<Ban />
@@ -41,6 +42,6 @@ import { AlertTriangle, Ban, Check, CheckCircle, HelpCircle, Terminal, Braces, B
4142
<BadgeAlert />
4243
<BadgeX />
4344
<Shield />
44-
<Braces />
45-
45+
<CommandIcon />
46+
<FileIcon />
4647
```

‎docs/src/pages/docs/_meta.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"configuration": "",
55
"theme":"Theme",
66
"Built-ins": "Built-ins",
7+
"opengraph-image":"Opengraph Image",
78
"deploy":"Deploy",
89
"contributing":"Contributing"
910
}

‎docs/src/pages/docs/configuration.mdx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,16 @@ Change the date DateFormat in your blog site. By default date type is `MMM DD, Y
112112
------------- | ------------- | ------- | -------------
113113
DateFormat | `string` | `false` | Change the date format.
114114

115+
116+
## CardType
117+
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.
118+
119+
Option | TYPE | Require| Description
120+
------------- | ------------- | ------- | -------------
121+
CardType.post | `one` & `two` & `three` | `false` | Available card option for posts.
122+
CardType.tag | `two` & `three` | `false` | Available card option for tag.
123+
124+
115125
## bannerMessage
116126
Show banner on top website.
117127

@@ -166,4 +176,4 @@ Social media icon show on your website header. I all
166176
Option | TYPE | Require | Description
167177
------------- | ------------- | ------ | -------------
168178
url | `string` | `true` | full link of social media
169-
name | use any [Lucide icon(ex: facebook)](https://lucide.dev/icons/) | `true` | name of url
179+
name | use any [Simple Icons(ex: facebook)](https://simpleicons.org/) | `true` | name of icon

‎docs/src/pages/docs/contributing.mdx

Lines changed: 54 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
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.
44

5-
1. Clone Repo
6-
2. Install Package
7-
3. Structure
8-
4. Start local development server
5+
1. [Clone Repository](#clone-repository)
6+
2. [Install Package](#install-package)
7+
3. [Structure](#structure)
8+
4. [Start local development server](#start-local-development-server)
99

10-
## Clone Repo
10+
## Clone Repository
1111

1212
First, clone the section blog theme repository from GitHub.
1313

@@ -31,26 +31,27 @@ Our repository is part of a Monorepo structure, it is managed with Turbo.
3131

3232
**Folder :**
3333

34-
1. Docs
35-
2. Package
36-
3. Example
34+
1. [Docs](#docs)
35+
2. [Packages](#packages)
36+
3. [Examples](#examples)
3737

3838
### Docs
3939

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

4242
### Packages
4343

44-
The package folder contains the actual code of the section blog theme.
44+
The packages folder contains the actual code of the section blog theme.
4545

46-
### Example
46+
### Examples
4747

48-
The example folder contains a demo site built or used with a section blog theme.
48+
The examples folder contains a demo site built or used with a section blog theme.
4949

5050
## Start local development server
5151

5252
1. Section blog theme server
5353
2. Documentation server
54+
3. Building
5455

5556
### Section blog theme server
5657

@@ -73,51 +74,51 @@ pnpm dev:docs
7374
Building theme for production.
7475

7576
```bash
76-
pnpm build:core # buiding only section-blog-theme
77+
pnpm build:core # buiding only code of section-blog-theme
7778
# and
7879
pnpm build # buiding section-blog-theme, and demo-section-blog package
7980
# or
8081
pnpm build:all # buiding section-blog-theme, demo-section-blog and docs
8182
```
8283

83-
## What and where we found components?
84-
85-
- `components/Article/Article.tsx` article by front matter
86-
- `components/banner/Banner.tsx` Banner
87-
- `components/Card/Card.tsx` posts card
88-
- `components/Command/Command.tsx` command or cmd
89-
- `components/Footer/Footer.tsx` footer component
90-
- `components/Header/Header.tsx` header component
91-
- `components/Header/ThemeToggle.tsx` theme toggle
92-
- `components/Layouts` layouts folders
93-
- `components/Layouts/404.tsx` 404 error page
94-
- `components/Layouts/500.tsx` 500 error page
95-
- `components/Layouts/BlogLayout.tsx` posts type
96-
- `components/Layouts/HomePage.tsx` home type
97-
- `components/Layouts/index.tsx` main file
98-
- `components/Layouts/Page.tsx` page type
99-
- `components/Layouts/Posts.tsx` posts type
100-
- `components/Layouts/Read.tsx` read type
101-
- `components/Layouts/Tag.tsx` Generate Dynamic Tag
102-
- `components/Navigation/ListItem.tsx` Part of Header
103-
- `components/Navigation/NavgationItem.tsx` Part of Header
104-
- `components/Navigation/NavigationItems.tsx` Part of Header
105-
- `components/Seo/Seo.tsx` SEO component
106-
- `components/SocialLink/DynmicIcon.tsx` Part of Header
107-
- `components/SocialLink/SocialLink.tsx` Part of Header
108-
- `components/ui/*` Part of shadcn UI
109-
- `components.json` Part of shadcn UI
110-
- `src/index.tsx` Main
111-
- `src/tag.tsx` Tag Page
112-
- `src/types.ts` type
113-
- `styles/globals.css` tailwind CSS
114-
- `tsup.config.ts` tsup config
115-
- `utility/NextURL.ts` check development or production \*
116-
- `utility/slugify.ts` convert title slugify
117-
- `utility/useContent.ts` return all posts
118-
- `utility/useTagContent.ts` return post based on tag
119-
- `utility/useTags.ts` return all tags based on posts
120-
- `utility/utils.ts` use by shadcn UI and tailwind CSS
121-
- `public/` Public folder
122-
- `__TEST__/` testing folder
123-
- `tsconfig.json` typescript config
84+
## Where do we find reactjs components?
85+
86+
- Article component located at: `components/Article/Article.tsx`.
87+
- Banner component located at: `components/banner/Banner.tsx`.
88+
- Card component located at:`components/Card/Card.tsx`.
89+
- Command component located at: `components/Command/Command.tsx`.
90+
- Footer component located at:`components/Footer/Footer.tsx`.
91+
- Header component located at:`components/Header/Header.tsx`.
92+
- Theme Toggle component located at:`components/Header/ThemeToggle.tsx`.
93+
- Layouts component located at:`components/Layouts`.
94+
- 404 component located at:`components/Layouts/404.tsx`.
95+
- 505 component located at:`components/Layouts/500.tsx`.
96+
- Posts component located at:`components/Layouts/BlogLayout.tsx`.
97+
- Home component located at:`components/Layouts/HomePage.tsx`.
98+
- Main component located at:`components/Layouts/index.tsx`.
99+
- Page component located at:`components/Layouts/Page.tsx`.
100+
- Posts component located at:`components/Layouts/Posts.tsx`.
101+
- Read component located at:`components/Layouts/Read.tsx`.
102+
- Tag component located at:`components/Layouts/Tag.tsx`.
103+
- ListItem component located at:`components/Navigation/ListItem.tsx`.
104+
- NavgationItem component located at:`components/Navigation/NavgationItem.tsx`.
105+
- NavigationItems component located at:`components/Navigation/NavigationItems.tsx`.
106+
- SEO component located at:`components/Seo/Seo.tsx`.
107+
- DynmicIcon component located at:`components/SocialLink/DynmicIcon.tsx`.
108+
- SocialLink component located at:`components/SocialLink/SocialLink.tsx`.
109+
- Shadcn UI component located at:`components/ui/*`
110+
- Shadcn UI components located at:`components.json`
111+
- Main component located at:`src/index.tsx`
112+
- Tag component located at:`src/tag.tsx`
113+
- Section blog theme type located at:`src/types.ts`
114+
- Tailwind CSS file located at:`styles/globals.css`
115+
- Tsup Config file located at:`tsup.config.ts`
116+
- Check development or production locat at:`utility/NextURL.ts`
117+
- Command component located at:`utility/slugify.ts`
118+
- Hook return posts located at:`utility/useContent.ts`
119+
- Hook return tag-related posts located at:`utility/useTagContent.ts`
120+
- Hook return all tags based on posts located at:`utility/useTags.ts`
121+
- Used by shadcn UI and tailwind CSS components located at:`utility/utils.ts`
122+
- Public folder located at:`public/`
123+
- Testing folder located at: `__TEST__/`
124+
- Typescript config located at:`tsconfig.json`

‎docs/src/pages/docs/deploy.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,4 +227,4 @@ jobs:
227227
```
228228
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).
229229

230-
</Steps>
230+
</Steps>

‎docs/src/pages/docs/opengraph-image.mdx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title : Opengraph image
3+
description: Generate an open graph image using the section blog theme.
4+
---
5+
6+
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.
7+
8+
```javascript filename="page/api/og-image.tsx"
9+
10+
import { ImageResponse } from '@vercel/og'
11+
import { NextRequest } from 'next/server'
12+
export const config = {
13+
runtime: 'edge',
14+
}
15+
16+
export default async function handler(req: NextRequest) {
17+
const { searchParams } = req.nextUrl
18+
const title = searchParams.get('title')
19+
20+
if (!title) {
21+
return new ImageResponse(<>{'Visit with "?title=what is markdown "'}</>, {
22+
width: 1200,
23+
height: 630,
24+
})
25+
}
26+
27+
return new ImageResponse(
28+
(
29+
<div
30+
style={{
31+
fontSize: 60,
32+
color: 'black',
33+
background: '#f6f6f6',
34+
width: '100%',
35+
height: '100%',
36+
paddingTop: 50,
37+
flexDirection: 'column',
38+
justifyContent: 'center',
39+
alignItems: 'center',
40+
display: 'flex',
41+
}}
42+
>
43+
<h1>{title}</h1>
44+
</div>
45+
),
46+
{
47+
width: 1200,
48+
height: 630,
49+
}
50+
)
51+
}
52+
53+
```
54+
55+
You can use it with the following syntax: `api/og-image?title=10 Things You Most Likely Didn't Know About Health`
56+
57+
```mdx
58+
---
59+
type: post
60+
title: 10 Things You Most Likely Didn't Know About Health.
61+
description: Culpa laboris aliquip ea consectetur mollit ea ipsum sint qui culpa laboris dolor adipisicing proident. Et officia consequat do nulla tempor cupidatat elit.
62+
date: 2022-11-12T08:05:53.939Z
63+
64+
65+
image: http://localhost:3000/api/og-image?title=10 Things You Most Likely Didn't Know About Health
66+
67+
author: Curtis Lopez
68+
---
69+
```
70+

‎docs/src/pages/docs/page-configuration.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,21 @@ type: home
6868
title: Home Page - Rajdeep Singh
6969
description : Home page
7070
image: https://cdn.pixabay.com/photo/2023/05/21/19/45/rose-8009275_1280.jpg
71+
---
72+
```
73+
74+
## Raw Page
7175

76+
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.
77+
78+
```mdx markdown {2} filename="index.mdx"
79+
---
80+
type: raw
81+
title : Raw with Home Page
82+
description : Raw with Home Page
7283
---
7384
```
85+
![Raw Page](/raw.png "Raw Page")
7486

7587
## Basic Page
7688
![Page](/Page.png "Page")

0 commit comments

Comments
 (0)