Skip to content

Commit 3b4b3bb

Browse files
lannonbrlannonbr
committed
Extracted link section into a template
1 parent 0dfdbb3 commit 3b4b3bb

File tree

3 files changed

+62
-96
lines changed

3 files changed

+62
-96
lines changed

‎statics/css/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,10 @@
33
body {
44
@apply bg-gray-950;
55
}
6+
7+
.section-accent[data-type="create"] {
8+
@apply bg-emerald-500;
9+
}
10+
.section-accent[data-type="consume"] {
11+
@apply bg-blue-500;
12+
}

‎views/_link-section.liquid‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<section class="mb-12">
2+
<header class="flex items-center gap-3 mb-6">
3+
<div
4+
class="w-1 h-8 rounded-full section-accent"
5+
data-type="{{ title | downcase }}"
6+
></div>
7+
<h2 class="text-2xl font-bold text-white">{{ title }}</h2>
8+
</header>
9+
10+
<div class="bg-gray-900/50 rounded-2xl border border-gray-800 p-6">
11+
{% for link in links %}
12+
<article
13+
data-link-id="{{ link.id }}"
14+
class="link-item group px-2 border-b border-gray-800 py-4 hover:bg-gray-800/50 transition-all duration-200"
15+
>
16+
<div class="flex items-start gap-3">
17+
<div class="flex-1 min-w-0">
18+
<a
19+
href="{{ link.url }}"
20+
target="_blank"
21+
rel="noopener noreferrer"
22+
class="text-blue-400 font-semibold hover:text-blue-300 flex items-center gap-2 mb-2 break-all transition-colors"
23+
>
24+
{{ link.description }}
25+
</a>
26+
27+
<p class="text-gray-400 text-sm leading-relaxed">
28+
{{ link.url }}
29+
</p>
30+
</div>
31+
<button
32+
class="delete-link-btn pb-2 text-gray-400 border border-b border-transparent border-b-red-400 transition-colors shrink-0 mt-1"
33+
>
34+
🗑️ Delete
35+
</button>
36+
</div>
37+
</article>
38+
{% endfor %}
39+
40+
<button
41+
data-type="{{ title | downcase }}"
42+
class="add-link-btn flex items-center gap-2 text-gray-500 hover:text-gray-300 py-4 w-full transition-colors group"
43+
>
44+
<span
45+
class="text-emerald-500 group-hover:text-emerald-400 transition-colors"
46+
>+</span
47+
>
48+
<span class="font-medium">Add Link</span>
49+
</button>
50+
</div>
51+
</section>

‎views/index.liquid‎

Lines changed: 4 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -19,103 +19,11 @@
1919
<p class="text-gray-500">Save links across the web for curation</p>
2020
</header>
2121

22-
<section class="mb-12">
23-
<header class="flex items-center gap-3 mb-6">
24-
<div class="w-1 h-8 bg-emerald-500 rounded-full"></div>
25-
<h2 class="text-2xl font-bold text-white">Create</h2>
26-
</header>
22+
{% comment %}<!-- prettier-ignore -->{% endcomment %}
23+
{% include "_link-section.liquid", title: "Create", links: links.create %}
2724

28-
<div class="bg-gray-900/50 rounded-2xl border border-gray-800 p-6">
29-
{% for link in links.create %}
30-
<article
31-
data-link-id="{{ link.id }}"
32-
class="link-item group px-2 border-b border-gray-800 py-4 hover:bg-gray-800/50 transition-all duration-200"
33-
>
34-
<div class="flex items-start gap-3">
35-
<div class="flex-1 min-w-0">
36-
<a
37-
href="{{ link.url }}"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
class="text-blue-400 font-semibold hover:text-blue-300 flex items-center gap-2 mb-2 break-all transition-colors"
41-
>
42-
{{ link.description }}
43-
</a>
44-
45-
<p class="text-gray-400 text-sm leading-relaxed">
46-
{{ link.url }}
47-
</p>
48-
</div>
49-
<button
50-
class="delete-link-btn pb-2 text-gray-400 border border-b border-transparent border-b-red-400 transition-colors shrink-0 mt-1"
51-
>
52-
🗑️ Delete
53-
</button>
54-
</div>
55-
</article>
56-
{% endfor %}
57-
58-
<button
59-
data-type="create"
60-
class="add-link-btn flex items-center gap-2 text-gray-500 hover:text-gray-300 py-4 w-full transition-colors group"
61-
>
62-
<span
63-
class="text-emerald-500 group-hover:text-emerald-400 transition-colors"
64-
>+</span
65-
>
66-
<span class="font-medium">Add Link</span>
67-
</button>
68-
</div>
69-
</section>
70-
71-
<section class="mb-12">
72-
<header class="flex items-center gap-3 mb-6">
73-
<div class="w-1 h-8 bg-blue-500 rounded-full"></div>
74-
<h2 class="text-2xl font-bold text-white">Consume</h2>
75-
</header>
76-
77-
<div class="bg-gray-900/50 rounded-2xl border border-gray-800 p-6">
78-
{% for link in links.consume %}
79-
<article
80-
data-link-id="{{ link.id }}"
81-
class="link-item group px-2 border-b border-gray-800 py-4 hover:bg-gray-800/50 transition-all duration-200"
82-
>
83-
<div class="flex items-start gap-3">
84-
<div class="flex-1 min-w-0">
85-
<a
86-
href="{{ link.url }}"
87-
target="_blank"
88-
rel="noopener noreferrer"
89-
class="text-blue-400 font-semibold hover:text-blue-300 flex items-center gap-2 mb-2 break-all transition-colors"
90-
>
91-
{{ link.description }}
92-
</a>
93-
94-
<p class="text-gray-400 text-sm leading-relaxed">
95-
{{ link.url }}
96-
</p>
97-
</div>
98-
<button
99-
class="delete-link-btn pb-2 text-gray-400 border border-b border-transparent border-b-red-400 transition-colors shrink-0 mt-1"
100-
>
101-
🗑️ Delete
102-
</button>
103-
</div>
104-
</article>
105-
{% endfor %}
106-
107-
<button
108-
data-type="consume"
109-
class="add-link-btn flex items-center gap-2 text-gray-500 hover:text-gray-300 py-4 w-full transition-colors group"
110-
>
111-
<span
112-
class="text-emerald-500 group-hover:text-emerald-400 transition-colors"
113-
>+</span
114-
>
115-
<span class="font-medium">Add Link</span>
116-
</button>
117-
</div>
118-
</section>
25+
{% comment %}<!-- prettier-ignore -->{% endcomment %}
26+
{% include "_link-section.liquid", title: "Consume", links: links.consume %}
11927

12028
<section class="flex gap-3">
12129
<button

0 commit comments

Comments
 (0)