added frontend search functionality with a small menubar

Signed-off-by: rodude123 <rodude123@gmail.com>
2023-11-05 17:47:44 +00:00
parent b4ab7900db
commit f54ed2f8fb
13 changed files with 235 additions and 62 deletions
@@ -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;
+    }
 }
@@ -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
@@ -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>