Skip to content

Commit 6fcaffe

Browse files
GoJo-RikaGoJo-Rika
committed
Implemented blog search functionality
1 parent cce26c3 commit 6fcaffe

19 files changed

Lines changed: 2834 additions & 1590 deletions

‎blog.html‎

Lines changed: 131 additions & 92 deletions
Large diffs are not rendered by default.

‎blog_template.html‎

Lines changed: 68 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1">
67

@@ -31,8 +32,9 @@
3132
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3233

3334
<!-- Custom Font -->
34-
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
35-
rel="stylesheet">
35+
<link
36+
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
37+
rel="stylesheet">
3638

3739
<!-- Stylesheet -->
3840
<link rel="stylesheet" href="css/modern_normalize.css" />
@@ -54,18 +56,20 @@
5456
<link rel="manifest" href="/site.webmanifest">
5557

5658
<!-- Add an icon library -->
57-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
59+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
60+
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
61+
crossorigin="anonymous" referrerpolicy="no-referrer" />
5862

5963
<!-- Content Security Policy: Uncomment to enhance security by restricting where content can be loaded from (useful for preventing certain attacks like XSS). Update if adding external sources (e.g., Google Fonts, Bootstrap CDN, analytics, etc). -->
6064
<!-- <meta http-equiv="Content-Security-Policy" content=" default-src 'self'; script-src 'self' code.jquery.com; style-src 'self' fonts.googleapis.com; font-src fonts.gstatic.com; img-src 'self' images.examplecdn.com; "> -->
61-
</head>
65+
</head>
6266

6367
<body>
6468
<header class="page-header">
6569
<div class="container">
6670
<div class="header-top flex-responsive">
6771
<div class="header-info">
68-
72+
6973
<!-- name -->
7074
<h1>{{ name }}'s Blog</h1>
7175
<nav>
@@ -86,28 +90,28 @@ <h1>{{ name }}'s Blog</h1>
8690
<main>
8791
<section>
8892
<h2 class="section-heading">Recent Posts</h2>
89-
93+
9094
<!-- blogs -->
9195
{% for post in blogs %}
9296
<article class="blog-post" data-tags="{{ post.core_technologies | join(',') | lower }}">
9397
<h3 class="post-meta">
9498
<a href="posts/{{ post.slug }}.html">{{ post.title }}</a>
9599
</h3>
96-
100+
97101
<p class="section-label">Published on: {{ post.publish_date }}</p>
98102
{% if post.content %}
99-
<p>{{ post.content | markdown_to_html | safe }}</p>
103+
<p>{{ post.content | markdown_to_html | safe }}</p>
100104
{% endif %}
101-
105+
102106
<div class="tech-stack">
103107
{% if post.technologies %}
104-
{% for tech in post.core_technologies %}
105-
<span class="tag">{{ tech }}</span>
106-
{% endfor %}
108+
{% for tech in post.core_technologies %}
109+
<span class="tag">{{ tech }}</span>
110+
{% endfor %}
107111

108-
{% for keyword in post.keywords %}
109-
<span class="tag">{{ keyword }}</span>
110-
{% endfor %}
112+
{% for keyword in post.keywords %}
113+
<span class="tag">{{ keyword }}</span>
114+
{% endfor %}
111115
{% endif %}
112116
</div>
113117

@@ -120,13 +124,13 @@ <h3 class="post-meta">
120124
<aside>
121125
<!-- PASTE THE FILTER SECTION YOU CUT EARLIER RIGHT HERE -->
122126
<section>
123-
<h2 class="section-heading">Filter by Technology</h2>
124-
<div id="tag-filter-container" class="tech-stack">
125-
<button class="tag filter-tag active" data-tag="all">Show All</button>
126-
{% for tag in tags %}
127+
<h2 class="section-heading">Filter by Technology</h2>
128+
<div id="tag-filter-container" class="tech-stack">
129+
<button class="tag filter-tag active" data-tag="all">Show All</button>
130+
{% for tag in tags %}
127131
<button class="tag filter-tag" data-tag="{{ tag | lower }}">{{ tag }}</button>
128-
{% endfor %}
129-
</div>
132+
{% endfor %}
133+
</div>
130134
</section>
131135
</aside>
132136

@@ -166,31 +170,40 @@ <h2 class="section-heading">Filter by Technology</h2>
166170
</script>
167171
<style>
168172
/* Add some basic styling for the active button */
169-
.filter-tag { cursor: pointer; border: 1px solid transparent; }
173+
.filter-tag {
174+
cursor: pointer;
175+
border: 1px solid transparent;
176+
}
177+
170178
.filter-tag.active {
171179
border-color: var(--link-color, #0077cc);
172-
background-color: #cceeff; /* A light blue to indicate selection */
180+
background-color: #cceeff;
181+
/* A light blue to indicate selection */
173182
color: #000;
174183
}
184+
175185
/* Add these new rules to the <style> block at the bottom */
176186

177187
/* Target the container to stack the buttons vertically */
178-
#tag-filter-container {
188+
#tag-filter-container {
179189
display: flex;
180-
flex-direction: column; /* This is the key change */
181-
gap: 0.5rem; /* Adds space between the stacked buttons */
190+
flex-direction: column;
191+
/* This is the key change */
192+
gap: 0.5rem;
193+
/* Adds space between the stacked buttons */
182194
}
183195

184196
/* Make the buttons full-width and aligned left */
185197
#tag-filter-container .filter-tag {
186198
width: 100%;
187199
text-align: left;
188-
margin-right: 0; /* Remove the old horizontal margin */
200+
margin-right: 0;
201+
/* Remove the old horizontal margin */
189202
}
190203
</style>
191204

192205
</footer>
193-
206+
194207
<!-- ===== Style Switcher Start ===== -->
195208
<div class="theme-toggle-container">
196209
<div id="theme-toggle-icon" class="theme-icon">
@@ -199,7 +212,33 @@ <h2 class="section-heading">Filter by Technology</h2>
199212
</div>
200213
<!-- ===== Style Switcher End ===== -->
201214

215+
<!-- ===== Search Feature Start ===== -->
216+
<button id="search-fab" class="search-fab" aria-label="Search blog posts">
217+
<i class="fas fa-magnifying-glass"></i>
218+
</button>
219+
220+
<div id="search-overlay" class="search-overlay">
221+
<div class="search-modal">
222+
<div class="search-header">
223+
<i class="fas fa-magnifying-glass"></i>
224+
<input type="text" id="search-input" placeholder="Search blog posts…" autocomplete="off">
225+
<span class="search-kbd">⌘K</span>
226+
<button id="search-clear-btn" class="search-action-btn" aria-label="Clear search"
227+
style="display:none;"><i class="fas fa-delete-left"></i></button>
228+
<button id="search-close-btn" class="search-action-btn" aria-label="Close search"><i
229+
class="fas fa-xmark"></i></button>
230+
</div>
231+
<div id="search-results" class="search-results">
232+
<p class="search-hint">Type at least 2 characters to search…</p>
233+
</div>
234+
</div>
235+
</div>
236+
<!-- ===== Search Feature End ===== -->
237+
238+
<script src="js/search-index.js"></script>
239+
<script src="js/search.js"></script>
202240
<script src="js/app.js"></script>
203241

204242
</body>
243+
205244
</html>

0 commit comments

Comments
 (0)