Add header tag with mobile viewport and title

Mobile First

This magic tag keeps a design consistent across desktop to mobile. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Looking nice on mobile was the main reason for adding the tag into %blog. As a bonus, I also added a tag that is pulled from the path given by <code>%blog-action</code>s. The title is seen in the tabs of the browser. </p> <p>@bonbud-macryg We can expand this to include a favicon. You may enjoy designing one of those. It would look like adding <code><link rel="icon" type="image/png" href="focus/assets/tile/png"></code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bonbud-macryg"><img src="https://avatars.githubusercontent.com/u/101650933?v=4" />bonbud-macryg</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <ul> <li><strong>Title tag:</strong> The <code><title></code> addition is a good idea, but a better solution to this problem would involve pulling out the value of the first H1 tag in the post. The last item in the post's <code>path</code> should just be the URL path, and it's arguably a flaw in the app that setting the custom URL feels like you're naming it. Feel free to either get the H1 out or just remove the <code><title></code> idea for now, I've got it in the to-do list either way.</li> <li><strong>Meta tag:</strong> What you're proposing here is correct. This meta tag is standard practice and should be in the blog posts themselves. (We should also be enclosing posts in a <code><body></code> tag, but…) Two questions: <ul> <li>Is there a reproducible before/after where the post looks bad on mobile before this change and better after, that can't be blamed on the CSS?</li> <li>Current implementation adds the header on publishing. Is there a way to add this <code><head></code> tag to all archived posts without getting a state change in <code>+on-load</code> involved?</li> </ul></li> </ul> <p>Given the points above I wonder if we should put this on the shelf for now and spec out a much more wide-ranging issue to improve the HTML for posts.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gmcz"><img src="https://avatars.githubusercontent.com/u/869452?v=4" />gmcz</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>I'm interested in helping with better HTML overall.</p> <blockquote> <p>Is there a reproducible before/after where the post looks bad on mobile before this change and better after, that can't be blamed on the CSS?</p> </blockquote> <p>This is asking the question backwards, in my opinion. The CSS is applied to the HTML. The CSS will behave differently with and without that tag. You should start with <em>great HTML</em> and do as much at that level as reasonable, and then layer in the CSS as-needed.</p> <p>Great HTML would include this <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag">viewport meta tag</a>. If you can reduce CSS as a result, great! If you need to modify it, that's OK.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

thecommons-urbit / blog

Add header tag with mobile viewport and title #1

Mobile First