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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Crowdhailer" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Crowdhailer/120/2438_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Crowdhailer
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Raxx</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey all,</p>
<p>We’ve been working hard on building <a href="https://trykno.com" rel="noopener nofollow ugc">trykno.com</a> over the last few months.<br>
As we are built with Elixir it seems sensible that our first integration guide should be for elixir and phoenix.</p>
<p><a href="https://github.com/trykno/kno-elixir" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/trykno/kno-elixir</a></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/9/e/9e8e5755f32086241d68e132195709030566ce60.png" data-download-href="https://forum.elixirforum.com/uploads/default/9e8e5755f32086241d68e132195709030566ce60" title="sign-in-page" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/9/e/9e8e5755f32086241d68e132195709030566ce60_2_690x498.png" alt="sign-in-page" data-base62-sha1="mCEp6eZf0THlayAmnPX07IRMyAg" width="690" height="498" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/9/e/9e8e5755f32086241d68e132195709030566ce60_2_690x498.png, https://forum.elixirforum.com/uploads/default/original/3X/9/e/9e8e5755f32086241d68e132195709030566ce60.png 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/9/e/9e8e5755f32086241d68e132195709030566ce60.png 2x" data-dominant-color="CED4D5"><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">sign-in-page</span><span class="informations">976×705 61.3 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>(I’ve shared this on github because we thought it might need a library but in the end we didn’t build one so the README is simply an integration guide)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="148719" 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/phoenix-blog-posts/149/77">Post #76</a>
	                </div>
	            </div>
              <div id="likers-container-148719" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="148719"
                     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 #76"></div>
  </section>
</div>
    <div class="postbit" id="150137" data-post-id="150137">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="onebox allowlistedgeneric" data-onebox-src="https://www.poeticoding.com/the-primitives-of-phoenix-liveview/">
  <header class="source">
      <img src="https://poeticblog.wpenginepowered.com/wp-content/uploads/2018/12/cropped-alvise-avatar-32x32.jpg" class="site-icon" alt="" width="32" height="32">

      <a href="https://www.poeticoding.com/the-primitives-of-phoenix-liveview/" target="_blank" rel="noopener nofollow ugc" title="04:30PM - 12 November 2019">Poeticoding – 12 Nov 19</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/387;"><img src="https://www.poeticoding.com/wp-content/uploads/2019/11/featured_image.jpg" class="thumbnail" alt="" width="690" height="387"></div>

<h3><a href="https://www.poeticoding.com/the-primitives-of-phoenix-liveview/" target="_blank" rel="noopener nofollow ugc">The Primitives of Phoenix LiveView</a></h3>

  <p>Focus on LiveView's primitives: the bricks we need to know to building a real-time app with this technology. We take a special look at what happens behind the scenes, understanding the LiveView Life-cycle while inspecting websocket messages and DOM...</p>

  <p>
    <span class="label1">Est. reading time: 8 minutes</span>
  </p>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>Hey!</p>
<p>This episode is focused on LiveView’s primitives, exploring the necessary bricks to build an app with this technology. A special look at what happens behind the scenes, understanding Life-cycle while inspecting websocket messages and DOM updates.</p>
<p>Hope you like it and that can be useful <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"> As always, please let me know if you have any question or feedback!</p>
<p>Alvise</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="150137" 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-posts/149/78">Post #77</a>
	                </div>
	            </div>
              <div id="likers-container-150137" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="150137"
                     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 #77"></div>
  </section>
</div>
    <div class="postbit" id="152347" data-post-id="152347">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a href="https://medium.com/@moxicon/collapsing-ecto-migrations-c58a32b6a4f0" class="onebox" target="_blank" rel="noopener nofollow ugc">https://medium.com/@moxicon/collapsing-ecto-migrations-c58a32b6a4f0</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="152347" 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/phoenix-blog-posts/149/80">Post #79</a>
	                </div>
	            </div>
              <div id="likers-container-152347" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="152347"
                     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 #79"></div>
  </section>
</div>
    <div class="postbit" id="161298" data-post-id="161298">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="siddhant3030" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  siddhant3030
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi everyone, I was doing some research on how the request and response cycle works in phoenix? After doing lots of research and reading. I have written my own understanding of it. Here’s a link:-</p>
<p><a href="https://medium.com/swlh/request-and-response-cycle-in-phoenix-part-2-f6f673d7fca1" class="onebox" target="_blank" rel="noopener nofollow ugc">https://medium.com/swlh/request-and-response-cycle-in-phoenix-part-2-f6f673d7fca1</a></p>
<p>Let me know if I can do some changes and if someone wants to discuss I’m open to that.</p>
<p>Thanks</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="161298" 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-posts/149/81">Post #80</a>
	                </div>
	            </div>
              <div id="likers-container-161298" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="161298"
                     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 #80"></div>
  </section>
</div>
    <div class="postbit" id="162006" data-post-id="162006">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi elixir friends!</p>
<p>I’ve just published a quick post about LiveView and JS hooks with Select2. The previous version of this article was using different workarounds since JS hooks were not available. It’s now much easier to use select2 with LiveView.</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://www.poeticoding.com/phoenix-liveview-javascript-hooks-and-select2/">
  <header class="source">
      <img src="https://poeticblog.wpenginepowered.com/wp-content/uploads/2018/12/cropped-alvise-avatar-32x32.jpg" class="site-icon" alt="" width="32" height="32">

      <a href="https://www.poeticoding.com/phoenix-liveview-javascript-hooks-and-select2/" target="_blank" rel="noopener nofollow ugc" title="11:48AM - 05 February 2020">Poeticoding – 5 Feb 20</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/552;"><img src="https://www.poeticoding.com/wp-content/uploads/2020/02/featured_image.jpg" class="thumbnail" alt="" width="690" height="552"></div>

<h3><a href="https://www.poeticoding.com/phoenix-liveview-javascript-hooks-and-select2/" target="_blank" rel="noopener nofollow ugc">Phoenix LiveView JavaScript Hooks and Select2</a></h3>

  <p>With LiveView JavaScript hooks it's now really easy to do JS interop. In this article we see how simple is now using select2 with Phoenix LiveView</p>

  <p>
    <span class="label1">Est. reading time: 4 minutes</span>
  </p>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="162006" 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-posts/149/82">Post #81</a>
	                </div>
	            </div>
              <div id="likers-container-162006" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="162006"
                     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 #81"></div>
  </section>
</div>
    <div class="postbit" id="165972" data-post-id="165972">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Crowdhailer" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Crowdhailer/120/2438_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Crowdhailer
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Raxx</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a href="https://dev.to/crowdhailer/adding-did-authentication-to-a-phoenix-web-app-18ec" class="onebox" target="_blank" rel="noopener nofollow ugc">https://dev.to/crowdhailer/adding-did-authentication-to-a-phoenix-web-app-18ec</a></p>
<p>I’ve just published this integration guide adding passwordless authentication to your phoenix application<br>
using the openid_connect library to integrate with DID.</p>
<p><a href="https://did.app" rel="noopener nofollow ugc">DID.app</a> is an Identity Provider, that authenticates users by verifying access to either an email address or securely stored private key.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="165972" 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-posts/149/83">Post #82</a>
	                </div>
	            </div>
              <div id="likers-container-165972" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="165972"
                     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 #82"></div>
  </section>
</div>
    <div class="postbit" id="167620" data-post-id="167620">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="onebox allowlistedgeneric" data-onebox-src="https://www.poeticoding.com/liveview-click-event-and-offsetx-offsety-coordinates/">
  <header class="source">
      <img src="https://poeticblog.wpenginepowered.com/wp-content/uploads/2018/12/cropped-alvise-avatar-32x32.jpg" class="site-icon" alt="" width="32" height="32">

      <a href="https://www.poeticoding.com/liveview-click-event-and-offsetx-offsety-coordinates/" target="_blank" rel="noopener nofollow ugc" title="05:05PM - 19 March 2020">Poeticoding – 19 Mar 20</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:500/283;"><img src="https://www.poeticoding.com/wp-content/uploads/2020/03/featured_image.png" class="thumbnail" alt="" width="500" height="283"></div>

<h3><a href="https://www.poeticoding.com/liveview-click-event-and-offsetx-offsety-coordinates/" target="_blank" rel="noopener nofollow ugc">LiveView click event and offsetX, offsetY coordinates</a></h3>

  <p>Let's see how to use, in Phoenix LiveView, the phx-click binding along with offsetX and offsetY coordinates, which are useful to know exactly where the click happened inside an element.</p>

  <p>
    <span class="label1">Est. reading time: 3 minutes</span>
  </p>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>Hi!</p>
<p>I made a tiny tiny contribution to the LiveView project (<a href="https://el2.convertkit-mail.com/c/preview/dpheh0hz/aHR0cHM6Ly9naXRodWIuY29tL3Bob2VuaXhmcmFtZXdvcmsvcGhvZW5peF9saXZlX3ZpZXcvcHVsbC80OTg=" rel="noopener nofollow ugc">just two lines of code <img src="https://forum.elixirforum.com/images/emoji/apple/smiling_face.png?v=15" title=":smiling_face:" class="emoji" alt=":smiling_face:" loading="lazy" width="20" height="20"></a> available from  <em>release 0.5.0</em> ), which adds  <em>offsetX</em>  and  <em>offsetY</em>  coordinates to the click event metadata. These coordinates are useful to know exactly  <strong>where</strong>  the click happened  <strong>inside</strong>  the element.</p>
<p>In this article I show how to use  <em>phx-click</em>  and  <em>offsetX,Y</em>  coordinates, letting the user interacts with SVG elements.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="167620" 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/phoenix-blog-posts/149/84">Post #83</a>
	                </div>
	            </div>
              <div id="likers-container-167620" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="167620"
                     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 #83"></div>
  </section>
</div>
    <div class="postbit" id="167628" data-post-id="167628">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a href="https://medium.com/@ayoushchourasia/elixir-dynamic-queries-made-simple-46dfff6ac9aa" rel="noopener nofollow ugc">Elixir Dynamic Queries</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="167628" 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-posts/149/85">Post #84</a>
	                </div>
	            </div>
              <div id="likers-container-167628" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="167628"
                     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 #84"></div>
  </section>
</div>
    <div class="postbit" id="168005" data-post-id="168005">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi all.<br>
In this blog post, I would like to present my findings on how to store and visualize GPX tracks using Elixir/Phoenix, PostgreSQL and a little bit of JavaScript.</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://caspg.com/blog/playing-with-gpx-tracks-in-elixir-and-postgis">
  <header class="source">
      <img src="https://caspg.com/assets/favicon.ico" class="site-icon" alt="" width="48" height="48">

      <a href="https://caspg.com/blog/playing-with-gpx-tracks-in-elixir-and-postgis" target="_blank" rel="noopener nofollow ugc">caspg.com</a>
  </header>

  <article class="onebox-body">
    <img width="200" height="200" src="https://caspg.com/assets/circle.png" class="thumbnail onebox-avatar" alt="">

<h3><a href="https://caspg.com/blog/playing-with-gpx-tracks-in-elixir-and-postgis" target="_blank" rel="noopener nofollow ugc">Playing with GPX tracks in Elixir and PostGIS
    · Kacper Golinski</a></h3>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="168005" 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/phoenix-blog-posts/149/86">Post #85</a>
	                </div>
	            </div>
              <div id="likers-container-168005" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="168005"
                     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 #85"></div>
  </section>
</div>
    <div class="postbit" id="169741" data-post-id="169741">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Using custom fonts with Phoenix 1.4+ and Webpack is pretty straight-forward, but there seems to be a lot of pain online regarding asset directories so I wrote this:</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://alchemist.camp/articles/custom-font-phoenix-webpack">
  <header class="source">
      <img src="https://alchemist.camp/images/favicon-16x16-2aeade631734147fe66dcae9c6874451.png?vsn=d" class="site-icon" alt="" width="16" height="16">

      <a href="https://alchemist.camp/articles/custom-font-phoenix-webpack" target="_blank" rel="noopener nofollow ugc">alchemist.camp</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:640/320;"><img src="https://alchemist.camp/images/ac2-logo-og.png" class="thumbnail" alt="" width="640" height="320"></div>

<h3><a href="https://alchemist.camp/articles/custom-font-phoenix-webpack" target="_blank" rel="noopener nofollow ugc">Elixir learning: Using custom fonts with Phoenix</a></h3>

  <p>Elixir tutorial: Using custom fonts with Phoenix
      (tagged: Phoenix, Webpack, Static Assets, Fonts)</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="169741" 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-posts/149/87">Post #86</a>
	                </div>
	            </div>
              <div id="likers-container-169741" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="169741"
                     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 #86"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/149/load_more?page=9">Load more posts (51 remaining)</a>
</div></template></turbo-stream>