Skip to content

Commit 676c2c8

Browse files
serhanekiciiserhanekicii
committed
feat(ui): article description block, post meta, consistent date formatting
- Add article description block inside #main with title, description, and published/last-updated dates (linked to commits) using meta-label/meta-value styling - Add post descriptions to index posts list - Unify date format to "DD Mon YYYY" across all visible dates (RSS unchanged) - Add date_updated_short variable to gen for consistent short date display - Style commit and post lists with shared .commit-list class, card backgrounds, hover states, and uppercase tracked section titles - Add hr separator before Latest Updates on index - Simplify contact page markup - Update highlights description and remove redundant intro paragraphs from markdown - Reduce base font size to 14px, adjust nav padding to 1.5em, remove title underline animation - Update footer with GitHub/LinkedIn/RSS links, remove copyright - Rounded favicon corners (rx=6)
1 parent 8b6a07f commit 676c2c8

File tree

13 files changed

+238
-165
lines changed

13 files changed

+238
-165
lines changed

‎conf‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ CSS_FILE="style.css"
55
GITHUB_REPO="website"
66
GITHUB_USER="serhanekicii"
77
# Add last n commits to index
8-
COMMITS_NUM=10
8+
COMMITS_NUM=5
99

1010
default_header="header.html"
1111
default_footer="footer.html"

‎contact.html/0.html‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
<h2>${title}</h2>
2-
<p>Reach me by using:</p>
3-
<ul>
4-
<li>Email: <a href="mailto:${site_mail}">${site_mail}</a></li>
5-
</ul>
2+
<p>Email: <a href="mailto:${site_mail}">${site_mail}</a></p>
63
<h3><a href="https://www.ietf.org/rfc/rfc4880.txt" target="_blank" rel="noopener">PGP</a></h3>
7-
Here is my PGP public key, feel free to use it for encrypting e-mails.
8-
<pre>
9-
10-
<code>
4+
<p>Here is my PGP public key, feel free to use it for encrypting e-mails.</p>
5+
<pre><code>
116
-----BEGIN PGP PUBLIC KEY BLOCK-----
127

138
mQINBGGk/tQBEADY+B2UlQGXxxceTvnYl/2PIXQ2kF76pHd27oI8OkJpPKBcchDd
@@ -60,5 +55,4 @@ <h3><a href="https://www.ietf.org/rfc/rfc4880.txt" target="_blank" rel="noopener
6055
DM4arN0bCLEASMZK6XsKncx25kcGuVJJq1b0OKPbTQ==
6156
=C3kr
6257
-----END PGP PUBLIC KEY BLOCK-----
63-
</code>
64-
</pre>
58+
</code></pre>

‎footer.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
<footer>
44
<div id="footer-content">
55
<p>
6+
<a href="https://github.com/${GITHUB_USER}" target="_blank" rel="noopener">GitHub</a>
7+
<span class="separator">·</span>
68
<a href="${site_author_linkedin}" target="_blank" rel="noopener">LinkedIn</a>
9+
<span class="separator">·</span>
10+
<a href="rss.xml" target="_blank" rel="noopener">RSS</a>
711
</p>
8-
<p class="copyright">© ${site_author}</p>
912
</div>
1013
</footer>
1114
</body>

‎gen‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -130,15 +130,15 @@ get_git_info() {
130130

131131
# Generate all commits list with newline after each entry
132132
all_commits=$(printf "%s" "$git_info" | while IFS='|' read -r commit_date commit_hash commit_author commit_message; do
133-
# Create a human-readable version of the date (e.g., "Sun, 07 Jul 2025")
134-
commit_date_human=$(printf "%s" "$commit_date" | cut -d' ' -f1,2,3,4)
135-
# Create a truncated version for mobile (e.g., "07 Jul 2025")
133+
# Create a human-readable version of the date (e.g., "07 Jul 2025")
136134
commit_date_short=$(printf "%s" "$commit_date" | cut -d' ' -f2,3,4)
137135
138-
# Use the full date for 'datetime' and the human-readable one for display
139-
printf "<li><time datetime=\"%s\"><span class=\"full-date\">%s</span><span class=\"short-date\">%s</span></time> &ndash; <strong>%s:</strong> <a target=\"_blank\" href=\"%s\">%s</a></li>\n" \
140-
"$commit_date" "$commit_date_human" "$commit_date_short" "$commit_author" "$commit_base_url/$commit_hash" "$commit_message"
136+
printf "<li><a target=\"_blank\" href=\"%s\">%s</a><span class=\"commit-meta\"><span><span class=\"meta-label\">HASH:</span> <a class=\"meta-value\" target=\"_blank\" href=\"%s\"><code>%s</code></a></span><span><span class=\"meta-label\">AUTHOR:</span> <span class=\"meta-value\">%s</span></span><span><span class=\"meta-label\">DATE:</span> <span class=\"meta-value\">%s</span></span></span></li>\n" \
137+
"$commit_base_url/$commit_hash" "$commit_message" "$commit_base_url/$commit_hash" "$commit_hash" "$commit_author" "$commit_date_short"
141138
done)
139+
140+
# shellcheck disable=SC2034
141+
article_commits=$(printf "%s" "$all_commits" | head -n 5)
142142
}
143143
144144
# Function to check if a command exists
@@ -196,8 +196,10 @@ process_file() {
196196
fi
197197
198198
# Create a human-readable version of the final post date
199-
date_created_human=$(printf "%s" "$date_created" | cut -d' ' -f1,2,3,4)
199+
date_created_human=$(printf "%s" "$date_created" | cut -d' ' -f2,3,4)
200200
date_created_short=$(printf "%s" "$date_created" | cut -d' ' -f2,3,4)
201+
# shellcheck disable=SC2034
202+
date_updated_short=$(printf "%s" "$git_modification_date" | cut -d' ' -f2,3,4)
201203
202204
# Set active nav item based on current file (dynamic)
203205
# shellcheck disable=SC2034
@@ -266,7 +268,7 @@ process_file() {
266268
267269
# Link file to index.html if link_index is true and file_name is not index.html
268270
[ "$file_name" != "index.html" ] && [ "$link_index" = "true" ] \
269-
&& post_content="<li><time datetime=\"${date_created:-}\"><span class=\"full-date\">${date_created_human:-}</span><span class=\"short-date\">${date_created_short:-}</span></time> &ndash; <a href=\"$file_name\">${title:-"Untitled"}</a></li>" \
271+
&& post_content="<li><a href=\"$file_name\"><span class=\"post-title\">${title:-"Untitled"}</span>${description:+<span class=\"post-desc\">$description</span>}</a><time datetime=\"${date_created:-}\"><span class=\"full-date\">${date_created_human:-}</span><span class=\"short-date\">${date_created_short:-}</span></time></li>" \
270272
&& replace "$BUILD_DIR/index.html" "POSTS" "$post_content" "true" \
271273
&& printf "File linked in index.html => %s\n" "$site_url/$file_name"
272274
@@ -340,7 +342,7 @@ $(cat "syntax.css")"
340342
341343
[ "$file_name" != "index.html" ] && {
342344
[ "$link_index" = "true" ] \
343-
&& post_content="<li><time datetime=\"$date_created\">$date_created</time> &ndash; <a href=\"$file_name\">$title</a></li>" \
345+
&& post_content="<li><time datetime=\"$date_created\">$date_created</time><a href=\"$file_name\">$title</a></li>" \
344346
&& printf "%s\n" "$post_content" >> "$BUILD_DIR/posts_updates.txt" \
345347
&& printf "File linked in index.html => %s\n" "$site_url/$file_name"
346348

‎header.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565

6666
<link rel="preload" href="${ASSETS_DIR}/me.webp" as="image" />
6767

68-
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230d1117'/%3E%3Ctext x='16' y='16' font-family='system-ui,sans-serif' font-size='16' font-weight='bold' fill='%23e6edf3' text-anchor='middle' dominant-baseline='central'%3ESE%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
68+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230d1117'/%3E%3Ctext x='16' y='16' font-family='system-ui,sans-serif' font-size='16' font-weight='bold' fill='%23e6edf3' text-anchor='middle' dominant-baseline='central'%3ESE%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
6969
</head>
7070
<body>
7171
<header>
@@ -74,11 +74,9 @@ <h1>${site_title}</h1>
7474
<nav id="menu">
7575
<div id="nav-left">
7676
<a href="index.html"${nav_index_active}>Index</a>
77-
<a href="https://github.com/${GITHUB_USER}" target="_blank" rel="noopener" title="My Git Repository">Software</a>
7877
</div>
7978
<div id="nav-right">
8079
<a href="contact.html"${nav_contact_active}>Contact</a>
81-
<a href="rss.xml" target="_blank" rel="noopener">RSS</a>
8280
</div>
8381
</nav>
8482
<main id="mainwrap">

‎highlights.html/0.html‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
11
<!-- ARTICLE_JSONLD -->
2-
<article>
2+
<div id="article-description">
33
<h2>${title}</h2>
4-
4+
<p>${description}</p>
5+
<p class="article-dates">
6+
<span><span class="meta-label">PUBLISHED</span> <a class="meta-value" href="${git_creation_commit_link}" target="_blank" rel="noopener"><time datetime="${date_created}">${date_created_short}</time></a></span>
7+
<span><span class="meta-label">LAST UPDATED</span> <a class="meta-value" href="${git_modification_commit_link}" target="_blank" rel="noopener"><time datetime="${date_updated}">${date_updated_short}</time></a></span>
8+
</p>
9+
</div>
10+
<article>
511
<!-- MARKDOWN -->
612

7-
<div id="article-metadata">
13+
</article>
14+
<hr>
15+
<div id="article-commit-history" class="commit-list">
16+
<h2>Latest Updates</h2>
17+
<ul>
18+
${article_commits}
19+
<li>
20+
<a target="_blank" href="https://github.com/${GITHUB_USER}/${GITHUB_REPO}/commits/master/${page_path}" rel="noopener noreferrer">[ ... ]</a>
21+
</li>
22+
</ul>
823
<div id="article-timestamp">
924
<div class="creation-column">
1025
<p>
@@ -13,7 +28,7 @@ <h2>${title}</h2>
1328
</p>
1429
<p>
1530
<strong>Created on:</strong>
16-
<time datetime="${date_created}">${date_created}</time>
31+
<time datetime="${date_created}">${date_created_short}</time>
1732
</p>
1833
<p>
1934
<a target="_blank" href="${git_creation_commit_link}">
@@ -28,7 +43,7 @@ <h2>${title}</h2>
2843
</p>
2944
<p>
3045
<strong>Last modification on:</strong>
31-
<time datetime="${date_updated}">${date_updated}</time>
46+
<time datetime="${date_updated}">${date_updated_short}</time>
3247
</p>
3348
<p>
3449
<a target="_blank" href="${git_modification_commit_link}">
@@ -37,11 +52,4 @@ <h2>${title}</h2>
3752
</p>
3853
</div>
3954
</div>
40-
<div id="article-commit-history">
41-
<p><strong>Commit history for this page:</strong></p>
42-
<ul>
43-
${all_commits}
44-
</ul>
45-
</div>
46-
</div>
47-
</article>
55+
</div>

‎highlights.html/0.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
A public collection of my highlights and notes, automatically synced from books I read on my e-reader and articles I save to [Karakeep](https://github.com/karakeep-app/karakeep).
2-
31
### Highlights from Books
42

53
**Books:**

‎highlights.html/conf‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
title="Highlights & Notes"
2-
description="A public collection of my highlights and notes from books, articles, and other sources."
2+
description="A public collection of my highlights and notes, automatically synced from books I read on my e-reader and articles I save to Karakeep."
33
site_description="$description"
44
page_title="$title"
55
page_path="highlights.html"

‎index.html/0.css‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,15 @@
11
/* Introduction */
22
#init {
3-
font-size: 1.1rem;
43
line-height: 1.7;
54
}
65

76
#init p {
87
margin-bottom: 1em;
98
}
109

11-
/* Posts and Commits sections */
12-
#posts,
13-
#commits {
14-
background: var(--code-bg-color);
15-
border-radius: 10px;
16-
margin-top: 1em;
17-
}
18-
19-
#posts h2,
20-
#commits h2 {
21-
padding: 0.75em 1em 0.5em;
22-
margin: 0;
23-
font-size: 1.25rem;
24-
}
25-
26-
#posts ul,
27-
#commits ul {
28-
padding: 0 1em 1em;
29-
margin: 0;
30-
}
31-
32-
#posts li,
33-
#commits li {
34-
list-style: none;
35-
padding: 0.25em 0;
36-
}
37-
38-
#posts li time,
39-
#commits li time {
40-
font-size: 0.9em;
41-
color: var(--muted);
42-
}
43-
44-
#posts li a,
45-
#commits li a {
46-
margin-left: 0.5em;
47-
}
48-
4910
/* Mobile */
5011
@media (width <= 768px) {
5112
#init {
52-
font-size: 1rem;
5313
line-height: 1.6;
5414
}
55-
56-
#posts li,
57-
#commits li {
58-
white-space: nowrap;
59-
}
60-
61-
#posts ul,
62-
#commits ul {
63-
overflow-x: auto;
64-
}
6515
}

‎index.html/0.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div id="init">
22
<style>
33
#init {
4-
margin-bottom: 2em;
4+
margin-bottom: 0.5em;
55
}
66

77
#init::after {
@@ -68,8 +68,9 @@ <h2>📚 Posts &amp Articles</h2>
6868
<!-- POSTS -->
6969
</ul>
7070
</div>
71-
<div id="commits">
72-
<h2>🔧 Latest Commits</h2>
71+
<hr>
72+
<div id="commits" class="commit-list">
73+
<h2>🔧 Latest Updates</h2>
7374
<ul>
7475
<!-- GIT -->
7576
<li>

0 commit comments

Comments
 (0)