diff --git a/public/css/style.css b/public/css/style.css index b4aa254..9baf520 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -484,7 +484,6 @@ body.dark-mode .welcome-section a.cta-button { body.dark-mode .pagination { color: #E4E4E4; /* Light pagination text color */ } -======= /* Contact Us Page Styling */ .contact-section { diff --git a/server/routes/main.js b/server/routes/main.js index 91930c3..e471d54 100644 --- a/server/routes/main.js +++ b/server/routes/main.js @@ -16,6 +16,56 @@ router.use((req, res, next) => { next(); // Call the next middleware or route handler }); + +router.get('/posts', async (req, res) => { + try { + const locals = { + title: "All Posts", + user: req.cookies.token, + description: "Made with ❤️" + }; + + const perPage = 10; + const page = parseInt(req.query.page) || 1; + + let query = {}; + + if (req.query.search) { + const searchNoSpecialChar = req.query.search.replace(/[^a-zA-Z0-9 ]/g, ""); + + query = { + $or: [ + { title: { $regex: new RegExp(searchNoSpecialChar, 'i') } }, + { body: { $regex: new RegExp(searchNoSpecialChar, 'i') } } + ] + } + } + + const data = await Post.aggregate([ + { $match: query }, + { $sort: { createdAt: -1 } }, + { $skip: (perPage * page) - perPage }, + { $limit: perPage } + ]).exec() + + const count = await Post.countDocuments(query); + + res.render('posts', { + locals, + data, + currentRoute: 'posts', + search: req.query.search, + pagination: { + current: page, + total: Math.ceil(count / perPage) + }, + }); + } catch (error) { + console.log(error); + res.status(500).send("Internal Server Error"); + } +}); + router.get('/', async (req, res) => { try { const locals = { @@ -24,25 +74,14 @@ router.get('/', async (req, res) => { description: "Made with ❤️" } - let perPage = 10; - let page = req.query.page || 1; const data = await Post.aggregate([ { $sort: { createdAt: -1 } } ]) - .skip(perPage * page - perPage) - .limit(perPage) + .limit(5) .exec(); - // Count is deprecated - please use countDocuments - // const count = await Post.count(); - const count = await Post.countDocuments({}); - const nextPage = parseInt(page) + 1; - const hasNextPage = nextPage <= Math.ceil(count / perPage); - res.render('index', { locals, data, - current: page, - nextPage: hasNextPage ? nextPage : null, currentRoute: '/' }); @@ -96,40 +135,6 @@ router.get('/post/:id', async (req, res) => { }); -/** - * POST / - * Post - searchTerm -*/ -router.post('/search', async (req, res) => { - try { - const locals = { - title: "Seach", - description: "Simple Blog created with NodeJs, Express & MongoDb." - } - - let searchTerm = req.body.searchTerm; - const searchNoSpecialChar = searchTerm.replace(/[^a-zA-Z0-9 ]/g, "") - - const data = await Post.find({ - $or: [ - { title: { $regex: new RegExp(searchNoSpecialChar, 'i') }}, - { body: { $regex: new RegExp(searchNoSpecialChar, 'i') }} - ] - }); - - res.render("search", { - data, - locals, - currentRoute: '/' - }); - - } catch (error) { - console.log(error); - } - -}); - - /** * GET / * About @@ -197,43 +202,53 @@ router.post('/send-message',validateContact ,async (req, res) => { // Post.insertMany([ // { // title: "Understanding the Basics of HTML and CSS", -// body: "HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the fundamental technologies for building web pages. HTML provides the structure of the page, while CSS is used to control the presentation, formatting, and layout. This blog post will guide you through the essential concepts and elements of HTML and CSS, providing examples and best practices for creating well-structured and visually appealing web pages." +// body: "HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the fundamental technologies for building web pages. HTML provides the structure of the page, while CSS is used to control the presentation, formatting, and layout. This blog post will guide you through the essential concepts and elements of HTML and CSS, providing examples and best practices for creating well-structured and visually appealing web pages.", +// author: "Rishabh" // }, // { // title: "An Introduction to JavaScript for Beginners", -// body: "JavaScript is a versatile programming language that allows you to create dynamic and interactive web content. This post will cover the basics of JavaScript, including variables, data types, functions, and control structures. You'll learn how to add interactivity to your web pages and understand how JavaScript interacts with HTML and CSS to enhance user experiences." +// body: "JavaScript is a versatile programming language that allows you to create dynamic and interactive web content. This post will cover the basics of JavaScript, including variables, data types, functions, and control structures. You'll learn how to add interactivity to your web pages and understand how JavaScript interacts with HTML and CSS to enhance user experiences.", +// author: "Rishabh" // }, // { // title: "Building Responsive Web Designs with CSS Grid and Flexbox", -// body: "Responsive web design ensures that your website looks great on all devices, from desktops to mobile phones. CSS Grid and Flexbox are powerful layout modules that help you create flexible and responsive designs. In this blog, we'll explore the concepts and practical implementations of CSS Grid and Flexbox, with code examples and tips for creating responsive layouts." +// body: "Responsive web design ensures that your website looks great on all devices, from desktops to mobile phones. CSS Grid and Flexbox are powerful layout modules that help you create flexible and responsive designs. In this blog, we'll explore the concepts and practical implementations of CSS Grid and Flexbox, with code examples and tips for creating responsive layouts.", +// author: "Rishabh" // }, // { // title: "Getting Started with React: A JavaScript Library for Building User Interfaces", -// body: "React is a popular JavaScript library developed by Facebook for building user interfaces. It allows developers to create large web applications that can update and render efficiently in response to data changes. This post will introduce you to the core concepts of React, including components, JSX, state, and props, and guide you through setting up a basic React application." +// body: "React is a popular JavaScript library developed by Facebook for building user interfaces. It allows developers to create large web applications that can update and render efficiently in response to data changes. This post will introduce you to the core concepts of React, including components, JSX, state, and props, and guide you through setting up a basic React application.", +// author: "Rishabh" // }, // { // title: "Understanding RESTful APIs and How to Integrate Them into Your Web Applications", -// body: "RESTful APIs (Application Programming Interfaces) are a set of rules and conventions for building and interacting with web services. They allow different software systems to communicate with each other. This blog post will explain what RESTful APIs are, how they work, and how to integrate them into your web applications using JavaScript and AJAX." +// body: "RESTful APIs (Application Programming Interfaces) are a set of rules and conventions for building and interacting with web services. They allow different software systems to communicate with each other. This blog post will explain what RESTful APIs are, how they work, and how to integrate them into your web applications using JavaScript and AJAX.", +// author: "Rishabh" // }, // { // title: "A Guide to Modern JavaScript Frameworks: Angular, Vue, and Svelte", -// body: "Modern JavaScript frameworks like Angular, Vue, and Svelte have revolutionized web development by providing robust tools for building complex applications. This post will compare these three frameworks, discussing their unique features, strengths, and use cases. By the end of this guide, you'll have a better understanding of which framework might be the best fit for your next project." +// body: "Modern JavaScript frameworks like Angular, Vue, and Svelte have revolutionized web development by providing robust tools for building complex applications. This post will compare these three frameworks, discussing their unique features, strengths, and use cases. By the end of this guide, you'll have a better understanding of which framework might be the best fit for your next project.", +// author: "Rishabh" // }, // { // title: "Enhancing Web Performance with Lazy Loading and Code Splitting", -// body: "Web performance is crucial for user experience and SEO. Lazy loading and code splitting are techniques that can significantly improve the load times of your web pages. This blog will explain how lazy loading defers the loading of non-critical resources and how code splitting breaks down your code into smaller bundles. Examples and implementation strategies will be provided to help you optimize your web performance." +// body: "Web performance is crucial for user experience and SEO. Lazy loading and code splitting are techniques that can significantly improve the load times of your web pages. This blog will explain how lazy loading defers the loading of non-critical resources and how code splitting breaks down your code into smaller bundles. Examples and implementation strategies will be provided to help you optimize your web performance.", +// author: "Rishabh" // }, // { // title: "Mastering Git and GitHub for Version Control", -// body: "Git is a distributed version control system that helps developers track changes in their code. GitHub is a platform for hosting Git repositories. This post will cover the basics of Git and GitHub, including how to create repositories, commit changes, branch, merge, and collaborate with others. Understanding these tools is essential for modern web development and team collaboration." +// body: "Git is a distributed version control system that helps developers track changes in their code. GitHub is a platform for hosting Git repositories. This post will cover the basics of Git and GitHub, including how to create repositories, commit changes, branch, merge, and collaborate with others. Understanding these tools is essential for modern web development and team collaboration.", +// author: "Rishabh" // }, // { // title: "Implementing Authentication in Web Applications with JWT", -// body: "JSON Web Tokens (JWT) are a compact and secure way to transmit information between parties as a JSON object. They are commonly used for authentication and authorization in web applications. This blog post will guide you through the process of implementing JWT authentication in a web application, including generating tokens, securing endpoints, and managing user sessions." +// body: "JSON Web Tokens (JWT) are a compact and secure way to transmit information between parties as a JSON object. They are commonly used for authentication and authorization in web applications. This blog post will guide you through the process of implementing JWT authentication in a web application, including generating tokens, securing endpoints, and managing user sessions.", +// author: "Rishabh" // }, // { // title: "Exploring the Power of CSS Preprocessors: Sass and LESS", -// body: "CSS preprocessors like Sass and LESS extend the capabilities of standard CSS by adding features like variables, nesting, and mixins. This post will introduce you to Sass and LESS, showing you how to install and use them to write more efficient and maintainable CSS code. Examples and practical tips will help you get started with these powerful tools." +// body: "CSS preprocessors like Sass and LESS extend the capabilities of standard CSS by adding features like variables, nesting, and mixins. This post will introduce you to Sass and LESS, showing you how to install and use them to write more efficient and maintainable CSS code. Examples and practical tips will help you get started with these powerful tools.", +// author: "Rishabh" // } // ]) // } diff --git a/views/index.ejs b/views/index.ejs index 74f5c75..5783677 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -6,7 +6,10 @@ person looking out through window
-

Latest Posts

+
+

Latest Posts

+ View All +
- - <% if (nextPage !== null) { %> - - <% } %> + - - - - -
diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 2c50c39..5557b8e 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -20,15 +20,7 @@
- - - + <% if (locals.user) { %> <% } else { %> diff --git a/views/posts.ejs b/views/posts.ejs new file mode 100644 index 0000000..8618322 --- /dev/null +++ b/views/posts.ejs @@ -0,0 +1,89 @@ + + + + + +
+ <% data.forEach(post=> { %> +
+ +
+ <%= post.body.slice(0, 220) + '...' %> +
+ +
+ <% }) %> +
+ + + + + \ No newline at end of file diff --git a/views/search.ejs b/views/search.ejs deleted file mode 100644 index 8699b18..0000000 --- a/views/search.ejs +++ /dev/null @@ -1,19 +0,0 @@ -
-

Search Results

-
- -
- - - - -
\ No newline at end of file