feat: Adjust comment styling
This commit is contained in:
parent
18260122bb
commit
82e435ddd8
10 changed files with 18502 additions and 160 deletions
|
@ -138,6 +138,8 @@
|
||||||
BDFR_BROWSER_BASE_DIRECTORY = "/Volumes/MediaScraper/Reddit";
|
BDFR_BROWSER_BASE_DIRECTORY = "/Volumes/MediaScraper/Reddit";
|
||||||
BDFR_BROWSER_REPO_USER = db-user;
|
BDFR_BROWSER_REPO_USER = db-user;
|
||||||
BDFR_BROWSER_REPO_HOST = db-host;
|
BDFR_BROWSER_REPO_HOST = db-host;
|
||||||
|
RELEASE_DISTRIBUTION = "none";
|
||||||
|
RELEASE_COOKIE = "no_dist_anyway";
|
||||||
};
|
};
|
||||||
|
|
||||||
processes = {
|
processes = {
|
||||||
|
|
|
@ -7,12 +7,8 @@ defmodule BdfrBrowser.HTTP.Plug do
|
||||||
plug :dispatch
|
plug :dispatch
|
||||||
|
|
||||||
get "/" do
|
get "/" do
|
||||||
tpl_params = [
|
tpl_args = [subreddits: Subreddit.names() |> Repo.all()]
|
||||||
subreddits: Subreddit.names() |> Repo.all()
|
content = render_template("index", tpl_args)
|
||||||
]
|
|
||||||
|
|
||||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/index.eex")
|
|
||||||
content = EEx.eval_file(tpl_file, tpl_params)
|
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||||
|
@ -22,13 +18,12 @@ defmodule BdfrBrowser.HTTP.Plug do
|
||||||
get "/r/:subreddit" do
|
get "/r/:subreddit" do
|
||||||
subreddit_record = Repo.get_by(Subreddit, name: subreddit)
|
subreddit_record = Repo.get_by(Subreddit, name: subreddit)
|
||||||
|
|
||||||
tpl_params = [
|
tpl_args = [
|
||||||
subreddit: subreddit,
|
subreddit: subreddit,
|
||||||
dates: subreddit_record |> Post.date_listing() |> Repo.all()
|
dates: subreddit_record |> Post.date_listing() |> Repo.all()
|
||||||
]
|
]
|
||||||
|
|
||||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/subreddit.eex")
|
content = render_template("subreddit", tpl_args)
|
||||||
content = EEx.eval_file(tpl_file, tpl_params)
|
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||||
|
@ -38,14 +33,13 @@ defmodule BdfrBrowser.HTTP.Plug do
|
||||||
get "/r/:subreddit/:date" do
|
get "/r/:subreddit/:date" do
|
||||||
subreddit_record = Repo.get_by(Subreddit, name: subreddit)
|
subreddit_record = Repo.get_by(Subreddit, name: subreddit)
|
||||||
|
|
||||||
tpl_params = [
|
tpl_args = [
|
||||||
subreddit: subreddit,
|
subreddit: subreddit,
|
||||||
date: date,
|
date: date,
|
||||||
posts: subreddit_record |> Post.during_month(date) |> Repo.all()
|
posts: subreddit_record |> Post.during_month(date) |> Repo.all()
|
||||||
]
|
]
|
||||||
|
|
||||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/subreddit_posts.eex")
|
content = render_template("subreddit_posts", tpl_args)
|
||||||
content = EEx.eval_file(tpl_file, tpl_params)
|
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||||
|
@ -55,7 +49,7 @@ defmodule BdfrBrowser.HTTP.Plug do
|
||||||
get "/r/:subreddit/:date/:id" do
|
get "/r/:subreddit/:date/:id" do
|
||||||
post_record = Post |> Repo.get(id) |> Repo.preload(comments: :children)
|
post_record = Post |> Repo.get(id) |> Repo.preload(comments: :children)
|
||||||
|
|
||||||
tpl_params = [
|
tpl_args = [
|
||||||
subreddit: subreddit,
|
subreddit: subreddit,
|
||||||
date: date,
|
date: date,
|
||||||
post: post_record,
|
post: post_record,
|
||||||
|
@ -63,14 +57,27 @@ defmodule BdfrBrowser.HTTP.Plug do
|
||||||
comment_template: Application.app_dir(:bdfr_browser, "priv/templates/http/_comment.eex")
|
comment_template: Application.app_dir(:bdfr_browser, "priv/templates/http/_comment.eex")
|
||||||
]
|
]
|
||||||
|
|
||||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/post.eex")
|
content = render_template("post", tpl_args)
|
||||||
content = EEx.eval_file(tpl_file, tpl_params)
|
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||||
|> send_resp(200, content)
|
|> send_resp(200, content)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
get "/static/*path" do
|
||||||
|
file_path = Application.app_dir(:bdfr_browser, Path.join("priv/static", path))
|
||||||
|
|
||||||
|
if File.exists?(file_path) do
|
||||||
|
{:ok, file} = File.read(file_path)
|
||||||
|
|
||||||
|
conn
|
||||||
|
|> put_resp_header("content-type", mime_from_ext(file_path))
|
||||||
|
|> send_resp(200, file)
|
||||||
|
else
|
||||||
|
send_resp(conn, 404, "Not Found")
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
get "/media/*path" do
|
get "/media/*path" do
|
||||||
base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
|
base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
|
||||||
joined_path = Path.join(path)
|
joined_path = Path.join(path)
|
||||||
|
@ -96,6 +103,12 @@ defmodule BdfrBrowser.HTTP.Plug do
|
||||||
|
|
||||||
# Helper
|
# Helper
|
||||||
|
|
||||||
|
defp render_template(name, args) do
|
||||||
|
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/application.eex")
|
||||||
|
embedded_tpl = Application.app_dir(:bdfr_browser, "priv/templates/http/#{name}.eex")
|
||||||
|
EEx.eval_file(tpl_file, embedded_template: embedded_tpl, embedded_args: args)
|
||||||
|
end
|
||||||
|
|
||||||
defp post_media(post, args) do
|
defp post_media(post, args) do
|
||||||
base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
|
base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
|
||||||
post_dir = Path.join([base_directory | Keyword.fetch!(args, :paths)])
|
post_dir = Path.join([base_directory | Keyword.fetch!(args, :paths)])
|
||||||
|
@ -127,6 +140,8 @@ defmodule BdfrBrowser.HTTP.Plug do
|
||||||
".png" -> "image/png"
|
".png" -> "image/png"
|
||||||
".gif" -> "image/gif"
|
".gif" -> "image/gif"
|
||||||
".mp4" -> "video/mp4"
|
".mp4" -> "video/mp4"
|
||||||
|
".js" -> "text/javascript"
|
||||||
|
".css" -> "text/css"
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
6314
priv/static/bootstrap.bundle.js
vendored
Normal file
6314
priv/static/bootstrap.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
12063
priv/static/bootstrap.css
vendored
Normal file
12063
priv/static/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
@ -1,7 +1,7 @@
|
||||||
<div style="padding-left: <%= level * 5 %>px;">
|
<div style="padding-left: <%= level * 5 %>px; margin-bottom: 2px;">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body" style="padding: 8px;">
|
||||||
<blockquote class="blockquote mb-0">
|
<blockquote class="blockquote mb-0" style="font-size: 1rem;">
|
||||||
<%= if comment.author == "AutoModerator" do %>
|
<%= if comment.author == "AutoModerator" do %>
|
||||||
<p><small>Hidden AutoModerator comment</small></p>
|
<p><small>Hidden AutoModerator comment</small></p>
|
||||||
<% else %>
|
<% else %>
|
||||||
|
@ -15,7 +15,6 @@
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%= for reply <- BdfrBrowser.Repo.preload(comment, :children).children do %>
|
<%= for reply <- BdfrBrowser.Repo.preload(comment, :children).children do %>
|
||||||
|
|
18
priv/templates/http/application.eex
Normal file
18
priv/templates/http/application.eex
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
|
||||||
|
<title>BDFR Browser</title>
|
||||||
|
|
||||||
|
<link href="/static/bootstrap.css" rel="stylesheet">
|
||||||
|
<script src="/static/bootstrap.bundle.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<%= EEx.eval_file(embedded_template, embedded_args) %>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,26 +1,9 @@
|
||||||
<!doctype html>
|
<h2>Archived Subreddits</h2>
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
|
|
||||||
<title>BDFR Browser</title>
|
<div class="row text-center">
|
||||||
|
<div class="d-grid gap-2 col-12 mx-auto">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
<%= for subreddit <- subreddits do %>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>" role="button"><%= subreddit %></a>
|
||||||
</head>
|
<% end %>
|
||||||
|
</div>
|
||||||
<body>
|
</div>
|
||||||
<div class="container">
|
|
||||||
<h2>Archived Subreddits</h2>
|
|
||||||
|
|
||||||
<div class="row text-center">
|
|
||||||
<div class="d-grid gap-2 col-12 mx-auto">
|
|
||||||
<%= for subreddit <- subreddits do %>
|
|
||||||
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>" role="button"><%= subreddit %></a>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
@ -1,66 +1,48 @@
|
||||||
<!doctype html>
|
<h2><a href="<%= post.url %>"><%= post.title %></a></h2>
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
|
|
||||||
<title>BDFR Browser</title>
|
<p>
|
||||||
|
<small><a href="https://reddit.com/user/<%= post.author %>"><%= post.author %></a></small>
|
||||||
|
-
|
||||||
|
<small><%= DateTime.to_iso8601(post.posted_at) %></small>
|
||||||
|
-
|
||||||
|
<a href="https://reddit.com<%= post.permalink %>">Open reddit</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
<%= unless Enum.empty?(media.images) do %>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
<div id="carouselImages" class="carousel slide">
|
||||||
</head>
|
<div class="carousel-inner">
|
||||||
|
<%= for {img, i} <- Enum.with_index(media.images) do %>
|
||||||
<body>
|
<div class="carousel-item <%= if i == 0, do: "active" %>">
|
||||||
<div class="container">
|
<img src="<%= img %>" class="d-block w-100">
|
||||||
<h2><a href="<%= post.url %>"><%= post.title %></a></h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<small><a href="https://reddit.com/user/<%= post.author %>"><%= post.author %></a></small>
|
|
||||||
-
|
|
||||||
<small><%= DateTime.to_iso8601(post.posted_at) %></small>
|
|
||||||
-
|
|
||||||
<a href="https://reddit.com<%= post.permalink %>">Open reddit</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<%= unless Enum.empty?(media.images) do %>
|
|
||||||
<div id="carouselImages" class="carousel slide">
|
|
||||||
<div class="carousel-inner">
|
|
||||||
<%= for {img, i} <- Enum.with_index(media.images) do %>
|
|
||||||
<div class="carousel-item <%= if i == 0, do: "active" %>">
|
|
||||||
<img src="<%= img %>" class="d-block w-100">
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselImages" data-bs-slide="prev">
|
|
||||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
||||||
<span class="visually-hidden">Previous</span>
|
|
||||||
</button>
|
|
||||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselImages" data-bs-slide="next">
|
|
||||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
||||||
<span class="visually-hidden">Next</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= unless Enum.empty?(media.videos) do %>
|
|
||||||
<div class="row">
|
|
||||||
<%= for video <- media.videos do %>
|
|
||||||
<video controls loop>
|
|
||||||
<source src="<%= video %>" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= for comment <- post.comments do %>
|
|
||||||
<div class="row">
|
|
||||||
<%= EEx.eval_file(comment_template, comment: comment, level: 0, comment_template: comment_template) %>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
|
||||||
</html>
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselImages" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</button>
|
||||||
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselImages" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<%= unless Enum.empty?(media.videos) do %>
|
||||||
|
<div class="row">
|
||||||
|
<%= for video <- media.videos do %>
|
||||||
|
<video controls loop>
|
||||||
|
<source src="<%= video %>" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<%= for comment when is_nil(comment.parent_id) <- post.comments do %>
|
||||||
|
<div class="row" style="margin-bottom: 4px;">
|
||||||
|
<%= EEx.eval_file(comment_template, comment: comment, level: 0, comment_template: comment_template) %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
|
@ -1,26 +1,9 @@
|
||||||
<!doctype html>
|
<h2><%= subreddit %></h2>
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
|
|
||||||
<title>BDFR Browser</title>
|
<div class="row text-center">
|
||||||
|
<div class="d-grid gap-2 col-12 mx-auto">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
<%= for date <- dates do %>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>/<%= date %>" role="button"><%= date %></a>
|
||||||
</head>
|
<% end %>
|
||||||
|
</div>
|
||||||
<body>
|
</div>
|
||||||
<div class="container">
|
|
||||||
<h2><%= subreddit %></h2>
|
|
||||||
|
|
||||||
<div class="row text-center">
|
|
||||||
<div class="d-grid gap-2 col-12 mx-auto">
|
|
||||||
<%= for date <- dates do %>
|
|
||||||
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>/<%= date %>" role="button"><%= date %></a>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
@ -1,33 +1,16 @@
|
||||||
<!doctype html>
|
<h2><%= subreddit %></h2>
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
|
|
||||||
<title>BDFR Browser</title>
|
<div class="row text-center">
|
||||||
|
<div class="d-grid gap-2 col-12 mx-auto">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
<%= for post <- posts do %>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
<div class="card">
|
||||||
</head>
|
<div class="card-body">
|
||||||
|
<h5 class="card-title"><a href="/r/<%= subreddit %>/<%= date %>/<%= post.id %>"><%= post.title %></a></h5>
|
||||||
<body>
|
<h6 class="card-subtitle mb-2 text-body-secondary">
|
||||||
<div class="container">
|
<%= post.num_comments %> comment(s) - <%= DateTime.to_iso8601(post.posted_at) %>
|
||||||
<h2><%= subreddit %></h2>
|
</h6>
|
||||||
|
|
||||||
<div class="row text-center">
|
|
||||||
<div class="d-grid gap-2 col-12 mx-auto">
|
|
||||||
<%= for post <- posts do %>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title"><a href="/r/<%= subreddit %>/<%= date %>/<%= post.id %>"><%= post.title %></a></h5>
|
|
||||||
<h6 class="card-subtitle mb-2 text-body-secondary">
|
|
||||||
<%= post.num_comments %> comment(s) - <%= DateTime.to_iso8601(post.posted_at) %>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<% end %>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</div>
|
||||||
|
|
Reference in a new issue