Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added search functionality on blog page #1553

Merged
merged 1 commit into from
Oct 30, 2024
Merged

Added search functionality on blog page #1553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 57 additions & 44 deletions frontend/src/pages/Blogs.js
View file
Open in desktop
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
Open in desktop
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
Loading