Merge pull request #1582 from Sawan-Kushwah/add/ReadMorePage

added read more page

frontend/src/pages/AddBlog.js

@@ -70,7 +70,7 @@ export function renderAddBlog(container) {
 
     // Add form submission logic
     const form = document.getElementById('add-blog-form');
-    form.addEventListener('submit', function(e) {
+    form.addEventListener('submit', function (e) {
         e.preventDefault();
         const title = document.getElementById('title').value.trim();
         const category = document.getElementById('category').value;

frontend/src/pages/Blogs.js

@@ -1,19 +1,22 @@
 const blogPosts = [
     {
+        id: 1,
         title: "Mastering Vocabulary: 10 Words to Boost Your Language Skills",
         excerpt: "Expand your vocabulary and improve your language proficiency with these essential words...",
         date: "2023-05-15",
         tags: "Vocabulary, Learning Tips",
         imagePath: "../assets/blog/4.webp"
     },
     {
+        id: 2,
         title: "Essential Grammar Rules for Clear Communication",
         excerpt: "Master these fundamental grammar rules to enhance your language skills and communicate more effectively...",
         date: "2023-05-20",
         tags: "Grammar, Writing",
         imagePath: "../assets/blog/2.webp"
     },
     {
+        id: 3,
         title: "Mastering Pronunciation: Tips and Tricks",
         excerpt: "Improve your accent and speak more clearly with these pronunciation techniques...",
         date: "2023-05-25",
@@ -60,10 +63,10 @@ export function renderBlogs(container) {
 }
 
 function renderBlogPosts(posts) {
-    return posts.map(post => renderBlogPost(post.title, post.excerpt, post.date, post.tags, post.imagePath)).join('');
+    return posts.map(post => renderBlogPost(post.id, post.title, post.excerpt, post.date, post.tags, post.imagePath)).join('');
 }
 
-function renderBlogPost(title, excerpt, date, tags, imagePath) {
+function renderBlogPost(id, title, excerpt, date, tags, imagePath) {
     return `
         <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
             <img src="${imagePath}" alt="${title}" class="w-full h-48 object-cover" onerror="this.onerror=null; this.src='/placeholder.svg?height=200&width=400';">
@@ -81,6 +84,12 @@ function renderBlogPost(title, excerpt, date, tags, imagePath) {
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l5 5a2 2 0 01.586 1.414v5c0 .512-.195 1.024-.586 1.414l-5 5a2 2 0 01-1.414.586H7a2 2 0 01-2-2v-8a2 2 0 012-2z" />
                     </svg>
                     <span class="font-medium text-gray-900 dark:text-white">${tags}</span>
+                    <a href="/readmore" class="flex items-center ml-4 text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-500 cursor-pointer">
+                        Read More
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                        </svg>
+                    </a>
                 </div>
             </div>
         </article>

frontend/src/pages/ReadMoreBlog.js

@@ -0,0 +1,71 @@
+const blogPosts = [
+    {
+        id: 1,
+        title: "Mastering Vocabulary: 10 Words to Boost Your Language Skills",
+        excerpt: "Expanding your vocabulary is essential for improving your language proficiency. By incorporating new words into your daily conversations, you not only enrich your communication but also increase your confidence in expressing complex ideas. This article presents ten powerful words that can elevate your language skills and enhance your ability to articulate thoughts clearly and persuasively. Understanding the nuances of each word will allow you to use them appropriately in different contexts, making your speech and writing more impactful. With consistent practice, you will find yourself communicating with greater precision and clarity in all your interactions.",
+        date: "2023-05-15",
+        tags: "Vocabulary, Learning Tips",
+        imagePath: "../assets/blog/4.webp"
+    },
+    {
+        id: 2,
+        title: "Essential Grammar Rules for Clear Communication",
+        excerpt: "Grammar forms the backbone of effective communication. Mastering essential grammar rules not only enhances your language skills but also enables you to convey your message with clarity and precision. In this article, we will explore key grammatical principles that every writer and speaker should know, including proper sentence structure, subject-verb agreement, and punctuation usage. By understanding these fundamentals, you can avoid common mistakes that lead to misunderstandings. Clear communication is vital in both personal and professional settings, and solid grammar skills will enhance your credibility and help you connect more effectively with your audience.",
+        date: "2023-05-20",
+        tags: "Grammar, Writing",
+        imagePath: "../assets/blog/2.webp"
+    },
+    {
+        id: 3,
+        title: "Mastering Pronunciation: Tips and Tricks",
+        excerpt: "Pronunciation plays a crucial role in effective communication. Mastering the sounds of a language can significantly improve your speaking skills and boost your confidence in conversations. In this article, we will share practical tips and tricks to help you enhance your pronunciation. From practicing individual sounds to intonation and rhythm, these techniques will enable you to sound more natural when speaking. Additionally, we’ll discuss the importance of listening to native speakers and mimicking their speech patterns. By dedicating time to practice and incorporating these strategies, you can ensure that your message is understood and appreciated by your audience.",
+        date: "2023-05-25",
+        tags: "Pronunciation, Speaking",
+        imagePath: "../assets/blog/3.webp"
+    }
+];
+
+const formatDate = (dateStr) => {
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+    return new Date(dateStr).toLocaleDateString(undefined, options);
+};
+
+
+// Function to extract the `id` parameter from the URL
+function getBlogIdFromUrl() {
+    // const pathParts = window.location.pathname.split('/');
+    return Math.floor(Math.random() * blogPosts.length) + 1; // Get the last part, which is the blog ID
+}
+
+// Find and render the blog post based on the ID from the URL
+export function renderFullBlogPost(container) {
+    const blogId = getBlogIdFromUrl();
+    console.log(blogId)
+    const blog = blogPosts.find(post => post.id === blogId);
+
+    if (blog) {
+        container.innerHTML = `
+        <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+            <img src="${blog.imagePath}" alt="${blog.title}" class="w-full h-64 object-cover" onerror="this.onerror=null; this.src='/placeholder.svg?height=300&width=800';">
+            <div class="p-6">
+                <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">${blog.title}</h1>
+                <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-6">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    <time datetime="${blog.date}">${formatDate(blog.date)}</time>
+                    <span class="ml-4 font-medium text-gray-900 dark:text-white">${blog.tags}</span>
+                </div>
+                <div class="text-gray-600 dark:text-gray-300 text-lg mb-4">
+                    ${blog.excerpt}
+                </div>
+                <a href="/blog" class="text-indigo-600 dark:text-indigo-400 hover:underline">Back to Blog</a>
+            </div>
+        </article>
+    `;
+    } else {
+        document.getElementById('app').innerHTML = '<p>Blog post not found.</p>';
+    }
+}
+
+

frontend/src/styles/output.css

@@ -608,22 +608,22 @@ video {
   position: relative;
 }
 
-.left-3 {
-  left: 0.75rem;
-}
-
-.top-3 {
-  top: 0.75rem;
-}
-
 .-top-\[17px\] {
   top: -17px;
 }
 
+.left-3 {
+  left: 0.75rem;
+}
+
 .left-\[135px\] {
   left: 135px;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -654,6 +654,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -799,6 +803,10 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -911,10 +919,6 @@ video {
   border-radius: 0.375rem;
 }
 
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -1178,6 +1182,11 @@ video {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -1480,6 +1489,11 @@ body.dark-mode {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.hover\:text-indigo-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 48 163 / var(--tw-text-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1739,6 +1753,11 @@ body.dark-mode {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:text-indigo-500:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:text-white:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

frontend/src/utils/router.js

@@ -6,6 +6,7 @@ import { renderAbout } from '../pages/About.js';
 import { renderContact } from '../pages/Contact.js';
 import { renderFeedback } from '../pages/Feedback.js';
 import { renderProfilePage } from '../pages/BloggerProfile.js';
+import { renderFullBlogPost } from '../pages/ReadMoreBlog.js';
 
 const routes = {
     '/': renderHome,
@@ -15,7 +16,8 @@ const routes = {
     '/about': renderAbout,
     '/contact': renderContact,
     '/feedback': renderFeedback,
-    '/profile': renderProfilePage
+    '/profile': renderProfilePage,
+    '/readmore': renderFullBlogPost,
 };
 
 export function router() {