Add some styling

assets/css/article.css

@@ -1,3 +1,7 @@
+.main {
+  @apply place-content-center;
+}
+
 .article {
   /* @apply pr-8 */
   max-width: 25rem;
@@ -7,6 +11,10 @@
   @apply hover:bg-gray-300;
 }
 
+.dark .article .tunit {
+  @apply hover:bg-gray-700;
+}
+
 .article a.hide-link {
   display: none;
 }

lib/outlook/artikel.ex

@@ -4,6 +4,8 @@ defmodule Outlook.Artikel do
   """
 
   alias Outlook.Translations.Translation
+  alias Outlook.Articles.Article
+  alias Outlook.Authors.Author
 
   import Ecto.Query, warn: false
   alias Outlook.Repo
@@ -15,8 +17,24 @@ defmodule Outlook.Artikel do
 
   def get_artikel!(artikel) when is_struct(artikel), do: get_artikel!(artikel.id)
   def get_artikel!(id) do
-   Repo.one(from t in Translation, where: t.id == ^id and t.public == true)
+    q = from t in Translation,
-   |> Repo.preload([article: :author])
+      join: a in Article, on: t.article_id == a.id,
+      join: au in Author, on: a.author_id == au.id,
+      select: [
+        title: t.title,
+        date: t.date,
+        public_content: t.public_content,
+        title_org: a.title,
+        url_org: a.url,
+        date_org: a.date,
+        author: au.name,
+        author_id: au.id
+      ],
+      where: t.id == ^id and t.public == true
+    case Repo.one(q) do
+      nil     -> {:error, "Artikel does not exist, or isn't public."}
+      artikel -> {:ok, artikel |> Enum.into(%{})}
+    end
   end
 
   def get_artikel_by_tid(tid) do
@@ -25,9 +43,5 @@ defmodule Outlook.Artikel do
     |> List.last()
     |> String.to_integer(36)
     |> get_artikel!()
-    case artikel do
-      %Translation{} -> {:ok, artikel}
-      _ -> {:error, "Artikel does not exist, or isn't public."}
-    end
   end
 end

lib/outlook_web/components/core_components.ex

@@ -191,7 +191,7 @@ defmodule OutlookWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="space-y-8 bg-white mt-10">
+      <div class="space-y-8 bg-transparent mt-10">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -220,8 +220,9 @@ defmodule OutlookWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
+        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 dark:bg-gray-600 hover:bg-zinc-700 py-2 px-3",
         "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "dark:text-gray-300 dark:active:text-gray/80",
         @class
       ]}
       {@rest}
@@ -281,7 +282,7 @@ defmodule OutlookWeb.CoreComponents do
     assigns = assign_new(assigns, :checked, fn -> input_equals?(assigns.value, "true") end)
 
     ~H"""
-    <label phx-feedback-for={@name} class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
+    <label phx-feedback-for={@name} class="flex items-center gap-4 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
       <input type="hidden" name={@name} value="false" />
       <input
         type="checkbox"
@@ -289,7 +290,10 @@ defmodule OutlookWeb.CoreComponents do
         name={@name}
         value="true"
         checked={@checked}
-        class="rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
+        class={[
+          "rounded border-zinc-300 dark:border-stone-800 dark:bg-stone-800 text-zinc-900  dark:text-zinc-200",
+          " focus:ring-zinc-900 dark:focus:ring-stone-700 dark:focus:bg-stone-800",
+        ]}
         {@rest}
       />
       <%= @label %>
@@ -304,7 +308,7 @@ defmodule OutlookWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-zinc-500 focus:border-zinc-500 sm:text-sm"
+        class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-stone-900 rounded-md shadow-sm focus:outline-none focus:ring-zinc-500 focus:border-zinc-500 sm:text-sm"
         multiple={@multiple}
         {@rest}
       >
@@ -328,6 +332,7 @@ defmodule OutlookWeb.CoreComponents do
           "mt-2 block min-h-[6rem] w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
           "text-zinc-900 focus:border-zinc-400 focus:outline-none focus:ring-4 focus:ring-zinc-800/5 sm:text-sm sm:leading-6",
           "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
+          "dark:border-gray-700 dark:bg-stone-900 dark:text-gray-300",
           @class
         ]}
         {@rest}
@@ -360,7 +365,8 @@ defmodule OutlookWeb.CoreComponents do
           input_border(@errors),
           "mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
           "text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
-          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5"
+          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
+          "dark:border-gray-700 dark:bg-stone-900 dark:text-gray-300",
         ]}
         {@rest}
       />
@@ -383,7 +389,7 @@ defmodule OutlookWeb.CoreComponents do
 
   def label(assigns) do
     ~H"""
-    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
+    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800 dark:text-zinc-400">
       <%= render_slot(@inner_block) %>
     </label>
     """

lib/outlook_web/components/tunit_editor_component.ex

@@ -14,7 +14,7 @@ defmodule OutlookWeb.TunitEditorComponent do
         <%= @current_tunit.content |> raw %>
       </div> --%>
       <form phx-change="update_current_tunit" phx-target={@target}>
-        <textarea name="content" class="h-48 rounded border-slate-500 resize-none w-full"
+        <textarea name="content" class="h-48 rounded border-slate-500 resize-none bg-transparent w-full"
           disabled={!@current_tunit.status}><%= @current_tunit.content %></textarea>
       </form>
       <.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} />

lib/outlook_web/controllers/artikel_controller.ex

@@ -13,7 +13,8 @@ defmodule OutlookWeb.ArtikelController do
       {:ok, artikel} -> render(conn, :show, artikel: artikel, page_title: artikel.title)
       {:error, message} -> conn
         |> put_status(404)
-        |> render(OutlookWeb.ErrorHTML, "404.html")
+        |> put_view(OutlookWeb.ErrorHTML)
+        |> render("404.html")
         |> halt()
     end
   end

lib/outlook_web/controllers/artikel_html/show.html.heex

@@ -1,10 +1,10 @@
 <header class="mb-6">
   <h1 class="text-lg font-semibold leading-tight text-stone-800 dark:text-stone-200"><%= @artikel.title %></h1>
-  <p class="my-2"><.link href={"/autoren/#{@artikel.article.author.id}"}><%= @artikel.article.author.name %></.link>
+  <p class="my-2"><.link href={~p"/autoren/#{@artikel.author_id}"}><%= @artikel.author %></.link>
-     &nbsp;&nbsp;&nbsp; — &nbsp;&nbsp;&nbsp;<%= Calendar.strftime(@artikel.article.date, "%d.%m.%Y") %></p>
+     &nbsp;&nbsp;&nbsp; — &nbsp;&nbsp;&nbsp;<%= Calendar.strftime(@artikel.date_org, "%d.%m.%Y") %></p>
   <div>Original Artikel:
-    <.link class="hover:text-sky-700" href={@artikel.article.url} >
+    <.link class="hover:text-sky-700" href={@artikel.url_org} >
-      <%= @artikel.article.title %>
+      <%= @artikel.title_org %>
     </.link><br>
   </div>
   <div class="my-2">
@@ -14,4 +14,4 @@
 
 <div class="article w-full mx-auto max-w-xs"><%= @artikel.public_content |> raw %></div>
 
-<.back navigate={~p"/autoren/#{@artikel.article.author}"}>Back to Autor</.back>
+<.back navigate={~p"/autoren/#{@artikel.author_id}"}>Back to Autor</.back>

lib/outlook_web/view_helpers.ex

@@ -3,10 +3,13 @@ defmodule OutlookWeb.ViewHelpers do
   import Phoenix.HTML, only: [raw: 1]
 
   @doc "Just sanitize tags"
-  def tidy_raw(html) do
+  def tidy_raw(html) when is_binary(html) do
     html
     |> Floki.parse_fragment!()
     |> Floki.raw_html()
     |> raw
   end
+  def tidy_raw(whatever) do
+    whatever
+  end
 end