bc14696f57
Goal: have a personal blog, and try out another point in the 'modular app design with elixir' space. Designing OTP systems with elixir had some interesting ideas.
92 lines
2.6 KiB
Elixir
92 lines
2.6 KiB
Elixir
defmodule Blogex.Layout do
|
|
@moduledoc """
|
|
Minimal HTML layout for Blogex pages.
|
|
|
|
Provides a default HTML shell when serving blog content to browsers.
|
|
Host apps can override by providing their own layout module via the
|
|
`:layout` option on the router.
|
|
"""
|
|
|
|
use Phoenix.Component
|
|
import Blogex.Components
|
|
|
|
@doc """
|
|
Wraps blog content in a minimal HTML page.
|
|
"""
|
|
attr :title, :string, required: true
|
|
attr :inner_content, :any, required: true
|
|
|
|
def page(assigns) do
|
|
~H"""
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{@title}</title>
|
|
</head>
|
|
<body style="max-width: 48rem; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif;">
|
|
{Phoenix.HTML.raw(@inner_content)}
|
|
</body>
|
|
</html>
|
|
"""
|
|
end
|
|
|
|
@doc "Renders the post index page."
|
|
def index_page(assigns) do
|
|
~H"""
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{@blog_title}</title>
|
|
</head>
|
|
<body style="max-width: 48rem; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif;">
|
|
<h1>{@blog_title}</h1>
|
|
<p>{@blog_description}</p>
|
|
<.post_index posts={@posts} base_path={@base_path} />
|
|
<.pagination page={@page} total_pages={@total_pages} base_path={@base_path} />
|
|
</body>
|
|
</html>
|
|
"""
|
|
end
|
|
|
|
@doc "Renders a single post page."
|
|
def show_page(assigns) do
|
|
~H"""
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{@post.title}</title>
|
|
</head>
|
|
<body style="max-width: 48rem; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif;">
|
|
<nav><a href={@base_path}>← Back</a></nav>
|
|
<.post_show post={@post} />
|
|
</body>
|
|
</html>
|
|
"""
|
|
end
|
|
|
|
@doc "Renders a tag listing page."
|
|
def tag_page(assigns) do
|
|
~H"""
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{@blog_title} — #{@tag}</title>
|
|
</head>
|
|
<body style="max-width: 48rem; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif;">
|
|
<nav><a href={@base_path}>← Back</a></nav>
|
|
<h1>Posts tagged "{@tag}"</h1>
|
|
<.post_index posts={@posts} base_path={@base_path} />
|
|
</body>
|
|
</html>
|
|
"""
|
|
end
|
|
end
|