feat: render search on server

routes/articles/index.tsx

@@ -6,17 +6,30 @@ import { KMenu } from "@islands/KMenu.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { SearchResult } from "@lib/types.ts";
 
 export const handler: Handlers<Article[] | null> = {
-  async GET(_, ctx) {
-    const movies = await getAllArticles();
-    return ctx.render(movies);
+  async GET(req, ctx) {
+    const articles = await getAllArticles();
+    const searchParams = parseResourceUrl(req.url);
+    const searchResults = searchParams &&
+      await searchResource({ ...searchParams, type: "article" });
+    return ctx.render({ articles, searchResults });
   },
 };
 
-export default function Greet(props: PageProps<Article[] | null>) {
+export default function Greet(
+  props: PageProps<{ articles: Article[] | null; searchResults: SearchResult }>,
+) {
+  const { articles, searchResults } = props.data;
   return (
-    <MainLayout url={props.url} title="Articles" context={{ type: "article" }}>
+    <MainLayout
+      url={props.url}
+      title="Articles"
+      context={{ type: "article" }}
+      searchResults={searchResults}
+    >
       <header class="flex gap-4 items-center mb-5 md:hidden">
         <a
           class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
@@ -31,7 +44,7 @@ export default function Greet(props: PageProps<Article[] | null>) {
       <RedirectSearchHandler />
       <KMenu type="main" context={{ type: "article" }} />
       <Grid>
-        {props.data?.map((doc) => {
+        {articles?.map((doc) => {
           return (
             <Card
               image={doc?.meta?.image || "/placeholder.svg"}