diff --git a/huntingcoder/.gitignore b/huntingcoder/.gitignore index 1437c53..5d5c519 100644 --- a/huntingcoder/.gitignore +++ b/huntingcoder/.gitignore @@ -1,5 +1,5 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - +contactdata/ # dependencies /node_modules /.pnp diff --git a/huntingcoder/blogdata/how-to-learn.json b/huntingcoder/blogdata/how-to-learn.json new file mode 100644 index 0000000..e402616 --- /dev/null +++ b/huntingcoder/blogdata/how-to-learn.json @@ -0,0 +1,7 @@ +{ + "title": "How to learn JavaScript - changed by harry", + "content": "JavaScript (/ˈdʒɑːvəskrɪpt/),[10] often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.[11] Over 97% of websites use JavaScript on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated JavaScript engine to execute the code on users' devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O. JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js. Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.", + "author": "Harry bhai", + "metadesc": "Learn Flask in few minutes. I will teach you flask in few minutes", + "slug": "how-to-learn" + } \ No newline at end of file diff --git a/huntingcoder/blogdata/how-to.json b/huntingcoder/blogdata/how-to.json new file mode 100644 index 0000000..38b7154 --- /dev/null +++ b/huntingcoder/blogdata/how-to.json @@ -0,0 +1,7 @@ +{ + "title": "How to learn JavaScript", + "content": "JavaScript (/ˈdʒɑːvəskrɪpt/),[10] often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.[11] Over 97% of websites use JavaScript on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated JavaScript engine to execute the code on users' devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O. JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js. Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.", + "author": "Harry bhai", + "metadesc": "Learn Flask in few minutes. I will teach you flask in few minutes", + "slug": "how-to" + } \ No newline at end of file diff --git a/huntingcoder/next.config.js b/huntingcoder/next.config.js index 0d60710..c34b0a8 100644 --- a/huntingcoder/next.config.js +++ b/huntingcoder/next.config.js @@ -1,3 +1,4 @@ module.exports = { reactStrictMode: true, + trailingSlash: true } diff --git a/huntingcoder/package.json b/huntingcoder/package.json index 61e4482..d39a74e 100644 --- a/huntingcoder/package.json +++ b/huntingcoder/package.json @@ -5,12 +5,14 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "export": "next build && next export" }, "dependencies": { "next": "12.0.10", "react": "17.0.2", - "react-dom": "17.0.2" + "react-dom": "17.0.2", + "react-infinite-scroll-component": "^6.1.0" }, "devDependencies": { "eslint": "8.8.0", diff --git a/huntingcoder/pages/about.js b/huntingcoder/pages/about.js index bd8c05f..749f425 100644 --- a/huntingcoder/pages/about.js +++ b/huntingcoder/pages/about.js @@ -1,7 +1,27 @@ import React from 'react'; +import styles from '../styles/About.module.css' const About = () => { - return
This is my about component
; + return
+

About Hunting Coder

+

Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quidem? Minus, quas! Earum maxime dignissimos rem quisquam omnis voluptatem ab quis. Tempora iure iste asperiores dolores quia eligendi! Doloremque repellat repellendus deleniti est. Blanditiis officiis et explicabo dicta. Quod, blanditiis at similique enim deserunt labore nisi doloribus tempore nihil quam omnis magni ducimus natus sit vel, id reprehenderit nam non quo consectetur ipsa molestias nobis.

+

Services Offered

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, quis. Saepe, blanditiis harum cum excepturi maiores atque mollitia quas itaque qui, exercitationem id quaerat magnam repellat quia fugiat hic iure sit vitae officiis eligendi.

+

We offer the following services

+ +

Contact us

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos et animi harum assumenda necessitatibus explicabo nam, corporis deleniti, ab ad praesentium blanditiis iste saepe perferendis impedit architecto quia cupiditate? Accusantium est in inventore repellendus unde. Dolores labore deserunt corrupti fugiat ratione perspiciatis illo optio suscipit aliquid cumque nihil soluta earum, assumenda eligendi nulla sed molestias unde?

+
; }; export default About; diff --git a/huntingcoder/pages/api/blogs.js b/huntingcoder/pages/api/blogs.js new file mode 100644 index 0000000..95a14b1 --- /dev/null +++ b/huntingcoder/pages/api/blogs.js @@ -0,0 +1,15 @@ +// Next.js API route support: https://nextjs.org/docs/api-routes/introduction +import * as fs from 'fs'; + +export default async function handler(req, res) { + let data = await fs.promises.readdir("blogdata"); + data = data.slice(0, parseInt(req.query.count)) + let myfile; + let allBlogs = []; + for (let index = 0; index < data.length; index++) { + const item = data[index]; + myfile = await fs.promises.readFile(('blogdata/' + item), 'utf-8') + allBlogs.push(JSON.parse(myfile)) + } + res.status(200).json(allBlogs) +} diff --git a/huntingcoder/pages/api/getblog.js b/huntingcoder/pages/api/getblog.js new file mode 100644 index 0000000..cd2f24e --- /dev/null +++ b/huntingcoder/pages/api/getblog.js @@ -0,0 +1,11 @@ +import * as fs from 'fs'; + +export default function handler(req, res) { + + fs.readFile(`blogdata/${req.query.slug}.json`, 'utf-8', (err, data) => { + if (err) { + res.status(500).json({ error: "No such blog found" }) + } + res.status(200).json(JSON.parse(data)) + }) +} diff --git a/huntingcoder/pages/api/hello.js b/huntingcoder/pages/api/hello.js deleted file mode 100644 index df63de8..0000000 --- a/huntingcoder/pages/api/hello.js +++ /dev/null @@ -1,5 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -export default function handler(req, res) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/huntingcoder/pages/api/index.js b/huntingcoder/pages/api/index.js new file mode 100644 index 0000000..050f8d8 --- /dev/null +++ b/huntingcoder/pages/api/index.js @@ -0,0 +1,3 @@ +export default function handler(req, res) { + res.status(200).json({ name: 'This is my homepage' }) +} diff --git a/huntingcoder/pages/api/postcontact.js b/huntingcoder/pages/api/postcontact.js new file mode 100644 index 0000000..9351761 --- /dev/null +++ b/huntingcoder/pages/api/postcontact.js @@ -0,0 +1,12 @@ +import * as fs from 'fs'; +export default async function handler(req, res) { + if (req.method === 'POST') { + // Process a POST request + let data = await fs.promises.readdir('contactdata'); + fs.promises.writeFile(`contactdata/${data.length+1}.json`, JSON.stringify(req.body)) + res.status(200).json(req) + } else { + res.status(200).json(["allBlogs"]) + + } + } \ No newline at end of file diff --git a/huntingcoder/pages/blog.js b/huntingcoder/pages/blog.js index 650b93f..8d4c7dc 100644 --- a/huntingcoder/pages/blog.js +++ b/huntingcoder/pages/blog.js @@ -1,25 +1,64 @@ -import React from 'react'; -import styles from '../styles/Blog.module.css' +import React, { useEffect, useState } from 'react'; +import styles from '../styles/Blog.module.css' import Link from 'next/link'; +import * as fs from 'fs'; +import InfiniteScroll from 'react-infinite-scroll-component'; + +// Step 1: Collect all the files from blogdata directory +// Step 2: Iterate through the and Display them + +const Blog = (props) => { + const [blogs, setBlogs] = useState(props.allBlogs); + const [count, setCount] = useState(2) + + const fetchData = async () => { + let d = await fetch(`http://localhost:3000/api/blogs/?count=${count + 2}`) + setCount(count + 2) + let data = await d.json() + setBlogs(data) + }; -const Blog = () => { return
-
- -

How to learn JavaScript in 2022?

-

JavaScript is the language used to design logic for the web

-
-
-

How to learn JavaScript in 2022?

-

JavaScript is the language used to design logic for the web

+ Loading...} + endMessage={ +

+ Yay! You have seen it all +

+ } + > + {blogs.map((blogitem) => { + return
+ +

{blogitem.title}

+

{blogitem.metadesc.substr(0, 140)}...

+ +
+ })} + +
-
-

How to learn JavaScript in 2022?

-

JavaScript is the language used to design logic for the web

-
- - }; + +export async function getStaticProps(context) { + let data = await fs.promises.readdir("blogdata"); + let allCount = data.length; + let myfile; + let allBlogs = []; + for (let index = 0; index < 2; index++) { + const item = data[index]; + myfile = await fs.promises.readFile(('blogdata/' + item), 'utf-8') + allBlogs.push(JSON.parse(myfile)) + } + + return { + props: { allBlogs, allCount }, // will be passed to the page component as props + } +} + export default Blog; diff --git a/huntingcoder/pages/blogpost/[slug].js b/huntingcoder/pages/blogpost/[slug].js index eb23a9e..137a00d 100644 --- a/huntingcoder/pages/blogpost/[slug].js +++ b/huntingcoder/pages/blogpost/[slug].js @@ -1,20 +1,48 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { useRouter } from 'next/router' -import styles from '../../styles/BlogPost.module.css' - -const slug = () => { - const router = useRouter(); - const { slug } = router.query; - return
-
-

Title of the page {slug}

-
-
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem nulla repudiandae sint facilis, sunt corrupti numquam id illo. Ut deserunt animi iste voluptatum! - Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus maxime rem earum repudiandae, cum possimus quae assumenda nulla culpa. Odit architecto repellendus non, unde recusandae placeat nisi perferendis quod nesciunt! Dolorum sapiente et sint consequuntur earum blanditiis iusto reprehenderit molestiae quia eligendi? Exercitationem, officia nobis! -
-
-
; +import styles from '../../styles/BlogPost.module.css' +import * as fs from 'fs'; + +// Step 1: Find the file corresponding to the slug +// Step 2: Populate them inside the page +const Slug = (props) => { + function createMarkup(c) { + return { __html: c }; + } + const [blog, setBlog] = useState(props.myBlog); + + + return
+
+

{blog && blog.title}

+
+ {blog &&
} + + +
+
; }; -export default slug; +export async function getStaticPaths() { + let allb = await fs.promises.readdir(`blogdata`) + allb = allb.map((item)=>{ + return { params: { slug: item.split(".")[0]} } + }) + console.log(allb) + return { + paths: allb, + fallback: true // false or 'blocking' + }; +} + +export async function getStaticProps(context) { + const { slug } = context.params; + + + let myBlog = await fs.promises.readFile(`blogdata/${slug}.json`, 'utf-8') + + return { + props: { myBlog: JSON.parse(myBlog) }, // will be passed to the page component as props + } +} +export default Slug; diff --git a/huntingcoder/pages/contact.js b/huntingcoder/pages/contact.js index d1eaa21..1dd9a2f 100644 --- a/huntingcoder/pages/contact.js +++ b/huntingcoder/pages/contact.js @@ -1,7 +1,76 @@ -import React from 'react'; +import React, { useState } from 'react'; +import styles from '../styles/Contact.module.css' + + const Contact = () => { - return
This is contact page
; + const [name, setname] = useState('') + const [email, setemail] = useState('') + const [phone, setphone] = useState('') + const [desc, setdesc] = useState('') + + const handleSubmit = (e) => { + e.preventDefault() + const data = {phone, name, email, desc}; + + fetch('http://localhost:3000/api/postcontact', { + method: 'POST', // or 'PUT' + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }) + .then(response => response.text()) + .then(data => { + alert("Thanks for contacting us"); + setphone('') + setname('') + setdesc('') + setemail('') + }) + .catch((error) => { + console.error('Error:', error); + }); + + } + const handleChange = (e) => { + if (e.target.name == 'phone') { + setphone(e.target.value) + } + else if (e.target.name == 'email') { + setemail(e.target.value) + } + else if (e.target.name == 'desc') { + setdesc(e.target.value) + } + else if (e.target.name == 'name') { + setname(e.target.value) + } + } + + return
+

Contact Us

+
+
+ + +
+
+ + +
We will never share your email with anyone else.
+
+
+ + +
+
+ +