add image helper, fuck with homepage design and spacing, microblog imgs #95
7 changed files with 65 additions and 29 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -60,5 +60,4 @@ defmodule ChiyaWeb.PageController do
|
|||
def about(conn, _params) do
|
||||
redirect(conn, to: ~p"/note/about")
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
@ -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
11
lib/chiya_web/helpers.ex
Normal 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
|
Loading…
Reference in a new issue