Skip to content

[Feature]: Add Next.Js tutorials output BrowserWindow #4106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 30, 2024
Merged

[Feature]: Add Next.Js tutorials output BrowserWindow #4106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion docs/NextJs/Next.js API routes/API middlewares.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,28 @@ event - compiled successfully

Open http://localhost:3000/api/user?counter=1 in a browser and you will see the following output.

``` {"query":{"counter":"1"}} ```
``` {"query":{"counter":"1"}} ```


<BrowserWindow>
<div style={{display:'flex',flexWrap:"wrap",justifyContent:"center",alignItems:"center"}}>
<div style={{flex:"1 0 20rem",minHeight:"20rem"}} id="output">
<p>app listen in 3000...</p>
</div>
<div style={{flex:"1 0 20rem",minHeight:"20rem"}}>
<button onClick={()=>{
let button_ele=document.getElementById("button_ele")
button_ele.style.display="none"
let output=document.getElementById("output")
let p=document.createElement("p")
p.textContent="GET /api/user?counter=1 "
output.appendChild(p)
setTimeout(()=>{
let fontend=document.getElementById("fontend")
fontend.textContent= JSON.stringify({"query":{"counter":"1"}},null,2)
},1500)
}} id="button_ele">click to see the output</button>
<pre id="fontend"></pre>
</div>
</div>
</BrowserWindow>
26 changes: 25 additions & 1 deletion docs/NextJs/Next.js API routes/API routes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,28 @@ event - compiled successfully

Open localhost:3000/api/user in a browser and you will see the following output.

```{"name":"Robert"} ```
```{"name":"Robert"} ```


<BrowserWindow>
<div style={{display:'flex',flexWrap:"wrap",justifyContent:"center",alignItems:"center"}}>
<div style={{flex:"1 0 20rem",minHeight:"20rem"}} id="output">
<p>app listen in 3000...</p>
</div>
<div style={{flex:"1 0 20rem",minHeight:"20rem"}}>
<button onClick={()=>{
let button_ele=document.getElementById("button_ele")
button_ele.style.display="none"
let output=document.getElementById("output")
let p=document.createElement("p")
p.textContent="GET /api/user "
output.appendChild(p)
setTimeout(()=>{
let fontend=document.getElementById("fontend")
fontend.textContent= JSON.stringify({"name":"Robert"},null,2)
},1500)
}} id="button_ele">click to see the output</button>
<pre id="fontend"></pre>
</div>
</div>
</BrowserWindow>
24 changes: 23 additions & 1 deletion docs/NextJs/Next.js Features/metadata.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,4 +81,26 @@ event - compiled successfully

## Verify Output

Open localhost:3000 in a browser
Open localhost:3000 in a browser

<BrowserWindow>
<div id="output_con_1">
<h1>Welcome to Next.js!</h1>
<h2 onClick={()=>{
let output_con_1=document.getElementById("output_con_1")
output_con_1.style.display="none"
let output_con_2=document.getElementById("output_con_2")
output_con_2.style.display="block"
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>First Post</h2>
<img src="/img/favicon_io/android-chrome-192x192.png" alt="CodeHarborhub Logo" style={{height:"5rem",width:"5rem"}} />
</div>
<div style={{display:"none"}} id="output_con_2">
<h1>My First Post</h1>
<h2 onClick={()=>{
let output_con_2=document.getElementById("output_con_2")
output_con_2.style.display="none"
let output_con_1=document.getElementById("output_con_1")
output_con_1.style.display="block"
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
</div>
</BrowserWindow>
24 changes: 23 additions & 1 deletion docs/NextJs/Next.js Features/pages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,26 @@ Open localhost:3000 in a browser and you will see the following output.
```
Home page
```
Click on First Link and you will see the following output.
Click on First Link and you will see the following output.


<BrowserWindow>
<div id="output_con_1">
<h1>My First Post</h1>
<h2 onClick={()=>{
let output_con_1=document.getElementById("output_con_1")
output_con_1.style.display="none"
let output_con_2=document.getElementById("output_con_2")
output_con_2.style.display="block"
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
</div>
<div style={{display:"none"}} id="output_con_2">
<h1>Welcome to Next.js!</h1>
<h2 onClick={()=>{
let output_con_2=document.getElementById("output_con_2")
output_con_2.style.display="none"
let output_con_1=document.getElementById("output_con_1")
output_con_1.style.display="block"
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>First Post</h2>
</div>
</BrowserWindow>
17 changes: 16 additions & 1 deletion docs/NextJs/Next.js Features/statcfileserving.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,19 @@ event - compiled successfully

## Verify Output

Open localhost:3000 in a browser
Open localhost:3000 in a browser

<BrowserWindow>
<div id="browsing_static_files">
<h1>My First Post</h1>
<h2 onClick={()=>{
let browsing_static_files=document.getElementById("browsing_static_files")
browsing_static_files.style.display="none"
setTimeout(()=>{
browsing_static_files.style.display="block"
},1000)
}} style={{fontSize:"1rem",color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
<br />
<img src="/img/favicon_io/android-chrome-192x192.png" alt="CodeHarborhub Logo" style={{height:"5rem",width:"5rem"}} />
</div>
</BrowserWindow>
26 changes: 26 additions & 0 deletions docs/NextJs/Next.js Routing/Next.js -Routing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,29 @@ event - compiled successfully
## Verify Output

Open localhost:3000 in a browser

<BrowserWindow>
<div id="output_con_1">
<h1>Welcome to Next.js..!</h1>
<h2 onClick={()=>{
let output_con_1=document.getElementById("output_con_1")
output_con_1.style.display="none"
let output_con_2=document.getElementById("output_con_2")
output_con_2.style.display="block"
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>visit First Post</h2>
</div>
<div style={{display:"none"}} id="output_con_2">
<h1>My First Post</h1>
<h2 onClick={()=>{
let output_con_2=document.getElementById("output_con_2")
output_con_2.style.display="none"
let output_con_1=document.getElementById("output_con_1")
output_con_1.style.display="block"
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
<br />
<h4>Important notes.!</h4>
<br />
<p>Hello Everyone keep supporting and Contributting our project.</p>
<p>Let's Learn & Succeeded our Life</p>
</div>
</BrowserWindow>
92 changes: 92 additions & 0 deletions docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,3 +112,95 @@ event - compiled successfully
```Open localhost:3000/posts/one in a browser and you will see the following output. ```

``` Open localhost:3000/posts/two in a browser and you will see the following output. ```

<BrowserWindow>
<div id="buttons_con" style={{display:"flex",flexDirection:"column",gap:"1rem",justifyContent:"center",alignItems:"center"}}>
<button
onClick={()=>{
let buttons_con=document.getElementById("buttons_con")
buttons_con.style.display="none"
let get_all_post_con=document.getElementById("get_all_post_con")
get_all_post_con.style.display="block"
let data=[{id:1,title:"This is 1st post",body:"Thank you for visiting in our 1st post"},{id:2,title:"This is 2nd post",body:"Thank you for visiting in our 2nd post"},{id:3,title:"This is 3rd post",body:"Thank you for visiting in our 3rd post"}]
data.map((item)=>{
let h4=document.createElement("h4")
h4.textContent=item.title
let p=document.createElement("p")
p.textContent=item.body
let hr=document.createElement("hr")
get_all_post_con.appendChild(h4)
get_all_post_con.appendChild(p)
get_all_post_con.appendChild(hr)
})
}}
style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}>All Post</button>
<button
onClick={()=>{
let buttons_con=document.getElementById("buttons_con")
buttons_con.style.display="none"
let see_1st_post_con=document.getElementById("see_1st_post_con")
see_1st_post_con.style.display="block"
let data=[{id:1,title:"This is 1st post",body:"Thank you for visiting in our 1st post"}]
data.map((item)=>{
let h4=document.createElement("h4")
h4.textContent=item.title
let p=document.createElement("p")
p.textContent=item.body
let hr=document.createElement("hr")
see_1st_post_con.appendChild(h4)
see_1st_post_con.appendChild(p)
see_1st_post_con.appendChild(hr)
})
}}
style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0px, rgb(90 255 165) 0px, rgb(255 130 84) 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}
>1st Post</button>
<button
onClick={()=>{
let buttons_con=document.getElementById("buttons_con")
buttons_con.style.display="none"
let see_2nd_post_con=document.getElementById("see_2nd_post_con")
see_2nd_post_con.style.display="block"
let data=[{id:2,title:"This is 2nd post",body:"Thank you for visiting in our 2nd post"}]
data.map((item)=>{
let h4=document.createElement("h4")
h4.textContent=item.title
let p=document.createElement("p")
p.textContent=item.body
let hr=document.createElement("hr")
see_2nd_post_con.appendChild(h4)
see_2nd_post_con.appendChild(p)
see_2nd_post_con.appendChild(hr)
})
}}
style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0px, rgb(255 90 172) 0px, rgb(84 201 255) 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}
>2nd Post</button>
<button
onClick={()=>{
let buttons_con=document.getElementById("buttons_con")
buttons_con.style.display="none"
let see_3rd_post_con=document.getElementById("see_3rd_post_con")
see_3rd_post_con.style.display="block"
let data=[{id:3,title:"This is 3rd post",body:"Thank you for visiting in our 3rd post"}]
data.map((item)=>{
let h4=document.createElement("h4")
h4.textContent=item.title
let p=document.createElement("p")
p.textContent=item.body
let hr=document.createElement("hr")
see_3rd_post_con.appendChild(h4)
see_3rd_post_con.appendChild(p)
see_3rd_post_con.appendChild(hr)
})
}}
style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0px, rgb(255, 90, 90) 0px, rgb(39 185 106) 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}
>3rd Post</button>
</div>
<div id="get_all_post_con" style={{display:"none"}}>
</div>
<div id="see_1st_post_con" style={{display:"none"}}>
</div>
<div id="see_2nd_post_con" style={{display:"none"}}>
</div>
<div id="see_3rd_post_con" style={{display:"none"}}>
</div>
</BrowserWindow>
5 changes: 5 additions & 0 deletions docs/NextJs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ export default function Page() {
return <h1>Hello, Next.js!</h1>
}
```

<BrowserWindow>
<h1>Hello, Next.js!</h1>
</BrowserWindow>

Now, you can start the development server:

Run `npm run dev` to start the development server.
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
"@babel/preset-react": "^7.24.7",
"@docusaurus/module-type-aliases": "^3.3.2",
"@docusaurus/types": "^3.3.2",
"@types/node": "^22.0.0",
"@types/node": "^20.14.10",
"@types/react-icons": "^3.0.0",
"dotenv": "^16.4.5",
"gh-pages": "^6.1.1",
Expand Down
Loading