add image helper, fuck with homepage design and spacing, microblog imgs

This commit is contained in:
Inhji 2023-06-03 09:26:45 +02:00
parent 2eb5651748
commit b86e3a5072
7 changed files with 65 additions and 29 deletions

View file

@ -104,7 +104,7 @@
.footnote:after { content: '}'; }
body > header nav a {
@apply text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
@apply inline-block text-theme-base px-3 py-2.5 border border-theme-background1 hover:bg-theme-background1 rounded transition font-semibold;
}
}

View file

@ -4,9 +4,9 @@ defmodule Chiya.Notes.Note do
alias Chiya.Notes.{Note, NoteSlug, NoteNote, NoteTag}
use Phoenix.VerifiedRoutes,
endpoint: ChiyaWeb.Endpoint,
router: ChiyaWeb.Router,
statics: ChiyaWeb.static_paths()
endpoint: ChiyaWeb.Endpoint,
router: ChiyaWeb.Router,
statics: ChiyaWeb.static_paths()
@reserved_slugs ~w(user admin dev api)
@ -51,7 +51,7 @@ defmodule Chiya.Notes.Note do
end
def note_url(note) do
URI.merge(ChiyaWeb.Endpoint.url(), ~p"/note/#{note.slug}")
URI.merge(ChiyaWeb.Endpoint.url(), ~p"/note/#{note.slug}")
|> to_string()
end

View file

@ -35,7 +35,7 @@
</style>
</head>
<body class="bg-theme-background mx-3 md:mx-0">
<header class="mt-8 max-w-xl mx-auto">
<header class="my-8 max-w-xl mx-auto block">
<nav>
<ul class="flex gap-3">
<li>
@ -60,22 +60,24 @@
<%= @inner_content %>
</main>
<footer class="mx-auto max-w-xl mt-8 mb-8 text-theme-base/75 border-t pt-8 border-theme-background1">
<p>
<span>Served by Chiya v<%= Application.spec(:chiya, :vsn) %></span>
<.dot />
<span>Made by Inhji</span>
<.dot />
<span>Struggling to make a decent website since 2011</span>
</p>
<p>
<%= for identity <- @public_identities do %>
<span><a href={identity.url}><%= identity.name %></a></span>
<footer class="max-w-full mt-8 p-8 text-theme-base/75 bg-theme-background1">
<section class="max-w-xl mx-auto">
<p>
<span>Served by Chiya v<%= Application.spec(:chiya, :vsn) %></span>
<.dot />
<% end %>
<span><a href={~p"/admin"}>Admin</a></span>
</p>
<span>Made by Inhji</span>
<.dot />
<span>Struggling to make a decent website since 2011</span>
</p>
<p>
<%= for identity <- @public_identities do %>
<span><a href={identity.url}><%= identity.name %></a></span>
<.dot />
<% end %>
<span><a href={~p"/admin"}>Admin</a></span>
</p>
</section>
</footer>
</body>
</html>

View file

@ -27,6 +27,15 @@ defmodule ChiyaWeb.PublicComponents do
<hr class="my-6 border-theme-base/20" />
"""
attr :text, :string, default: ""
def divider(assigns) do
~H"""
<div class="flex items-center my-8 text-theme-base/75 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] before:bg-theme-background1 after:bg-theme-background1 w-full mx-auto last:hidden">
<%= assigns.text %>
</div>
"""
end
@doc """
Renders a note-header with title.
"""
@ -72,14 +81,12 @@ defmodule ChiyaWeb.PublicComponents do
<section class="flex flex-wrap justify-start gap-3">
<%= for image <- note.images do %>
<a
href={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}
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.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
loading="lazy"
<img src={ChiyaWeb.Helpers.image_url(image, :thumb)} loading="lazy"
/>
</a>
<% end %>
@ -104,7 +111,16 @@ defmodule ChiyaWeb.PublicComponents do
~H"""
<section class="note-list microblog | mt-6 text-theme-base">
<%= for note <- assigns.notes do %>
<article class="mt-8 first:mt-0">
<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>
@ -120,6 +136,8 @@ defmodule ChiyaWeb.PublicComponents do
<% end %>
</footer>
</article>
<.divider />
<% end %>
</section>
"""
@ -145,4 +163,10 @@ defmodule ChiyaWeb.PublicComponents do
end
defp gallery_name(note), do: "gallery-#{note.id}"
defp main_image(note),
do:
note.images
|> Enum.filter(fn image -> image.featured end)
|> List.first()
end

View file

@ -60,5 +60,4 @@ defmodule ChiyaWeb.PageController do
def about(conn, _params) do
redirect(conn, to: ~p"/note/about")
end
end

View file

@ -1,4 +1,4 @@
<section class="mx-auto max-w-xl p-10 bg-theme-background1 mt-8">
<section class="mx-auto max-w-xl p-10 bg-theme-background1">
<h1 class="text-3xl font-extrabold leading-10 tracking-tight text-theme-primary">
<%= @settings.title %>
</h1>
@ -7,7 +7,7 @@
</p>
</section>
<section class="mx-auto max-w-xl mt-8 text-sm">
<section class="mx-auto max-w-xl text-sm my-8">
<ul class="flex flex-wrap gap-3">
<li>
<a

11
lib/chiya_web/helpers.ex Normal file
View file

@ -0,0 +1,11 @@
defmodule ChiyaWeb.Helpers do
alias ChiyaWeb.Uploaders.NoteImage
def image_url(image, :full) do
NoteImage.url({image.path, image}, :full_dithered)
end
def image_url(image, :thumb) do
NoteImage.url({image.path, image}, :thumb_dithered)
end
end