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/publishing/preview.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title={@page_title}
current_path={@current_path}
project_title={@project_title}
current_locale={@current_locale}
>
<div class="min-h-screen bg-base-100">
<%!-- Preview Header --%>
<div class="bg-info text-info-content py-3 px-4 sticky top-0 z-50 shadow-lg">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center gap-3">
<.icon name="hero-eye" class="w-5 h-5" />
<span class="font-semibold">{gettext("Preview Mode")}</span>
<span class="text-sm opacity-80">— {gettext("Showing saved content")}</span>
</div>
<div class="flex gap-2">
<button type="button" class="btn btn-sm btn-ghost" phx-click="back_to_editor">
<.icon name="hero-pencil-square" class="w-4 h-4 mr-1" />
{gettext("Back to Editor")}
</button>
</div>
</div>
</div>
<%!-- Preview Content --%>
<%= if @error do %>
<div class="container mx-auto px-4 py-12">
<div class="alert alert-error">
<.icon name="hero-exclamation-triangle" class="w-6 h-6" />
<div>
<h3 class="font-bold">{gettext("Preview Error")}</h3>
<p class="text-sm">{@error}</p>
</div>
</div>
</div>
<% else %>
<%= if @rendered_content do %>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<style>
.publishing-markdown h1 {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 700;
margin-top: 2.5rem;
margin-bottom: 1.5rem;
}
.publishing-markdown h2 {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
}
.publishing-markdown h3 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
margin-top: 1.75rem;
margin-bottom: 0.75rem;
}
.publishing-markdown h4 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.publishing-markdown p {
margin-top: 1rem;
margin-bottom: 1rem;
line-height: 1.8;
}
.publishing-markdown ul,
.publishing-markdown ol {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.publishing-markdown li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.publishing-markdown code {
background-color: rgba(15, 23, 42, 0.08);
color: inherit;
padding: 0.2rem 0.4rem;
border-radius: 0.375rem;
font-size: 0.95em;
}
.publishing-markdown pre {
background-color: rgba(15, 23, 42, 0.08);
padding: 1rem;
border-radius: 0.75rem;
overflow-x: auto;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.publishing-markdown blockquote {
border-left: 4px solid rgba(15, 23, 42, 0.15);
padding-left: 1rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
font-style: italic;
color: rgba(15, 23, 42, 0.8);
}
.publishing-markdown table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.publishing-markdown th,
.publishing-markdown td {
border: 1px solid rgba(15, 23, 42, 0.15);
padding: 0.75rem;
text-align: left;
}
.publishing-markdown th {
background-color: rgba(15, 23, 42, 0.08);
font-weight: 600;
}
.publishing-markdown hr {
border: none;
border-top: 1px solid rgba(15, 23, 42, 0.15);
margin-top: 2rem;
margin-bottom: 2rem;
}
[data-theme="dark"] .publishing-markdown code {
background-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .publishing-markdown pre {
background-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .publishing-markdown blockquote {
border-left-color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .publishing-markdown th,
[data-theme="dark"] .publishing-markdown td {
border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .publishing-markdown th {
background-color: rgba(255, 255, 255, 0.12);
}
</style>
<div class="publishing-markdown prose prose-lg max-w-none">
{@rendered_content}
</div>
</div>
<% else %>
<div class="container mx-auto px-4 py-12">
<div class="flex items-center justify-center">
<span class="loading loading-spinner loading-lg"></span>
</div>
</div>
<% end %>
<% end %>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>