HTMX and Strapi Integration

* Re-integrates HTMX * Integrate STRAPI API * Adds endpoints for fetching posts * Adds HTMX area for loading recent posts
2024-06-21 13:18:29 +05:30
parent 1d422d90f8
commit ff1da01040
4 changed files with 77 additions and 6 deletions
--- 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'

--- 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
--- 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>
--- 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>