Skip to content

Commit

Permalink
Added search functionality on blog page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sawan-Kushwah
Sawan-Kushwah committed Oct 30, 2024
1 parent db6ac1e commit 6a93af5
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 44 deletions.
101 changes: 57 additions & 44 deletions frontend/src/pages/Blogs.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,27 @@
const blogPosts = [
{
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"
},
{
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"
},
{
title: "Mastering Pronunciation: Tips and Tricks",
excerpt: "Improve your accent and speak more clearly with these pronunciation techniques...",
date: "2023-05-25",
tags: "Pronunciation, Speaking",
imagePath: "../assets/blog/3.webp"
}
];

export function renderBlogs(container) {
container.innerHTML = `
<div class="container mx-auto px-4 py-8">
Expand All @@ -7,29 +31,9 @@ export function renderBlogs(container) {
</header>
<div class="flex flex-col md:flex-row gap-8">
<main class="md:w-2/3">
<main class="md:w-2/3" id="blog-posts-container">
<div class="grid gap-6">
${renderBlogPost(
"Mastering Vocabulary: 10 Words to Boost Your Language Skills",
"Expand your vocabulary and improve your language proficiency with these essential words...",
"2023-05-15",
"Vocabulary, Learning Tips",
"../assets/blog/4.webp"
)}
${renderBlogPost(
"Essential Grammar Rules for Clear Communication",
"Master these fundamental grammar rules to enhance your language skills and communicate more effectively...",
"2023-05-20",
"Grammar, Writing",
"../assets/blog/2.webp"
)}
${renderBlogPost(
"Mastering Pronunciation: Tips and Tricks",
"Improve your accent and speak more clearly with these pronunciation techniques...",
"2023-05-25",
"Pronunciation, Speaking",
"../assets/blog/3.webp"
)}
${renderBlogPosts(blogPosts)}
</div>
</main>
Expand All @@ -41,6 +45,22 @@ export function renderBlogs(container) {
</div>
</div>
`;

document.getElementById('search-input').addEventListener('input', function () {
const query = this.value.toLowerCase();
const filteredPosts = blogPosts.filter(post =>
post.title.toLowerCase().includes(query) ||
post.excerpt.toLowerCase().includes(query) ||
post.tags.toLowerCase().includes(query)
);

const blogPostsContainer = document.getElementById('blog-posts-container');
blogPostsContainer.innerHTML = `<div class="grid gap-6">${renderBlogPosts(filteredPosts)}</div>`;
});
}

function renderBlogPosts(posts) {
return posts.map(post => renderBlogPost(post.title, post.excerpt, post.date, post.tags, post.imagePath)).join('');
}

function renderBlogPost(title, excerpt, date, tags, imagePath) {
Expand All @@ -58,19 +78,11 @@ function renderBlogPost(title, excerpt, date, tags, imagePath) {
</svg>
<time datetime="${date}">${formatDate(date)}</time>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
<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>${tags}</span>
<span class="font-medium text-gray-900 dark:text-white">${tags}</span>
</div>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
Read More
</a>
</div>
</article>
`;
}
Expand All @@ -80,7 +92,7 @@ function renderSearchWidget() {
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Search</h2>
<div class="relative">
<input type="text" placeholder="Search blog posts" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md pl-10 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
<input type="text" id="search-input" placeholder="Search blog posts" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md pl-10 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300 absolute left-3 top-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
Expand All @@ -90,8 +102,8 @@ function renderSearchWidget() {
}

function renderCategoriesWidget() {
return `
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
// Your categories widget code here
return `<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Categories</h2>
<ul class="space-y-2">
<li><a href="/blog/category/vocabulary" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Vocabulary</a></li>
Expand All @@ -100,24 +112,25 @@ function renderCategoriesWidget() {
<li><a href="/blog/category/culture" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Culture</a></li>
<li><a href="/blog/category/learning-tips" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Learning Tips</a></li>
</ul>
</div>
`;
</div>`;
}

function renderRecentPostsWidget() {
return `
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
// Your recent posts widget code here
return `<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Recent Posts</h2>
<ul class="space-y-2">
<li><a href="/blog/post-4" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">The Art of Conversation</a></li>
<li><a href="/blog/post-5" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Idioms Around the World</a></li>
<li><a href="/blog/post-6" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Effective Note-Taking Strategies</a></li>
</ul>
</div>
`;
</div>`;
}

function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('en-US', options);
function formatDate(date) {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
4 changes: 4 additions & 0 deletions frontend/src/styles/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1228,6 +1228,10 @@ video {
--tw-shadow: var(--tw-shadow-colored);
}

.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
Expand Down

0 comments on commit 6a93af5

Please sign in to comment.