Skip to content

Commit

Permalink
Merge pull request #1582 from Sawan-Kushwah/add/ReadMorePage
Browse files Browse the repository at this point in the history
added read more page
  • Loading branch information
ANSHIKA-26 authored Oct 31, 2024
2 parents 1e767a6 + 0aff6a0 commit 5e2d791
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 16 deletions.
2 changes: 1 addition & 1 deletion frontend/src/pages/AddBlog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 11 additions & 2 deletions frontend/src/pages/Blogs.js
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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';">
Expand All @@ -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>
Expand Down
71 changes: 71 additions & 0 deletions frontend/src/pages/ReadMoreBlog.js
Original file line number Diff line number Diff line change
@@ -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>';
}
}


43 changes: 31 additions & 12 deletions frontend/src/styles/output.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -654,6 +654,10 @@ video {
margin-bottom: 2rem;
}

.ml-1 {
margin-left: 0.25rem;
}

.ml-2 {
margin-left: 0.5rem;
}
Expand Down Expand Up @@ -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));
}
Expand Down Expand Up @@ -911,10 +919,6 @@ video {
border-radius: 0.375rem;
}

.rounded-sm {
border-radius: 0.125rem;
}

.border {
border-width: 1px;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/utils/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -15,7 +16,8 @@ const routes = {
'/about': renderAbout,
'/contact': renderContact,
'/feedback': renderFeedback,
'/profile': renderProfilePage
'/profile': renderProfilePage,
'/readmore': renderFullBlogPost,
};

export function router() {
Expand Down

1 comment on commit 5e2d791

@vercel
Copy link

@vercel vercel bot commented on 5e2d791 Oct 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.