Packages

phoenix_kit

1.4.9
1.7.210 1.7.209 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

HexDocs

Current section

Files

Jump to
Readme
224 Versions
30 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web live modules blogging settings.html.heex
Raw

lib/phoenix_kit_web/live/modules/blogging/settings.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="container mx-auto px-4 py-6 space-y-6">

    <div class="flex items-center justify-between">

      <.link

        navigate={PhoenixKit.Utils.Routes.path("/admin/settings", locale: @current_locale)}

        class="btn btn-outline btn-sm"

      >

        <.icon name="hero-arrow-left" class="w-4 h-4 mr-1" />

        {gettext("Back to Settings")}

      </.link>

      <div class="text-right">

        <p class="text-sm text-base-content/70">{gettext("Project")}</p>

        <p class="text-lg font-semibold">{@project_title}</p>

      </div>

    </div>



    <header class="text-center space-y-2">

      <p class="text-sm uppercase tracking-wide text-base-content/60">

        {gettext("Blogging Module")}

      </p>

      <h1 class="text-4xl font-bold text-base-content">{gettext("Manage Blogs")}</h1>

      <p class="text-base text-base-content/70 max-w-2xl mx-auto">

        {gettext(

          "Create dedicated blogs your team can publish to. Each blog appears as its own tab in the blogging workspace."

        )}

      </p>

    </header>



    <div class="grid gap-6 lg:grid-cols-3">

      <div class="card bg-base-100 shadow-xl border border-base-200 lg:col-span-2">

        <div class="card-body space-y-6">

          <div class="space-y-2">

            <h2 class="text-2xl font-semibold text-base-content">{gettext("Blogs")}</h2>

            <p class="text-sm text-base-content/70">

              {gettext(

                "Create dedicated blogs like Product Updates, Release Notes, or Company News. Each blog stores its content in structured folders on disk."

              )}

            </p>

          </div>



          <div class="rounded-lg border border-dashed border-base-300 bg-base-100/40 p-6">

            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

              <div class="space-y-1">

                <h3 class="text-lg font-semibold text-base-content">

                  {gettext("Ready to add a new blog?")}

                </h3>

                <p class="text-sm text-base-content/70">

                  {gettext(

                    "Pick a name, choose your storage mode, and configure details in the dedicated creation flow."

                  )}

                </p>

              </div>

              <.link

                navigate={Routes.path("/admin/settings/blogging/new", locale: @current_locale)}

                class="btn btn-primary btn-sm self-start sm:self-center"

              >

                <.icon name="hero-plus-circle" class="w-4 h-4 mr-1" /> {gettext("Create Blog")}

              </.link>

            </div>

          </div>



          <%= if @blogs == [] do %>

            <div class="alert alert-info">

              <.icon name="hero-information-circle" class="w-5 h-5" />

              <div>

                <h3 class="font-bold">{gettext("No blogs yet")}</h3>

                <p class="text-sm">

                  {gettext("Create your first blog to start publishing content.")}

                </p>

              </div>

            </div>

          <% else %>

            <div class="space-y-4">

              <%= for blog <- @blogs do %>

                <div class="border border-base-200 rounded-lg p-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">

                  <div class="space-y-1">

                    <div class="flex items-center gap-2">

                      <p class="text-base font-semibold text-base-content">{blog["name"]}</p>

                      <span class={[

                        "badge badge-sm uppercase",

                        if(blog["mode"] == "slug", do: "badge-primary", else: "badge-ghost")

                      ]}>

                        {blog["mode"] || "timestamp"}

                      </span>

                    </div>

                    <p class="text-xs text-base-content/60">

                      {gettext("Slug")}: <code class="font-mono">{blog["slug"]}</code>

                    </p>

                  </div>

                  <div class="flex flex-wrap gap-2">

                    <.link

                      navigate={

                        Routes.path("/admin/blogging/#{blog["slug"]}", locale: @current_locale)

                      }

                      class="btn btn-outline btn-sm"

                    >

                      <.icon name="hero-arrow-top-right-on-square" class="w-4 h-4 mr-1" /> {gettext(

                        "Open Admin"

                      )}

                    </.link>

                    <.link

                      navigate={

                        Routes.path(

                          "/admin/settings/blogging/#{blog["slug"]}/edit",

                          locale: @current_locale

                        )

                      }

                      class="btn btn-ghost btn-sm"

                    >

                      <.icon name="hero-pencil-square" class="w-4 h-4 mr-1" /> {gettext("Edit")}

                    </.link>

                    <button

                      type="button"

                      phx-click="remove_blog"

                      phx-value-slug={blog["slug"]}

                      class="btn btn-ghost btn-sm text-error hover:bg-error hover:text-error-content"

                      data-confirm={

                        gettext(

                          "Move this blog to trash? The directory will be renamed with a timestamp."

                        )

                      }

                    >

                      <.icon name="hero-trash" class="w-4 h-4 mr-1" /> {gettext("Delete")}

                    </button>

                  </div>

                </div>

              <% end %>

            </div>

          <% end %>

        </div>

      </div>



      <aside class="card bg-base-100 shadow-xl border border-base-200">

        <div class="card-body space-y-4">

          <h3 class="text-xl font-semibold text-base-content">{gettext("How it works")}</h3>

          <ul class="text-sm text-base-content/70 space-y-3">

            <li>• {gettext("Each blog becomes a dedicated publishing workspace.")}</li>

            <li>

              • {gettext("Posts are organized by date & time with multi-language support.")}

            </li>

            <li>

              • {gettext(

                "Files live under priv/static/blogging for easy versioning and deployment."

              )}

            </li>

            <li>

              • {gettext(

                "Language variants are automatically created based on enabled languages."

              )}

            </li>

          </ul>

        </div>

      </aside>

    </div>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>