HTMX and Strapi Integration
* Re-integrates HTMX * Integrate STRAPI API * Adds endpoints for fetching posts * Adds HTMX area for loading recent posts
This commit is contained in:
@@ -11,6 +11,10 @@ targets:
|
|||||||
dependencies:
|
dependencies:
|
||||||
kemal:
|
kemal:
|
||||||
github: kemalcr/kemal
|
github: kemalcr/kemal
|
||||||
|
crest:
|
||||||
|
github: mamantoha/crest
|
||||||
|
dotenv:
|
||||||
|
github: xtokio/dotenv
|
||||||
|
|
||||||
crystal: '>= 1.12.2'
|
crystal: '>= 1.12.2'
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,11 @@
|
|||||||
require "kemal"
|
require "kemal"
|
||||||
|
require "crest"
|
||||||
|
require "json"
|
||||||
|
require "dotenv"
|
||||||
|
|
||||||
|
Dotenv.load
|
||||||
|
|
||||||
|
TOKEN = ENV["TOKEN"]
|
||||||
|
|
||||||
module Indrajith::Dev::Crystal
|
module Indrajith::Dev::Crystal
|
||||||
VERSION = "0.1.0"
|
VERSION = "0.1.0"
|
||||||
@@ -8,6 +15,11 @@ module Indrajith::Dev::Crystal
|
|||||||
render "src/views/#{{{filename}}}.ecr", "src/views/layout.ecr"
|
render "src/views/#{{{filename}}}.ecr", "src/views/layout.ecr"
|
||||||
end
|
end
|
||||||
|
|
||||||
|
macro render_404()
|
||||||
|
page_renderer "404", "The VOID"
|
||||||
|
end
|
||||||
|
|
||||||
|
|
||||||
get "/" do |context|
|
get "/" do |context|
|
||||||
context.response.content_type = "text/html"
|
context.response.content_type = "text/html"
|
||||||
page_renderer "home", "Home"
|
page_renderer "home", "Home"
|
||||||
@@ -28,9 +40,66 @@ module Indrajith::Dev::Crystal
|
|||||||
page_renderer "contact", "Contact"
|
page_renderer "contact", "Contact"
|
||||||
end
|
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|
|
error 404 do |context|
|
||||||
context.response.content_type = "text/html"
|
context.response.content_type = "text/html"
|
||||||
page_renderer "404", "The VOID"
|
render_404
|
||||||
end
|
end
|
||||||
|
|
||||||
Kemal.run
|
Kemal.run
|
||||||
|
|||||||
@@ -6,17 +6,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<span hx-get="/posts" hx-trigger="load" hx-target="#result"></span>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<h4>Books I'm reading now</h4>
|
<h4>Books I'm reading now</h4>
|
||||||
<div id="gr_grid_widget_1676363812"></div>
|
<div id="gr_grid_widget_1676363812"></div>
|
||||||
</div>
|
</div>
|
||||||
<h4>Recent Posts</h4>
|
<h4>Recent Posts</h4>
|
||||||
<ul>
|
<ul id="result">
|
||||||
<!--
|
|
||||||
li -> posts
|
|
||||||
-->
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
<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>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title> <%= page_title %> | {indrajith.dev}</title>
|
<title> <%= page_title %> | {indrajith.dev}</title>
|
||||||
<link rel="stylesheet" href="/css/styles.css">
|
<link rel="stylesheet" href="/css/styles.css">
|
||||||
|
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
Reference in New Issue
Block a user