My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
refactor: move media template into own file
+1
-39
server/templates/index.html
+1
-39
server/templates/index.html
···
34
34
Here is what I've {{ consumption_verb }} most recently:
35
35
</h2>
36
36
<div class="grid grid-cols-2 hoverable:grid-cols-{{ media.len() }}">
37
-
{% for media in media -%}
38
-
{% if let Some(url) = media.url %}
39
-
<a href="{{ url }}" target="_blank"
40
-
{% else %}
41
-
<div
42
-
{% endif %}
43
-
class="peer/{{ loop.index }} relative m-2 aspect-square max-h-50 justify-self-center">
44
-
<img
45
-
class="absolute inset-0 aspect-square rounded-xs object-fill"
46
-
aria-hidden="true"
47
-
src="{{ media.image }}"
48
-
/>
49
-
<img
50
-
class="relative aspect-square rounded-xs object-contain backdrop-blur-sm transition-transform hover:scale-116 hover:rounded-lg hover:shadow-lg"
51
-
src="{{ media.image }}"
52
-
alt="Cover art for {{ media.name }}"
53
-
/>
54
-
{% if let Some(url) = media.url %}
55
-
</a>
56
-
{% else %}
57
-
</div>
58
-
{% endif %}
59
-
{% if let Some(url) = media.url %}
60
-
<a
61
-
href="{{ url }}"
62
-
target="_blank"
63
-
{% else %}
64
-
<div
65
-
{% endif %}
66
-
class="mx-2 mt-4 flex flex-col self-center peer-hover/{{ loop.index }}:block hoverable:col-span-full hoverable:row-2 hoverable:hidden"
67
-
>
68
-
<p class="text-2xl text-white">{{ media.name }}</p>
69
-
<p class="text-xl text-gray-700 italic">{{ media.context }}</p>
70
-
{% if let Some(url) = media.url %}
71
-
</a>
72
-
{% else %}
73
-
</div>
74
-
{% endif %}
75
-
{%- endfor %}
37
+
{% for media in media -%} {% include "media.html" %} {%- endfor %}
76
38
</div>
77
39
{%- endif %}
78
40
<p class="font-mono text-3xl text-pink-50">Free Palestine 🇵🇸</p>
+37
server/templates/media.html
+37
server/templates/media.html
···
1
+
{% if let Some(url) = media.url %}
2
+
<a href="{{ url }}" target="_blank"
3
+
{% else %}
4
+
<div
5
+
{% endif %}
6
+
class="peer/{{ loop.index }} relative m-2 aspect-square max-h-50 justify-self-center">
7
+
<img
8
+
class="absolute inset-0 aspect-square rounded-xs object-fill"
9
+
aria-hidden="true"
10
+
src="{{ media.image }}"
11
+
/>
12
+
<img
13
+
class="relative aspect-square rounded-xs object-contain backdrop-blur-sm transition-transform hover:scale-116 hover:rounded-lg hover:shadow-lg"
14
+
src="{{ media.image }}"
15
+
alt="Cover art for {{ media.name }}"
16
+
/>
17
+
{% if let Some(url) = media.url %}
18
+
</a>
19
+
{% else %}
20
+
</div>
21
+
{% endif %}
22
+
{% if let Some(url) = media.url %}
23
+
<a
24
+
href="{{ url }}"
25
+
target="_blank"
26
+
{% else %}
27
+
<div
28
+
{% endif %}
29
+
class="mx-2 mt-4 flex flex-col self-center peer-hover/{{ loop.index }}:block hoverable:col-span-full hoverable:row-2 hoverable:hidden"
30
+
>
31
+
<p class="text-2xl text-white">{{ media.name }}</p>
32
+
<p class="text-xl text-gray-700 italic">{{ media.context }}</p>
33
+
{% if let Some(url) = media.url %}
34
+
</a>
35
+
{% else %}
36
+
</div>
37
+
{% endif %}