85 lines
3.2 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
18
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
19
<!-- Add Elixir language support -->
20
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/elixir.min.js"></script>
21
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/heex.min.js"></script>
22
</head>
23
<body class="h-full bg-gray-50 font-mono">
24
<div class="flex h-full">
25
<!-- Sidebar -->
26
<div class="w-72 bg-white border-r-2 border-gray-200 p-6 overflow-y-auto">
27
<div class="mb-12">
28
<h1 class="text-2xl font-bold text-gray-900 mb-2 pb-2 border-b-2 border-gray-200">
29
Tidbits, Thoughts
30
</h1>
31
<div class="space-y-2">
32
</div>
33
</div>
34
35
<div>
36
<h2 class="text-lg font-bold text-gray-900 mb-4 pb-2 border-b-2 border-gray-200">
37
Recent Posts
38
</h2>
39
<div class="space-y-6">
40
<%= for {title, date, slug} <- recent_posts() do %>
41
<div class="group">
42
<a href={~p"/post/#{slug}"} class="block">
43
<h3 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
44
<%= title %>
45
</h3>
46
<p class="text-xs text-gray-500 mt-1 font-normal">
47
<%= date %>
48
</p>
49
</a>
50
</div>
51
<% end %>
52
</div>
53
</div>
54
<div>
55
<h2 class="mt-4 text-lg font-bold text-gray-900 mb-4 pb-2 border-b-2 border-gray-200">
56
Posts by Tag
57
</h2>
58
<%= for {tag, _posts} <- posts_by_tag() do %>
59
<div class="space-y-6">
60
<div class="group">
61
<a href={~p"/post/#{tag}"} class="block">
62
<h3 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
63
<%= tag %>
64
</h3>
65
</a>
66
</div>
67
</div>
68
<% end %>
69
</div>
70
</div>
71
72
<!-- Main content -->
73
<main class="flex-1 overflow-y-auto bg-gray-50">
74
<%= @inner_content %>
75
</main>
76
</div>
77
<script>
78
document.addEventListener('DOMContentLoaded', (event) => {
79
document.querySelectorAll('pre code').forEach((block) => {
80
hljs.highlightBlock(block);
81
});
82
});
83
</script>
84
</body>
85
</html>
86