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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I chose Surface partly into the project as HEEX wasn’t out yet. Surface/HEEX both get the job done in terms of reusable components. Surface has more functionality around components but HEEX is “official” so really up to you. I’d pick one and build a small library for yourself if you keep reusing them.</p>
<p>I’m biased of course (as a creator of Petal Components), but I personally pick components I need from <a href="https://github.com/petalframework/petal_components" rel="noopener nofollow ugc">Petal Components</a> and then slowly override them with your own.</p>
<p>Eg <code>import PetalComponents.Button</code> in your <code>app_web.ex</code>… then when you have your own buttons, import those instead.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="260539" 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/introducing-travel-massive-a-community-platform-built-with-phoenix-liveview/49774/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-260539" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="260539"
                     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 #21"></div>
  </section>
</div>
    <div class="postbit" id="266178" data-post-id="266178">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="ianc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ianc/120/27469_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  ianc
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey all, I’ve made a few more improvements to Travel Massive’s <a href="https://www.travelmassive.com/" rel="noopener nofollow ugc">community platform</a>:</p>
<ul>
<li>Updated to LiveView 0.18.2 <img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"> (updating to &lt;.link/&gt; tags took a while!)</li>
<li>New design for <a href="https://www.travelmassive.com/posts/troupe-148183304" rel="noopener nofollow ugc">Posts</a> (including new gallery mode made by <a class="mention" href="/u/daamsie" rel="nofollow">@daamsie</a>)</li>
<li>New design for  <a href="https://www.travelmassive.com/events/berlin-travel-massive-reboot-2737180700" rel="noopener nofollow ugc">Events</a> (removed the sidebar, improved the layout)</li>
<li>New design for <a href="https://www.travelmassive.com/@global_gaz" rel="noopener nofollow ugc">Member profiles</a> (show everything, no more tabs)</li>
<li>Hover over member profiles to see more details (anywhere on the site)</li>
<li>Shareable <a href="https://www.travelmassive.com/topic/digital-nomad" rel="noopener nofollow ugc">topic pages</a> (will build dynamic sharing image from top posts in the topic)</li>
<li>Member stats (social followers, mozrank, etc) on our <a href="https://www.travelmassive.com/community" rel="noopener nofollow ugc">member directory</a></li>
</ul>
<p>Let me know if you’ve got any feedback or suggestions, and I hope these updates show what’s possible with LiveView! <img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266178" data-batch-url="/posts/batch_likers">
                        3
                      </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/introducing-travel-massive-a-community-platform-built-with-phoenix-liveview/49774/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-266178" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266178"
                     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 #22"></div>
  </section>
</div>
    <div class="postbit" id="286525" data-post-id="286525">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is very impressive! Congrats <img src="https://forum.elixirforum.com/images/emoji/apple/blush.png?v=15" title=":blush:" class="emoji" alt=":blush:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="286525" 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/introducing-travel-massive-a-community-platform-built-with-phoenix-liveview/49774/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-286525" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="286525"
                     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>