devel #36
30 changed files with 235 additions and 120 deletions
|
@ -14,7 +14,7 @@ const plugins = [
|
|||
]
|
||||
|
||||
let opts = {
|
||||
entryPoints: ['js/app.js'],
|
||||
entryPoints: ['js/app.js', 'js/public.js'],
|
||||
bundle: true,
|
||||
target: 'es2017',
|
||||
outdir: '../priv/static/assets',
|
||||
|
|
|
@ -54,6 +54,10 @@
|
|||
@apply underline decoration-2 decoration-theme-primary;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
/* Set width and color for identity icons */
|
||||
a[rel] svg {
|
||||
width: 1em;
|
||||
|
|
|
@ -35,3 +35,8 @@
|
|||
background-size: contain;
|
||||
}
|
||||
|
||||
.lightbox span img {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
17
assets/js/public.js
Normal file
17
assets/js/public.js
Normal file
|
@ -0,0 +1,17 @@
|
|||
import lolight from "../vendor/lolight"
|
||||
|
||||
lolight("pre code")
|
||||
|
||||
document
|
||||
.querySelector("#dark-mode-toggle")
|
||||
.addEventListener("click", (e) => {
|
||||
e.preventDefault()
|
||||
const data = document.documentElement.dataset
|
||||
if (data["mode"] && data["mode"] == "dark") {
|
||||
delete data["mode"]
|
||||
window.localStorage.removeItem("theme")
|
||||
} else {
|
||||
data["mode"] = "dark"
|
||||
window.localStorage.setItem("theme", "dark")
|
||||
}
|
||||
})
|
|
@ -9,9 +9,13 @@ defmodule Chiya.Channels do
|
|||
alias Chiya.Notes.Note
|
||||
|
||||
@preloads [:notes]
|
||||
@public_preloads [notes: (from n in Note,
|
||||
@public_preloads [
|
||||
notes:
|
||||
from(n in Note,
|
||||
where: not is_nil(n.published_at),
|
||||
order_by: [desc: n.published_at])]
|
||||
order_by: [desc: n.published_at]
|
||||
)
|
||||
]
|
||||
|
||||
@doc """
|
||||
Returns the list of channels.
|
||||
|
|
|
@ -21,7 +21,7 @@ defmodule Chiya.Notes do
|
|||
"""
|
||||
def list_notes do
|
||||
Note
|
||||
|> order_by([n], [desc: n.updated_at, desc: n.published_at])
|
||||
|> order_by([n], desc: n.updated_at, desc: n.published_at)
|
||||
|> Repo.all()
|
||||
|> Repo.preload(@preloads)
|
||||
end
|
||||
|
@ -70,7 +70,6 @@ defmodule Chiya.Notes do
|
|||
|
||||
def get_note_by_slug_preloaded!(slug), do: Repo.get_by!(Note, slug: slug) |> preload_note()
|
||||
|
||||
|
||||
@doc """
|
||||
Creates a note.
|
||||
|
||||
|
|
|
@ -17,7 +17,8 @@ defmodule ChiyaWeb do
|
|||
those modules here.
|
||||
"""
|
||||
|
||||
def static_paths, do: ~w(assets fonts images favicon favicon.ico robots.txt browserconfig.xml site.webmanifest)
|
||||
def static_paths,
|
||||
do: ~w(assets fonts images favicon favicon.ico robots.txt browserconfig.xml site.webmanifest)
|
||||
|
||||
def router do
|
||||
quote do
|
||||
|
@ -56,6 +57,9 @@ defmodule ChiyaWeb do
|
|||
use Phoenix.LiveView,
|
||||
layout: {ChiyaWeb.Layouts, :app}
|
||||
|
||||
# Import admin components
|
||||
import ChiyaWeb.AdminComponents
|
||||
|
||||
unquote(html_helpers())
|
||||
end
|
||||
end
|
||||
|
@ -78,6 +82,25 @@ defmodule ChiyaWeb do
|
|||
|
||||
# Include general helpers for rendering HTML
|
||||
unquote(html_helpers())
|
||||
|
||||
# Import admin components
|
||||
import ChiyaWeb.AdminComponents
|
||||
end
|
||||
end
|
||||
|
||||
def html_public do
|
||||
quote do
|
||||
use Phoenix.Component
|
||||
|
||||
# Import convenience functions from controllers
|
||||
import Phoenix.Controller,
|
||||
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
|
||||
|
||||
# Include general helpers for rendering HTML
|
||||
unquote(html_helpers())
|
||||
|
||||
# Import public components
|
||||
import ChiyaWeb.PublicComponents
|
||||
end
|
||||
end
|
||||
|
||||
|
@ -93,7 +116,6 @@ defmodule ChiyaWeb do
|
|||
alias Phoenix.LiveView.JS
|
||||
|
||||
# Custom functions
|
||||
import ChiyaWeb.AdminComponents
|
||||
import ChiyaWeb.Format, only: [from_now: 1, pretty_date: 1]
|
||||
alias ChiyaWeb.Markdown
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
defmodule ChiyaWeb.AdminComponents do
|
||||
|
||||
use Phoenix.Component
|
||||
|
||||
use Phoenix.VerifiedRoutes,
|
||||
endpoint: ChiyaWeb.Endpoint,
|
||||
router: ChiyaWeb.Router,
|
||||
|
@ -8,6 +8,15 @@ defmodule ChiyaWeb.AdminComponents do
|
|||
|
||||
import ChiyaWeb.CoreComponents
|
||||
|
||||
@doc """
|
||||
Renders a horizontal line
|
||||
"""
|
||||
def line(assigns) do
|
||||
~H"""
|
||||
<hr class="my-6 dark:border-gray-700" />
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a UI for uploading files
|
||||
"""
|
||||
|
|
|
@ -9,6 +9,7 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
|
||||
"""
|
||||
use Phoenix.Component
|
||||
|
||||
use Phoenix.VerifiedRoutes,
|
||||
endpoint: ChiyaWeb.Endpoint,
|
||||
router: ChiyaWeb.Router,
|
||||
|
@ -19,23 +20,13 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
|
||||
def favicon(assigns) do
|
||||
~H"""
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/favicon/site.webmanifest">
|
||||
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
"""
|
||||
end
|
||||
|
||||
|
||||
@doc """
|
||||
Renders a horizontal line
|
||||
"""
|
||||
def line(assigns) do
|
||||
~H"""
|
||||
<hr class="my-6 dark:border-gray-700" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<meta name="msapplication-TileColor" content="#da532c" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
"""
|
||||
end
|
||||
|
||||
|
@ -176,8 +167,10 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
role="alert"
|
||||
class={[
|
||||
"fixed hidden top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 shadow-md shadow-gray-900/5 ring-1",
|
||||
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900 dark:bg-emerald-900 dark:text-emerald-200 hover:opacity-40",
|
||||
@kind == :error && "bg-rose-50 p-3 text-rose-900 shadow-md ring-rose-500 fill-rose-900 dark:bg-rose-900 dark:text-rose-200 hover:opacity-40"
|
||||
@kind == :info &&
|
||||
"bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900 dark:bg-emerald-900 dark:text-emerald-200 hover:opacity-40",
|
||||
@kind == :error &&
|
||||
"bg-rose-50 p-3 text-rose-900 shadow-md ring-rose-500 fill-rose-900 dark:bg-rose-900 dark:text-rose-200 hover:opacity-40"
|
||||
]}
|
||||
{@rest}
|
||||
>
|
||||
|
@ -526,7 +519,11 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
|
||||
class="relative divide-y divide-gray-100 border-t border-gray-200 text-sm leading-6 text-gray-700 dark:text-gray-200 dark:border-gray-700 dark:divide-gray-800"
|
||||
>
|
||||
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||
<tr
|
||||
:for={row <- @rows}
|
||||
id={@row_id && @row_id.(row)}
|
||||
class="group hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
<td
|
||||
:for={{col, i} <- Enum.with_index(@col)}
|
||||
phx-click={@row_click && @row_click.(row)}
|
||||
|
@ -576,7 +573,9 @@ defmodule ChiyaWeb.CoreComponents do
|
|||
<div class="mt-14">
|
||||
<dl class="-my-4 divide-y divide-gray-100 dark:divide-gray-800">
|
||||
<div :for={item <- @item} class="flex gap-4 py-4 sm:gap-8">
|
||||
<dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-gray-500 dark:text-gray-300"><%= item.title %></dt>
|
||||
<dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-gray-500 dark:text-gray-300">
|
||||
<%= item.title %>
|
||||
</dt>
|
||||
<dd class="text-sm leading-6 text-gray-700 dark:text-gray-400"><%= render_slot(item) %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<.favicon />
|
||||
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/public.js"}>
|
||||
</script>
|
||||
<script>
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
|
@ -20,12 +20,14 @@
|
|||
delete document.documentElement.dataset["mode"]
|
||||
}
|
||||
</script>
|
||||
<style><%= @settings.custom_css %></style>
|
||||
<style>
|
||||
<%= @settings.custom_css %>
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-theme-background antialiased">
|
||||
<.admin_bar current_user={@current_user} />
|
||||
<%= @inner_content %>
|
||||
|
||||
<%= raw @settings.custom_html %>
|
||||
<%= raw(@settings.custom_html) %>
|
||||
</body>
|
||||
</html>
|
17
lib/chiya_web/components/public_components.ex
Normal file
17
lib/chiya_web/components/public_components.ex
Normal file
|
@ -0,0 +1,17 @@
|
|||
defmodule ChiyaWeb.PublicComponents do
|
||||
use Phoenix.Component
|
||||
|
||||
use Phoenix.VerifiedRoutes,
|
||||
endpoint: ChiyaWeb.Endpoint,
|
||||
router: ChiyaWeb.Router,
|
||||
statics: ChiyaWeb.static_paths()
|
||||
|
||||
@doc """
|
||||
Renders a horizontal line
|
||||
"""
|
||||
def line(assigns) do
|
||||
~H"""
|
||||
<hr class="my-6 border-theme-dim" />
|
||||
"""
|
||||
end
|
||||
end
|
|
@ -8,7 +8,7 @@
|
|||
</.header>
|
||||
|
||||
<.table id="identities" rows={@identities} row_click={&JS.navigate(~p"/admin/identities/#{&1}")}>
|
||||
<:col :let={identity} label="Icon"><%= raw identity.icon %></:col>
|
||||
<:col :let={identity} label="Icon"><%= raw(identity.icon) %></:col>
|
||||
<:col :let={identity} label="Name"><%= identity.name %></:col>
|
||||
<:col :let={identity} label="Rel"><%= identity.rel %></:col>
|
||||
<:col :let={identity} label="Url"><%= identity.url %></:col>
|
||||
|
|
|
@ -4,12 +4,17 @@ defmodule ChiyaWeb.PageController do
|
|||
def home(conn, _params) do
|
||||
settings = conn.assigns.settings
|
||||
|
||||
channel = case settings.home_channel_id do
|
||||
channel =
|
||||
case settings.home_channel_id do
|
||||
nil -> nil
|
||||
id -> Chiya.Channels.get_channel!(id) |> Chiya.Channels.preload_channel_public()
|
||||
end
|
||||
|
||||
render(conn, :home, layout: {ChiyaWeb.Layouts, "public.html"}, channel: channel, page_title: "Home")
|
||||
render(conn, :home,
|
||||
layout: {ChiyaWeb.Layouts, "public.html"},
|
||||
channel: channel,
|
||||
page_title: "Home"
|
||||
)
|
||||
end
|
||||
|
||||
def channel(conn, %{"slug" => channel_slug}) do
|
||||
|
@ -17,7 +22,11 @@ defmodule ChiyaWeb.PageController do
|
|||
Chiya.Channels.get_channel_by_slug!(channel_slug)
|
||||
|> Chiya.Channels.preload_channel_public()
|
||||
|
||||
render(conn, :channel, layout: {ChiyaWeb.Layouts, "public.html"}, channel: channel, page_title: channel.name)
|
||||
render(conn, :channel,
|
||||
layout: {ChiyaWeb.Layouts, "public.html"},
|
||||
channel: channel,
|
||||
page_title: channel.name
|
||||
)
|
||||
end
|
||||
|
||||
def note(conn, %{"slug" => note_slug}) do
|
||||
|
@ -26,7 +35,11 @@ defmodule ChiyaWeb.PageController do
|
|||
if is_nil(note.published_at) do
|
||||
render_error(conn, :not_found)
|
||||
else
|
||||
render(conn, :note, layout: {ChiyaWeb.Layouts, "public.html"}, note: note, page_title: note.name)
|
||||
render(conn, :note,
|
||||
layout: {ChiyaWeb.Layouts, "public.html"},
|
||||
note: note,
|
||||
page_title: note.name
|
||||
)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
defmodule ChiyaWeb.PageHTML do
|
||||
use ChiyaWeb, :html
|
||||
use ChiyaWeb, :html_public
|
||||
|
||||
embed_templates "page_html/*"
|
||||
end
|
||||
|
|
|
@ -9,7 +9,10 @@
|
|||
|
||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||
<%= for note <- @channel.notes do %>
|
||||
<a href={~p"/n/#{note.slug}"} class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition">
|
||||
<a
|
||||
href={~p"/n/#{note.slug}"}
|
||||
class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
|
||||
>
|
||||
<span class="text-theme-heading text-lg font-semibold leading-8"><%= note.name %></span>
|
||||
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
|
||||
</a>
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
href={identity.url}
|
||||
class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-theme-primary/10 transition"
|
||||
>
|
||||
<%= raw identity.icon %>
|
||||
<%= raw(identity.icon) %>
|
||||
<%= identity.name %>
|
||||
</a>
|
||||
</div>
|
||||
|
@ -26,8 +26,13 @@
|
|||
<%= if @channel do %>
|
||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||
<%= for note <- @channel.notes do %>
|
||||
<a href={~p"/n/#{note.slug}"} class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition">
|
||||
<span class="text-theme-heading text-lg font-semibold leading-8"><%= note.name %></span>
|
||||
<a
|
||||
href={~p"/n/#{note.slug}"}
|
||||
class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
|
||||
>
|
||||
<span class="text-theme-heading text-lg font-semibold leading-8">
|
||||
<%= note.name %>
|
||||
</span>
|
||||
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
<div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
|
||||
<div class="mx-auto max-w-xl lg:mx-0">
|
||||
<header>
|
||||
<h1 class="text-3xl font-semibold leading-8 text-theme-heading font-serif underline underline-offset-2 decoration-theme-primary">
|
||||
<%= @note.name %>
|
||||
|
@ -7,7 +9,6 @@
|
|||
</p>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="prose mt-8">
|
||||
<%= Markdown.render(@note.content) |> raw %>
|
||||
</section>
|
||||
|
@ -25,11 +26,14 @@
|
|||
/>
|
||||
</a>
|
||||
<a href="#images" class="lightbox" id={"image-#{image.id}"}>
|
||||
<span style={"background-image: url('#{ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}')"}>
|
||||
<span>
|
||||
<img src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} loading="lazy" />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</article>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -8,6 +8,7 @@ defmodule ChiyaWeb.SettingHTML do
|
|||
"""
|
||||
attr :changeset, Ecto.Changeset, required: true
|
||||
attr :action, :string, required: true
|
||||
attr :channels, :list, required: true
|
||||
|
||||
def setting_form(assigns)
|
||||
end
|
||||
|
|
|
@ -30,5 +30,6 @@ defmodule ChiyaWeb.Format do
|
|||
def pretty_date(%NaiveDateTime{} = date) do
|
||||
Calendar.strftime(date, "%d.%m.%Y")
|
||||
end
|
||||
|
||||
def pretty_date(_), do: ""
|
||||
end
|
||||
|
|
|
@ -40,7 +40,7 @@ defmodule ChiyaWeb.NoteShowLive do
|
|||
<article>
|
||||
<a href={"#image-#{image.id}"}>
|
||||
<img
|
||||
class="rounded-lg w-28 "
|
||||
class="rounded-lg border border-theme-dim w-28"
|
||||
src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
|
||||
/>
|
||||
</a>
|
||||
|
@ -56,7 +56,8 @@ defmodule ChiyaWeb.NoteShowLive do
|
|||
</p>
|
||||
|
||||
<a href="#images" class="lightbox" id={"image-#{image.id}"}>
|
||||
<span style={"background-image: url('#{ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}')"}>
|
||||
<span>
|
||||
<img src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} />
|
||||
</span>
|
||||
</a>
|
||||
</article>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
defmodule ChiyaWeb.Markdown do
|
||||
|
||||
@options [
|
||||
footnotes: true,
|
||||
breaks: true,
|
||||
|
@ -10,5 +9,4 @@ defmodule ChiyaWeb.Markdown do
|
|||
markdown
|
||||
|> Earmark.as_html!(@options)
|
||||
end
|
||||
|
||||
end
|
||||
|
|
6
mix.exs
6
mix.exs
|
@ -71,7 +71,11 @@ defmodule Chiya.MixProject do
|
|||
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
|
||||
"assets.setup": ["tailwind.install --if-missing", "cmd --cd assets npm install"],
|
||||
"assets.build": ["tailwind default", "cmd --cd assets node build.js"],
|
||||
"assets.deploy": ["tailwind default --minify", "cmd --cd assets node build.js --deploy", "phx.digest"]
|
||||
"assets.deploy": [
|
||||
"tailwind default --minify",
|
||||
"cmd --cd assets node build.js --deploy",
|
||||
"phx.digest"
|
||||
]
|
||||
]
|
||||
end
|
||||
end
|
||||
|
|
|
@ -3,7 +3,14 @@ defmodule ChiyaWeb.IdentityControllerTest do
|
|||
|
||||
import Chiya.IdentitiesFixtures
|
||||
|
||||
@create_attrs %{active: true, name: "some name", public: true, rel: "some rel", url: "some url", icon: "some icon"}
|
||||
@create_attrs %{
|
||||
active: true,
|
||||
name: "some name",
|
||||
public: true,
|
||||
rel: "some rel",
|
||||
url: "some url",
|
||||
icon: "some icon"
|
||||
}
|
||||
@update_attrs %{
|
||||
active: false,
|
||||
name: "some updated name",
|
||||
|
|
Loading…
Reference in a new issue