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

devel #148

Merged
inhji merged 4 commits from devel into main 2023-06-27 22:06:06 +02:00
Conversation 0 Commits 4 Files changed 3 +167 -138
3 changed files with 167 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/app.css
View file

@ -81,6 +81,10 @@
.prose a { .prose a {
@apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition; @apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
} }
.prose em {
@apply text-theme-quaternary;
}
} }
@layer components { @layer components {

11
assets/tailwind.config.js
View file

@ -21,21 +21,23 @@ module.exports = {
'--tw-prose-body': 'rgb(var(--color-foreground))', '--tw-prose-body': 'rgb(var(--color-foreground))',
'--tw-prose-links': 'rgb(var(--color-foreground))', '--tw-prose-links': 'rgb(var(--color-foreground))',
'--tw-prose-headings': 'rgb(var(--color-foreground))', '--tw-prose-headings': 'rgb(var(--color-foreground))',
'--tw-prose-bold': 'rgb(var(--color-foreground))', '--tw-prose-bold': 'rgb(var(--color-yellow1))',
'--tw-prose-quotes': 'rgb(var(--color-foreground))', '--tw-prose-quotes': 'rgb(var(--color-foreground))',
'--tw-prose-bullets': 'rgb(var(--color-primary))', '--tw-prose-bullets': 'rgb(var(--color-primary))',
'--tw-prose-code': 'rgb(var(--color-base))', '--tw-prose-code': 'rgb(var(--color-base))',
'--tw-prose-pre-bg': 'rgb(var(--color-background1))', '--tw-prose-pre-bg': 'rgb(var(--color-background1))',
'--tw-prose-quote-borders': 'rgb(var(--color-primary))', '--tw-prose-quote-borders': 'rgb(var(--color-primary))',
'--tw-prose-counters': 'rgb(var(--color-foreground))',
'--tw-prose-invert-body': 'rgb(var(--color-foreground))', '--tw-prose-invert-body': 'rgb(var(--color-foreground))',
'--tw-prose-invert-links': 'rgb(var(--color-foreground))', '--tw-prose-invert-links': 'rgb(var(--color-foreground))',
'--tw-prose-invert-headings': 'rgb(var(--color-foreground))', '--tw-prose-invert-headings': 'rgb(var(--color-foreground))',
'--tw-prose-invert-bold': 'rgb(var(--color-foreground))', '--tw-prose-invert-bold': 'rgb(var(--color-yellow))',
'--tw-prose-invert-quotes': 'rgb(var(--color-foreground))', '--tw-prose-invert-quotes': 'rgb(var(--color-foreground))',
'--tw-prose-invert-bullets': 'rgb(var(--color-primary))', '--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-code': 'rgb(var(--color-base))',
'--tw-prose-invert-pre-bg': 'rgb(var(--color-background1))' '--tw-prose-invert-pre-bg': 'rgb(var(--color-background1))',
'--tw-prose-invert-counters': 'rgb(var(--color-foreground))',
} }
} }
}, },
@ -52,8 +54,11 @@ module.exports = {
secondary: 'rgb(var(--color-secondary) / <alpha-value>)', secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
secondary1: 'rgb(var(--color-secondary1) / <alpha-value>)', secondary1: 'rgb(var(--color-secondary1) / <alpha-value>)',
tertiary: 'rgb(var(--color-blue) / <alpha-value>)', tertiary: 'rgb(var(--color-blue) / <alpha-value>)',
tertiary1: 'rgb(var(--color-blue1) / <alpha-value>)',
quaternary: 'rgb(var(--color-purple) / <alpha-value>)', quaternary: 'rgb(var(--color-purple) / <alpha-value>)',
quaternary1: 'rgb(var(--color-purple1) / <alpha-value>)',
quinary: 'rgb(var(--color-yellow) / <alpha-value>)', quinary: 'rgb(var(--color-yellow) / <alpha-value>)',
quinary1: 'rgb(var(--color-yellow1) / <alpha-value>)',
heading: 'rgb(var(--color-heading) / <alpha-value>)' heading: 'rgb(var(--color-heading) / <alpha-value>)'
} }
} }

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

@ -103,153 +103,173 @@ defmodule ChiyaWeb.PublicComponents do
def note_list(assigns) do def note_list(assigns) do
case assigns.layout do case assigns.layout do
:gallery -> :gallery ->
~H""" note_list_gallery(assigns)
<section class="note-list gallery | mt-6">
<%= for note <- assigns.notes do %>
<article>
<section class="flex flex-wrap justify-start gap-3">
<%= for image <- note.images do %>
<a
href={ChiyaWeb.Helpers.image_url(image, :full)}
class="lightbox | w-28"
data-gallery={gallery_name(note)}
data-description={ChiyaWeb.Markdown.render(image.content)}
>
<img src={ChiyaWeb.Helpers.image_url(image, :thumb)} loading="lazy" />
</a>
<% end %>
</section>
<a
href={~p"/note/#{note.slug}"}
class="text-theme-secondary text-lg/10 font-semibold rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-secondary/10 transition"
>
<%= note.name %>
<span class="text-theme-base/75 text-sm">
<%= pretty_date(note.published_at) %>
</span>
</a>
</article>
<.line />
<% end %>
</section>
"""
:microblog -> :microblog ->
~H""" note_list_microblog(assigns)
<section class="note-list microblog | mt-6 text-theme-base">
<%= for note <- assigns.notes do %>
<article class="mt-4 first:mt-0">
<% image = main_image(note) %>
<%= if image do %>
<figure class="mb-4">
<img
src={ChiyaWeb.Helpers.image_url(image, :full)}
class="rounded"
title={image.content}
/>
</figure>
<% end %>
<div class="prose prose-gruvbox">
<%= raw(render(note.content)) %>
</div>
<footer class="mt-1">
<time class="text-theme-base/75">
<%= pretty_datetime(note.published_at) %>
</time>
<.dot />
<a href={~p"/note/#{note.slug}"} class="text-theme-base/75">Permalink</a>
<%= if not Enum.empty?(note.images) do %>
<.dot />
<.icon name="hero-photo" />
<% end %>
</footer>
</article>
<.divider />
<% end %>
</section>
"""
# default, show headings only
_ -> _ ->
~H""" note_list_headers(assigns)
<section class="note-list default | mt-6 sm:w-auto flex flex-col gap-1.5">
<%= for note <- assigns.notes do %>
<a
href={~p"/note/#{note.slug}"}
class="rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-secondary/10 transition"
>
<span class="text-theme-secondary text-lg font-semibold leading-8">
<%= note.name %>
</span>
<span class="text-theme-base/75 text-sm"><%= pretty_date(note.published_at) %></span>
</a>
<% end %>
</section>
"""
end end
end end
# def comment_form(assigns) do def note_list_headers(assigns) do
# ~H""" ~H"""
# <.simple_form :let={f} for={@changeset} action="" class="bg-theme-background -m-3"> <section class="note-list default | mt-6 sm:w-auto flex flex-col gap-1.5">
# <.error :if={@changeset.action}> <%= for note <- assigns.notes do %>
# Oops, something went wrong! Please check the errors below. <a
# </.error> href={~p"/note/#{note.slug}"}
# <.input class="rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-secondary/10 transition"
# field={f[:author_name]} >
# type="text" <span class="text-theme-secondary text-lg font-semibold leading-8">
# placeholder="Name" <%= note.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" </span>
# /> <span class="text-theme-base/75 text-sm"><%= pretty_date(note.published_at) %></span>
# <.input </a>
# field={f[:content]} <% end %>
# type="textarea" </section>
# placeholder="Content" """
# rows="3" end
# 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>
# """
# end
# def comment_list(assigns) do attr :note, :map, required: true
# ~H"""
# <%= if not Enum.empty?(assigns.note.comments) do %>
# <.line />
# <h2 class="mb-6 text-theme-base"><%= Enum.count(assigns.note.comments) %> Comments</h2> def note_list_microblog(assigns) do
~H"""
<section class="note-list microblog | mt-6 text-theme-base">
<%= for note <- assigns.notes do %>
<article class="mt-4 first:mt-0">
<.featured_images note={note} />
# <aside id="comments" class="flex flex-col gap-6"> <div class="prose prose-gruvbox">
# <%= for comment <- assigns.note.comments do %> <%= raw(render(note.content)) %>
# <article class="text-theme-base bg-theme-base/10 p-1"> </div>
# <header class="flex flex-row justify-between"> <footer class="mt-1">
# <strong class="text-theme-primary"><%= comment.author_name %></strong> <time class="text-theme-base/75">
# <span class="text-theme-dim"><%= from_now(comment.inserted_at) %></span> <%= pretty_datetime(note.published_at) %>
# </header> </time>
# <p><%= comment.content %></p> <.dot />
# </article> <a href={~p"/note/#{note.slug}"} class="text-theme-base/75">Permalink</a>
# <% end %> <%= if not Enum.empty?(note.images) do %>
# </aside> <.dot />
# <% else %> <.icon name="hero-photo" />
# <.line /> <% end %>
</footer>
</article>
# <h2 class="mb-6 text-theme-base">No comments yet.</h2> <.divider />
# <% end %> <% end %>
# """ </section>
# end """
end
def note_list_gallery(assigns) do
~H"""
<section class="note-list gallery | mt-6">
<%= for note <- assigns.notes do %>
<article>
<section class="flex flex-wrap justify-start gap-3">
<%= for image <- note.images do %>
<a
href={ChiyaWeb.Helpers.image_url(image, :full)}
class="lightbox | w-28"
data-gallery={gallery_name(note)}
data-description={ChiyaWeb.Markdown.render(image.content)}
>
<img src={ChiyaWeb.Helpers.image_url(image, :thumb)} loading="lazy" />
</a>
<% end %>
</section>
<a
href={~p"/note/#{note.slug}"}
class="text-theme-secondary text-lg/10 font-semibold rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-secondary/10 transition"
>
<%= note.name %>
<span class="text-theme-base/75 text-sm">
<%= pretty_date(note.published_at) %>
</span>
</a>
</article>
<.line />
<% end %>
</section>
"""
end
def featured_images(assigns) do
images = main_images(assigns.note)
case Enum.count(images) do
0 ->
~H"""
<figure />
"""
1 ->
assigns = assign(assigns, :image, List.first(images))
~H"""
<figure class="mb-4">
<img
src={ChiyaWeb.Helpers.image_url(assigns.image, :full)}
class="rounded"
title={assigns.image.content}
/>
</figure>
"""
2 ->
assigns =
assigns
|> assign(:first, Enum.at(images, 0))
|> assign(:second, Enum.at(images, 1))
~H"""
<figure class="flex gap-1">
<img
src={ChiyaWeb.Helpers.image_url(assigns.first, :thumb)}
class="rounded-l flex-1 w-full"
title={assigns.first.content}
/>
<img
src={ChiyaWeb.Helpers.image_url(assigns.second, :thumb)}
class="rounded-r flex-1 w-full"
title={assigns.second.content}
/>
</figure>
"""
3 ->
assigns =
assigns
|> assign(:first, Enum.at(images, 0))
|> assign(:second, Enum.at(images, 1))
|> assign(:third, Enum.at(images, 2))
~H"""
<figure class="flex gap-1">
<img
src={ChiyaWeb.Helpers.image_url(assigns.first, :thumb)}
class="flex-1 w-full rounded-l"
title={assigns.first.content}
/>
<img
src={ChiyaWeb.Helpers.image_url(assigns.second, :thumb)}
class="flex-1 w-full"
title={assigns.second.content}
/>
<img
src={ChiyaWeb.Helpers.image_url(assigns.third, :thumb)}
class="flex-1 w-full rounded-r"
title={assigns.third.content}
/>
</figure>
"""
end
end
defp gallery_name(note), do: "gallery-#{note.id}" defp gallery_name(note), do: "gallery-#{note.id}"
defp main_image(note), defp main_images(note),
do: do: Enum.filter(note.images, fn image -> image.featured end)
note.images
|> Enum.filter(fn image -> image.featured end)
|> List.first()
end end