75 lines
2.4 kB
1
defmodule BlogWeb.VimTweetsLive do
2
use BlogWeb, :live_view
3
import BlogWeb.CoreComponents
4
5
@meta_attrs [
6
%{name: "title", content: "Browse Bluesky: In Vim Mode!"},
7
%{name: "description", content: "Use j and k to navigate skeets"},
8
%{property: "og:title", content: "Browse Bluesky: In Vim Mode!"},
9
%{property: "og:description", content: "Use j and k to navigate skeets"},
10
%{property: "og:type", content: "website"}
11
]
12
13
@window_size 12
14
def mount(_params, _session, socket) do
15
tweets = ["Sample tweet 1", "Sample tweet 2", "Sample tweet 3"]
16
17
socket =
18
socket
19
|> assign(
20
cursor: 0,
21
tweets: tweets,
22
visible_tweets: Enum.take(tweets, @window_size),
23
page_title: "Thoughts and Tidbits Blog: Bobby Experiment - vim navigation",
24
meta_attrs: @meta_attrs
25
)
26
27
{:ok, socket}
28
end
29
30
def handle_event("keydown", %{"key" => "j"}, socket) do
31
new_cursor = min(socket.assigns.cursor + 1, length(socket.assigns.tweets) - 1)
32
visible_tweets = get_visible_tweets(socket.assigns.tweets, new_cursor)
33
{:noreply, assign(socket, cursor: new_cursor, visible_tweets: visible_tweets)}
34
end
35
36
def handle_event("keydown", %{"key" => "k"}, socket) do
37
new_cursor = max(socket.assigns.cursor - 1, 0)
38
visible_tweets = get_visible_tweets(socket.assigns.tweets, new_cursor)
39
{:noreply, assign(socket, cursor: new_cursor, visible_tweets: visible_tweets)}
40
end
41
42
def handle_event("keydown", _key, socket), do: {:noreply, socket}
43
44
defp get_visible_tweets(tweets, cursor) do
45
start_idx = max(0, cursor - 2)
46
Enum.slice(tweets, start_idx, @window_size)
47
end
48
49
def render(assigns) do
50
~H"""
51
<.head_tags id="vim-tweets-head-tags" meta_attrs={@meta_attrs} page_title={@page_title}>
52
<title>{@page_title}</title>
53
</.head_tags>
54
<div class="mt-4 text-gray-500">
55
Cursor position: {@cursor}
56
</div>
57
<div class="p-4" phx-window-keydown="keydown">
58
<div class="space-y-4">
59
<%= for {tweet, index} <- Enum.with_index(@visible_tweets) do %>
60
<div class={"p-4 border rounded #{if index == 2, do: "bg-blue-100"}"}>
61
{tweet}
62
</div>
63
<% end %>
64
</div>
65
</div>
66
"""
67
end
68
end
69
70
defmodule Blog.Skeets.Sampler do
71
def sample(_count) do
72
# Return some dummy data
73
[%{skeet: "Sample tweet 1"}, %{skeet: "Sample tweet 2"}, %{skeet: "Sample tweet 3"}]
74
end
75
end
76