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

background.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="75"
+   height="75"
+   viewBox="0 0 19.84375 19.84375"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="background.svg"
+   inkscape:export-filename="background.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="113.84419"
+     inkscape:cy="11.667262"
+     inkscape:window-width="1366"
+     inkscape:window-height="701"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:clip-to-page="false" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-63.905936,-56.797954)">
+    <rect
+       style="fill:#666666;stroke:#666666;stroke-width:0.074846"
+       id="rect1"
+       width="19.768904"
+       height="19.768904"
+       x="63.943359"
+       y="56.835377" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.175px;font-family:Satisfy;-inkscape-font-specification:Satisfy;fill:#5c5c5c;fill-opacity:1;stroke:#5c5c5c;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+       x="-2.2569487"
+       y="100.25975"
+       id="text1"
+       transform="rotate(-43.945276)"><tspan
+         sodipodi:role="line"
+         id="tspan1"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Satisfy;-inkscape-font-specification:Satisfy;fill:#5c5c5c;fill-opacity:1;stroke:#5c5c5c;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+         x="-2.2569487"
+         y="100.25975">Software is Art</tspan></text>
+  </g>
+</svg>

logo.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="85.989555mm"
+   height="23.963562mm"
+   viewBox="0 0 85.989555 23.963562"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="bitmap.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.2522972"
+     inkscape:cx="230.77589"
+     inkscape:cy="77.856916"
+     inkscape:window-width="1366"
+     inkscape:window-height="701"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-62.102863,-90.074863)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.8948px;font-family:'Ricks American NF';-inkscape-font-specification:'Ricks American NF';fill:#1a1a1a;stroke:#808080;stroke-width:0.075902"
+       x="62.141937"
+       y="107.42997"
+       id="text1"
+       transform="scale(0.99998193,1.0000181)"><tspan
+         sodipodi:role="line"
+         id="tspan1"
+         style="fill:#1a1a1a;stroke-width:0.075902"
+         x="62.141937"
+         y="107.42997">indrajith.dev</tspan></text>
+  </g>
+</svg>

public/css/styles.css

@@ -1,8 +1,3 @@
-@font-face {
-	font-family: "VGA437";
-	src: url("/fonts/VGA437.ttf");
-}
-
 :root {
 	--body-bg-image: url("/images/aqua.gif");
 }
@@ -20,7 +15,10 @@ body {
 }
 
 body {
-	font-family: Verdana;
+	/* font-family: Verdana; */
+	font-family: "Lato", sans-serif;
+	font-weight: 400;
+	font-style: normal;
 	font-size: 15px;
 	max-width: 900px;
 	margin: auto;
@@ -87,7 +85,6 @@ footer ul>li>p {
 
 .logo {
 	text-decoration: none;
-	font-family: "VGA437", sans-serif;
 	font-size: 220%;
 	color: #000000;
 }
@@ -170,7 +167,7 @@ table td {
 	right: 0;
 	bottom: 0;
 	background: #000000;
-	height: 2px;
+	height: 1px;
 	-webkit-transform: translateY(4px);
 	transform: translateY(4px);
 	-webkit-transition-property: transform;
@@ -253,7 +250,28 @@ p.first-letter::first-letter {
 	overflow: hidden;
 }
 
-.four-o-four, .f-o-f-message {
+.four-o-four,
+.f-o-f-message {
 	display: flex;
 	justify-content: center;
 }
+
+
+
+th {
+	background-color: #3b3b3b;
+	color: white;
+	border: 1px solid #000000;
+}
+
+tr:nth-child(even) {
+	background-color: #f2f2f2;
+}
+
+tr:nth-child(odd) {
+	background-color: #f8f8f8
+}
+
+.text-lightish-50 .hvr-underline-reveal.links {
+	text-decoration: underline;
+}

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

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

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="/blog" class="hvr-underline-reveal links" id="blog">blog</a></li>
-                <li><a href="/timeline" class="hvr-underline-reveal links" id="cv">timeline</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="https://git.indrajith.dev" class="hvr-underline-reveal links" id="git">git</a></li>
-                <li><a href="/contact" id="cv" class="links hvr-underline-reveal">contact</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>
+                <!-- <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">        
+        <%- 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"];
+        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>