This commit is contained in:
Inhji 2023-09-11 23:19:44 +02:00
parent 7b808acd9d
commit abb9702028
15 changed files with 221 additions and 189 deletions

View file

@ -53,6 +53,10 @@
& a {
@apply p-3 rounded hover:bg-primary-700 transition;
&.active {
@apply bg-primary-700;
}
}
}
@ -68,6 +72,10 @@
& h3 {
@apply m-0;
}
& a.active {
@apply text-primary-500;
}
}
/* === SITE CONTENT === */
@ -98,7 +106,7 @@
/* === PAGE HEADER === */
header.page-header {
@apply border-b border-neutral-300 mb-6 prose max-w-none;
@apply border-b border-foreground/50 mb-6 prose max-w-none;
}
header.page-header h1 {
@ -112,7 +120,7 @@
/* === PAGE GRID === */
section.page-grid {
@apply grid grid-cols-1 md:grid-cols-3 gap-3;
@apply grid grid-cols-1 md:grid-cols-3 gap-6;
> section {
@apply col-span-1 md:col-span-2;
@ -135,7 +143,7 @@
}
.divider {
@apply flex text-red-500 items-center my-8 w-full mx-auto last:hidden;
@apply flex text-primary-500 items-center my-8 w-full mx-auto last:hidden;
@apply before:flex-1 before:content-[''] before:bg-neutral-500/25 before:p-[0.5px] before:mr-2;
@apply after:flex-1 after:content-[''] after:bg-neutral-500/25 after:p-[0.5px] after:ml-2;
}

View file

@ -17,11 +17,43 @@ module.exports = {
container: { center: true },
extend: {
colors: {
primary: colors.sky,
primary: colors.rose,
neutral: colors.slate,
foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
background: 'rgb(var(--color-background) / <alpha-value>)'
}
},
typography: ({ theme }) => ({
colorful: {
css: {
'--tw-prose-lead': theme('colors.rose[700]'),
'--tw-prose-links': theme('colors.rose[900]'),
'--tw-prose-counters': theme('colors.rose[600]'),
'--tw-prose-bullets': theme('colors.rose[400]'),
'--tw-prose-hr': theme('colors.rose[300]'),
'--tw-prose-quotes': theme('colors.rose[900]'),
'--tw-prose-quote-borders': theme('colors.rose[300]'),
'--tw-prose-captions': theme('colors.rose[700]'),
'--tw-prose-code': theme('colors.rose[900]'),
'--tw-prose-pre-code': theme('colors.rose[100]'),
'--tw-prose-pre-bg': theme('colors.rose[900]'),
'--tw-prose-th-borders': theme('colors.rose[300]'),
'--tw-prose-td-borders': theme('colors.rose[200]'),
'--tw-prose-invert-lead': theme('colors.rose[300]'),
'--tw-prose-invert-links': theme('colors.white'),
'--tw-prose-invert-counters': theme('colors.rose[400]'),
'--tw-prose-invert-bullets': theme('colors.rose[600]'),
'--tw-prose-invert-hr': theme('colors.rose[700]'),
'--tw-prose-invert-quotes': theme('colors.rose[100]'),
'--tw-prose-invert-quote-borders': theme('colors.rose[700]'),
'--tw-prose-invert-captions': theme('colors.rose[400]'),
'--tw-prose-invert-code': theme('colors.white'),
'--tw-prose-invert-pre-code': theme('colors.rose[300]'),
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': theme('colors.rose[600]'),
'--tw-prose-invert-td-borders': theme('colors.rose[700]'),
},
},
}),
}
},
plugins: [

View file

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

View file

@ -1,2 +1,12 @@
<.flash_group flash={@flash} />
<%= @inner_content %>
<%= if @page_header do %>
<header class="page-header">
<h1><%= @page_title %></h1>
<p><%= Markdown.render(assigns[:content] || "") |> raw %></p>
</header>
<% end %>
<section class="page-grid">
<%= @inner_content %>
</section>

View file

@ -25,6 +25,7 @@
</script>
<script>
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
console.log("Dark Mode")
document.documentElement.dataset["mode"] = "dark"
} else {
delete document.documentElement.dataset["mode"]
@ -39,9 +40,7 @@
<nav class="container">
<ul>
<li>
<a href="/">
<span>Home</span>
</a>
<a href="/">Home</a>
</li>
<li class="flex-1"></li>
<%= if @current_user do %>
@ -68,19 +67,13 @@
<h3>Pages</h3>
<ul>
<li>
<a href="/about">
<span>About</span>
</a>
<%= active_link(@conn, "About", to: "/about") %>
</li>
<li>
<a href="/wiki">
<span>Wiki</span>
</a>
<%= active_link(@conn, "Wiki", to: "/wiki") %>
</li>
<li>
<a href="/bookmarks">
<span>Bookmarks</span>
</a>
<%= active_link(@conn, "Bookmarks", to: "/bookmarks") %>
</li>
</ul>
</div>
@ -90,9 +83,7 @@
<ul>
<%= for channel <- @channels do %>
<li>
<a href={~p"/channel/#{channel.slug}"}>
<%= channel.name %>
</a>
<%= active_link(@conn, channel.name, to: ~p"/channel/#{channel.slug}") %>
</li>
<% end %>
</ul>

View file

@ -3,6 +3,12 @@ defmodule ChiyaWeb.PageController do
alias Chiya.Channels
plug :put_layout, html: {ChiyaWeb.Layouts, :public}
plug :put_assigns
defp put_assigns(conn, opts) do
conn
|> assign(:page_header, true)
end
def home(conn, params) do
settings = conn.assigns.settings
@ -22,7 +28,8 @@ defmodule ChiyaWeb.PageController do
channel: channel,
notes: notes,
meta: meta,
page_title: "Home"
page_title: "Home",
page_header: false
)
end
@ -33,7 +40,8 @@ defmodule ChiyaWeb.PageController do
render(conn, :channel,
channel: channel,
page_title: channel.name
page_title: channel.name,
content: channel.content
)
end
@ -42,7 +50,7 @@ defmodule ChiyaWeb.PageController do
render(conn, :tag,
tag: tag,
page_title: tag.name
page_title: "Tagged with #{tag.name}"
)
end
@ -53,8 +61,9 @@ defmodule ChiyaWeb.PageController do
if note.published_at || conn.assigns.current_user do
render(conn, :note,
note: note,
changeset: changeset,
page_title: note.name,
changeset: changeset
page_header: false
)
else
render_error(conn, :not_found)
@ -69,7 +78,7 @@ defmodule ChiyaWeb.PageController do
render(conn, :about,
note: note,
user: user,
page_title: "About"
page_title: user.name
)
else
render_error(conn, :not_found)
@ -84,7 +93,8 @@ defmodule ChiyaWeb.PageController do
render(conn, :wiki,
channel: channel,
notes: notes,
page_title: "Wiki"
page_title: channel.name,
content: channel.content
)
else
render_error(conn, :not_found)
@ -99,7 +109,7 @@ defmodule ChiyaWeb.PageController do
render(conn, :bookmarks,
channel: channel,
notes: notes,
page_title: "Bookmarks"
page_title: "#{Enum.count(notes)} Bookmarks"
)
else
render_error(conn, :not_found)

View file

@ -1,18 +1,23 @@
<article class="h-card hcard | stack">
<section>
<section class="flex gap-3">
<img
class="rounded-lg block text-center w-28 h-28 | u-photo"
src={ChiyaWeb.Uploaders.UserImage.url({@user.user_image, @current_user}, :thumb)}
/>
<header class="page-header | flex-1">
<h1 class="p-name"><%= @user.name %></h1>
<p><%= @user.bio %></p>
</header>
<p><%= @user.bio %></p>
</section>
<%= if @note do %>
<section class="prose max-w-none | p-summary e-content">
<%= Markdown.render(@note.content) |> raw %>
<section class="prose max-w-none | p-summary e-content">
<%= Markdown.render(@note.content) |> raw %>
</section>
</section>
<aside class="prose max-w-none">
<%= if has_outline?(@note) do %>
<h3>Outline</h3>
<section>
<%= raw(render_outline(@note)) %>
</section>
<% end %>
</article>
</aside>

View file

@ -1,13 +1,7 @@
<header class="page-header">
<h1><%= Enum.count(@notes) %> Bookmarks</h1>
</header>
<section class="page-grid">
<section>
<.note_list notes={@notes} layout={@channel.layout} />
</section>
<aside>
<.tag_bar notes={@notes} />
</aside>
<section>
<.note_list notes={@notes} layout={@channel.layout} />
</section>
<aside>
<.tag_bar notes={@notes} />
</aside>

View file

@ -1,14 +1,7 @@
<header class="page-header">
<h1><%= @channel.name %></h1>
<p><%= Markdown.render(@channel.content) |> raw %></p>
</header>
<section class="page-grid">
<section>
<.note_list notes={@channel.notes} layout={@channel.layout} />
</section>
<aside>
<.tag_bar notes={@channel.notes} />
</aside>
<section>
<.note_list notes={@channel.notes} layout={@channel.layout} />
</section>
<aside>
<.tag_bar notes={@channel.notes} />
</aside>

View file

@ -1,3 +1,5 @@
<.note_list notes={@notes} layout={@channel.layout} />
<section>
<.note_list notes={@notes} layout={@channel.layout} />
<Flop.Phoenix.pagination meta={@meta} path={~p"/"} />
<Flop.Phoenix.pagination meta={@meta} path={~p"/"} />
</section>

View file

@ -1,113 +1,111 @@
<section class="page-grid">
<section>
<article class="h-entry hentry note | stack container">
<header class="prose max-w-none">
<h1 class="p-name">
<%= @note.name %>
</h1>
</header>
<aside>
<.featured_images note={@note} />
</aside>
<section class="p-summary e-content | prose max-w-none">
<%= Markdown.render(@note.content) |> raw %>
</section>
<footer>
<a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
<a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
</footer>
<section>
<%= if !Enum.empty?(@note.images) do %>
<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>
</article>
</section>
<aside class="prose max-w-none">
<%= if has_outline?(@note) do %>
<h3>Outline</h3>
<section>
<%= raw(render_outline(@note)) %>
</section>
<% end %>
<h3>Properties</h3>
<section>
<article class="h-entry hentry note | stack container">
<header class="prose max-w-none">
<h1 class="p-name">
<%= @note.name %>
</h1>
</header>
<aside>
<.featured_images note={@note} />
</aside>
<section class="p-summary e-content | prose max-w-none">
<%= Markdown.render(@note.content) |> raw %>
</section>
<footer>
<a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
<a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
</footer>
<section>
<%= if !Enum.empty?(@note.images) do %>
<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>
<ul>
<li>
<%= if @note.published_at do %>
<strong>Published</strong>
<% else %>
<strong>Unpublished</strong>
<% end %>
</section>
</article>
<time class="dt-published"><%= pretty_date(@note.published_at) %></time>
</li>
<li>
<strong>Last updated</strong>
<time class="dt-published"><%= pretty_date(@note.published_at) %></time>
</li>
<li><strong>Tags</strong> <.tag_list note={@note} /></li>
<li><strong>Kind</strong> <%= @note.kind %></li>
</ul>
</section>
<aside class="prose max-w-none">
<%= if has_outline?(@note) do %>
<h3>Outline</h3>
<section>
<%= raw(render_outline(@note)) %>
</section>
<% end %>
<h3>Properties</h3>
<%= if String.length(@note.url || "") > 0 do %>
<h3><.icon name="hero-link" /> URL</h3>
<section>
<ul>
<li>
<%= if @note.published_at do %>
<strong>Published</strong>
<% else %>
<strong>Unpublished</strong>
<% end %>
<time class="dt-published"><%= pretty_date(@note.published_at) %></time>
</li>
<li>
<strong>Last updated</strong>
<time class="dt-published"><%= pretty_date(@note.published_at) %></time>
</li>
<li><strong>Tags</strong> <.tag_list note={@note} /></li>
<li><strong>Kind</strong> <%= @note.kind %></li>
<li><a href={@note.url}><%= @note.url %></a></li>
</ul>
</section>
<% end %>
<%= if String.length(@note.url || "") > 0 do %>
<h3><.icon name="hero-link" /> URL</h3>
<section>
<ul>
<li><a href={@note.url}><%= @note.url %></a></li>
</ul>
</section>
<% end %>
<%= if not Enum.empty?(@note.links_to) do %>
<h3>Notes linking here</h3>
<section>
<ul>
<%= for link <- @note.links_to do %>
<li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
<% end %>
</ul>
</section>
<% end %>
<h3>Admin</h3>
<%= if not Enum.empty?(@note.links_to) do %>
<h3>Notes linking here</h3>
<section>
<ul>
<li>
<a href={~p"/admin/notes/#{@note}/edit"} class="button">
Edit
</a>
</li>
<li>
<a href={~p"/admin/notes/#{@note}"} class="button">
Show in Admin
</a>
</li>
<%= for link <- @note.links_to do %>
<li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
<% end %>
</ul>
</section>
</aside>
</section>
<% end %>
<h3>Admin</h3>
<section>
<ul>
<li>
<a href={~p"/admin/notes/#{@note}/edit"} class="button">
Edit
</a>
</li>
<li>
<a href={~p"/admin/notes/#{@note}"} class="button">
Show in Admin
</a>
</li>
</ul>
</section>
</aside>

View file

@ -1,14 +1,7 @@
<header class="page-header">
<h1><%= Enum.count(@tag.notes) %> Tagged with &ldquo;<%= @tag.name %>&rdquo;</h1>
<p><%= @tag.content %></p>
</header>
<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
<section class="col-span-1 md:col-span-2">
<.note_list notes={@tag.notes} />
</section>
<section>
<.tag_bar notes={@tag.notes} />
</section>
<section class="col-span-1 md:col-span-2">
<.note_list notes={@tag.notes} />
</section>
<aside>
<.tag_bar notes={@tag.notes} />
</aside>

View file

@ -1,14 +1,7 @@
<header class="page-header">
<h1><%= @channel.name %></h1>
<p><%= Markdown.render(@channel.content) |> raw %></p>
</header>
<section class="page-grid">
<section>
<.note_list notes={@notes} />
</section>
<aside>
<.tag_bar notes={@notes} />
</aside>
<section>
<.note_list notes={@notes} />
</section>
<aside>
<.tag_bar notes={@notes} />
</aside>

View file

@ -46,6 +46,7 @@ defmodule Chiya.MixProject do
{:jason, "~> 1.2"},
{:oban, "~> 2.14"},
{:phoenix, "~> 1.7.1"},
{:phoenix_active_link, "~> 0.3.2"},
{:phoenix_ecto, "~> 4.4"},
{:phoenix_html, "~> 3.3"},
{:phoenix_live_dashboard, "~> 0.8.0"},

View file

@ -36,6 +36,7 @@
"oban": {:hex, :oban, "2.15.4", "d49ab4ffb7153010e32f80fe9e56f592706238149ec579eb50f8a4e41d218856", [:mix], [{:ecto_sql, "~> 3.6", [hex: :ecto_sql, repo: "hexpm", optional: false]}, {:ecto_sqlite3, "~> 0.9", [hex: :ecto_sqlite3, repo: "hexpm", optional: true]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.16", [hex: :postgrex, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "5fce611fdfffb13e9148df883116e5201adf1e731eb302cc88cde0588510079c"},
"parse_trans": {:hex, :parse_trans, "3.4.1", "6e6aa8167cb44cc8f39441d05193be6e6f4e7c2946cb2759f015f8c56b76e5ff", [:rebar3], [], "hexpm", "620a406ce75dada827b82e453c19cf06776be266f5a67cff34e1ef2cbb60e49a"},
"phoenix": {:hex, :phoenix, "1.7.7", "4cc501d4d823015007ba3cdd9c41ecaaf2ffb619d6fb283199fa8ddba89191e0", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "8966e15c395e5e37591b6ed0bd2ae7f48e961f0f60ac4c733f9566b519453085"},
"phoenix_active_link": {:hex, :phoenix_active_link, "0.3.2", "946d013b0839341d85ac4259fadf944d9767186e424a78ef37d310beac92d840", [:mix], [{:phoenix_html, "~> 2.10 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "81fcd4333541d6f1586e1d5fd0c34efed9bc4129573862bea340e234b6f22aeb"},
"phoenix_ecto": {:hex, :phoenix_ecto, "4.4.2", "b21bd01fdeffcfe2fab49e4942aa938b6d3e89e93a480d4aee58085560a0bc0d", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "70242edd4601d50b69273b057ecf7b684644c19ee750989fd555625ae4ce8f5d"},
"phoenix_html": {:hex, :phoenix_html, "3.3.2", "d6ce982c6d8247d2fc0defe625255c721fb8d5f1942c5ac051f6177bffa5973f", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "44adaf8e667c1c20fb9d284b6b0fa8dc7946ce29e81ce621860aa7e96de9a11d"},
"phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.8.1", "c4f2a2d3b26e6ca684d162ccf18aaeed8bed2181896e0393d0a2959789482e51", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:ecto_sqlite3_extras, "~> 1.1.7 or ~> 1.2.0", [hex: :ecto_sqlite3_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "1ca0f954274ce1916f771f86b3d49a91d3447e7c32d171660676095c5f30abe9"},