130 lines
6.0 kB
1
<!DOCTYPE html>
2
<html lang="en" class="h-full">
3
<head>
4
<meta charset="utf-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
<meta name="csrf-token" content={get_csrf_token()} />
7
8
<title>{assigns[:page_title] || "Thoughts and Tidbits"}</title>
9
10
<%= for meta <- assigns[:meta_tags] || [] do %>
11
<meta {meta} />
12
<% end %>
13
14
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
15
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
16
</script>
17
<link
18
rel="stylesheet"
19
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
20
/>
21
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js">
22
</script>
23
<!-- Add Elixir language support -->
24
<script
25
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/elixir.min.js"
26
>
27
</script>
28
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/heex.min.js">
29
</script>
30
</head>
31
<body class="h-full font-mono bg-gradient-to-br from-cyan-50 to-indigo-50">
32
<!-- Sidebar Toggle Button -->
33
<button id="sidebar-toggle" class="fixed top-4 left-4 z-50 p-2 rounded-full bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
34
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
35
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
36
</svg>
37
</button>
38
39
<div class="flex h-full">
40
<!-- Sidebar - Hidden by default -->
41
<div id="sidebar" class="fixed inset-y-0 left-0 w-72 bg-gradient-to-b from-fuchsia-100 to-cyan-100 border-r-2 border-fuchsia-300 p-6 overflow-y-auto transform -translate-x-full transition-transform duration-300 ease-in-out z-40 shadow-2xl">
42
<button id="sidebar-close" class="absolute top-4 right-4 text-gray-700 hover:text-fuchsia-600">
43
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
44
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
45
</svg>
46
</button>
47
48
<div class="mb-12 pt-8">
49
<h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600 mb-2 pb-2 border-b-2 border-fuchsia-200">
50
Tidbits, Thoughts
51
</h1>
52
<div class="text-sm text-gray-600 mt-2">
53
<div class="inline-flex items-center">
54
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-fuchsia-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
55
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
56
</svg>
57
<span><%= total_readers() %> <%= if total_readers() == 1, do: "reader", else: "readers" %> online</span>
58
</div>
59
</div>
60
</div>
61
62
<div>
63
<h2 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600 mb-4 pb-2 border-b-2 border-fuchsia-200">
64
Recent Posts
65
</h2>
66
<div class="space-y-6">
67
<%= for {title, date, slug} <- recent_posts() do %>
68
<div class="group">
69
<a href={~p"/post/#{slug}"} class="block">
70
<h3 class="text-sm font-medium text-gray-800 group-hover:text-fuchsia-600 transition-colors">
71
{title}
72
</h3>
73
<p class="text-xs text-gray-500 mt-1 font-normal">
74
{date}
75
</p>
76
</a>
77
</div>
78
<% end %>
79
</div>
80
</div>
81
<div>
82
<h2 class="mt-8 text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600 mb-4 pb-2 border-b-2 border-fuchsia-200">
83
Posts by Tag
84
</h2>
85
<div class="flex flex-wrap gap-2">
86
<%= for {tag, _posts} <- posts_by_tag() do %>
87
<a href={~p"/post/#{tag}"} class="inline-block px-3 py-1 bg-gradient-to-r from-fuchsia-200 to-cyan-200 rounded-full text-xs font-medium text-gray-800 hover:from-fuchsia-300 hover:to-cyan-300 transition-colors">
88
{tag}
89
</a>
90
<% end %>
91
</div>
92
</div>
93
</div>
94
95
<!-- Main content -->
96
<main class="flex-1 overflow-y-auto px-4">
97
{@inner_content}
98
</main>
99
</div>
100
101
<script>
102
document.addEventListener('DOMContentLoaded', (event) => {
103
// Highlight.js initialization
104
document.querySelectorAll('pre code').forEach((block) => {
105
hljs.highlightBlock(block);
106
});
107
108
// Sidebar toggle functionality
109
const sidebar = document.getElementById('sidebar');
110
const sidebarToggle = document.getElementById('sidebar-toggle');
111
const sidebarClose = document.getElementById('sidebar-close');
112
113
sidebarToggle.addEventListener('click', () => {
114
sidebar.classList.toggle('-translate-x-full');
115
});
116
117
sidebarClose.addEventListener('click', () => {
118
sidebar.classList.add('-translate-x-full');
119
});
120
121
// Close sidebar when clicking outside
122
document.addEventListener('click', (event) => {
123
if (!sidebar.contains(event.target) && !sidebarToggle.contains(event.target)) {
124
sidebar.classList.add('-translate-x-full');
125
}
126
});
127
});
128
</script>
129
</body>
130
</html>
131