Skip to content

Commit 9dce57c

Browse files
officialrajdeepsinghofficialrajdeepsingh
authored
update docs
update the docs
2 parents 2484348 + 26cfee3 commit 9dce57c

File tree

6 files changed

+343
-6
lines changed

6 files changed

+343
-6
lines changed

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
22
"index": "Installation",
33
"page-configuration": "",
4-
"theme-configuration": "",
5-
"Built-ins": "Built-ins"
4+
"configuration": "",
5+
"theme":"Theme",
6+
"Built-ins": "Built-ins",
7+
"deploy":"Deploy",
8+
"contributing":"Contributing"
69
}

‎docs/src/pages/docs/theme-configuration.mdx renamed to ‎docs/src/pages/docs/configuration.mdx

File renamed without changes.

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

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
---
2+
title : Deploy
3+
---
4+
5+
import { Steps } from 'nextra-theme-docs'
6+
7+
To deploy a section blog theme on Vercel, Netlify, etc., you don't need a special requirement. You can deploy a section blog theme like the usual application.
8+
9+
But when you deploy the section blog theme on the GitHub page, you need GitHub action according to the node package manager.
10+
11+
## To Deploy on Github Pages
12+
13+
To deploy the section blog theme on **GitHub pages** follow the below step.
14+
15+
<Steps>
16+
17+
### Add output, basepath and unoptimized in nextjs config file.
18+
19+
```javascript {9-13} filename="next.config.js"
20+
/** @type {import('next').NextConfig} */
21+
22+
const withNextra = require("nextra")({
23+
theme: "section-blog-theme",
24+
themeConfig: "./theme.config.jsx",
25+
});
26+
27+
module.exports = withNextra({
28+
output: 'export',
29+
basePath: "/your-repostory-name",
30+
images:{
31+
unoptimized: true
32+
}
33+
});
34+
```
35+
36+
### PNPM
37+
If you use PNPM, then use the following code for GitHub action to deploy the nextjs app on the GitHub page.
38+
39+
```yml filename=".github/workflows/deploy-nextjs-app-with-pnpm.yml"
40+
# Sample workflow for building and deploying a Next.js site to GitHub Pages
41+
#
42+
# To get started with Next.js see: https://nextjs.org/docs/getting-started
43+
#
44+
name: Deploy Next.js site to Pages
45+
46+
on:
47+
# Runs on pushes targeting the default branch
48+
push:
49+
branches: ["main"]
50+
51+
# Allows you to run this workflow manually from the Actions tab
52+
workflow_dispatch:
53+
54+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
55+
permissions:
56+
contents: read
57+
pages: write
58+
id-token: write
59+
60+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
61+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
62+
concurrency:
63+
group: "pages"
64+
cancel-in-progress: false
65+
66+
jobs:
67+
# Build job
68+
build:
69+
runs-on: ubuntu-latest
70+
71+
steps:
72+
- name: Checkout
73+
uses: actions/checkout@v3
74+
75+
- name: Install Node.js
76+
uses: actions/setup-node@v3
77+
with:
78+
node-version: 20
79+
80+
- uses: pnpm/action-setup@v2
81+
name: Install pnpm
82+
id: pnpm-install
83+
with:
84+
version: 8
85+
run_install: true
86+
87+
- name: Get pnpm store directory
88+
id: pnpm-cache
89+
shell: bash
90+
run: |
91+
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
92+
93+
- uses: actions/cache@v3
94+
name: Setup pnpm cache
95+
with:
96+
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
97+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
98+
restore-keys: |
99+
${{ runner.os }}-pnpm-store-
100+
101+
- name: Install dependencies
102+
run: pnpm install
103+
104+
- name: Setup Pages
105+
uses: actions/configure-pages@v3
106+
with:
107+
static_site_generator: next
108+
- name: Static HTML export with Next.js
109+
run: pnpm next build
110+
- name: Upload artifact
111+
uses: actions/upload-pages-artifact@v1
112+
with:
113+
path: ./out
114+
115+
# Deployment job
116+
deploy:
117+
environment:
118+
name: github-pages
119+
url: ${{ steps.deployment.outputs.page_url }}
120+
runs-on: ubuntu-latest
121+
needs: build
122+
steps:
123+
- name: Deploy to GitHub Pages
124+
id: deployment
125+
uses: actions/deploy-pages@v2
126+
127+
```
128+
129+
### Yarn or NPM
130+
If you use YARN OR NPM, then use the following code for GitHub action to deploy the nextjs app on the GitHub page.
131+
132+
```yaml filename=".github/workflows/deploy-nextjs-app-with-yarn-or-npm.yml"
133+
# Sample workflow for building and deploying a Next.js site to GitHub Pages
134+
#
135+
# To get started with Next.js see: https://nextjs.org/docs/getting-started
136+
#
137+
name: Deploy Next.js site to Pages
138+
139+
on:
140+
# Runs on pushes targeting the default branch
141+
push:
142+
branches: ["main"]
143+
144+
# Allows you to run this workflow manually from the Actions tab
145+
workflow_dispatch:
146+
147+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
148+
permissions:
149+
contents: read
150+
pages: write
151+
id-token: write
152+
153+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
154+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
155+
concurrency:
156+
group: "pages"
157+
cancel-in-progress: false
158+
159+
jobs:
160+
# Build job
161+
build:
162+
runs-on: ubuntu-latest
163+
steps:
164+
- name: Checkout
165+
uses: actions/checkout@v4
166+
- name: Detect package manager
167+
id: detect-package-manager
168+
run: |
169+
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
170+
echo "manager=yarn" >> $GITHUB_OUTPUT
171+
echo "command=install" >> $GITHUB_OUTPUT
172+
echo "runner=yarn" >> $GITHUB_OUTPUT
173+
exit 0
174+
elif [ -f "${{ github.workspace }}/package.json" ]; then
175+
echo "manager=npm" >> $GITHUB_OUTPUT
176+
echo "command=ci" >> $GITHUB_OUTPUT
177+
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
178+
exit 0
179+
else
180+
echo "Unable to determine package manager."
181+
exit 1
182+
fi
183+
- name: Setup Node
184+
uses: actions/setup-node@v4
185+
with:
186+
node-version: "20"
187+
cache: ${{ steps.detect-package-manager.outputs.manager }}
188+
- name: Setup Pages
189+
uses: actions/configure-pages@v4
190+
with:
191+
# Automatically inject basePath in your Next.js configuration file and disable
192+
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
193+
#
194+
# You may remove this line if you want to manage the configuration yourself.
195+
static_site_generator: next
196+
- name: Restore cache
197+
uses: actions/cache@v3
198+
with:
199+
path: |
200+
.next/cache
201+
# Generate a new cache whenever packages or source files change.
202+
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
203+
# If source files changed but packages didn't, rebuild from a prior cache.
204+
restore-keys: |
205+
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
206+
- name: Install dependencies
207+
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
208+
- name: Build with Next.js
209+
run: ${{ steps.detect-package-manager.outputs.runner }} next build
210+
- name: Upload artifact
211+
uses: actions/upload-pages-artifact@v3
212+
with:
213+
path: ./out
214+
215+
# Deployment job
216+
deploy:
217+
environment:
218+
name: github-pages
219+
url: ${{ steps.deployment.outputs.page_url }}
220+
runs-on: ubuntu-latest
221+
needs: build
222+
steps:
223+
- name: Deploy to GitHub Pages
224+
id: deployment
225+
uses: actions/deploy-pages@v4
226+
227+
```
228+
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).
229+
230+
</Steps>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ Show posts related to a tags page.
129129

130130
![Tags Page](/Tags.png " Tags Page ")
131131

132-
```markdown {2} filename="tags/[slug].mdx"
132+
```markdown {2} filename="tags/[tag].mdx"
133133
---
134134
type: tag
135135
---

‎docs/src/pages/docs/theme.mdx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title : To use 10000+ difference theming in the section blog theme.
3+
4+
---
5+
6+
The section blog theme is based on [Shadcn UI](https://ui.shadcn.com/docs/theming), and Shadcn UI has the functionality to use different themes.
7+
Official Shadcn UI has two themes: the first is the default, and the second is the New York theme.
8+
9+
There are tons of themes available for Shadcn UI on the internet.
10+
The [ui.jln.dev](https://ui.jln.dev/) website offers you more than 10000 custom Shadcn UI. You can use different themes in the section blog theme with copy-paste code.
11+
12+
13+
14+
## How to use the custom theme in the section blog theme?
15+
16+
You can copy any theme on ui.jln.dev website, paste in the global CSS file without **@layer directive**.
17+
18+
```css filename="globals.css"
19+
:root {
20+
--card: 287 70% 98%;
21+
--ring: 287 66% 82%;
22+
--input: 220 13% 91%;
23+
--muted: 47 39% 88%;
24+
--accent: 167 66% 82%;
25+
--border: 220 13% 91%;
26+
--popover: 287 70% 99%;
27+
--primary: 287 66% 82%;
28+
--secondary: 47 66% 82%;
29+
--background: 287 70% 99%;
30+
--foreground: 287 53% 0%;
31+
--destructive: 20 81% 21%;
32+
--card-foreground: 0 0% 0%;
33+
--muted-foreground: 47 0% 36%;
34+
--accent-foreground: 167 66% 22%;
35+
--popover-foreground: 287 53% 0%;
36+
--primary-foreground: 287 66% 22%;
37+
--secondary-foreground: 47 66% 22%;
38+
--destructive-foreground: 20 81% 81%;
39+
--radius: 0.5rem;
40+
}
41+
42+
.dark {
43+
--card: 287 55% 4%;
44+
--ring: 287 66% 82%;
45+
--input: 215 27.9% 16.9%;
46+
--muted: 47 39% 12%;
47+
--accent: 167 66% 82%;
48+
--border: 215 27.9% 16.9%;
49+
--popover: 287 55% 3%;
50+
--primary: 287 66% 82%;
51+
--secondary: 47 66% 82%;
52+
--background: 287 55% 3%;
53+
--foreground: 287 33% 98%;
54+
--destructive: 20 81% 47%;
55+
--card-foreground: 287 33% 99%;
56+
--muted-foreground: 47 0% 64%;
57+
--accent-foreground: 167 66% 22%;
58+
--popover-foreground: 287 33% 98%;
59+
--primary-foreground: 287 66% 22%;
60+
--secondary-foreground: 47 66% 22%;
61+
--destructive-foreground: 0 0% 100%;
62+
}
63+
64+
```
65+
66+
67+
## Why is Dark mode not working with the section blog theme with tailwind CSS?
68+
If you create your project using create-next-app, then remove the following code from your tailwind globals.css file. It creates conflict with Shadcn UI CSS variables.
69+
70+
71+
```css {5, 7-29} filename="globals.css"
72+
@tailwind base;
73+
@tailwind components;
74+
@tailwind utilities;
75+
76+
/* Remove/uncomment the bellow code. */
77+
78+
:root {
79+
--foreground-rgb: 0, 0, 0;
80+
--background-start-rgb: 214, 219, 220;
81+
--background-end-rgb: 255, 255, 255;
82+
}
83+
84+
@media (prefers-color-scheme: dark) {
85+
:root {
86+
--foreground-rgb: 255, 255, 255;
87+
--background-start-rgb: 0, 0, 0;
88+
--background-end-rgb: 0, 0, 0;
89+
}
90+
}
91+
92+
body {
93+
color: rgb(var(--foreground-rgb));
94+
background: linear-gradient(
95+
to bottom,
96+
transparent,
97+
rgb(var(--background-end-rgb))
98+
)
99+
rgb(var(--background-start-rgb));
100+
}
101+
102+
103+
```

‎docs/src/pages/index.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,16 @@ The section theme blog supports inbuilt dark mode, a Search bar, Customize Navig
1414
<br />
1515
<br />
1616

17-
import { IconMoon, IconSeo, IconCommand, IconLayoutNavbar, IconLayout } from "@tabler/icons-react"
17+
import { IconMoon, IconSeo, IconCommand, IconLayoutNavbar, IconLayout, IconBrush} from "@tabler/icons-react"
1818
import { Cards, Card } from 'nextra/components'
1919

2020
<Cards>
2121
<Card icon={<IconSeo />} title="SEO Support" description="Adding inbuilt SEO support on your blog" href="#" />
22-
<Card icon={<IconMoon />} title="dark mode" description="Switch the blog theme from light to dark" href="#" />
22+
<Card icon={<IconMoon />} title="Dark Mode" description="Switch the blog theme from light to dark" href="#" />
2323
<Card icon={<IconCommand />} title="Inbuilt Search Support" description="Inbuilt rich Search support to search a blog post based on text." href="#" />
24-
<Card icon={<IconLayoutNavbar />} title="Navigation" description="Customize your header, footer navigation, and as well social media icon." href="#" />
24+
<Card icon={<IconLayoutNavbar />} title="Inbuilt Navigation" description="Customize your header, footer navigation, and as well social media icon." href="#" />
2525
<Card icon={<IconLayout />} title="Mutiple Layout Support" description="In-built multiple layout support for the home page, regular page, author, author, posts, post, tag, etc." href="#" />
26+
<Card icon={<IconBrush />} title="Mutiple Theme Support" description="In-built multiple layout support for the home page, regular page, author, author, posts, post, tag, etc." href="#" />
2627
</Cards>
2728

2829
## Submit Issues

0 commit comments

Comments
 (0)