aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorIndrajith K L2024-06-22 03:40:56 +0530
committerIndrajith K L2024-06-22 03:40:56 +0530
commit646fdccac5f0ec506b80ed532baa4012965b682e (patch)
treeced54009d8d5f20b61d7a873a6bb54907e8b7e5d /src
parenta5b35ffb182e4b2aa250059b0e44c13373999d76 (diff)
downloadindrajith-dev-crystal-646fdccac5f0ec506b80ed532baa4012965b682e.tar.gz
indrajith-dev-crystal-646fdccac5f0ec506b80ed532baa4012965b682e.tar.bz2
indrajith-dev-crystal-646fdccac5f0ec506b80ed532baa4012965b682e.zip
Date Utils, Cosmetic and Implementation Changes
* Adds Utils method for formatting date * Adds Published at to the posts page * Adds new logo, removes font dependency * Renames Posts link to Blog
Diffstat (limited to 'src')
-rw-r--r--src/indrajith-dev-crystal.cr13
-rw-r--r--src/utils/utils.cr47
-rw-r--r--src/views/blog.ecr0
-rw-r--r--src/views/layout.ecr36
4 files changed, 84 insertions, 12 deletions
diff --git a/src/indrajith-dev-crystal.cr b/src/indrajith-dev-crystal.cr
index f5ddabd..f49f134 100644
--- a/src/indrajith-dev-crystal.cr
+++ b/src/indrajith-dev-crystal.cr
@@ -2,6 +2,8 @@ require "kemal"
require "crest"
require "json"
require "dotenv"
+require "./utils/utils"
+require "time"
Dotenv.load
@@ -13,6 +15,7 @@ module Indrajith::Dev::Crystal
macro page_renderer(filename, title)
page_title = {{title}}
+ published_at=""
render "src/views/#{{{filename}}}.ecr", "src/views/layout.ecr"
end
@@ -41,6 +44,11 @@ module Indrajith::Dev::Crystal
page_renderer "contact", "Contact"
end
+ get "/blog" do |context|
+ context.response.content_type = "text/html"
+ page_renderer "blog", "Blog"
+ end
+
get "/posts" do |context|
begin
site = Crest::Resource.new("#{STRAPI_URL}")
@@ -80,7 +88,7 @@ module Indrajith::Dev::Crystal
get "/post/:slug" do |context|
begin
slug = context.params.url["slug"]
- site = Crest::Resource.new("http://localhost:1337")
+ site = Crest::Resource.new("#{STRAPI_URL}")
response = site.get("/api/posts",
params: {
@@ -94,6 +102,9 @@ module Indrajith::Dev::Crystal
post_item = data[0]
post_attribute = post_item["attributes"]
content = post_attribute["post_content"]
+ published_raw_time = post_attribute["publishedAt"].as_s
+ published_time = Time.parse(published_raw_time, "%Y-%m-%dT%H:%M:%S.%3NZ", Time::Location.local)
+ published_at = format_date(published_time)
page_title = post_attribute["post_title"]
render "src/views/layout.ecr"
rescue ex
diff --git a/src/utils/utils.cr b/src/utils/utils.cr
new file mode 100644
index 0000000..7b214ce
--- /dev/null
+++ b/src/utils/utils.cr
@@ -0,0 +1,47 @@
+
+def format_date(time : Time)
+ month = get_month(time.month)
+ "#{month} #{time.day}, #{time.year}"
+end
+
+def format_date_with_time(time : Time)
+ month = get_month(time.month)
+ "#{month} #{time.day}, #{time.year} #{time.hour}:#{time.minute} #{am_or_pm(time.hour)}"
+end
+
+def get_month(month)
+ case month
+ when 1
+ "January"
+ when 2
+ "February"
+ when 3
+ "March"
+ when 4
+ "April"
+ when 5
+ "May"
+ when 6
+ "June"
+ when 7
+ "July"
+ when 8
+ "August"
+ when 9
+ "September"
+ when 10
+ "October"
+ when 11
+ "November"
+ when 12
+ "December"
+ end
+end
+
+def am_or_pm(hour)
+ if hour > 12
+ "PM"
+ else
+ "AM"
+ end
+end \ No newline at end of file
diff --git a/src/views/blog.ecr b/src/views/blog.ecr
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/blog.ecr
diff --git a/src/views/layout.ecr b/src/views/layout.ecr
index abb2dae..763f1cb 100644
--- a/src/views/layout.ecr
+++ b/src/views/layout.ecr
@@ -7,28 +7,37 @@
<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="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="logo-container">
- <a class="logo" href="/">{indrajith.dev}</a>
+ <a class="logo" href="/"><img src="/images/logo.png" alt="logo"/></a>
</div>
<h4 class="slogan">(Software is Art)</h4>
<nav>
<ul>
<li><a href="/" id="home" class="hvr-underline-reveal links">home</a></li>
- <li><a href="/posts" class="hvr-underline-reveal links" id="posts">posts</a></li>
- <li><a href="/timeline" class="hvr-underline-reveal links" id="cv">timeline</a></li>
+ <li><a href="/blog" class="hvr-underline-reveal links" id="blog">blog</a></li>
+ <li><a href="/timeline" class="hvr-underline-reveal links" id="timeline">timeline</a></li>
<li><a href="/about" class="hvr-underline-reveal links" id="about">about</a></li>
- <li><a href="https://git.indrajith.dev" class="hvr-underline-reveal links" id="cv">git</a></li>
- <li><a href="/contact" id="cv" class="links hvr-underline-reveal">contact</a></li>
- <li><a href="/feed.xml" id="cv" class="links hvr-underline-reveal">feed</a></li>
+ <li><a href="https://git.indrajith.dev" class="hvr-underline-reveal links" id="git">git</a></li>
+ <li><a href="/contact" id="contact" class="links hvr-underline-reveal">contact</a></li>
+ <!-- <li><a href="/feed.xml" id="cv" class="links hvr-underline-reveal">feed</a></li> -->
</ul>
</nav>
<hr>
</header>
- <main id="content" hx-ext="response-targets">
+ <main id="content" hx-ext="response-targets">
+ <%- if published_at -%>
+ <div>
+ <%= published_at %>
+ </div>
+ <%- else -%>
+ <%- end -%>
<%= content %>
</main>
@@ -44,11 +53,16 @@
<script>
(function(){
const currentLocation = location.pathname;
- const navs = ["about","posts","cv"];
- const currentNav = navs.find(nav=>currentLocation.includes(nav));
- if (currentNav) {
- document.getElementById(currentNav).parentElement.classList.add("text-lightish-50");
+ if (currentLocation=="/") {
+ document.getElementById("home").parentElement.classList.add("text-lightish-50");
+ } else {
+ const navs = ["about","blog","timeline", "contact"];
+ const currentNav = navs.find(nav=>currentLocation.includes(nav));
+ if (currentNav) {
+ document.getElementById(currentNav).parentElement.classList.add("text-lightish-50");
+ }
}
+
})();
</script>
</body>