Skip to content

Commit e929afd

Browse files
andrei-radulescu-banuandrei-radulescu-banu
committed
devel
1 parent 4b50e8c commit e929afd

File tree

3 files changed

+403
-0
lines changed

3 files changed

+403
-0
lines changed

‎_includes/blog-sidebar.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<div class="border-l-2 border-gray-200 pl-6 space-y-8">
2+
<!-- Recent Posts -->
3+
<div>
4+
<h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Posts</h3>
5+
<div class="space-y-3">
6+
{% for post in site.posts limit:5 %}
7+
<div class="border-b border-gray-100 pb-3 last:border-b-0 last:pb-0">
8+
<a href="{{ post.url | relative_url }}" class="text-gray-700 hover:text-blue-600 transition-colors">
9+
<h4 class="text-sm font-medium leading-tight">{{ post.title }}</h4>
10+
<p class="text-xs text-gray-500 mt-1">{{ post.date | date: "%B %d, %Y" }}</p>
11+
</a>
12+
</div>
13+
{% endfor %}
14+
</div>
15+
</div>
16+
17+
<!-- Archives -->
18+
<div>
19+
<h3 class="text-lg font-semibold text-gray-900 mb-4">
20+
<a href="{{ site.baseurl }}/archives" class="text-gray-900 hover:text-blue-600 transition-colors">Archives</a>
21+
</h3>
22+
<div class="space-y-2">
23+
{% assign posts_by_year = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
24+
{% for year in posts_by_year %}
25+
{% assign posts_by_month = year.items | group_by_exp: "post", "post.date | date: '%B %Y'" %}
26+
{% for month in posts_by_month %}
27+
<div>
28+
<a href="{{ site.baseurl }}/archives?month={{ month.name | url_encode }}" class="text-gray-600 hover:text-blue-600 text-sm transition-colors flex justify-between">
29+
<span>{{ month.name }}</span>
30+
<span class="text-xs text-gray-400">({{ month.items | size }})</span>
31+
</a>
32+
</div>
33+
{% endfor %}
34+
{% endfor %}
35+
</div>
36+
</div>
37+
38+
<!-- Categories -->
39+
<div>
40+
<h3 class="text-lg font-semibold text-gray-900 mb-4">
41+
<a href="{{ site.baseurl }}/categories" class="text-gray-900 hover:text-blue-600 transition-colors">Categories</a>
42+
</h3>
43+
<div class="space-y-2">
44+
{% assign all_categories = site.posts | map: 'categories' | join: ',' | split: ',' | uniq | sort %}
45+
{% for category in all_categories %}
46+
{% if category != '' %}
47+
{% assign posts_in_category = site.posts | where_exp: "post", "post.categories contains category" %}
48+
<div>
49+
<a href="{{ site.baseurl }}/categories?category={{ category | url_encode }}" class="text-gray-600 hover:text-blue-600 text-sm transition-colors flex justify-between">
50+
<span>{{ category | replace: '_', ' ' | capitalize }}</span>
51+
<span class="text-xs text-gray-400">({{ posts_in_category | size }})</span>
52+
</a>
53+
</div>
54+
{% endif %}
55+
{% endfor %}
56+
</div>
57+
</div>
58+
</div>

‎archives.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
layout: default
3+
title: Archives
4+
---
5+
6+
<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 py-4 md:py-12">
7+
<div class="flex flex-col lg:flex-row gap-8 lg:items-start">
8+
<!-- Main Content -->
9+
<main class="lg:w-0 lg:flex-1">
10+
<!-- Header -->
11+
<header class="mb-12 pb-8 border-b border-gray-200">
12+
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Archives</h1>
13+
<p class="text-gray-600 text-xl leading-relaxed">
14+
Browse blog posts by month
15+
</p>
16+
</header>
17+
<div data-pagination="archives">
18+
<!-- Filtered content will be shown/hidden by JavaScript -->
19+
<div id="filtered-view" style="display: none;">
20+
<div class="mb-6">
21+
<h2 id="filtered-title" class="text-2xl font-bold text-gray-900"></h2>
22+
<p class="text-gray-600 mt-2">
23+
<a href="{{ site.baseurl }}/archives" class="text-blue-600 hover:text-blue-800">← Back to all archives</a>
24+
</p>
25+
</div>
26+
<div id="filtered-posts" class="space-y-6"></div>
27+
</div>
28+
29+
<!-- Show all months -->
30+
<div id="all-content">
31+
{% assign posts_by_year = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
32+
{% for year in posts_by_year %}
33+
<div class="mb-12">
34+
<h2 class="text-2xl font-bold text-gray-900 mb-6">{{ year.name }}</h2>
35+
36+
{% assign posts_by_month = year.items | group_by_exp: "post", "post.date | date: '%B %Y'" %}
37+
{% for month in posts_by_month %}
38+
<div class="mb-8 month-section" id="{{ month.name | slugify }}" data-month="{{ month.name }}">
39+
<h3 class="text-xl font-semibold text-gray-800 mb-4">
40+
<a href="{{ site.baseurl }}/archives?month={{ month.name | url_encode }}"
41+
class="text-gray-800 hover:text-blue-600 transition-colors">
42+
{{ month.name }}
43+
</a>
44+
</h3>
45+
46+
<div class="space-y-6">
47+
{% for post in month.items %}
48+
<article class="border-b border-gray-100 pb-6 last:border-b-0 last:pb-0">
49+
<div class="flex flex-col md:flex-row gap-6">
50+
<div class="md:w-1/3 flex-shrink-0">
51+
{%- if post.image -%}
52+
<div class="aspect-video bg-gray-50 rounded-lg overflow-hidden">
53+
<img src="{{ post.image | relative_url }}" alt="{{ post.title | escape }}" class="w-full h-full object-contain p-2">
54+
</div>
55+
{%- else -%}
56+
<div class="aspect-video bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg flex items-center justify-center">
57+
<svg class="w-12 h-12 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
58+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2 2 0 00-2-2h-1"/>
59+
</svg>
60+
</div>
61+
{%- endif -%}
62+
</div>
63+
<div class="flex-1">
64+
<header class="mb-4">
65+
<h4 class="text-lg md:text-xl font-bold text-gray-900 mb-2">
66+
<a href="{{ post.url | relative_url }}" class="text-gray-900 hover:text-blue-600 transition-colors">
67+
{{ post.title }}
68+
</a>
69+
</h4>
70+
<div class="flex flex-wrap items-center gap-3 text-sm text-gray-600">
71+
<time datetime="{{ post.date | date: '%Y-%m-%d' }}">
72+
{{ post.date | date: '%B %d, %Y' }}
73+
</time>
74+
{% if post.categories %}
75+
<span class="text-gray-400">•</span>
76+
<div class="flex flex-wrap gap-2">
77+
{% for category in post.categories %}
78+
<span class="bg-blue-100 text-blue-700 px-2 py-1 rounded-md text-xs font-medium">
79+
{{ category | replace: '_', ' ' | capitalize }}
80+
</span>
81+
{% endfor %}
82+
</div>
83+
{% endif %}
84+
</div>
85+
</header>
86+
87+
{% if post.excerpt %}
88+
<div class="text-gray-700 leading-relaxed mb-4">
89+
{{ post.excerpt | strip_html | truncate: 200 }}
90+
</div>
91+
{% endif %}
92+
93+
<footer>
94+
<a href="{{ post.url | relative_url }}"
95+
class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 font-medium transition-colors">
96+
Read more
97+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
98+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
99+
</svg>
100+
</a>
101+
</footer>
102+
</div>
103+
</div>
104+
</article>
105+
{% endfor %}
106+
</div>
107+
</div>
108+
{% endfor %}
109+
</div>
110+
{% endfor %}
111+
</div>
112+
</div>
113+
114+
{% if site.posts.size == 0 %}
115+
<div class="text-center py-12">
116+
<p class="text-gray-600 text-lg">No blog posts available yet.</p>
117+
</div>
118+
{% endif %}
119+
</main>
120+
121+
<!-- Sidebar - Hidden on mobile -->
122+
<aside class="hidden lg:block w-80 flex-shrink-0">
123+
{% include blog-sidebar.html %}
124+
</aside>
125+
</div>
126+
</div>
127+
128+
<script>
129+
// Handle URL parameters for filtering and deep linking to specific months
130+
document.addEventListener('DOMContentLoaded', function() {
131+
const urlParams = new URLSearchParams(window.location.search);
132+
const month = urlParams.get('month');
133+
134+
if (month) {
135+
// Find the month section
136+
const monthSections = document.querySelectorAll('.month-section');
137+
let targetSection = null;
138+
139+
for (const section of monthSections) {
140+
if (section.dataset.month === month) {
141+
targetSection = section;
142+
break;
143+
}
144+
}
145+
146+
if (targetSection) {
147+
// Show filtered view
148+
const filteredView = document.getElementById('filtered-view');
149+
const allContent = document.getElementById('all-content');
150+
const filteredTitle = document.getElementById('filtered-title');
151+
const filteredPosts = document.getElementById('filtered-posts');
152+
153+
// Hide all content and show filtered view
154+
allContent.style.display = 'none';
155+
filteredView.style.display = 'block';
156+
157+
// Set the title
158+
filteredTitle.textContent = month;
159+
160+
// Copy the posts from the target section
161+
const postsContainer = targetSection.querySelector('.space-y-6');
162+
if (postsContainer) {
163+
filteredPosts.innerHTML = postsContainer.innerHTML;
164+
}
165+
} else {
166+
// Month not found, show all content (fallback)
167+
console.warn('Month not found:', month);
168+
}
169+
}
170+
});
171+
</script>

0 commit comments

Comments
 (0)