Packages

phoenix_kit

1.7.21
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
222 Versions
37 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web controllers blog_html index.html.heex
Raw

lib/phoenix_kit_web/controllers/blog_html/index.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  page_title={@page_title}

  current_path={@conn.request_path}

>

  <div class="blog-index-container max-w-6xl mx-auto px-6 py-8">

    <%!-- Breadcrumb Navigation --%>

    <div class="breadcrumbs text-sm mb-6">

      <ul>

        <%= for breadcrumb <- @breadcrumbs do %>

          <li>

            <%= if breadcrumb.url do %>

              <a href={breadcrumb.url}>{breadcrumb.label}</a>

            <% else %>

              {breadcrumb.label}

            <% end %>

          </li>

        <% end %>

      </ul>

    </div>

    <%!-- Blog Header --%>

    <header class="mb-8">

      <h1 class="text-4xl font-bold mb-2">{@blog["name"]}</h1>

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

        {pluralize(@total_count, "post", "posts")}

      </p>

      <%!-- Language Switcher --%>

      <%= if length(@translations) > 1 do %>

        <div class="mt-4">

          <.blog_language_switcher

            languages={build_public_translations(@translations, @current_language)}

            current_language={@current_language}

            show_status={false}

            size={:sm}

          />

        </div>

      <% end %>

    </header>

    <%!-- Posts Grid --%>

    <%= if @total_count > 0 do %>

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

        <%= for post <- @posts do %>

          <article class="card bg-base-200 shadow-md hover:shadow-lg transition-shadow">

            <%= if featured_image_url = featured_image_url(post, "medium") do %>

              <figure class="h-40 w-full overflow-hidden rounded-t-2xl bg-base-300">

                <img

                  src={featured_image_url}

                  alt={post.metadata.title || gettext("Featured image")}

                  class="h-full w-full object-cover"

                  loading="lazy"

                />

              </figure>

            <% end %>

            <div class="card-body">

              <h2 class="card-title text-xl">

                <a

                  href={build_post_url(@blog["slug"], post, @current_language)}

                  class="hover:text-primary"

                >

                  {post.metadata.title}

                </a>

              </h2>



              <% excerpt =

                if Map.get(post.metadata, :description) do

                  post.metadata.description

                else

                  extract_excerpt(post.content)

                end %>

              <%= if excerpt && excerpt != "" do %>

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

                  {excerpt}

                </p>

              <% end %>



              <div class="card-actions justify-between items-center mt-4">

                <time class="text-xs text-base-content/60" datetime={post.metadata.published_at}>

                  {format_date(post.metadata.published_at)}

                </time>



                <a

                  href={build_post_url(@blog["slug"], post, @current_language)}

                  class="btn btn-sm btn-primary"

                >

                  Read More →

                </a>

              </div>

            </div>

          </article>

        <% end %>

      </div>

      <%!-- Pagination --%>

      <%= if @total_pages > 1 do %>

        <div class="join mt-8 flex justify-center">

          <%= for page_num <- 1..@total_pages do %>

            <%= if page_num == @page do %>

              <button class="join-item btn btn-active">{page_num}</button>

            <% else %>

              <a

                href={blog_listing_path(@current_language, @blog["slug"], page: page_num)}

                class="join-item btn"

              >

                {page_num}

              </a>

            <% end %>

          <% end %>

        </div>

      <% end %>

    <% else %>

      <div class="alert alert-info">

        <svg

          xmlns="http://www.w3.org/2000/svg"

          fill="none"

          viewBox="0 0 24 24"

          class="stroke-current shrink-0 w-6 h-6"

        >

          <path

            stroke-linecap="round"

            stroke-linejoin="round"

            stroke-width="2"

            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"

          >

          </path>

        </svg>

        <span>No published posts yet.</span>

      </div>

    <% end %>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>