HTMX and Strapi Integration

* Re-integrates HTMX
* Integrate STRAPI API
* Adds endpoints for fetching posts
* Adds HTMX area for loading recent posts

4 files changed, 77 insertions, 6 deletions

diff --git a/shard.yml b/shard.yml
index f6c9525..228995d 100644
--- a/shard.yml
+++ b/shard.yml
@@ -11,6 +11,10 @@ targets:
 dependencies:
   kemal:
     github: kemalcr/kemal
+  crest:
+    github: mamantoha/crest
+  dotenv:
+    github: xtokio/dotenv
 
 crystal: '>= 1.12.2'
 
diff --git a/src/indrajith-dev-crystal.cr b/src/indrajith-dev-crystal.cr
index ca600f1..74fecc2 100644
--- a/src/indrajith-dev-crystal.cr
+++ b/src/indrajith-dev-crystal.cr
@@ -1,4 +1,11 @@
 require "kemal"
+require "crest"
+require "json"
+require "dotenv"
+
+Dotenv.load
+
+TOKEN = ENV["TOKEN"]
 
 module Indrajith::Dev::Crystal
   VERSION = "0.1.0"
@@ -8,6 +15,11 @@ module Indrajith::Dev::Crystal
     render "src/views/#{{{filename}}}.ecr", "src/views/layout.ecr"
   end
 
+  macro render_404()
+    page_renderer "404", "The VOID"
+  end
+
+
   get "/" do |context|
     context.response.content_type = "text/html"
     page_renderer "home", "Home"
@@ -28,9 +40,66 @@ module Indrajith::Dev::Crystal
     page_renderer "contact", "Contact"
   end
 
+  get "/posts" do |context|
+    begin
+      site = Crest::Resource.new("http://localhost:1337")
+
+      response = site.get("/api/posts",
+        params: {
+          "fields[0]"            => "post_title",
+          "fields[1]"            => "slug",
+          "pagination[pageSize]" => 3,
+        },
+        headers: {"Authorization" => "Bearer #{TOKEN}"}
+      )
+
+      json_data = JSON.parse(response.body)
+      data = json_data["data"].as_a
+      html_string = ""
+      data.each do |item|
+        attributes = item["attributes"]
+        # puts attributes["post_title"]
+        html_string += "
+        <li>
+          <p><a href='/post/#{attributes["slug"]}'>#{attributes["post_title"]}</a></p>
+        </li>"
+      end
+      html_string
+    rescue ex : Crest::NotFound
+      puts ex.response
+      render_404
+    end
+  end
+
+  get "/post/:slug" do |context|
+    begin
+      slug = context.params.url["slug"]
+      site = Crest::Resource.new("http://localhost:1337")
+
+      response = site.get("/api/posts",
+        params: {
+          "filters[slug][$eq]" => "#{slug}",
+        },
+        headers: {"Authorization" => "Bearer #{TOKEN}"}
+      )
+
+      json_data = JSON.parse(response.body)
+      data = json_data["data"].as_a
+
+      post_item = data[0]
+      post_attribute = post_item["attributes"]
+      content = post_attribute["post_content"]
+      page_title = post_attribute["post_title"]
+      render "src/views/layout.ecr"
+    rescue ex
+      puts ex
+      render_404
+    end
+  end
+
   error 404 do |context|
     context.response.content_type = "text/html"
-    page_renderer "404", "The VOID"
+    render_404
   end
 
   Kemal.run
diff --git a/src/views/home.ecr b/src/views/home.ecr
index fb4973f..2928a32 100644
--- a/src/views/home.ecr
+++ b/src/views/home.ecr
@@ -6,17 +6,14 @@
         </p>
     </div>
 </div>
-
+<span hx-get="/posts" hx-trigger="load" hx-target="#result"></span>
 <div>
     <div>
         <h4>Books I'm reading now</h4>
         <div id="gr_grid_widget_1676363812"></div>
     </div>
     <h4>Recent Posts</h4>
-    <ul>
-        <!-- 
-         li -> posts
-         --> 
+    <ul id="result">
     </ul>
 </div>
 <script src="https://www.goodreads.com/review/grid_widget/162656738.Indrajith's%20currently-reading%20book%20montage?cover_size=medium&hide_link=&hide_title=true&num_books=20&order=a&shelf=currently-reading&sort=date_added&widget_id=1676363812" type="text/javascript" charset="utf-8"></script>
diff --git a/src/views/layout.ecr b/src/views/layout.ecr
index 2a537ea..abb2dae 100644
--- a/src/views/layout.ecr
+++ b/src/views/layout.ecr
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title> <%= page_title %> | {indrajith.dev}</title>
     <link rel="stylesheet" href="/css/styles.css">
+    <script src="https://unpkg.com/htmx.org@2.0.0"></script>
     <link rel="icon" href="/favicon.ico">
 </head>
 <body>