Packages
phoenix_kit
1.4.7
1.7.208
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit_web/live/modules/pages/view.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title={@page_title}
current_path={@url_path}
project_title={@project_title}
current_locale={@current_locale}
>
<div class="min-h-screen flex flex-col">
<%!-- Header --%>
<div class="border-b border-base-300 bg-base-100">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<%!-- Left: Back button and title --%>
<div class="flex items-center gap-4">
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/pages")}
class="btn btn-ghost btn-sm"
>
<PhoenixKitWeb.Components.Core.Icons.icon_arrow_left class="w-4 h-4" />
Back to Files
</.link>
<div>
<h1 class="text-xl font-bold">{Path.basename(@file_path || "")}</h1>
<%= if @metadata do %>
<div class="flex items-center gap-2 text-sm text-base-content/60">
<.page_status_badge status={@metadata.status} />
<%= if @metadata.author do %>
<span>by {@metadata.author}</span>
<% end %>
</div>
<% end %>
</div>
</div>
<%!-- Right: Edit button --%>
<div class="flex gap-2">
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/pages/edit?path=#{@file_path}")}
class="btn btn-primary btn-sm"
>
<PhoenixKitWeb.Components.Core.Icons.icon_edit class="w-4 h-4" /> Edit
</.link>
</div>
</div>
</div>
</div>
<%!-- Rendered Content Area --%>
<div class="flex-1 bg-base-100">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<%!-- GitHub-style markdown rendering with custom styles --%>
<article class="markdown-content">
<style>
.markdown-content {
color: oklch(var(--bc));
line-height: 1.75;
}
.markdown-content h1 {
font-size: 2.25rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid oklch(var(--b3));
}
.markdown-content h2 {
font-size: 1.875rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid oklch(var(--b3));
}
.markdown-content h3 {
font-size: 1.5rem;
font-weight: 700;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.markdown-content h4 {
font-size: 1.25rem;
font-weight: 700;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
.markdown-content h5 {
font-size: 1.125rem;
font-weight: 700;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.markdown-content h6 {
font-size: 1rem;
font-weight: 700;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
.markdown-content p {
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-content a {
color: oklch(var(--p));
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content strong {
font-weight: 700;
}
.markdown-content em {
font-style: italic;
}
.markdown-content code {
background-color: oklch(var(--b2));
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-size: 0.875em;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.markdown-content pre {
background-color: oklch(var(--b2));
border: 1px solid oklch(var(--b3));
border-radius: 0.5rem;
padding: 1rem;
overflow-x: auto;
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-content pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
font-size: 0.875rem;
}
.markdown-content blockquote {
border-left: 4px solid oklch(var(--b3));
padding-left: 1rem;
margin-left: 0;
margin-top: 1rem;
margin-bottom: 1rem;
font-style: italic;
color: oklch(var(--bc) / 0.8);
}
.markdown-content ul, .markdown-content ol {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.markdown-content ul {
list-style-type: disc;
}
.markdown-content ol {
list-style-type: decimal;
}
.markdown-content li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.markdown-content ul ul, .markdown-content ol ul {
list-style-type: circle;
}
.markdown-content ul ul ul, .markdown-content ol ul ul {
list-style-type: square;
}
.markdown-content table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-content th {
background-color: oklch(var(--b2));
border: 1px solid oklch(var(--b3));
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
}
.markdown-content td {
border: 1px solid oklch(var(--b3));
padding: 0.75rem 1rem;
}
.markdown-content img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-content hr {
border: 0;
border-top: 1px solid oklch(var(--b3));
margin-top: 2rem;
margin-bottom: 2rem;
}
.markdown-content del {
text-decoration: line-through;
opacity: 0.7;
}
</style>
{raw(@rendered_html)}
</article>
</div>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>