added frontend search functionality with a small menubar

Signed-off-by: rodude123 <rodude123@gmail.com>
2023-11-05 17:47:44 +00:00 · 2023-11-05 17:47:44 +00:00 · f54ed2f8fb
commit f54ed2f8fb
parent b4ab7900db
13 changed files with 235 additions and 62 deletions
--- a/dist/api/blog/blogData.php
+++ b/dist/api/blog/blogData.php
@ -444,22 +444,87 @@ class blogData

        if ($result)
        {
-            $bodyText = array_column($result, "bodyText");
-            // go through each body plain text and get the sentence before, the sentence with the search term and the sentence after and append it to a new array
-            foreach ($bodyText as $key => $text)
+            for ($i = 0; $i < count($result); $i++)
            {
-                $text = strtolower($text);
-                $searchTerm = strtolower($searchTerm);
-                $pos = strpos($text, $searchTerm);
-                $start = strrpos(substr($text, 0, $pos), ".") + 1;
-                $end = strpos($text, ".", $pos);
-                $result[$key]["bodyText"] = substr($text, $start, $end - $start);
+                $result[$i]["abstract"] = $this->getShortPost($searchTerm, stripcslashes($result[$i]["bodyText"]));
            }

-
            return $result;
        }

        return array("errorMessage" => "Error, could not find posts");
    }
+
+    /**
+     * Get the short post with the search term
+     * @param string $searchTerm - Search term
+     * @param $text - Body of the post as plain text
+     * @return string - Short post with the search term
+     */
+    private function getShortPost(string $searchTerm, $text): string
+    {
+        $pattern = '/([,:;!?.-]+)/u';
+        $parts = preg_split($pattern, $text, -1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY);
+
+        $cleanedParts = [];
+
+        foreach ($parts as $part)
+        {
+            $part = trim($part); // Remove leading/trailing spaces and newline characters
+            if (!empty($part))
+            {
+                $cleanedParts[] = $part;
+            }
+        }
+
+        $combinedParts = [];
+        $currentPart = '';
+
+        foreach ($cleanedParts as $part)
+        {
+            if (preg_match('/[,:;!?.-]/u', $part))
+            {
+                $currentPart .= $part;
+            }
+            else
+            {
+                if (!empty($currentPart))
+                {
+                    $combinedParts[] = trim($currentPart);
+                }
+                $currentPart = rtrim($part);
+            }
+        }
+
+        if (!empty($currentPart))
+        {
+            $combinedParts[] = trim($currentPart);
+        }
+
+        $result = "";
+
+
+        for ($i = 0; $i < count($combinedParts); $i++)
+        {
+            $part = $combinedParts[$i];
+
+            if (stripos($part, $searchTerm) !== false)
+            {
+                $before = ($i > 0) ? $combinedParts[$i - 1] : "";
+                $after = ($i < count($combinedParts) - 1) ? $combinedParts[$i + 1] : "";
+
+                if ($before === "" && $i > 0)
+                {
+                    $before = $combinedParts[$i - 1];
+                }
+
+                $result = $before . " " . $part . " " . $after;
+
+                // If the search term is found, we don't need to continue checking subsequent parts
+                break;
+            }
+        }
+
+        return $result;
+    }
 }
--- a/dist/api/blog/blogRoutes.php
+++ b/dist/api/blog/blogRoutes.php
@ -254,7 +254,7 @@ class blogRoutes implements routesInterface
            }

            $featured = $data["featured"] === "true";
-            $insertedID = $this->blogData->createPost($data["title"], $data["abstract"], $data["body"], $data["dateCreated"], $featured, $data["categories"], $headerImg);
+            $insertedID = $this->blogData->createPost($data["title"], $data["abstract"], $data["body"], $data["bodyText"], $data["dateCreated"], $featured, $data["categories"], $headerImg);
            if (!is_int($insertedID))
            {
                // uh oh something went wrong
--- a/dist/blog/index.html
+++ b/dist/blog/index.html
@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Rohit Pai - Blog</title><meta name="title" content="Rohit Pai - Blog"><meta name="description" content="This is all the blog posts that Rohit Pai has posted. You'll find posts on various topics, mostly on tech but some on various other random topics."><meta name="keywords" content="Blog, all posts, rohit, pai, rohit pai, tech, web development, self-hosting, hosting"><meta name="robots" content="index, follow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="language" content="English"><meta name="author" content="Rohit Pai"><link rel="stylesheet" href="/blog/css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav><input type="checkbox" id="nav-check"><h1><a href="/" class="link">rohit pai</a></h1><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="/#about" class="textShadow link">about</a></li><li><a href="/#curriculumVitae" class="textShadow link">cv</a></li><li><a href="/#projects" class="textShadow link">projects</a></li><li><a href="/#contact" class="textShadow link">contact</a></li><li><a href="/blog" class="textShadow link active">blog</a></li></ul></nav><header><div><h1>full stack developer</h1><a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="" id="arrow"><i class="fa-solid fa-chevron-down"></i></a></div></header><main id="main"></main><footer class="flexRow"><div class="spacer"></div><p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p><div class="button"><button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button></div></footer><script src="/js/typewriter.js"></script><script src="/blog/js/index.js"></script><script id="dsq-count-scr" src="https://rohitpaiportfolio.disqus.com/count.js" async></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Rohit Pai - Blog</title><meta name="title" content="Rohit Pai - Blog"><meta name="description" content="This is all the blog posts that Rohit Pai has posted. You'll find posts on various topics, mostly on tech but some on various other random topics."><meta name="keywords" content="Blog, all posts, rohit, pai, rohit pai, tech, web development, self-hosting, hosting"><meta name="robots" content="index, follow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="language" content="English"><meta name="author" content="Rohit Pai"><link rel="stylesheet" href="/blog/css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav><input type="checkbox" id="nav-check"><h1><a href="/" class="link">rohit pai</a></h1><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="/#about" class="textShadow link">about</a></li><li><a href="/#curriculumVitae" class="textShadow link">cv</a></li><li><a href="/#projects" class="textShadow link">projects</a></li><li><a href="/#contact" class="textShadow link">contact</a></li><li><a href="/blog" class="textShadow link active">blog</a></li></ul></nav><header><div><h1>full stack developer</h1><a href="/#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="" id="arrow"><i class="fa-solid fa-chevron-down"></i></a></div></header><div class="menuBar"><div class="menu"><ul><li><a href="/blog" class="link active">All posts</a></li><li><a href="/blog/category" class="link">categories</a></li><li><label for="searchField" aria-hidden="true" hidden>search</label> <input type="search" name="search" id="searchField" placeholder="Search..."> <button type="submit" id="searchBtn" class="btn btnPrimary"><i class="fa fa-search"></i></button></li></ul></div></div><main id="main"></main><footer class="flexRow"><div class="spacer"></div><p>&copy; <span id="year"></span> Rohit Pai all rights reserved</p><div class="button"><button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button></div></footer><script src="/js/typewriter.js"></script><script src="/blog/js/index.js"></script><script id="dsq-count-scr" src="https://rohitpaiportfolio.disqus.com/count.js" async></script></body></html>
--- a/dist/blog/js/index.js
+++ b/dist/blog/js/index.js
--- a/dist/editor/editor.html
+++ b/dist/editor/editor.html
--- a/dist/editor/js/editor.js
+++ b/dist/editor/js/editor.js
--- a/src/api/blog/blogData.php
+++ b/src/api/blog/blogData.php
@ -444,22 +444,87 @@ class blogData

        if ($result)
        {
-            $bodyText = array_column($result, "bodyText");
-            // go through each body plain text and get the sentence before, the sentence with the search term and the sentence after and append it to a new array
-            foreach ($bodyText as $key => $text)
+            for ($i = 0; $i < count($result); $i++)
            {
-                $text = strtolower($text);
-                $searchTerm = strtolower($searchTerm);
-                $pos = strpos($text, $searchTerm);
-                $start = strrpos(substr($text, 0, $pos), ".") + 1;
-                $end = strpos($text, ".", $pos);
-                $result[$key]["bodyText"] = substr($text, $start, $end - $start);
+                $result[$i]["abstract"] = $this->getShortPost($searchTerm, stripcslashes($result[$i]["bodyText"]));
            }

-
            return $result;
        }

        return array("errorMessage" => "Error, could not find posts");
    }
+
+    /**
+     * Get the short post with the search term
+     * @param string $searchTerm - Search term
+     * @param $text - Body of the post as plain text
+     * @return string - Short post with the search term
+     */
+    private function getShortPost(string $searchTerm, $text): string
+    {
+        $pattern = '/([,:;!?.-]+)/u';
+        $parts = preg_split($pattern, $text, -1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY);
+
+        $cleanedParts = [];
+
+        foreach ($parts as $part)
+        {
+            $part = trim($part); // Remove leading/trailing spaces and newline characters
+            if (!empty($part))
+            {
+                $cleanedParts[] = $part;
+            }
+        }
+
+        $combinedParts = [];
+        $currentPart = '';
+
+        foreach ($cleanedParts as $part)
+        {
+            if (preg_match('/[,:;!?.-]/u', $part))
+            {
+                $currentPart .= $part;
+            }
+            else
+            {
+                if (!empty($currentPart))
+                {
+                    $combinedParts[] = trim($currentPart);
+                }
+                $currentPart = rtrim($part);
+            }
+        }
+
+        if (!empty($currentPart))
+        {
+            $combinedParts[] = trim($currentPart);
+        }
+
+        $result = "";
+
+
+        for ($i = 0; $i < count($combinedParts); $i++)
+        {
+            $part = $combinedParts[$i];
+
+            if (stripos($part, $searchTerm) !== false)
+            {
+                $before = ($i > 0) ? $combinedParts[$i - 1] : "";
+                $after = ($i < count($combinedParts) - 1) ? $combinedParts[$i + 1] : "";
+
+                if ($before === "" && $i > 0)
+                {
+                    $before = $combinedParts[$i - 1];
+                }
+
+                $result = $before . " " . $part . " " . $after;
+
+                // If the search term is found, we don't need to continue checking subsequent parts
+                break;
+            }
+        }
+
+        return $result;
+    }
 }
--- a/src/api/blog/blogRoutes.php
+++ b/src/api/blog/blogRoutes.php
@ -254,7 +254,7 @@ class blogRoutes implements routesInterface
            }

            $featured = $data["featured"] === "true";
-            $insertedID = $this->blogData->createPost($data["title"], $data["abstract"], $data["body"], $data["dateCreated"], $featured, $data["categories"], $headerImg);
+            $insertedID = $this->blogData->createPost($data["title"], $data["abstract"], $data["body"], $data["bodyText"], $data["dateCreated"], $featured, $data["categories"], $headerImg);
            if (!is_int($insertedID))
            {
                // uh oh something went wrong
--- a/src/blog/index.html
+++ b/src/blog/index.html
@ -49,6 +49,22 @@
    </div>
 </header>

+<div class="menuBar">
+    <div class="menu">
+        <ul>
+            <li><a href="/blog" class="link active">All posts</a></li>
+            <li><a href="/blog/category" class="link">categories</a></li>
+            <li>
+                <label for="searchField" aria-hidden="true" hidden>search</label>
+                <input type="search" name="search" id="searchField"
+                       placeholder="Search...">
+                <button type="submit" id="searchBtn" class="btn btnPrimary"><i
+                        class="fa fa-search"></i></button>
+            </li>
+        </ul>
+    </div>
+</div>
+
 <main id="main">

 </main>
--- a/src/blog/js/index.js
+++ b/src/blog/js/index.js
@ -44,7 +44,6 @@ function goToURL(url)
 	if (urlArray[2] === 'post')
 	{
 		// Create a new URL with the dynamic part
-		// window.history.pushState(null, null, url);
 		loadIndividualPost(urlArray[urlArray.length - 1]).catch(err => console.log(err));
 		return;
 	}
@ -52,14 +51,20 @@ function goToURL(url)
 	if (urlArray[2] === 'category')
 	{
 		// Create a new URL with the dynamic part
-		// window.history.pushState(null, null, url);
 		if (urlArray[3])
 		{
 			loadPostsByCategory(urlArray[urlArray.length - 1]);
 			return;
 		}
 		
-		loadAllCategories();
+		loadAllCategories().catch(err => console.log(err));
+		return;
+	}
+	
+	if (urlArray[2] === 'search' && urlArray[3])
+	{
+		// Create a new URL with the dynamic part
+		loadSearchResults(urlArray[urlArray.length - 1]);
 		return;
 	}
 	
@ -67,6 +72,26 @@ function goToURL(url)
 	
 }

+document.querySelector('#searchBtn').addEventListener('click', _ =>
+{
+	let searchTerm = document.querySelector('#searchField').value;
+	if (searchTerm.length > 0)
+	{
+		window.history.pushState(null, null, `/blog/search/${searchTerm}`);
+		document.querySelector('#searchField').value = '';
+		document.querySelector('#main').innerHTML = '';
+		goToURL(`/blog/search/${searchTerm}`);
+	}
+});
+
+document.querySelector('#searchField').addEventListener('keyup', e =>
+{
+	if (e.key === 'Enter')
+	{
+		document.querySelector('#searchBtn').click();
+	}
+});
+
 /**
 * Creates a large post element
 * @param post the post object
@ -116,25 +141,6 @@ function createLargePost(post)
 */
 function loadHomeContent()
 {
-	let menuBar = document.createElement('div');
-	menuBar.classList.add('menuBar');
-	// language=HTML
-	menuBar.innerHTML = `
-        <div class="menu">
-            <ul>
-                <li><a href="/blog/category" class="link">categories</a></li>
-                <li>
-                    <label for="search" aria-hidden="true" hidden>search</label>
-                    <input type="search" name="search" id="search"
-                           placeholder="Search...">
-                    <button type="submit" class="btn btnPrimary"><i
-                            class="fa fa-search"></i></button>
-                </li>
-            </ul>
-        </div>
-	`;
-	document.querySelector('#main').appendChild(menuBar);
-	
 	fetch('/api/blog/post').then(res => res.json().then(json =>
 	{
 		for (let i = 0; i < json.length; i++)
@ -458,6 +464,34 @@ function loadPostsByCategory(category)
 	}));
 }

+function loadSearchResults(searchTerm)
+{
+	document.title = 'Rohit Pai - Search Results for ' + decodeURI(searchTerm);
+	fetch(`/api/blog/search/${searchTerm}`).then(res => res.json().then(json =>
+	{
+		let main = document.querySelector('#main');
+		let posts = document.createElement('section');
+		posts.classList.add('catPosts');
+		posts.id = 'searchResults';
+		let h1 = document.createElement('h1');
+		h1.innerHTML = 'Search Results';
+		main.appendChild(h1);
+		for (let i = 0; i < json.length; i++)
+		{
+			let largePost = document.createElement('section');
+			largePost.classList.add('largePost');
+			if (i < json.length - 1)
+			{
+				largePost.classList.add('categoryPost');
+			}
+			let outerContent = createLargePost(json[i]);
+			largePost.appendChild(outerContent);
+			posts.appendChild(largePost);
+		}
+		main.appendChild(posts);
+	}));
+}
+
 /**
 * Shows the 404 page
 */
--- a/src/css/nav.css
+++ b/src/css/nav.css
@ -64,7 +64,6 @@ nav ul li span {
    visibility: hidden;
 }

-
 nav ul li .active::before,
 nav ul li .active::after {
    visibility: visible;
--- a/src/editor/editor.html
+++ b/src/editor/editor.html
@ -200,10 +200,7 @@
                </div>
                <div class="formControl">
                    <label for="postCategories">Categories</label>
-                    <input type="text" name="postCategories" id="postCategories"
-                           pattern='[a-zA-Z0-9 ]+, |\w+' title="CSV format"
-                           oninvalid="this.setCustomValidity('This field takes a CSV like format')"
-                           oninput="this.setCustomValidity('')" required>
+                    <input type="text" name="postCategories" id="postCategories" title="CSV format" required>
                </div>

                <div class="formControl">
@ -264,10 +261,7 @@
                </div>
                <div class="formControl">
                    <label for="editPostCategories">Categories</label>
-                    <input type="text" name="editPostCategories" id="editPostCategories"
-                           pattern='[a-zA-Z0-9 ]+, |\w+' title="CSV format"
-                           oninvalid="this.setCustomValidity('This field takes a CSV like format')"
-                           oninput="this.setCustomValidity('')" required>
+                    <input type="text" name="editPostCategories" id="editPostCategories" title="CSV format" required>
                </div>

                <div class="formControl">
--- a/src/editor/js/editor.js
+++ b/src/editor/js/editor.js
@ -486,11 +486,11 @@ function viewToPlainText(viewItem)
        // If item is `Text` or `TextProxy` simple take its text data.
        text = viewItem.data;
    }
-    else if (viewItem.is('element', 'img') && viewItem.hasAttribute('alt'))
-    {
-        // Special case for images - use alt attribute if it is provided.
-        text = viewItem.getAttribute('alt');
-    }
+        // else if (viewItem.is('element', 'img') && viewItem.hasAttribute('alt'))
+        // {
+        //     // Special case for images - use alt attribute if it is provided.
+        //     text = viewItem.getAttribute('alt');
+    // }
    else if (viewItem.is('element', 'br'))
    {
        // A soft break should be converted into a single line break (#8045).