<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="315221" data-post-id="315221">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jamieorc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jamieorc/120/4600_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jamieorc
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I can render a custom component function with an inner_block slot:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule PensieveWeb.MemoryHTML do
  use PensieveWeb, :html

  embed_templates "/memory_html/*"
  attr :foo, :string
  slot :inner_block
  def foobar(assigns) do
    ~H"""
    &lt;div class="italic mb-4"&gt;
      Foo is &lt;%= @foo %&gt;
      &lt;%= render_slot(@inner_block) %&gt;
    &lt;/div&gt;
    """
  end
end
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir">= foobar(%{foo: "this is foo"})
  h1.text-red-500.mb-6 The slot
</code></pre>
<p>~~This works as expected, so POC is good… ~~Now I just need to understand how to get the Core Components to work in the Slim templates.</p>
<p><strong>Nope. I looked at the source and “The Slot” is not rendered inside the div.</strong></p>
<details>
<summary>
Summary</summary>
<p>This text will be hidden</p>
</details> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315221" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-315221" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315221"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="315226" data-post-id="315226">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jamieorc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jamieorc/120/4600_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jamieorc
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>populimited’s fork of Slime and Phoenix-Slime shows support for components using a colon prefix</p>
<p><a href="https://github.com/populimited/slime/tree/no-compile#heex-support" rel="noopener nofollow ugc">https://github.com/populimited/slime/tree/no-compile#heex-support</a></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">:greet user=@current_user.name
  | Hello there!
</code></pre>
<p>Transforms into</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;.greet user={@current_user.name}&gt;Hello there!&lt;/.greet&gt;
</code></pre>
<p>The README says that,<br>
“When using slime with Phoenix, the <code>phoenix_slime</code> package will call <code>precompile_heex/2</code> and pass the resulting valid HEEx to <a href="https://hexdocs.pm/eex/EEx.html" rel="noopener nofollow ugc"><code>EEx</code></a> with <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.HTMLEngine.html#handle_text/3" rel="noopener nofollow ugc"><code>Phoenix.LiveView.HTMLEngine</code></a> as the <code>engine:</code> option. This will produce the final html.”</p>
<p>Unfortunately, the following error occurs:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">** (Slime.TemplateSyntaxError) I found a HEEx component, but this is not compiling to a HEEx file
</code></pre>
<p>As populimited has turned off issues, I can’t ask him/her about this.</p>
<p><a class="mention" href="/u/silverdr" rel="nofollow">@silverdr</a> Do you have any insight?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315226" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-315226" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315226"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="315237" data-post-id="315237">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jamieorc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jamieorc/120/4600_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jamieorc
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><strong>Got this solved.</strong> Long story short, it was a combination of configuration and file ending.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">config :phoenix, :template_engines,
  slim: PhoenixSlime.Engine,
  slime: PhoenixSlime.Engine,
  sheex: PhoenixSlime.LiveView.HTMLEngine
  # slimleex: PhoenixSlime.LiveViewEngine # If you want to use LiveView
</code></pre>
<p>I didn’t have <em>sheex</em> originally, as slimleex had been generated. Populimited’s code had <em>sheex</em> in config with <em>PhoenixSlime.LiveView.HTMLEngine</em> as the value. Once I added that and changed the file ending from <em>slim</em> to <em>sheex</em>, my components worked as expected.</p>
<p>For example in my index.html.sheex file:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">:link href=~p"/memories/new" class="text-sky-500 hover:underline"
  'new memory
</code></pre>
<p>Now works. It is rendered in the brower as</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;!-- &lt;Phoenix.Component.link&gt; lib/phoenix_component.ex:2670 --&gt;
&lt;a href="/memories/new" class="text-sky-500 hover:underline"&gt;new memory &lt;/a&gt;
&lt;!-- &lt;/Phoenix.Component.link&gt; --&gt;`
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315237" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-315237" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315237"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="315274" data-post-id="315274">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jamieorc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jamieorc/120/4600_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jamieorc
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Here’s a more complicated example using the table component.</p>
<p>HEEX version:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;.table id="memories" rows={@memories}&gt;
  &lt;:col :let={memory} label="Title"&gt;&lt;%= memory.title %&gt;&lt;/:col&gt;
  &lt;:col :let={memory} label="Added"&gt;&lt;%= memory.inserted_at %&gt;&lt;/:col&gt;
  &lt;:action :let={memory}&gt;
    &lt;.link href={~p"/memories/#{memory}"} class="text-sky-500 hover:underline"&gt;View&lt;/.link&gt;
    ·
    &lt;.link href={~p"/memories/#{memory}/edit"} class="text-sky-500 hover:underline"&gt;Edit&lt;/.link&gt;
    ·
    &lt;.link href={~p"/memories/#{memory}"} method="delete" class="text-sky-500 hover:underline"&gt;Delete&lt;/.link&gt;
  &lt;/:action&gt;
</code></pre>
<p>Equivalent SHEEX version:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">:table id="memories" rows=@memories
  ::col :let=memory label="Title" = memory.title
  ::col :let=memory label="Added" = memory.inserted_at
  ::action :let=memory
    :link href=~p"/memories/#{memory}" class="text-sky-500 hover:underline" View
    |&amp;nbsp; · &amp;nbsp;
    :link href=~p"/memories/#{memory}/edit" class="text-sky-500 hover:underline" Edit
    |&amp;nbsp; · &amp;nbsp;
    :link href=~p"/memories/#{memory}" method="delete" class="text-sky-500 hover:underline" Delete
</code></pre>
<p>And the SHEEX (Slim) result.</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/2/9/29de843de25821bed613c262c02dd073a0feb56c.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/29de843de25821bed613c262c02dd073a0feb56c" title="Screenshot 2024-01-20 at 8.35.58 AM" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/2/9/29de843de25821bed613c262c02dd073a0feb56c.jpeg" alt="Screenshot 2024-01-20 at 8.35.58 AM" data-base62-sha1="5YojA5mVvJ7ZyahamYhhpMe673C" width="690" height="445" data-dominant-color="FBFBFC"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screenshot 2024-01-20 at 8.35.58 AM</span><span class="informations">1200×775 28.5 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>Good news for all you who still want to use Slim(e) in your Phoenix 1.7.x apps.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315274" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-315274" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315274"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="315276" data-post-id="315276">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jamieorc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jamieorc/120/4600_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jamieorc
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/arrowsmith" rel="nofollow">@arrowsmith</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315276" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-315276" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315276"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="315453" data-post-id="315453">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hubertlepicki" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hubertlepicki/120/6822_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hubertlepicki
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>to be fair, the plain HEEX version now looks more readable than the Slime version. One of the benefits of the original Slim was that it reduced the cognitive load, you just used tags with the name and didn’t have to worry about &lt; or &gt; or closing them, and now you have additional syntax that’s using single : or double :: and it just looks worse to me.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315453" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-315453" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315453"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="315507" data-post-id="315507">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="smathy" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/smathy/120/20941_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  smathy
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>From where I sit, the same argument works against HEEX: now you have additional syntax that’s using <code>&lt;.</code> or <code>&lt;:</code>.</p>
<p>The Slime drops <code>&lt;&gt;</code>s, <code>&lt;%</code>s, <code>{}</code>s, and end tags, which is still significantly less noise and I’m sure worth it to many for the cognitive load of remembering <code>:component</code> and <code>::named_slot</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315507" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-315507" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315507"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="315510" data-post-id="315510">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jamieorc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jamieorc/120/4600_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jamieorc
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Exactly how I feel. Too much noise in HEEX and ERB templates.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315510" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-315510" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315510"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="315512" data-post-id="315512">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hubertlepicki" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hubertlepicki/120/6822_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hubertlepicki
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>True, that’s why I like most Surface UI of these all, in terms of syntax-wise it’s just tags. Similar: React.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315512" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-315512" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315512"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
    <div class="postbit" id="325379" data-post-id="325379">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sreyansjain" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sreyansjain/120/16464_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sreyansjain
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just wanted to document here that <a href="https://hex.pm/packages/sneeze" rel="nofollow">Sneeze </a> is an extremely simple and awesome html templating library for elixir. It is just function and lists. So you can have components, slots, etc all in an extremely simple syntax (just lists and maps). Highly recommended.<br>
I would consider it feature complete.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="325379" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/indentation-based-html-templating-language-compiling-to-heex-leex-eex/42385/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-325379" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="325379"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>