jekyll-post-card 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/assets/post-card.css +10 -1
- data/demo/.gitignore +5 -0
- data/demo/Gemfile +7 -0
- data/demo/_config.yml +14 -0
- data/demo/_layouts/default.html +189 -0
- data/demo/index.html +86 -0
- data/lib/jekyll-post-card/post_tag.rb +16 -17
- data/lib/jekyll-post-card/version.rb +1 -1
- metadata +11 -4
- data/demo.html +0 -821
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e8ddd3b4e16814056ae6f6bad270b35e356f309dd30e72fa4f7e28f119a3637f
|
|
4
|
+
data.tar.gz: bf07009df66603585e9bdbb2a04710dfcbb2187f13309ad613a0c76b37862265
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 51b4297461e6f3d7ad08f0f2836492053c0ba241d8d8d874f73224e50a100a0114d18e1326a54529693bdd44a2e1bb283cfa0c0afb14c2a7ab05420757bdc92d
|
|
7
|
+
data.tar.gz: 5f1ada83a477ba2d15bb0eea87cfc7f906f3b4069dce5b356593d3f7a36bb09332bdcbf096e4ed07c8d45efeb04c95daec9c396405461ba666530662c72f602c
|
data/assets/post-card.css
CHANGED
|
@@ -71,9 +71,15 @@ html[data-mode="dark"] body {
|
|
|
71
71
|
box-shadow: 0 12px 40px var(--post-card-shadow), 0 0 0 1px var(--post-card-accent) !important;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
/* The link
|
|
74
|
+
/* The link overlay covering the entire card */
|
|
75
75
|
.post-card .post-card-link,
|
|
76
76
|
.post-card > a.post-card-link {
|
|
77
|
+
position: absolute !important;
|
|
78
|
+
top: 0 !important;
|
|
79
|
+
left: 0 !important;
|
|
80
|
+
right: 0 !important;
|
|
81
|
+
bottom: 0 !important;
|
|
82
|
+
z-index: 10 !important;
|
|
77
83
|
display: block !important;
|
|
78
84
|
text-decoration: none !important;
|
|
79
85
|
color: inherit !important;
|
|
@@ -103,6 +109,7 @@ html[data-mode="dark"] body {
|
|
|
103
109
|
gap: 0 !important;
|
|
104
110
|
position: relative !important;
|
|
105
111
|
flex-direction: row !important;
|
|
112
|
+
z-index: 0 !important;
|
|
106
113
|
}
|
|
107
114
|
|
|
108
115
|
/* Image Container */
|
|
@@ -156,6 +163,7 @@ html[data-mode="dark"] body {
|
|
|
156
163
|
visibility: visible !important;
|
|
157
164
|
position: relative !important;
|
|
158
165
|
z-index: 1 !important;
|
|
166
|
+
pointer-events: none !important;
|
|
159
167
|
}
|
|
160
168
|
|
|
161
169
|
.post-card:hover .post-card-image,
|
|
@@ -170,6 +178,7 @@ html[data-mode="dark"] body {
|
|
|
170
178
|
display: flex !important;
|
|
171
179
|
align-items: center !important;
|
|
172
180
|
justify-content: center !important;
|
|
181
|
+
pointer-events: none !important;
|
|
173
182
|
}
|
|
174
183
|
|
|
175
184
|
.post-card .post-card-placeholder svg {
|
data/demo/.gitignore
ADDED
data/demo/Gemfile
ADDED
data/demo/_config.yml
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
title: Jekyll Post Card Demo
|
|
2
|
+
description: Beautiful, responsive post cards for your Jekyll site
|
|
3
|
+
baseurl: ""
|
|
4
|
+
url: ""
|
|
5
|
+
|
|
6
|
+
plugins:
|
|
7
|
+
- jekyll-post-card
|
|
8
|
+
|
|
9
|
+
# Exclude gem development files from the built site
|
|
10
|
+
exclude:
|
|
11
|
+
- Gemfile
|
|
12
|
+
- Gemfile.lock
|
|
13
|
+
- vendor
|
|
14
|
+
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{{ page.title | default: site.title }}</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
:root {
|
|
12
|
+
--bg-primary: #1a1a2e;
|
|
13
|
+
--bg-secondary: #16213e;
|
|
14
|
+
--bg-card: #0f3460;
|
|
15
|
+
--bg-card-hover: #1a4a7a;
|
|
16
|
+
--text-primary: #eaeaea;
|
|
17
|
+
--text-secondary: #a8a8b3;
|
|
18
|
+
--text-muted: #6b6b7b;
|
|
19
|
+
--accent: #e94560;
|
|
20
|
+
--accent-secondary: #ff6b6b;
|
|
21
|
+
--border: rgba(233, 69, 96, 0.2);
|
|
22
|
+
--shadow: rgba(0, 0, 0, 0.4);
|
|
23
|
+
--gradient-start: #e94560;
|
|
24
|
+
--gradient-end: #ff6b6b;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.light-theme {
|
|
28
|
+
--bg-primary: #faf9f7;
|
|
29
|
+
--bg-secondary: #f0ebe3;
|
|
30
|
+
--bg-card: #ffffff;
|
|
31
|
+
--bg-card-hover: #fff8f0;
|
|
32
|
+
--text-primary: #2d2a26;
|
|
33
|
+
--text-secondary: #5a5650;
|
|
34
|
+
--text-muted: #8a8680;
|
|
35
|
+
--accent: #d35400;
|
|
36
|
+
--accent-secondary: #e67e22;
|
|
37
|
+
--border: rgba(211, 84, 0, 0.15);
|
|
38
|
+
--shadow: rgba(45, 42, 38, 0.12);
|
|
39
|
+
--gradient-start: #d35400;
|
|
40
|
+
--gradient-end: #e67e22;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
44
|
+
|
|
45
|
+
body {
|
|
46
|
+
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
47
|
+
background: var(--bg-primary);
|
|
48
|
+
background-image:
|
|
49
|
+
radial-gradient(ellipse at 10% 20%, rgba(233, 69, 96, 0.08) 0%, transparent 50%),
|
|
50
|
+
radial-gradient(ellipse at 90% 80%, rgba(255, 107, 107, 0.06) 0%, transparent 50%);
|
|
51
|
+
min-height: 100vh;
|
|
52
|
+
color: var(--text-primary);
|
|
53
|
+
line-height: 1.6;
|
|
54
|
+
padding: 60px 20px;
|
|
55
|
+
transition: background 0.3s ease, color 0.3s ease;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.container { max-width: 900px; margin: 0 auto; }
|
|
59
|
+
|
|
60
|
+
header { text-align: center; margin-bottom: 80px; }
|
|
61
|
+
|
|
62
|
+
h1 {
|
|
63
|
+
font-family: 'Instrument Serif', Georgia, serif;
|
|
64
|
+
font-size: clamp(2.5rem, 6vw, 4rem);
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
letter-spacing: -0.02em;
|
|
67
|
+
margin-bottom: 16px;
|
|
68
|
+
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
|
69
|
+
-webkit-background-clip: text;
|
|
70
|
+
-webkit-text-fill-color: transparent;
|
|
71
|
+
background-clip: text;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.subtitle {
|
|
75
|
+
font-size: 1.1rem;
|
|
76
|
+
color: var(--text-secondary);
|
|
77
|
+
max-width: 500px;
|
|
78
|
+
margin: 0 auto 30px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.theme-toggle {
|
|
82
|
+
display: inline-flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 12px;
|
|
85
|
+
padding: 10px 20px;
|
|
86
|
+
background: var(--bg-card);
|
|
87
|
+
border: 1px solid var(--border);
|
|
88
|
+
border-radius: 30px;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
font-size: 0.9rem;
|
|
91
|
+
color: var(--text-secondary);
|
|
92
|
+
transition: all 0.3s ease;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.theme-toggle:hover {
|
|
96
|
+
background: var(--bg-card-hover);
|
|
97
|
+
border-color: var(--accent);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.section-title {
|
|
101
|
+
font-family: 'Instrument Serif', Georgia, serif;
|
|
102
|
+
font-size: 1.8rem;
|
|
103
|
+
font-weight: 400;
|
|
104
|
+
margin-bottom: 30px;
|
|
105
|
+
color: var(--text-primary);
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
gap: 12px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.section-title::before {
|
|
112
|
+
content: '';
|
|
113
|
+
width: 4px;
|
|
114
|
+
height: 28px;
|
|
115
|
+
background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
|
|
116
|
+
border-radius: 2px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
section { margin-bottom: 80px; }
|
|
120
|
+
|
|
121
|
+
.section-desc {
|
|
122
|
+
color: var(--text-secondary);
|
|
123
|
+
margin-bottom: 20px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.usage-code {
|
|
127
|
+
background: var(--bg-secondary);
|
|
128
|
+
border: 1px solid var(--border);
|
|
129
|
+
border-radius: 12px;
|
|
130
|
+
padding: 20px 24px;
|
|
131
|
+
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
132
|
+
font-size: 0.9rem;
|
|
133
|
+
color: var(--text-secondary);
|
|
134
|
+
overflow-x: auto;
|
|
135
|
+
margin-top: 20px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.usage-code code { color: var(--accent); }
|
|
139
|
+
|
|
140
|
+
.cards-row {
|
|
141
|
+
display: grid;
|
|
142
|
+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
143
|
+
gap: 20px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.cards-row .post-card { margin: 0; }
|
|
147
|
+
.cards-row .post-card .post-card-inner { flex-direction: column; }
|
|
148
|
+
.cards-row .post-card .post-card-image-container { width: 100%; height: 140px; }
|
|
149
|
+
.cards-row .post-card .post-card-content { padding: 20px; }
|
|
150
|
+
.cards-row .post-card .post-card-title { font-size: 1.2rem; }
|
|
151
|
+
|
|
152
|
+
.cards-three { grid-template-columns: repeat(3, 1fr); }
|
|
153
|
+
|
|
154
|
+
@media (max-width: 900px) {
|
|
155
|
+
.cards-three { grid-template-columns: repeat(2, 1fr); }
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@media (max-width: 600px) {
|
|
159
|
+
.cards-row, .cards-three { grid-template-columns: 1fr; }
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.note {
|
|
163
|
+
background: rgba(233, 69, 96, 0.08);
|
|
164
|
+
border-left: 3px solid var(--accent);
|
|
165
|
+
padding: 16px 20px;
|
|
166
|
+
border-radius: 0 8px 8px 0;
|
|
167
|
+
margin-top: 30px;
|
|
168
|
+
font-size: 0.9rem;
|
|
169
|
+
color: var(--text-secondary);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.note strong { color: var(--text-primary); }
|
|
173
|
+
.note code { color: var(--accent); }
|
|
174
|
+
</style>
|
|
175
|
+
<link rel="stylesheet" href="{{ '/assets/post-card.css' | relative_url }}">
|
|
176
|
+
</head>
|
|
177
|
+
<body>
|
|
178
|
+
<div class="container">
|
|
179
|
+
{{ content }}
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<script>
|
|
183
|
+
function toggleTheme() {
|
|
184
|
+
document.body.classList.toggle('light-theme');
|
|
185
|
+
}
|
|
186
|
+
</script>
|
|
187
|
+
</body>
|
|
188
|
+
</html>
|
|
189
|
+
|
data/demo/index.html
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
title: Jekyll Post Card Demo
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<header>
|
|
7
|
+
<h1>Jekyll Post Card</h1>
|
|
8
|
+
<p class="subtitle">Beautiful, responsive post cards for your Jekyll site. Embed internal posts or external articles with a simple Liquid tag.</p>
|
|
9
|
+
<button class="theme-toggle" onclick="toggleTheme()">
|
|
10
|
+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zM12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
11
|
+
<span>Toggle Theme</span>
|
|
12
|
+
</button>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<section>
|
|
16
|
+
<h2 class="section-title">External Article</h2>
|
|
17
|
+
<p class="section-desc">Embed articles from any website using the full URL.</p>
|
|
18
|
+
|
|
19
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal %}
|
|
20
|
+
|
|
21
|
+
<div class="usage-code">
|
|
22
|
+
<code>{% raw %}{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal %}{% endraw %}</code>
|
|
23
|
+
</div>
|
|
24
|
+
</section>
|
|
25
|
+
|
|
26
|
+
<section>
|
|
27
|
+
<h2 class="section-title">Card Variants</h2>
|
|
28
|
+
|
|
29
|
+
<h3 style="color: var(--text-secondary); margin: 20px 0 15px; font-size: 1rem;">Compact Variant</h3>
|
|
30
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal variant:compact %}
|
|
31
|
+
|
|
32
|
+
<h3 style="color: var(--text-secondary); margin: 30px 0 15px; font-size: 1rem;">Hide Image</h3>
|
|
33
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal hide_image:true %}
|
|
34
|
+
|
|
35
|
+
<div class="note">
|
|
36
|
+
<strong>Note:</strong> Card variants can be applied using parameters: <code>{% raw %}{% post_card /my-post variant:compact %}{% endraw %}</code> or <code>{% raw %}{% post_card /my-post hide_image:true %}{% endraw %}</code>
|
|
37
|
+
</div>
|
|
38
|
+
</section>
|
|
39
|
+
|
|
40
|
+
<section>
|
|
41
|
+
<h2 class="section-title">Side by Side (Grid Layout)</h2>
|
|
42
|
+
<p class="section-desc">Display related posts in a grid layout for better visual organization.</p>
|
|
43
|
+
|
|
44
|
+
<div class="cards-row">
|
|
45
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal %}
|
|
46
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal %}
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="usage-code">
|
|
50
|
+
<code>{% raw %}<div class="cards-row">
|
|
51
|
+
{% post_card /2024/12/15/building-modern-cli-ruby %}
|
|
52
|
+
{% post_card /2024/12/12/docker-fundamentals %}
|
|
53
|
+
</div>{% endraw %}</code>
|
|
54
|
+
</div>
|
|
55
|
+
</section>
|
|
56
|
+
|
|
57
|
+
<section>
|
|
58
|
+
<h2 class="section-title">Three Column Grid</h2>
|
|
59
|
+
<p class="section-desc">Perfect for showcasing a series of related articles or a "You might also like" section.</p>
|
|
60
|
+
|
|
61
|
+
<div class="cards-row cards-three">
|
|
62
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal %}
|
|
63
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal %}
|
|
64
|
+
{% post_card https://r0x0d.com/posts/packaging-for-fedora-fuzzytail-watching-logs-on-terminal %}
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="note">
|
|
68
|
+
<strong>Tip:</strong> Wrap multiple <code>{% raw %}{% post_card %}{% endraw %}</code> tags in a container with <code>display: grid</code> to create multi-column layouts.
|
|
69
|
+
</div>
|
|
70
|
+
</section>
|
|
71
|
+
|
|
72
|
+
<section>
|
|
73
|
+
<h2 class="section-title">Installation</h2>
|
|
74
|
+
<div class="usage-code">
|
|
75
|
+
<pre style="margin: 0; color: var(--text-secondary);">
|
|
76
|
+
<span style="color: var(--text-muted)"># Add to your Gemfile</span>
|
|
77
|
+
gem <code>'jekyll-post-card'</code>
|
|
78
|
+
|
|
79
|
+
<span style="color: var(--text-muted)"># Or install directly</span>
|
|
80
|
+
gem install <code>jekyll-post-card</code>
|
|
81
|
+
|
|
82
|
+
<span style="color: var(--text-muted)"># Add to _config.yml</span>
|
|
83
|
+
plugins:
|
|
84
|
+
- <code>jekyll-post-card</code></pre>
|
|
85
|
+
</div>
|
|
86
|
+
</section>
|
|
@@ -144,25 +144,24 @@ module Jekyll
|
|
|
144
144
|
|
|
145
145
|
<<~HTML
|
|
146
146
|
<div class="post-card#{variant_class}#{external_class}#{image_class}" data-url="#{escaped_url}">
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
<div class="post-card-
|
|
151
|
-
<
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
#{formatted_date ? "<span class=\"post-card-date\">#{formatted_date}</span>" : ""}
|
|
157
|
-
</div>
|
|
158
|
-
<h3 class="post-card-title">#{escaped_title}</h3>
|
|
159
|
-
<p class="post-card-excerpt">#{escaped_description}</p>
|
|
160
|
-
</div>
|
|
161
|
-
<div class="post-card-arrow">
|
|
162
|
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
147
|
+
<div class="post-card-inner">
|
|
148
|
+
#{image_html}
|
|
149
|
+
<div class="post-card-content">
|
|
150
|
+
<div class="post-card-meta">
|
|
151
|
+
<span class="post-card-source">
|
|
152
|
+
#{source_icon(source_type)}
|
|
153
|
+
#{escaped_source}
|
|
154
|
+
</span>
|
|
155
|
+
#{formatted_date ? "<span class=\"post-card-date\">#{formatted_date}</span>" : ""}
|
|
163
156
|
</div>
|
|
157
|
+
<h3 class="post-card-title">#{escaped_title}</h3>
|
|
158
|
+
<p class="post-card-excerpt">#{escaped_description}</p>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="post-card-arrow">
|
|
161
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
164
162
|
</div>
|
|
165
|
-
|
|
163
|
+
<a href="#{url}" class="post-card-link" target="#{target}"#{rel_attr}></a>
|
|
164
|
+
</div>
|
|
166
165
|
</div>
|
|
167
166
|
HTML
|
|
168
167
|
end
|
metadata
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-post-card
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rodolfo Olivieri
|
|
8
|
+
autorequire:
|
|
8
9
|
bindir: bin
|
|
9
10
|
cert_chain: []
|
|
10
|
-
date:
|
|
11
|
+
date: 2025-12-19 00:00:00.000000000 Z
|
|
11
12
|
dependencies:
|
|
12
13
|
- !ruby/object:Gem::Dependency
|
|
13
14
|
name: jekyll
|
|
@@ -126,7 +127,11 @@ files:
|
|
|
126
127
|
- README.md
|
|
127
128
|
- Rakefile
|
|
128
129
|
- assets/post-card.css
|
|
129
|
-
- demo
|
|
130
|
+
- demo/.gitignore
|
|
131
|
+
- demo/Gemfile
|
|
132
|
+
- demo/_config.yml
|
|
133
|
+
- demo/_layouts/default.html
|
|
134
|
+
- demo/index.html
|
|
130
135
|
- lib/jekyll-post-card.rb
|
|
131
136
|
- lib/jekyll-post-card/fetcher.rb
|
|
132
137
|
- lib/jekyll-post-card/generator.rb
|
|
@@ -140,6 +145,7 @@ metadata:
|
|
|
140
145
|
source_code_uri: https://github.com/r0x0d/jekyll-post-card
|
|
141
146
|
changelog_uri: https://github.com/r0x0d/jekyll-post-card/blob/main/CHANGELOG.md
|
|
142
147
|
rubygems_mfa_required: 'true'
|
|
148
|
+
post_install_message:
|
|
143
149
|
rdoc_options: []
|
|
144
150
|
require_paths:
|
|
145
151
|
- lib
|
|
@@ -154,7 +160,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
154
160
|
- !ruby/object:Gem::Version
|
|
155
161
|
version: '0'
|
|
156
162
|
requirements: []
|
|
157
|
-
rubygems_version: 3.
|
|
163
|
+
rubygems_version: 3.4.19
|
|
164
|
+
signing_key:
|
|
158
165
|
specification_version: 4
|
|
159
166
|
summary: A Jekyll plugin to display beautiful post cards in your Markdown
|
|
160
167
|
test_files: []
|
data/demo.html
DELETED
|
@@ -1,821 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Jekyll Post Card - Demo</title>
|
|
7
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
-
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
|
|
10
|
-
<style>
|
|
11
|
-
:root {
|
|
12
|
-
/* Dark theme - Monokai inspired */
|
|
13
|
-
--bg-primary: #1a1a2e;
|
|
14
|
-
--bg-secondary: #16213e;
|
|
15
|
-
--bg-card: #0f3460;
|
|
16
|
-
--bg-card-hover: #1a4a7a;
|
|
17
|
-
--text-primary: #eaeaea;
|
|
18
|
-
--text-secondary: #a8a8b3;
|
|
19
|
-
--text-muted: #6b6b7b;
|
|
20
|
-
--accent: #e94560;
|
|
21
|
-
--accent-secondary: #ff6b6b;
|
|
22
|
-
--border: rgba(233, 69, 96, 0.2);
|
|
23
|
-
--shadow: rgba(0, 0, 0, 0.4);
|
|
24
|
-
--gradient-start: #e94560;
|
|
25
|
-
--gradient-end: #ff6b6b;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.light-theme {
|
|
29
|
-
--bg-primary: #faf9f7;
|
|
30
|
-
--bg-secondary: #f0ebe3;
|
|
31
|
-
--bg-card: #ffffff;
|
|
32
|
-
--bg-card-hover: #fff8f0;
|
|
33
|
-
--text-primary: #2d2a26;
|
|
34
|
-
--text-secondary: #5a5650;
|
|
35
|
-
--text-muted: #8a8680;
|
|
36
|
-
--accent: #d35400;
|
|
37
|
-
--accent-secondary: #e67e22;
|
|
38
|
-
--border: rgba(211, 84, 0, 0.15);
|
|
39
|
-
--shadow: rgba(45, 42, 38, 0.12);
|
|
40
|
-
--gradient-start: #d35400;
|
|
41
|
-
--gradient-end: #e67e22;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
* {
|
|
45
|
-
margin: 0;
|
|
46
|
-
padding: 0;
|
|
47
|
-
box-sizing: border-box;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
body {
|
|
51
|
-
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
52
|
-
background: var(--bg-primary);
|
|
53
|
-
background-image:
|
|
54
|
-
radial-gradient(ellipse at 10% 20%, rgba(233, 69, 96, 0.08) 0%, transparent 50%),
|
|
55
|
-
radial-gradient(ellipse at 90% 80%, rgba(255, 107, 107, 0.06) 0%, transparent 50%);
|
|
56
|
-
min-height: 100vh;
|
|
57
|
-
color: var(--text-primary);
|
|
58
|
-
line-height: 1.6;
|
|
59
|
-
padding: 60px 20px;
|
|
60
|
-
transition: background 0.3s ease, color 0.3s ease;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.container {
|
|
64
|
-
max-width: 900px;
|
|
65
|
-
margin: 0 auto;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
header {
|
|
69
|
-
text-align: center;
|
|
70
|
-
margin-bottom: 80px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
h1 {
|
|
74
|
-
font-family: 'Instrument Serif', Georgia, serif;
|
|
75
|
-
font-size: clamp(2.5rem, 6vw, 4rem);
|
|
76
|
-
font-weight: 400;
|
|
77
|
-
letter-spacing: -0.02em;
|
|
78
|
-
margin-bottom: 16px;
|
|
79
|
-
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
|
|
80
|
-
-webkit-background-clip: text;
|
|
81
|
-
-webkit-text-fill-color: transparent;
|
|
82
|
-
background-clip: text;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.subtitle {
|
|
86
|
-
font-size: 1.1rem;
|
|
87
|
-
color: var(--text-secondary);
|
|
88
|
-
max-width: 500px;
|
|
89
|
-
margin: 0 auto 30px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.theme-toggle {
|
|
93
|
-
display: inline-flex;
|
|
94
|
-
align-items: center;
|
|
95
|
-
gap: 12px;
|
|
96
|
-
padding: 10px 20px;
|
|
97
|
-
background: var(--bg-card);
|
|
98
|
-
border: 1px solid var(--border);
|
|
99
|
-
border-radius: 30px;
|
|
100
|
-
cursor: pointer;
|
|
101
|
-
font-size: 0.9rem;
|
|
102
|
-
color: var(--text-secondary);
|
|
103
|
-
transition: all 0.3s ease;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.theme-toggle:hover {
|
|
107
|
-
background: var(--bg-card-hover);
|
|
108
|
-
border-color: var(--accent);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.theme-toggle svg {
|
|
112
|
-
width: 18px;
|
|
113
|
-
height: 18px;
|
|
114
|
-
fill: currentColor;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.section-title {
|
|
118
|
-
font-family: 'Instrument Serif', Georgia, serif;
|
|
119
|
-
font-size: 1.8rem;
|
|
120
|
-
font-weight: 400;
|
|
121
|
-
margin-bottom: 30px;
|
|
122
|
-
color: var(--text-primary);
|
|
123
|
-
display: flex;
|
|
124
|
-
align-items: center;
|
|
125
|
-
gap: 12px;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.section-title::before {
|
|
129
|
-
content: '';
|
|
130
|
-
width: 4px;
|
|
131
|
-
height: 28px;
|
|
132
|
-
background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
|
|
133
|
-
border-radius: 2px;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
section {
|
|
137
|
-
margin-bottom: 80px;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/* ============================================
|
|
141
|
-
POST CARD STYLES - Copy these to your Jekyll site
|
|
142
|
-
============================================ */
|
|
143
|
-
|
|
144
|
-
.post-card {
|
|
145
|
-
display: block;
|
|
146
|
-
background: var(--bg-card);
|
|
147
|
-
border: 1px solid var(--border);
|
|
148
|
-
border-radius: 16px;
|
|
149
|
-
overflow: hidden;
|
|
150
|
-
text-decoration: none;
|
|
151
|
-
color: inherit;
|
|
152
|
-
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
153
|
-
box-shadow: 0 4px 20px var(--shadow);
|
|
154
|
-
margin: 24px 0;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.post-card:hover {
|
|
158
|
-
transform: translateY(-4px);
|
|
159
|
-
background: var(--bg-card-hover);
|
|
160
|
-
border-color: var(--accent);
|
|
161
|
-
box-shadow: 0 12px 40px var(--shadow), 0 0 0 1px var(--accent);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.post-card-inner {
|
|
165
|
-
display: flex;
|
|
166
|
-
gap: 0;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.post-card-image-container {
|
|
170
|
-
flex-shrink: 0;
|
|
171
|
-
width: 200px;
|
|
172
|
-
height: 160px;
|
|
173
|
-
overflow: hidden;
|
|
174
|
-
position: relative;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.post-card-image {
|
|
178
|
-
width: 100%;
|
|
179
|
-
height: 100%;
|
|
180
|
-
object-fit: cover;
|
|
181
|
-
transition: transform 0.4s ease;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.post-card:hover .post-card-image {
|
|
185
|
-
transform: scale(1.05);
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.post-card-placeholder {
|
|
189
|
-
width: 100%;
|
|
190
|
-
height: 100%;
|
|
191
|
-
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
|
|
192
|
-
display: flex;
|
|
193
|
-
align-items: center;
|
|
194
|
-
justify-content: center;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.post-card-placeholder svg {
|
|
198
|
-
width: 48px;
|
|
199
|
-
height: 48px;
|
|
200
|
-
opacity: 0.3;
|
|
201
|
-
fill: var(--text-muted);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.post-card-content {
|
|
205
|
-
flex: 1;
|
|
206
|
-
padding: 24px 28px;
|
|
207
|
-
display: flex;
|
|
208
|
-
flex-direction: column;
|
|
209
|
-
justify-content: center;
|
|
210
|
-
min-width: 0;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
.post-card-meta {
|
|
214
|
-
display: flex;
|
|
215
|
-
align-items: center;
|
|
216
|
-
gap: 12px;
|
|
217
|
-
margin-bottom: 10px;
|
|
218
|
-
flex-wrap: wrap;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.post-card-source {
|
|
222
|
-
display: inline-flex;
|
|
223
|
-
align-items: center;
|
|
224
|
-
gap: 6px;
|
|
225
|
-
font-size: 0.75rem;
|
|
226
|
-
font-weight: 600;
|
|
227
|
-
text-transform: uppercase;
|
|
228
|
-
letter-spacing: 0.08em;
|
|
229
|
-
color: var(--accent);
|
|
230
|
-
background: rgba(233, 69, 96, 0.1);
|
|
231
|
-
padding: 4px 10px;
|
|
232
|
-
border-radius: 6px;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.post-card-source svg {
|
|
236
|
-
width: 12px;
|
|
237
|
-
height: 12px;
|
|
238
|
-
fill: currentColor;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.post-card-date {
|
|
242
|
-
font-size: 0.8rem;
|
|
243
|
-
color: var(--text-muted);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
.post-card-title {
|
|
247
|
-
font-family: 'Instrument Serif', Georgia, serif;
|
|
248
|
-
font-size: 1.4rem;
|
|
249
|
-
font-weight: 400;
|
|
250
|
-
line-height: 1.3;
|
|
251
|
-
margin-bottom: 8px;
|
|
252
|
-
color: var(--text-primary);
|
|
253
|
-
overflow: hidden;
|
|
254
|
-
text-overflow: ellipsis;
|
|
255
|
-
display: -webkit-box;
|
|
256
|
-
-webkit-line-clamp: 2;
|
|
257
|
-
-webkit-box-orient: vertical;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.post-card-excerpt {
|
|
261
|
-
font-size: 0.9rem;
|
|
262
|
-
color: var(--text-secondary);
|
|
263
|
-
line-height: 1.5;
|
|
264
|
-
overflow: hidden;
|
|
265
|
-
text-overflow: ellipsis;
|
|
266
|
-
display: -webkit-box;
|
|
267
|
-
-webkit-line-clamp: 2;
|
|
268
|
-
-webkit-box-orient: vertical;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.post-card-arrow {
|
|
272
|
-
position: absolute;
|
|
273
|
-
right: 20px;
|
|
274
|
-
top: 50%;
|
|
275
|
-
transform: translateY(-50%) translateX(-8px);
|
|
276
|
-
opacity: 0;
|
|
277
|
-
transition: all 0.3s ease;
|
|
278
|
-
color: var(--accent);
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.post-card:hover .post-card-arrow {
|
|
282
|
-
opacity: 1;
|
|
283
|
-
transform: translateY(-50%) translateX(0);
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
.post-card-arrow svg {
|
|
287
|
-
width: 20px;
|
|
288
|
-
height: 20px;
|
|
289
|
-
fill: currentColor;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
/* Compact variant */
|
|
293
|
-
.post-card.compact .post-card-inner {
|
|
294
|
-
flex-direction: row;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
.post-card.compact .post-card-image-container {
|
|
298
|
-
width: 120px;
|
|
299
|
-
height: 100px;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.post-card.compact .post-card-content {
|
|
303
|
-
padding: 16px 20px;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
.post-card.compact .post-card-title {
|
|
307
|
-
font-size: 1.1rem;
|
|
308
|
-
-webkit-line-clamp: 1;
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.post-card.compact .post-card-excerpt {
|
|
312
|
-
-webkit-line-clamp: 1;
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
/* No image variant */
|
|
316
|
-
.post-card.no-image .post-card-image-container {
|
|
317
|
-
display: none;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
/* Vertical variant */
|
|
321
|
-
.post-card.vertical .post-card-inner {
|
|
322
|
-
flex-direction: column;
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.post-card.vertical .post-card-image-container {
|
|
326
|
-
width: 100%;
|
|
327
|
-
height: 180px;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
/* External link indicator */
|
|
331
|
-
.post-card.external .post-card-source::after {
|
|
332
|
-
content: '↗';
|
|
333
|
-
margin-left: 4px;
|
|
334
|
-
font-size: 0.9em;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
/* Error state */
|
|
338
|
-
.post-card.error {
|
|
339
|
-
border-color: rgba(255, 100, 100, 0.3);
|
|
340
|
-
background: rgba(255, 100, 100, 0.05);
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.post-card.error .post-card-title {
|
|
344
|
-
color: var(--accent);
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
/* Responsive */
|
|
348
|
-
@media (max-width: 600px) {
|
|
349
|
-
.post-card-inner {
|
|
350
|
-
flex-direction: column;
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
.post-card-image-container {
|
|
354
|
-
width: 100%;
|
|
355
|
-
height: 160px;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.post-card.compact .post-card-inner {
|
|
359
|
-
flex-direction: column;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
.post-card.compact .post-card-image-container {
|
|
363
|
-
width: 100%;
|
|
364
|
-
height: 120px;
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
/* ============================================
|
|
369
|
-
END POST CARD STYLES
|
|
370
|
-
============================================ */
|
|
371
|
-
|
|
372
|
-
.usage-code {
|
|
373
|
-
background: var(--bg-secondary);
|
|
374
|
-
border: 1px solid var(--border);
|
|
375
|
-
border-radius: 12px;
|
|
376
|
-
padding: 20px 24px;
|
|
377
|
-
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
378
|
-
font-size: 0.9rem;
|
|
379
|
-
color: var(--text-secondary);
|
|
380
|
-
overflow-x: auto;
|
|
381
|
-
margin-top: 20px;
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
.usage-code code {
|
|
385
|
-
color: var(--accent);
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
.cards-grid {
|
|
389
|
-
display: flex;
|
|
390
|
-
flex-direction: column;
|
|
391
|
-
gap: 16px;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
.cards-row {
|
|
395
|
-
display: grid;
|
|
396
|
-
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
397
|
-
gap: 20px;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.cards-row .post-card {
|
|
401
|
-
margin: 0;
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
.cards-row .post-card .post-card-inner {
|
|
405
|
-
flex-direction: column;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
.cards-row .post-card .post-card-image-container {
|
|
409
|
-
width: 100%;
|
|
410
|
-
height: 140px;
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
.cards-row .post-card .post-card-content {
|
|
414
|
-
padding: 20px;
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
.cards-row .post-card .post-card-title {
|
|
418
|
-
font-size: 1.2rem;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.cards-three {
|
|
422
|
-
grid-template-columns: repeat(3, 1fr);
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
@media (max-width: 900px) {
|
|
426
|
-
.cards-three {
|
|
427
|
-
grid-template-columns: repeat(2, 1fr);
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
@media (max-width: 600px) {
|
|
432
|
-
.cards-row,
|
|
433
|
-
.cards-three {
|
|
434
|
-
grid-template-columns: 1fr;
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
.mixed-layout {
|
|
439
|
-
display: grid;
|
|
440
|
-
grid-template-columns: 1.5fr 1fr;
|
|
441
|
-
gap: 20px;
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
@media (max-width: 768px) {
|
|
445
|
-
.mixed-layout {
|
|
446
|
-
grid-template-columns: 1fr;
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
.note {
|
|
451
|
-
background: rgba(233, 69, 96, 0.08);
|
|
452
|
-
border-left: 3px solid var(--accent);
|
|
453
|
-
padding: 16px 20px;
|
|
454
|
-
border-radius: 0 8px 8px 0;
|
|
455
|
-
margin-top: 30px;
|
|
456
|
-
font-size: 0.9rem;
|
|
457
|
-
color: var(--text-secondary);
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
.note strong {
|
|
461
|
-
color: var(--text-primary);
|
|
462
|
-
}
|
|
463
|
-
</style>
|
|
464
|
-
</head>
|
|
465
|
-
<body>
|
|
466
|
-
<div class="container">
|
|
467
|
-
<header>
|
|
468
|
-
<h1>Jekyll Post Card</h1>
|
|
469
|
-
<p class="subtitle">Beautiful, responsive post cards for your Jekyll site. Embed internal posts or external articles with a simple Liquid tag.</p>
|
|
470
|
-
<button class="theme-toggle" onclick="toggleTheme()">
|
|
471
|
-
<svg class="sun-icon" viewBox="0 0 24 24"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zM12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
472
|
-
<span>Toggle Theme</span>
|
|
473
|
-
</button>
|
|
474
|
-
</header>
|
|
475
|
-
|
|
476
|
-
<section>
|
|
477
|
-
<h2 class="section-title">Internal Post</h2>
|
|
478
|
-
<p style="color: var(--text-secondary); margin-bottom: 20px;">Link to posts within your Jekyll site using the post's permalink.</p>
|
|
479
|
-
|
|
480
|
-
<!-- {% post_card /2024/12/15/building-modern-cli-ruby %} renders as: -->
|
|
481
|
-
<div class="post-card" data-url="/2024/12/15/building-modern-cli-ruby">
|
|
482
|
-
<a href="/2024/12/15/building-modern-cli-ruby" class="post-card-link" target="_self">
|
|
483
|
-
<div class="post-card-inner">
|
|
484
|
-
<div class="post-card-image-container">
|
|
485
|
-
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop" alt="Building a Modern CLI Tool with Ruby" class="post-card-image" loading="lazy">
|
|
486
|
-
</div>
|
|
487
|
-
<div class="post-card-content">
|
|
488
|
-
<div class="post-card-meta">
|
|
489
|
-
<span class="post-card-source">
|
|
490
|
-
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
|
491
|
-
Internal
|
|
492
|
-
</span>
|
|
493
|
-
<span class="post-card-date">December 15, 2024</span>
|
|
494
|
-
</div>
|
|
495
|
-
<h3 class="post-card-title">Building a Modern CLI Tool with Ruby</h3>
|
|
496
|
-
<p class="post-card-excerpt">Learn how to create beautiful command-line interfaces using Ruby, with colorful output, progress bars, and interactive prompts.</p>
|
|
497
|
-
</div>
|
|
498
|
-
<div class="post-card-arrow">
|
|
499
|
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
500
|
-
</div>
|
|
501
|
-
</div>
|
|
502
|
-
</a>
|
|
503
|
-
</div>
|
|
504
|
-
|
|
505
|
-
<div class="usage-code">
|
|
506
|
-
<code>{% post_card /2024/12/15/building-modern-cli-ruby %}</code>
|
|
507
|
-
</div>
|
|
508
|
-
</section>
|
|
509
|
-
|
|
510
|
-
<section>
|
|
511
|
-
<h2 class="section-title">External Article</h2>
|
|
512
|
-
<p style="color: var(--text-secondary); margin-bottom: 20px;">Embed articles from any website using the full URL.</p>
|
|
513
|
-
|
|
514
|
-
<a href="#" class="post-card external">
|
|
515
|
-
<div class="post-card-inner" style="position: relative;">
|
|
516
|
-
<div class="post-card-image-container">
|
|
517
|
-
<img src="https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?w=400&h=300&fit=crop" alt="The Future of Web Development" class="post-card-image">
|
|
518
|
-
</div>
|
|
519
|
-
<div class="post-card-content">
|
|
520
|
-
<div class="post-card-meta">
|
|
521
|
-
<span class="post-card-source">
|
|
522
|
-
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
|
523
|
-
dev.to
|
|
524
|
-
</span>
|
|
525
|
-
<span class="post-card-date">December 10, 2024</span>
|
|
526
|
-
</div>
|
|
527
|
-
<h3 class="post-card-title">The Future of Web Development: Trends to Watch in 2025</h3>
|
|
528
|
-
<p class="post-card-excerpt">Explore the emerging technologies and methodologies that will shape web development in the coming year, from AI-assisted coding to edge computing.</p>
|
|
529
|
-
</div>
|
|
530
|
-
<div class="post-card-arrow">
|
|
531
|
-
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
532
|
-
</div>
|
|
533
|
-
</div>
|
|
534
|
-
</a>
|
|
535
|
-
|
|
536
|
-
<div class="usage-code">
|
|
537
|
-
<code>{% post_card https://dev.to/example/future-web-development-2025 %}</code>
|
|
538
|
-
</div>
|
|
539
|
-
</section>
|
|
540
|
-
|
|
541
|
-
<section>
|
|
542
|
-
<h2 class="section-title">Card Variants</h2>
|
|
543
|
-
<div class="cards-grid">
|
|
544
|
-
|
|
545
|
-
<!-- Compact variant -->
|
|
546
|
-
<a href="#" class="post-card compact">
|
|
547
|
-
<div class="post-card-inner" style="position: relative;">
|
|
548
|
-
<div class="post-card-image-container">
|
|
549
|
-
<img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=400&h=300&fit=crop" alt="Quick Tip" class="post-card-image">
|
|
550
|
-
</div>
|
|
551
|
-
<div class="post-card-content">
|
|
552
|
-
<div class="post-card-meta">
|
|
553
|
-
<span class="post-card-source">
|
|
554
|
-
<svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
|
555
|
-
Internal
|
|
556
|
-
</span>
|
|
557
|
-
<span class="post-card-date">Dec 8, 2024</span>
|
|
558
|
-
</div>
|
|
559
|
-
<h3 class="post-card-title">Quick Tip: Ruby Method Chaining</h3>
|
|
560
|
-
<p class="post-card-excerpt">A concise guide to elegant method chaining patterns in Ruby.</p>
|
|
561
|
-
</div>
|
|
562
|
-
<div class="post-card-arrow">
|
|
563
|
-
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
564
|
-
</div>
|
|
565
|
-
</div>
|
|
566
|
-
</a>
|
|
567
|
-
|
|
568
|
-
<!-- No image variant -->
|
|
569
|
-
<a href="#" class="post-card no-image external">
|
|
570
|
-
<div class="post-card-inner" style="position: relative;">
|
|
571
|
-
<div class="post-card-image-container">
|
|
572
|
-
<div class="post-card-placeholder">
|
|
573
|
-
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z"/></svg>
|
|
574
|
-
</div>
|
|
575
|
-
</div>
|
|
576
|
-
<div class="post-card-content">
|
|
577
|
-
<div class="post-card-meta">
|
|
578
|
-
<span class="post-card-source">
|
|
579
|
-
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
|
580
|
-
medium.com
|
|
581
|
-
</span>
|
|
582
|
-
<span class="post-card-date">December 5, 2024</span>
|
|
583
|
-
</div>
|
|
584
|
-
<h3 class="post-card-title">Understanding WebAssembly: A Deep Dive</h3>
|
|
585
|
-
<p class="post-card-excerpt">WebAssembly is revolutionizing how we think about web performance. This comprehensive guide explains everything you need to know.</p>
|
|
586
|
-
</div>
|
|
587
|
-
<div class="post-card-arrow">
|
|
588
|
-
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
589
|
-
</div>
|
|
590
|
-
</div>
|
|
591
|
-
</a>
|
|
592
|
-
</div>
|
|
593
|
-
|
|
594
|
-
<div class="note">
|
|
595
|
-
<strong>Note:</strong> Card variants can be applied using the <code>variant</code> parameter: <code>{% post_card /my-post variant:compact %}</code>
|
|
596
|
-
</div>
|
|
597
|
-
</section>
|
|
598
|
-
|
|
599
|
-
<section>
|
|
600
|
-
<h2 class="section-title">Side by Side (2 Columns)</h2>
|
|
601
|
-
<p style="color: var(--text-secondary); margin-bottom: 20px;">Display related posts in a grid layout for better visual organization.</p>
|
|
602
|
-
|
|
603
|
-
<div class="cards-row">
|
|
604
|
-
<a href="#" class="post-card">
|
|
605
|
-
<div class="post-card-inner" style="position: relative;">
|
|
606
|
-
<div class="post-card-image-container">
|
|
607
|
-
<img src="https://images.unsplash.com/photo-1629654297299-c8506221ca97?w=400&h=300&fit=crop" alt="Docker Fundamentals" class="post-card-image">
|
|
608
|
-
</div>
|
|
609
|
-
<div class="post-card-content">
|
|
610
|
-
<div class="post-card-meta">
|
|
611
|
-
<span class="post-card-source">
|
|
612
|
-
<svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
|
613
|
-
Internal
|
|
614
|
-
</span>
|
|
615
|
-
<span class="post-card-date">Dec 12, 2024</span>
|
|
616
|
-
</div>
|
|
617
|
-
<h3 class="post-card-title">Docker Fundamentals: From Zero to Hero</h3>
|
|
618
|
-
<p class="post-card-excerpt">Master containerization with this comprehensive guide covering everything from basic concepts to production deployments.</p>
|
|
619
|
-
</div>
|
|
620
|
-
<div class="post-card-arrow">
|
|
621
|
-
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
622
|
-
</div>
|
|
623
|
-
</div>
|
|
624
|
-
</a>
|
|
625
|
-
|
|
626
|
-
<a href="#" class="post-card external">
|
|
627
|
-
<div class="post-card-inner" style="position: relative;">
|
|
628
|
-
<div class="post-card-image-container">
|
|
629
|
-
<img src="https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9?w=400&h=300&fit=crop" alt="Kubernetes" class="post-card-image">
|
|
630
|
-
</div>
|
|
631
|
-
<div class="post-card-content">
|
|
632
|
-
<div class="post-card-meta">
|
|
633
|
-
<span class="post-card-source">
|
|
634
|
-
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>
|
|
635
|
-
kubernetes.io
|
|
636
|
-
</span>
|
|
637
|
-
<span class="post-card-date">Dec 10, 2024</span>
|
|
638
|
-
</div>
|
|
639
|
-
<h3 class="post-card-title">Kubernetes Best Practices for 2025</h3>
|
|
640
|
-
<p class="post-card-excerpt">Learn the latest patterns and anti-patterns for running production workloads on Kubernetes clusters.</p>
|
|
641
|
-
</div>
|
|
642
|
-
<div class="post-card-arrow">
|
|
643
|
-
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
644
|
-
</div>
|
|
645
|
-
</div>
|
|
646
|
-
</a>
|
|
647
|
-
</div>
|
|
648
|
-
|
|
649
|
-
<div class="usage-code">
|
|
650
|
-
<code>{% post_card /2024/12/12/docker-fundamentals %} {% post_card https://kubernetes.io/blog/best-practices %}</code>
|
|
651
|
-
</div>
|
|
652
|
-
</section>
|
|
653
|
-
|
|
654
|
-
<section>
|
|
655
|
-
<h2 class="section-title">Three Column Grid</h2>
|
|
656
|
-
<p style="color: var(--text-secondary); margin-bottom: 20px;">Perfect for showcasing a series of related articles or a "You might also like" section.</p>
|
|
657
|
-
|
|
658
|
-
<div class="cards-row cards-three">
|
|
659
|
-
<a href="#" class="post-card">
|
|
660
|
-
<div class="post-card-inner" style="position: relative;">
|
|
661
|
-
<div class="post-card-image-container">
|
|
662
|
-
<img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=400&h=300&fit=crop" alt="Security" class="post-card-image">
|
|
663
|
-
</div>
|
|
664
|
-
<div class="post-card-content">
|
|
665
|
-
<div class="post-card-meta">
|
|
666
|
-
<span class="post-card-source">
|
|
667
|
-
<svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
|
668
|
-
Part 1
|
|
669
|
-
</span>
|
|
670
|
-
</div>
|
|
671
|
-
<h3 class="post-card-title">Web Security Basics</h3>
|
|
672
|
-
<p class="post-card-excerpt">Understanding XSS, CSRF, and SQL injection attacks.</p>
|
|
673
|
-
</div>
|
|
674
|
-
</div>
|
|
675
|
-
</a>
|
|
676
|
-
|
|
677
|
-
<a href="#" class="post-card">
|
|
678
|
-
<div class="post-card-inner" style="position: relative;">
|
|
679
|
-
<div class="post-card-image-container">
|
|
680
|
-
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=300&fit=crop" alt="Authentication" class="post-card-image">
|
|
681
|
-
</div>
|
|
682
|
-
<div class="post-card-content">
|
|
683
|
-
<div class="post-card-meta">
|
|
684
|
-
<span class="post-card-source">
|
|
685
|
-
<svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
|
686
|
-
Part 2
|
|
687
|
-
</span>
|
|
688
|
-
</div>
|
|
689
|
-
<h3 class="post-card-title">Authentication Patterns</h3>
|
|
690
|
-
<p class="post-card-excerpt">JWT, OAuth2, and session-based auth explained.</p>
|
|
691
|
-
</div>
|
|
692
|
-
</div>
|
|
693
|
-
</a>
|
|
694
|
-
|
|
695
|
-
<a href="#" class="post-card">
|
|
696
|
-
<div class="post-card-inner" style="position: relative;">
|
|
697
|
-
<div class="post-card-image-container">
|
|
698
|
-
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=400&h=300&fit=crop" alt="Encryption" class="post-card-image">
|
|
699
|
-
</div>
|
|
700
|
-
<div class="post-card-content">
|
|
701
|
-
<div class="post-card-meta">
|
|
702
|
-
<span class="post-card-source">
|
|
703
|
-
<svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
|
|
704
|
-
Part 3
|
|
705
|
-
</span>
|
|
706
|
-
</div>
|
|
707
|
-
<h3 class="post-card-title">Encryption Deep Dive</h3>
|
|
708
|
-
<p class="post-card-excerpt">Symmetric vs asymmetric encryption in practice.</p>
|
|
709
|
-
</div>
|
|
710
|
-
</div>
|
|
711
|
-
</a>
|
|
712
|
-
</div>
|
|
713
|
-
|
|
714
|
-
<div class="note">
|
|
715
|
-
<strong>Tip:</strong> Wrap multiple <code>{% post_card %}</code> tags in a container with <code>display: grid</code> to create multi-column layouts in your Jekyll templates.
|
|
716
|
-
</div>
|
|
717
|
-
</section>
|
|
718
|
-
|
|
719
|
-
<section>
|
|
720
|
-
<h2 class="section-title">Mixed Layout</h2>
|
|
721
|
-
<p style="color: var(--text-secondary); margin-bottom: 20px;">Combine featured posts with supporting articles for visual hierarchy.</p>
|
|
722
|
-
|
|
723
|
-
<div class="mixed-layout">
|
|
724
|
-
<a href="#" class="post-card" style="margin: 0;">
|
|
725
|
-
<div class="post-card-inner" style="position: relative; flex-direction: column;">
|
|
726
|
-
<div class="post-card-image-container" style="width: 100%; height: 200px;">
|
|
727
|
-
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=600&h=400&fit=crop" alt="AI in 2025" class="post-card-image">
|
|
728
|
-
</div>
|
|
729
|
-
<div class="post-card-content">
|
|
730
|
-
<div class="post-card-meta">
|
|
731
|
-
<span class="post-card-source" style="background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); color: white;">
|
|
732
|
-
★ Featured
|
|
733
|
-
</span>
|
|
734
|
-
<span class="post-card-date">December 14, 2024</span>
|
|
735
|
-
</div>
|
|
736
|
-
<h3 class="post-card-title">The State of AI in 2025: What Developers Need to Know</h3>
|
|
737
|
-
<p class="post-card-excerpt">From LLMs to autonomous agents, explore how artificial intelligence is reshaping the development landscape and what skills you'll need to stay ahead.</p>
|
|
738
|
-
</div>
|
|
739
|
-
<div class="post-card-arrow">
|
|
740
|
-
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
741
|
-
</div>
|
|
742
|
-
</div>
|
|
743
|
-
</a>
|
|
744
|
-
|
|
745
|
-
<div style="display: flex; flex-direction: column; gap: 20px;">
|
|
746
|
-
<a href="#" class="post-card compact" style="margin: 0;">
|
|
747
|
-
<div class="post-card-inner" style="position: relative; flex-direction: column;">
|
|
748
|
-
<div class="post-card-image-container" style="width: 100%; height: 80px;">
|
|
749
|
-
<img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=200&fit=crop" alt="ChatGPT" class="post-card-image">
|
|
750
|
-
</div>
|
|
751
|
-
<div class="post-card-content" style="padding: 14px;">
|
|
752
|
-
<h3 class="post-card-title" style="font-size: 1rem;">Building with ChatGPT API</h3>
|
|
753
|
-
</div>
|
|
754
|
-
</div>
|
|
755
|
-
</a>
|
|
756
|
-
|
|
757
|
-
<a href="#" class="post-card compact" style="margin: 0;">
|
|
758
|
-
<div class="post-card-inner" style="position: relative; flex-direction: column;">
|
|
759
|
-
<div class="post-card-image-container" style="width: 100%; height: 80px;">
|
|
760
|
-
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=400&h=200&fit=crop" alt="ML Ops" class="post-card-image">
|
|
761
|
-
</div>
|
|
762
|
-
<div class="post-card-content" style="padding: 14px;">
|
|
763
|
-
<h3 class="post-card-title" style="font-size: 1rem;">MLOps Best Practices</h3>
|
|
764
|
-
</div>
|
|
765
|
-
</div>
|
|
766
|
-
</a>
|
|
767
|
-
</div>
|
|
768
|
-
</div>
|
|
769
|
-
|
|
770
|
-
</section>
|
|
771
|
-
|
|
772
|
-
<section>
|
|
773
|
-
<h2 class="section-title">Error State</h2>
|
|
774
|
-
<p style="color: var(--text-secondary); margin-bottom: 20px;">When a post cannot be found or metadata cannot be fetched.</p>
|
|
775
|
-
|
|
776
|
-
<div class="post-card error no-image">
|
|
777
|
-
<div class="post-card-inner">
|
|
778
|
-
<div class="post-card-image-container">
|
|
779
|
-
<div class="post-card-placeholder">
|
|
780
|
-
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
|
|
781
|
-
</div>
|
|
782
|
-
</div>
|
|
783
|
-
<div class="post-card-content">
|
|
784
|
-
<div class="post-card-meta">
|
|
785
|
-
<span class="post-card-source" style="background: rgba(255, 100, 100, 0.15); color: #ff6b6b;">
|
|
786
|
-
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
|
|
787
|
-
Error
|
|
788
|
-
</span>
|
|
789
|
-
</div>
|
|
790
|
-
<h3 class="post-card-title">Unable to load post</h3>
|
|
791
|
-
<p class="post-card-excerpt">The post at /2024/12/01/non-existent-post could not be found. Please check the URL and try again.</p>
|
|
792
|
-
</div>
|
|
793
|
-
</div>
|
|
794
|
-
</div>
|
|
795
|
-
</section>
|
|
796
|
-
|
|
797
|
-
<section>
|
|
798
|
-
<h2 class="section-title">Installation</h2>
|
|
799
|
-
<div class="usage-code">
|
|
800
|
-
<pre style="margin: 0; color: var(--text-secondary);">
|
|
801
|
-
<span style="color: var(--text-muted)"># Add to your Gemfile</span>
|
|
802
|
-
gem <code>'jekyll-post-card'</code>
|
|
803
|
-
|
|
804
|
-
<span style="color: var(--text-muted)"># Or install directly</span>
|
|
805
|
-
gem install <code>jekyll-post-card</code>
|
|
806
|
-
|
|
807
|
-
<span style="color: var(--text-muted)"># Add to _config.yml</span>
|
|
808
|
-
plugins:
|
|
809
|
-
- <code>jekyll-post-card</code></pre>
|
|
810
|
-
</div>
|
|
811
|
-
</section>
|
|
812
|
-
</div>
|
|
813
|
-
|
|
814
|
-
<script>
|
|
815
|
-
function toggleTheme() {
|
|
816
|
-
document.body.classList.toggle('light-theme');
|
|
817
|
-
}
|
|
818
|
-
</script>
|
|
819
|
-
</body>
|
|
820
|
-
</html>
|
|
821
|
-
|