inhji/chiya
inhji/chiya
1
1
Fork 0
Code Issues 8 Pull requests 9 Activity

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

Browse source 
Reviewed-on: #80
This commit is contained in:
inhji 2023-05-22 20:07:11 +02:00
commit 80a6d7cb39
8 changed files with 119 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
assets/css/app.css
View file

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

15
assets/css/lolight.css
View file

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

9
assets/tailwind.config.js
View file

@ -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>)',
code: 'rgb(var(--color-code) / <alpha-value>)'
heading: 'rgb(var(--color-heading) / <alpha-value>)'
}
}
},

2
lib/chiya_web/components/layouts.ex
View file

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

12
lib/chiya_web/components/layouts/root_public.html.heex
View file

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

14
lib/chiya_web/components/public_components.ex
View file

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

6
lib/chiya_web/controllers/page_html/home.html.heex
View file

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

116
lib/chiya_web/controllers/page_html/note.html.heex
View file

@ -1,5 +1,5 @@
<div class="mx-auto max-w-xl mx-4 lg:mx-0">
<header>
<div>
<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">
<%= 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 %>
<%= 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>
<.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>
</section>
</div>