Merge pull request 'improve' (#80) from devel into main

Reviewed-on: #80

assets/css/app.css

@@ -19,6 +19,15 @@
     --color-secondary: 104 157 106; /* aqua */
     --color-secondary1: 66 123 88; /* aqua faded */
 
+    --color-blue: 69 133 136 ; /* blue */
+    --color-blue1: 7 102 120; /* blue faded */
+
+    --color-purple: 177 98 134 ; /* purple */
+    --color-purple1: 143 63 113; /* purple faded */
+
+    --color-yellow: 215 153 33; /* yellow */
+    --color-yellow1: 181 118 20; /* yellow faded */
+
     --color-background: 253 244 193; /* light0 */
     --color-background1: 235 219 178; /* light1 */
 
@@ -26,7 +35,6 @@
     --color-foreground1: 80 73 69; /* dark2 */
 
     --color-heading: var(--color-secondary);
-    --color-code: var(--color-background1);
 
     @apply selection:bg-theme-primary/50;
   }
@@ -36,7 +44,16 @@
     --color-primary1: 254 128 25; /* orange bright */
 
     --color-secondary: 104 157 106; /* aqua */
-    --color-secondary1: 142 192 124; /* aqua faded */
+    --color-secondary1: 142 192 124; /* aqua bright */
+
+    --color-blue: 69 133 136 ; /* blue */
+    --color-blue1: 131 165 152; /* blue bright */
+
+    --color-purple: 177 98 134 ; /* purple */
+    --color-purple1: 250 189 47; /* purple bright */
+
+    --color-yellow: 215 153 33; /* yellow */
+    --color-yellow1: 181 118 20; /* yellow bright */
 
     --color-background: 40 40 40; /* dark0 */
     --color-background1: 60 56 54; /* dark1 */
@@ -45,12 +62,15 @@
     --color-foreground1: 213 196 161; /* light2 */
 
     --color-heading: var(--color-secondary);
-    --color-code: var(--color-base);
   }
 
     :root[data-mode=dark] .prose {
     @apply prose-invert;
   }
+
+  .prose a {
+    @apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
+  }
 }
 
 @layer components {
@@ -67,8 +87,4 @@
   .alert.alert-danger {
     @apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
   }
-
-  .prose a {
-    @apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
-  }
 }

assets/css/lolight.css

@@ -1,22 +1,23 @@
 .ll-nam { /* words */
-    @apply text-theme-code;
+    @apply text-theme-base;
 }
 .ll-num { /* numbers */
-    @apply text-theme-code;
+    color: rgb(var(--color-purple));
 }
 .ll-str { /* strings */
-    @apply text-theme-code;
+    color: rgb(var(--color-yellow));
 }
 .ll-rex { /* regular expressions */
-    @apply text-theme-code;
+    color: rgb(var(--color-yellow));
 }
 .ll-pct { /* operators, punctation */
-    @apply text-theme-code;
+    @apply text-theme-primary;
 }
 .ll-key { /* keywords */
-    @apply text-theme-code font-bold;
+    @apply font-bold;
+    color: rgb(var(--color-blue));
 }
 .ll-com { /* comments */
-    @apply text-theme-code;
+    @apply text-theme-base1;
     font-style: italic;
 }

assets/tailwind.config.js

@@ -24,6 +24,8 @@ module.exports = {
             '--tw-prose-bold': 'rgb(var(--color-foreground))',
             '--tw-prose-quotes': 'rgb(var(--color-foreground))',
             '--tw-prose-bullets': 'rgb(var(--color-primary))',
+            '--tw-prose-code': 'rgb(var(--color-base))',
+            '--tw-prose-pre-bg': 'rgb(var(--color-background1))',
             '--tw-prose-quote-borders': 'rgb(var(--color-primary))',
             '--tw-prose-invert-body': 'rgb(var(--color-foreground))',
             '--tw-prose-invert-links': 'rgb(var(--color-foreground))',
@@ -31,7 +33,9 @@ module.exports = {
             '--tw-prose-invert-bold': 'rgb(var(--color-foreground))',
             '--tw-prose-invert-quotes': 'rgb(var(--color-foreground))',
             '--tw-prose-invert-bullets': 'rgb(var(--color-primary))',
-            '--tw-prose-invert-quote-borders': 'rgb(var(--color-primary))'    
+            '--tw-prose-invert-quote-borders': 'rgb(var(--color-primary))',
+            '--tw-prose-invert-code': 'rgb(var(--color-base))',
+            '--tw-prose-invert-pre-bg': 'rgb(var(--color-background1))'
           }
         }
       },
@@ -47,8 +51,7 @@ module.exports = {
           primary1: 'rgb(var(--color-primary1) / <alpha-value>)',
           secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
           secondary1: 'rgb(var(--color-secondary1) / <alpha-value>)',
-          heading: 'rgb(var(--color-heading) / <alpha-value>)',
+          heading: 'rgb(var(--color-heading) / <alpha-value>)'
-          code: 'rgb(var(--color-code) / <alpha-value>)'
         } 
       }
     },

lib/chiya_web/components/layouts.ex

@@ -1,5 +1,7 @@
 defmodule ChiyaWeb.Layouts do
   use ChiyaWeb, :html
 
+  import ChiyaWeb.PublicComponents
+
   embed_templates "layouts/*"
 end

lib/chiya_web/components/layouts/root_public.html.heex

@@ -37,21 +37,21 @@
       </nav>
     </header>
 
-    <main class="mx-auto max-w-xl">
+    <main>
       <%= @inner_content %>
     </main>
 
-    <footer class="mx-auto max-w-xl mt-8 text-theme-base border-t pt-8 border-theme-background1">
+    <footer class="mx-auto max-w-xl mt-8 text-theme-base/75 border-t pt-8 border-theme-background1">
       <span>Served by Chiya v<%= Application.spec(:chiya, :vsn) %></span>
-      <span>·</span>
+      <.dot />
       <span>Made by Inhji</span>
-      <span>·</span>
+      <.dot />
       <span>Struggling to make a decent website since 2011</span>     
       <%= for identity <- @identities do %>
-      <span>·</span>
+      <.dot />
       <span><a href={identity.url}><%= identity.name %></a></span>
       <% end %>
-      <span>·</span>
+      <.dot />
       <span><a href={~p"/admin"}>Admin</a></span>
     </footer>
   </body>

lib/chiya_web/components/public_components.ex

@@ -10,14 +10,22 @@ defmodule ChiyaWeb.PublicComponents do
   import ChiyaWeb.Markdown, only: [render: 1]
   import Phoenix.HTML, only: [raw: 1]
 
+  @doc """
+  Renders a middot as divider
+  """
+  def dot(assigns), do:
+    ~H"""
+    <span class="text-theme-primary font-bold">·</span>
+    """
+
   @doc """
   Renders a horizontal line
   """
-  def line(assigns) do
+  def line(assigns), do:
     ~H"""
     <hr class="my-6 border-theme-base/20" />
     """
-  end
+
 
   @doc """
   Renders a note-header with title.
@@ -103,7 +111,7 @@ defmodule ChiyaWeb.PublicComponents do
               <time class="text-theme-base/75">
                 <%= pretty_datetime(note.published_at) %>
               </time>
-              <span>·</span>
+              <.dot />
               <a href={~p"/#{note.slug}"} class="text-theme-base/75">Permalink</a>
             </article>
           <% end %>

lib/chiya_web/controllers/page_html/home.html.heex

@@ -1,4 +1,4 @@
-<section class="p-10 bg-theme-background1 mt-8">
+<section class="mx-auto max-w-xl p-10 bg-theme-background1 mt-8">
   <h1 class="text-3xl font-extrabold leading-10 tracking-tight text-theme-primary">
     <%= @settings.title %>
   </h1>
@@ -7,7 +7,7 @@
   </p>
 </section>
 
-<section class="mt-8 text-sm">
+<section class="mx-auto max-w-xl mt-8 text-sm">
   <ul class="flex flex-wrap gap-3">
     <li>
       <a href="#" class="text-theme-base px-3 py-2.5  hover:bg-theme-background1 rounded transition font-semibold">
@@ -25,7 +25,7 @@
 </section>
 
 <%= if @channel do %>
-<section class="mt-8 border-t border-theme-background1">
+<section class="mx-auto max-w-xl mt-8 border-t border-theme-background1">
   <.note_list notes={@channel.notes} layout={@channel.layout} />  
 </section>
 <% end %>

lib/chiya_web/controllers/page_html/note.html.heex

@@ -1,5 +1,5 @@
-<div class="mx-auto max-w-xl mx-4 lg:mx-0">
+<div>
-  <header>
+  <header class="mx-auto max-w-xl">
     <h1 class="mt-16 text-3xl font-extrabold text-theme-base">
       <%= @note.name %>
     </h1>
@@ -29,63 +29,67 @@
     </p>
   </header>
 
-  <section class="mt-8 prose prose-gruvbox md:prose-lg lg:prose-xl">
+  <section class="mx-auto mt-8 prose prose-gruvbox md:prose-lg lg:prose-xl">
     <%= Markdown.render(@note.content) |> raw %>
   </section>
 
-  <%= if !Enum.empty?(@note.images) do %>
+  <section class="mt-8 mx-auto max-w-2xl">
+    <%= if !Enum.empty?(@note.images) do %>
+      <.line />
+
+      <div class="flex flex-wrap gap-3">
+        <%= for image <- @note.images do %>
+          <a
+            href={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}
+            class="lightbox | w-28"
+            data-gallery="note"
+            data-description={ChiyaWeb.Markdown.render(image.content)}
+          >
+            <img
+              src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
+              class="rounded"
+            />
+          </a>
+        <% end %>
+      </div>
+    <% end %>   
+  </section>
+
+  <section class="mt-8 mx-auto max-w-xl">
+    <%= if not Enum.empty?(@note.comments) do %>
+      <.line />
+
+      <h2 class="mb-6 text-theme-base"><%= Enum.count(@note.comments) %> Comments</h2>
+
+      <aside id="comments" class="flex flex-col gap-6">
+        <%= for comment <- @note.comments do %>
+          <article class="text-theme-base bg-theme-base/10 p-1">
+            <header class="flex flex-row justify-between">
+              <strong class="text-theme-primary"><%= comment.author_name %></strong>
+              <span class="text-theme-dim"><%= from_now(comment.inserted_at) %></span>
+            </header>
+            <p><%= comment.content %></p>
+          </article>
+        <% end %>
+      </aside>
+    <% else %>
+      <.line />
+
+      <h2 class="mb-6 text-theme-base">No comments yet.</h2>
+    <% end %>
+
     <.line />
 
-    <div class="flex flex-wrap gap-3">
+    <.simple_form :let={f} for={@changeset} action={~p"/#{@note.slug}/comment"} class="bg-theme-background -m-3">
-      <%= for image <- @note.images do %>
+      <.error :if={@changeset.action}>
-        <a
+        Oops, something went wrong! Please check the errors below.
-          href={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}
+      </.error>
-          class="lightbox | w-28"
+      <.input field={f[:author_name]} type="text" placeholder="Name" class="bg-theme-background dark:bg-theme-background border-theme-base/20 dark:border-theme-base/20 text-theme-base dark:text-theme-base placeholder-theme-base/40 dark:placeholder-theme-base/60 dark:focus:border-theme-base/60 dark:focus:border-theme-base/60" />
-          data-gallery="note"
+      <.input field={f[:content]} type="textarea" placeholder="Content" rows="3" class="bg-theme-background dark:bg-theme-background border-theme-base/20 dark:border-theme-base/20 text-theme-base dark:text-theme-base placeholder-theme-base/60 dark:placeholder-theme-base/60 focus:border-theme-base/60 dark:focus:border-theme-base/60" />
-          data-description={ChiyaWeb.Markdown.render(image.content)}
+      <.input field={f[:note_id]} type="hidden" />
-        >
+      <:actions>
-          <img
+        <.button>Submit Comment</.button>
-            src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
+      </:actions>
-            class="rounded"
+    </.simple_form>
-          />
+  </section>
-        </a>
-      <% end %>
-    </div>
-  <% end %>
-
-  <%= if not Enum.empty?(@note.comments) do %>
-    <.line />
-
-    <h2 class="mb-6 text-theme-base"><%= Enum.count(@note.comments) %> Comments</h2>
-
-    <aside id="comments" class="flex flex-col gap-6">
-      <%= for comment <- @note.comments do %>
-        <article class="text-theme-base bg-theme-base/10 p-1">
-          <header class="flex flex-row justify-between">
-            <strong class="text-theme-primary"><%= comment.author_name %></strong>
-            <span class="text-theme-dim"><%= from_now(comment.inserted_at) %></span>
-          </header>
-          <p><%= comment.content %></p>
-        </article>
-      <% end %>
-    </aside>
-  <% else %>
-    <.line />
-
-    <h2 class="mb-6 text-theme-base">No comments yet.</h2>
-  <% end %>
-
-  <.line />
-
-  <.simple_form :let={f} for={@changeset} action={~p"/#{@note.slug}/comment"} class="bg-theme-background -m-3">
-    <.error :if={@changeset.action}>
-      Oops, something went wrong! Please check the errors below.
-    </.error>
-    <.input field={f[:author_name]} type="text" placeholder="Name" class="bg-theme-background dark:bg-theme-background border-theme-base/20 dark:border-theme-base/20 text-theme-base dark:text-theme-base placeholder-theme-base/40 dark:placeholder-theme-base/60 dark:focus:border-theme-base/60 dark:focus:border-theme-base/60" />
-    <.input field={f[:content]} type="textarea" placeholder="Content" rows="3" class="bg-theme-background dark:bg-theme-background border-theme-base/20 dark:border-theme-base/20 text-theme-base dark:text-theme-base placeholder-theme-base/60 dark:placeholder-theme-base/60 focus:border-theme-base/60 dark:focus:border-theme-base/60" />
-    <.input field={f[:note_id]} type="hidden" />
-    <:actions>
-      <.button>Submit Comment</.button>
-    </:actions>
-  </.simple_form>
 </div>