updated

huntingcoder/.gitignore

@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+contactdata/
 # dependencies
 /node_modules
 /.pnp

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"
+    }

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"
+    }

huntingcoder/next.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   reactStrictMode: true,
+  trailingSlash: true
 }

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",

huntingcoder/pages/about.js

@@ -1,7 +1,27 @@
 import React from 'react';
+import styles from '../styles/About.module.css'
 
 const About = () => {
-  return <div>This is my about component</div>;
+  return <div className={styles.container}>
+    <h1 className={styles.center}>About Hunting Coder</h1>
+    <h2>Introduction</h2>
+    <p>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. </p>
+    <h2>Services Offered</h2>
+    <p>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.</p>
+    <p>We offer the following services</p>
+    <ul>
+      <li>Service 1</li>
+      <li>Service 2</li>
+      <li>Service 3</li>
+      <li>Service 4</li>
+      <li>Service 5</li>
+      <li>Service 6</li>
+      <li>Service 7</li>
+      <li>Service 8</li>
+    </ul>
+    <h2>Contact us</h2>
+    <p>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?</p>
+  </div>;
 };
 
 export default About;

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)
+}

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))
+  })
+}

huntingcoder/pages/api/index.js

@@ -0,0 +1,3 @@
+export default function handler(req, res) {
+  res.status(200).json({ name: 'This is my homepage' })
+}

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"]) 
+
+    }
+  }

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 <div className={styles.container}>
     <main className={styles.main}>
-  <div>
-    <Link href={'/blogpost/learn-javascript'}>
-    <h3 className={styles.blogItemh3}>How to learn JavaScript in 2022?</h3></Link>
-    <p>JavaScript is the language used to design logic for the web</p>
-  </div>
-  <div className="blogItem">
-    <h3>How to learn JavaScript in 2022?</h3>
-    <p>JavaScript is the language used to design logic for the web</p>
+      <InfiniteScroll
+        dataLength={blogs.length} //This is important field to render the next data
+        next={fetchData}
+        hasMore={props.allCount !== blogs.length}
+        loader={<h4>Loading...</h4>}
+        endMessage={
+          <p style={{ textAlign: 'center' }}>
+            <b>Yay! You have seen it all</b>
+          </p>
+        }
+      >
+        {blogs.map((blogitem) => {
+          return <div key={blogitem.slug}>
+            <Link href={`/blogpost/${blogitem.slug}`}>
+              <h3 className={styles.blogItemh3}>{blogitem.title}</h3></Link>
+            <p className={styles.blogItemp}>{blogitem.metadesc.substr(0, 140)}...</p>
+            <Link href={`/blogpost/${blogitem.slug}`}><button className={styles.btn}>Read More</button></Link>
+          </div>
+        })}
+      </InfiniteScroll>
+    </main>
   </div>
-  <div className="blogItem">
-    <h3>How to learn JavaScript in 2022?</h3>
-    <p>JavaScript is the language used to design logic for the web</p>
-  </div>
-  </main>
-</div>
 };
 
+
+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;

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 <div className={styles.container}>
-        <main className={styles.main}>
-        <h1>Title of the page {slug}</h1>
-        <hr />
-        <div>
-            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!
-        </div>
-        </main>
-    </div>;
+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 <div className={styles.container}>
+    <main className={styles.main}>
+      <h1>{blog && blog.title}</h1>
+      <hr />
+      {blog && <div dangerouslySetInnerHTML={createMarkup(blog.content)}></div>}
+
+
+    </main>
+  </div>;
 };
 
-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;

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 <div>This is contact page</div>;
+  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 <div className={styles.container}>
+    <h1>Contact Us</h1>
+    <form onSubmit={handleSubmit}>
+      <div className={styles.mb3}>
+        <label htmlFor="name" className={styles.formlabel}>Enter your name</label>
+        <input className={styles.input} type="text" value={name} onChange={handleChange} id="name" name='name' aria-describedby="emailHelp" />
+      </div>
+      <div className={styles.mb3}>
+        <label htmlFor="email" className={styles.formlabel}>Email address</label>
+        <input className={styles.input} type="email" value={email} onChange={handleChange} name='email' id="email" aria-describedby="emailHelp" />
+        <div id="emailHelp" className={styles.formtext}>We will never share your email with anyone else.</div>
+      </div>
+      <div className={styles.mb3}>
+        <label htmlFor="phone" className={styles.formlabel}>Phone</label>
+        <input className={styles.input} type="phone" value={phone} onChange={handleChange} name='phone' id="phone" required />
+      </div>
+      <div className={styles.mb3}>
+        <label className={styles.formlabel} htmlFor="desc">Elaborate your concern</label>
+        <textarea className={styles.input} value={desc} onChange={handleChange} name='desc' id="desc" />
+      </div>
+      <button type="submit" className={styles.btn}>Submit</button>
+    </form>
+  </div>;
 };
 
 export default Contact;