indrajith/indrajith-dev-crystal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Date Utils, Cosmetic and Implementation Changes

Browse Source 
* Adds Utils method for formatting date
* Adds Published at to the posts page
* Adds new logo, removes font dependency
* Renames Posts link to Blog
This commit is contained in:
Indrajith K L
2024-06-22 03:40:56 +05:30
parent a5b35ffb18
commit 646fdccac5
10 changed files with 237 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
background.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

58
logo.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

40
public/css/styles.css
View File

@@ -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;
}

BIN
public/fonts/VGA437.ttf
View File

Binary file not shown.

BIN
public/images/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

13
src/indrajith-dev-crystal.cr
View File

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

47
src/utils/utils.cr Normal file
View File

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

0
src/views/blog.ecr Normal file
View File

36
src/views/layout.ecr
View File

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