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">
-
+  <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>

priv/templates/http/post.eex

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

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">
-
+  <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>

priv/templates/http/subreddit_posts.eex

@@ -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>
+    <% end %>
-  </body>
+  </div>
-</html>
+</div>