aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--background.svg66
-rw-r--r--logo.svg58
-rw-r--r--public/css/styles.css40
-rw-r--r--public/fonts/VGA437.ttfbin81192 -> 0 bytes
-rw-r--r--public/images/background.pngbin0 -> 1342 bytes
-rw-r--r--public/images/logo.pngbin0 -> 13393 bytes
-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
10 files changed, 237 insertions, 23 deletions
diff --git a/background.svg b/background.svg
new file mode 100644
index 0000000..c29d4f2
--- /dev/null
+++ b/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>
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..1a59c7f
--- /dev/null
+++ b/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>
diff --git a/public/css/styles.css b/public/css/styles.css
index 1c19cff..f40e376 100644
--- a/public/css/styles.css
+++ b/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 {
- display: flex;
- justify-content: center;
+.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;
} \ No newline at end of file
diff --git a/public/fonts/VGA437.ttf b/public/fonts/VGA437.ttf
deleted file mode 100644
index f5cbfc0..0000000
--- a/public/fonts/VGA437.ttf
+++ /dev/null
Binary files differ
diff --git a/public/images/background.png b/public/images/background.png
new file mode 100644
index 0000000..403fb6a
--- /dev/null
+++ b/public/images/background.png
Binary files differ
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..a327857
--- /dev/null
+++ b/public/images/logo.png
Binary files differ
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>