feature: searching

This commit is contained in:
IMK 2024-10-09 21:48:33 +02:00
parent 774d466dc0
commit a94680b2b6
12 changed files with 82 additions and 11 deletions

View File

@ -2,7 +2,8 @@ title = 'got lazy today'
file_name = 'bettercolors' file_name = 'bettercolors'
description = 'Pathethic excuse of an update' description = 'Pathethic excuse of an update'
tags = ["Website update"] tags = ["Website update"]
posted = '2024. oct. 03.' posted = "2024. oct. 03."
unix = '1727917200'
estimated_reading_time = 5 estimated_reading_time = 5
author = 'IMK' # feel free to swap with your own name author = 'IMK' # feel free to swap with your own name
order = 1 order = 1

View File

@ -2,7 +2,8 @@ title = 'Cured your color blindness, no problem'
file_name = 'colorful' file_name = 'colorful'
description = 'FINALLY NO LONGER MONOCHROME' description = 'FINALLY NO LONGER MONOCHROME'
tags = ["website update"] tags = ["website update"]
posted = '2024. oct. 2.' posted = "2024. oct. 2."
unix = '1727830800'
estimated_reading_time = 2 estimated_reading_time = 2
author = 'IMK' # feel free to swap with your own name author = 'IMK' # feel free to swap with your own name
order = 1 order = 1

View File

@ -2,7 +2,8 @@ title = 'Welcommeeee :3'
file_name = 'my-first-article' file_name = 'my-first-article'
description = 'about this blog and stuff' description = 'about this blog and stuff'
tags = ["Casual"] tags = ["Casual"]
posted = '2024. sept. 30.' posted = "2024 sept. 30."
unix = '1727658000'
estimated_reading_time = 1 estimated_reading_time = 1
author = 'IMK' # feel free to swap with your own name author = 'IMK' # feel free to swap with your own name
order = 1 order = 1

View File

@ -2,7 +2,8 @@ title = 'BACK FROM THE DEAD YEAHH'
file_name = 'newstuff' file_name = 'newstuff'
description = 'NO UPDATES FOR 3 DAYS??? UNSATISFACTORY' description = 'NO UPDATES FOR 3 DAYS??? UNSATISFACTORY'
tags = ["Rant"] tags = ["Rant"]
posted = '2024. oct. 08.' posted = "2024. oct. 8."
unix = '1728349200'
estimated_reading_time = 1 estimated_reading_time = 1
author = 'IMK' # feel free to swap with your own name author = 'IMK' # feel free to swap with your own name
order = 1 order = 1

9
posts/search/post.md Normal file
View File

@ -0,0 +1,9 @@
# heyyy
so I have added a search bar
and did some minor changes on the home page
yeah
bye die yeah i said die yeah i really said that

View File

@ -0,0 +1,10 @@
title = 'Search and you may find'
file_name = 'update1'
description = 'Searchin'
tags = ["Website update"]
posted = "2024. oct. 09."
unix = '1728503144'
estimated_reading_time = 1
author = 'IMK'
order = 1
pinned = false

View File

@ -2,7 +2,8 @@ title = 'Website Update: Pins, Tags'
file_name = 'update1' file_name = 'update1'
description = 'new features' description = 'new features'
tags = ["Website update"] tags = ["Website update"]
posted = '2024. oct. 01.' posted = "2024. oct. 01."
unix = '1727744400'
estimated_reading_time = 1 estimated_reading_time = 1
author = 'IMK' author = 'IMK'
order = 1 order = 1

View File

@ -2,7 +2,8 @@ title = 'GODOT GONE WOKE???K'
file_name = 'wokedot' file_name = 'wokedot'
description = 'Ranting about the ridiculous godot controversy' description = 'Ranting about the ridiculous godot controversy'
tags = ["Rant"] tags = ["Rant"]
posted = '2024. oct. 03.' posted = "2024. oct. 03."
unix = '1727920800'
estimated_reading_time = 5 estimated_reading_time = 5
author = 'IMK' # feel free to swap with your own name author = 'IMK' # feel free to swap with your own name
order = 1 order = 1

View File

@ -1,3 +1,4 @@
:root { :root {
--bg-color: #24273a; --bg-color: #24273a;
--text-color: #59a685; --text-color: #59a685;
@ -92,9 +93,31 @@ div.post li {
} }
h1.htitle{ h1.htitle{
text-align: right; text-align: center;
text-size: 6vw; text-size: 6vw;
} }
div.title{
height: 100%;
background-color: var(--border-color);
padding-bottom: 1vw;
}
#search {
width:96%;
margin: auto;
display:block;
border-radius: 0%;
font-family: "Zilla slab";
background-color: var(--bg-color);
border: var(--text-color) solid 2px;
color: var(--text-color);
}
#search:focus {
outline: none;
};
h2.post-title{ h2.post-title{

19
static/scripts/search.js Normal file
View File

@ -0,0 +1,19 @@
function searcher(){
let bar = document.getElementById("search");
let filter = bar.value.toUpperCase();
let posts = Array.from(document.getElementsByClassName("mb-3"));
let a, b, txtValue;
console.log(posts.length);
console.log(posts)
for (i=0; i < posts.length; i++){
a = posts[i].getElementsByTagName("h2")[0];
b = posts[i].getElementsByTagName("li")[3];
if(a.innerText.toUpperCase().indexOf(filter) > -1 || b.innerText.toUpperCase().indexOf(filter) > -1){
posts[i].style.display = "";
}
else {
posts[i].style.display = "none";
}
}
}

View File

@ -11,6 +11,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/css/index.css"> <link rel="stylesheet" type="text/css" href="/static/css/index.css">
{% block scripts %}
{% endblock scripts %}
</head> </head>
<body class="flex flex-col justify-between min-h-screen font-sans leading-normal tracking-normal"> <body class="flex flex-col justify-between min-h-screen font-sans leading-normal tracking-normal">
<div class="h-16">{% block header %}{% endblock header %}</div> <div class="h-16">{% block header %}{% endblock header %}</div>
@ -24,7 +26,5 @@
</div> </div>
{% endblock footer %} {% endblock footer %}
</body> </body>
<script src="/static/js/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</script> </script>
</html> </html>

View File

@ -1,8 +1,12 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block scripts %}<script type="text/javascript" src="/static/scripts/search.js"> </script>{% endblock scripts %}
{% block title %}ALEPH 1 | IMK'S BLOG{% endblock title %} {% block title %}ALEPH 1 | IMK'S BLOG{% endblock title %}
{% block content %} {% block content %}
<div> <div>
<div class="title">
<h1 class="htitle">ℵ₁ | IMK'S BLOG</h1> <h1 class="htitle">ℵ₁ | IMK'S BLOG</h1>
<input placeholder="Search :3" type="text" name="search" id="search" onkeyup="searcher()">
</div>
<hr> <hr>
{% for fm in posts %} {% for fm in posts %}
<a class="mb-3" href="/posts/{{fm.file_name}}"> <a class="mb-3" href="/posts/{{fm.file_name}}">