Packages
phoenix_kit
1.7.77
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/modules/publishing/web/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 Banner --%>
<div class="bg-warning text-warning-content py-2 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 text-sm">{gettext("Preview Mode")}</span>
<span class="text-xs opacity-80">
— {gettext("This is how the post will appear to visitors")}
</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>
<%!-- 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 @post && @html_content do %>
<%!-- Public post interface --%>
<article class="post-container max-w-4xl mx-auto px-6 py-8">
<%!-- Breadcrumb Navigation (non-interactive in preview) --%>
<div class="breadcrumbs text-sm mb-6">
<ul>
<%= for breadcrumb <- @breadcrumbs do %>
<li>{breadcrumb.label}</li>
<% end %>
</ul>
</div>
<%!-- Post Header --%>
<header class="mb-8 border-b pb-6">
<%= if has_publication_date?(@post) do %>
<div class="flex items-center gap-2 text-sm text-base-content/70">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<time datetime={@post.metadata.published_at || ""}>
{format_post_date(@post, @group_slug)}
</time>
</div>
<% end %>
<div class="flex flex-wrap items-center gap-4 mt-4">
<%!-- Language Switcher (links to preview URLs) --%>
<%= if length(@translations) > 1 do %>
<.publishing_language_switcher
languages={build_preview_translations(@translations, @post, @group_slug)}
current_language={@current_language}
show_status={false}
size={:sm}
/>
<% end %>
<%!-- Version History Dropdown --%>
<%= if @version_dropdown do %>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-sm gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
v{@version_dropdown.current_version}
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-40 border border-base-200"
>
<%= for v <- @version_dropdown.versions do %>
<li>
<span class={"flex items-center justify-between #{if v.is_current, do: "active"}"}>
<span>v{v.version}</span>
<%= if v.is_live do %>
<span class="badge badge-success badge-xs h-auto">live</span>
<% end %>
</span>
</li>
<% end %>
</ul>
</div>
<% end %>
</div>
<h1 class="text-3xl font-bold mt-4">
{@post.metadata.title || PhoenixKit.Modules.Publishing.Constants.default_title()}
</h1>
</header>
<%!-- Post Content --%>
<div class="prose prose-lg max-w-none">
{raw(@html_content)}
</div>
<%!-- Post Footer --%>
<footer class="mt-12 pt-6 border-t">
<span class="btn btn-ghost btn-sm opacity-60 cursor-not-allowed">
<.icon name="hero-arrow-left" class="w-4 h-4 mr-2" /> {gettext("Back to %{group}",
group: String.capitalize(@group_slug)
)}
</span>
</footer>
</article>
<% 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>