feat: Adjust comment styling

flake.nix

@@ -138,6 +138,8 @@
                   BDFR_BROWSER_BASE_DIRECTORY = "/Volumes/MediaScraper/Reddit";
                   BDFR_BROWSER_REPO_USER = db-user;
                   BDFR_BROWSER_REPO_HOST = db-host;
+                  RELEASE_DISTRIBUTION = "none";
+                  RELEASE_COOKIE = "no_dist_anyway";
                 };
 
                 processes = {

lib/bdfr_browser/http/plug.ex

@@ -7,12 +7,8 @@ defmodule BdfrBrowser.HTTP.Plug do
   plug :dispatch
 
   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
     |> put_resp_header("content-type", "text/html; charset=utf-8")
@@ -22,13 +18,12 @@ defmodule BdfrBrowser.HTTP.Plug do
   get "/r/:subreddit" do
     subreddit_record = Repo.get_by(Subreddit, name: subreddit)
 
-    tpl_params = [
+    tpl_args = [
       subreddit: subreddit,
       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
     |> put_resp_header("content-type", "text/html; charset=utf-8")
@@ -38,14 +33,13 @@ defmodule BdfrBrowser.HTTP.Plug do
   get "/r/:subreddit/:date" do
     subreddit_record = Repo.get_by(Subreddit, name: subreddit)
 
-    tpl_params = [
+    tpl_args = [
       subreddit: subreddit,
       date: date,
       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
     |> 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
     post_record = Post |> Repo.get(id) |> Repo.preload(comments: :children)
 
-    tpl_params = [
+    tpl_args = [
       subreddit: subreddit,
       date: date,
       post: post_record,
@@ -63,14 +57,27 @@ defmodule BdfrBrowser.HTTP.Plug do
       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
     |> put_resp_header("content-type", "text/html; charset=utf-8")
     |> send_resp(200, content)
   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
     base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
     joined_path = Path.join(path)
@@ -96,6 +103,12 @@ defmodule BdfrBrowser.HTTP.Plug do
 
   # 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
     base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
     post_dir = Path.join([base_directory | Keyword.fetch!(args, :paths)])
@@ -127,6 +140,8 @@ defmodule BdfrBrowser.HTTP.Plug do
       ".png" -> "image/png"
       ".gif" -> "image/gif"
       ".mp4" -> "video/mp4"
+      ".js" -> "text/javascript"
+      ".css" -> "text/css"
     end
   end
 end

priv/templates/http/_comment.eex

@@ -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-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 %>
           <p><small>Hidden AutoModerator comment</small></p>
         <% else %>
@@ -15,7 +15,6 @@
       </blockquote>
     </div>
   </div>
-  <br>
 </div>
 
 <%= for reply <- BdfrBrowser.Repo.preload(comment, :children).children do %>

priv/templates/http/application.eex

@@ -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>

priv/templates/http/index.eex

@@ -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">
-
-    <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">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
-  </head>
-
-  <body>
-    <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>
-    </div>
-  </body>
-</html>

priv/templates/http/post.eex

@@ -1,28 +1,14 @@
-<!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>
-
-    <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">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
-  </head>
-
-  <body>
-    <div class="container">
-      <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>
+</p>
 
-      <%= unless Enum.empty?(media.images) do %>
+<%= 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 %>
@@ -42,9 +28,9 @@
     </button>
   </div>
   <br>
-      <% end %>
+<% end %>
 
-      <%= unless Enum.empty?(media.videos) do %>
+<%= unless Enum.empty?(media.videos) do %>
   <div class="row">
     <%= for video <-  media.videos do %>
       <video controls loop>
@@ -53,14 +39,10 @@
     <% end %>
   </div>
   <br>
-      <% end %>
+<% end %>
 
-      <%= for comment <- post.comments do %>
+<%= for comment when is_nil(comment.parent_id) <- post.comments do %>
-        <div class="row">
+  <div class="row" style="margin-bottom: 4px;">
     <%= EEx.eval_file(comment_template, comment: comment, level: 0, comment_template: comment_template) %>
   </div>
-        <br>
+<% end %>
-      <% end %>
-    </div>
-  </body>
-</html>

priv/templates/http/subreddit.eex

@@ -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">
-
-    <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">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
-  </head>
-
-  <body>
-    <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>
-    </div>
-  </body>
-</html>

priv/templates/http/subreddit_posts.eex

@@ -1,20 +1,6 @@
-<!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">
-
-    <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">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
-  </head>
-
-  <body>
-    <div class="container">
-      <h2><%= subreddit %></h2>
-
-      <div class="row text-center">
   <div class="d-grid gap-2 col-12 mx-auto">
     <%= for post <- posts do %>
       <div class="card">
@@ -27,7 +13,4 @@
       </div>
     <% end %>
   </div>
-      </div>
+</div>
-    </div>
-  </body>
-</html>