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


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

	        <div class="thread-main">
	            <div class="post-body">
								<p>It depends. I like to keep everything in the same project unless I need to use the components in multiple, different projects. If this is the case, I would have a different Phoenix project for it, showcasing them using routes.</p>
<p>I know that having everything together with the main app is not the most scalable solution, but it works (if the components are organized, of course - thanks to the atomic design, I can manage them in a sane way). Listing all the components along with their docs in a simple route worked well in most of my use cases.</p>
<p>I want to explore how far I can use <code>ex_docs</code> (or LiveBook, idk) for documenting the components. Depending on the results, I’ll write a follow-up post.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="294481" 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/phoenix-blog-post-creating-a-frontend-style-guide-with-phoenix-components/54369/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-294481" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="294481"
                     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 #11"></div>
  </section>
</div>
    <div class="postbit" id="294897" data-post-id="294897">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body">
								<p><a class="mention" href="/u/mssantosdev" rel="nofollow">@mssantosdev</a> I think using defdelegate to wrap live components in one file doesn’t work because each live component has one render function. To use a live component one has to specify its module. I don’t know if using alias can achieve this wrapping?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="294897" 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/phoenix-blog-post-creating-a-frontend-style-guide-with-phoenix-components/54369/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-294897" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="294897"
                     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="294904" data-post-id="294904">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body">
								<p>You are right. I didn’t test if <code>defdelegate</code> would work with live_components when I answered you. It was a bad suggestion anyways, sorry.</p>
<p>I do think live_components can access atoms, molecules, and organisms, but they don’t require a similar code organization.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">/live
  /live_components
    contact_form.ex
    header.ex
    drawer.ex
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir"># contact_form
# You need to make sure this module can use core_components (I think it can by default, but need to verify)
defmodule AppWeb.LiveComponents.ContactForm do
  # If you generated an app with mix phx.new --live,
  # the line below would be: use MyAppWeb, :live_component
  use Phoenix.LiveComponent

  # The can access atoms, molecules, and organisms the same way liveviews can
  def render(assigns) do
    ~H"""
    &lt;.my_organism /&gt;
    """
  end
end
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;.live_component module={AppWeb.LiveComponents.ContactForm} id="contact_form" /&gt;
</code></pre>
<p>What do you think?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="294904" 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/phoenix-blog-post-creating-a-frontend-style-guide-with-phoenix-components/54369/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-294904" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="294904"
                     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="294946" data-post-id="294946">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body">
								<p>This makes sense.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="294946" 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/phoenix-blog-post-creating-a-frontend-style-guide-with-phoenix-components/54369/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-294946" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="294946"
                     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>