92 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
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 bg-gray-50 font-mono">
32
<div class="flex h-full">
33
<!-- Sidebar -->
34
<div class="w-72 bg-white border-r-2 border-gray-200 p-6 overflow-y-auto">
35
<div class="mb-12">
36
<h1 class="text-2xl font-bold text-gray-900 mb-2 pb-2 border-b-2 border-gray-200">
37
Tidbits, Thoughts
38
</h1>
39
<div class="space-y-2"></div>
40
</div>
41
42
<div>
43
<h2 class="text-lg font-bold text-gray-900 mb-4 pb-2 border-b-2 border-gray-200">
44
Recent Posts
45
</h2>
46
<div class="space-y-6">
47
<%= for {title, date, slug} <- recent_posts() do %>
48
<div class="group">
49
<a href={~p"/post/#{slug}"} class="block">
50
<h3 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
51
{title}
52
</h3>
53
<p class="text-xs text-gray-500 mt-1 font-normal">
54
{date}
55
</p>
56
</a>
57
</div>
58
<% end %>
59
</div>
60
</div>
61
<div>
62
<h2 class="mt-4 text-lg font-bold text-gray-900 mb-4 pb-2 border-b-2 border-gray-200">
63
Posts by Tag
64
</h2>
65
<%= for {tag, _posts} <- posts_by_tag() do %>
66
<div class="space-y-6">
67
<div class="group">
68
<a href={~p"/post/#{tag}"} class="block">
69
<h3 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
70
{tag}
71
</h3>
72
</a>
73
</div>
74
</div>
75
<% end %>
76
</div>
77
</div>
78
79
<!-- Main content -->
80
<main class="flex-1 overflow-y-auto bg-gray-50">
81
{@inner_content}
82
</main>
83
</div>
84
<script>
85
document.addEventListener('DOMContentLoaded', (event) => {
86
document.querySelectorAll('pre code').forEach((block) => {
87
hljs.highlightBlock(block);
88
});
89
});
90
</script>
91
</body>
92
</html>
93