6 ms·

Here is a better solution: You write your blog post md directly into the body and deploy a builtin minimal md engine. <html> <body> # Blog Post Ti

Here is a better solution: You write your blog post md directly into the body and deploy a builtin minimal md engine. <html> <body> # Blog Post Title <br> Welcome to this simple blog post </body> <js> document.body.innerHTML = document.body.innerHTML.split('<br>').map((line) => line.trim().startsWith('# ') ? `<h1>${line}</h1>` : `<p>${line.split('# ')[1]}</p>`).join(''); // add more md features here if desired <js/> </html> (replace js with script, which i cant write here on hn apparently) Obviously move the JavaScript to its own file and embed it to avoid repetition across blog entries. Plus, move it into 'DOMContentLoaded' event handler to be safe. Could it get any more elegant and beautiful?

ravenstine 3y ago
Actually, yes. You can eliminate the body and HTML tags.
- deleted 3y ago
  [deleted]
- codetrotter 3y ago
  Here is an example of the kind of pretty minimal but valid HTML5 that I usually write when I write html by hand: <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello</title> <style> /* css here */ </style> <header> <h1>Cool beanz</h1> </header> <nav> <ul> <li>Home <li><a href=/foo.htm>Foo</a> <li><a href=bar.htm>Bar</a> </ul> </nav> <article> <h2>The Life and Dreams of Irish Setters</h2> <p>Widely appreciated for their qualities, the Irish Setter is a breed of dog to behold. <p>Lorem ipsum and so on and so forth. </article> <footer> <p>Copyright © 2024, Bob Schmob </footer> Check it :) > Document checking completed. No errors or warnings to show. https://validator.w3.org/nu/#textarea https://validator.w3.org/nu/#textarea
  - mikae1 3y ago
    Don't forget Server Side Includes :)  The Page Title  The Article Title  <p>The article content</p> 
  - robador 3y ago
    I've got to ask, the H1, why is the site name the main heading and not the title of the article?
    - codetrotter 3y ago
      Mainly because it is recommended [1] to have only one h1 on a page. And my pages sometimes contain multiple articles. It feels natural to me to have h1 be the site name. And have h2 be the content title. And it happens to work well when multiple unrelated articles or other kinds of content are on the page because then I use h2 for each of those. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element/He...
mikae1 3y ago
I do not understand peoples problem with writing HTML. You could use an editor that auto-completes elements if you find that they're too long to type. Also remember that there are a few common elements, like <p> and <li>, that you usually don't need to close. I use Hugo and I actually prefer writing HTML over MD.
- bentley 3y ago
  > Also remember that there are a few common elements, like <p> and <li>, that you usually don't need to close. <p> and <li> don’t ever need to be closed, do they? Closing would only be necessary if leaving them open would introduce ambiguity, but it never does.
  - mikae1 3y ago
    Nope. But if you don't use a closing tag and put, say, an <img> tag below a <p>, the image will be child of the paragraph. Perhaps that's not always what you want.
  - toyg 3y ago
    Cries in XHTML Close your tags, people. Make your intent non-ambiguous. It's basic hygiene.
    - AlienRobot 3y ago
      It's a paragraph, not a div, the intent is clear by definition.
      - toyg 3y ago
        The intent at the beginning of the paragraph, but not at the end. Is an IMG meant to be in the paragraph? Is a SPAN? They are inline elements that can indeed be inside a P. I honestly don't understand this level of laziness in 2023. Editors close tags automatically, ffs. For the sake of saving a keystroke or two we end up with unintuitive and ambiguous crap.
JonChesterfield 3y ago
You could use the parser from commonmark instead of diy'ing your own
- jdthedisciple 3y ago
  Nah the idea is to stay minimalist. 5-10 lines of VanillaJS maximum for some basic (and custom!) MD features is all I need.
xXx_uwu_xXx 3y ago
Every time you use innerHTML, a kitten dies. How dare you!?
- jdthedisciple 3y ago
  Hehe- I read it's the fastest possible way to modify DOM

ravenstine 3y ago

Actually, yes. You can eliminate the body and HTML tags.

deleted 3y ago
[deleted]
codetrotter 3y ago
Here is an example of the kind of pretty minimal but valid HTML5 that I usually write when I write html by hand: <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello</title> <style> /* css here */ </style> <header> <h1>Cool beanz</h1> </header> <nav> <ul> <li>Home <li><a href=/foo.htm>Foo</a> <li><a href=bar.htm>Bar</a> </ul> </nav> <article> <h2>The Life and Dreams of Irish Setters</h2> <p>Widely appreciated for their qualities, the Irish Setter is a breed of dog to behold. <p>Lorem ipsum and so on and so forth. </article> <footer> <p>Copyright © 2024, Bob Schmob </footer> Check it :) > Document checking completed. No errors or warnings to show. https://validator.w3.org/nu/#textarea https://validator.w3.org/nu/#textarea
- mikae1 3y ago
  Don't forget Server Side Includes :)  The Page Title  The Article Title  <p>The article content</p> 
- robador 3y ago
  I've got to ask, the H1, why is the site name the main heading and not the title of the article?
  - codetrotter 3y ago
    Mainly because it is recommended [1] to have only one h1 on a page. And my pages sometimes contain multiple articles. It feels natural to me to have h1 be the site name. And have h2 be the content title. And it happens to work well when multiple unrelated articles or other kinds of content are on the page because then I use h2 for each of those. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element/He...

mikae1 3y ago

I do not understand peoples problem with writing HTML. You could use an editor that auto-completes elements if you find that they're too long to type. Also remember that there are a few common elements, like <p> and <li>, that you usually don't need to close. I use Hugo and I actually prefer writing HTML over MD.

bentley 3y ago
> Also remember that there are a few common elements, like <p> and <li>, that you usually don't need to close. <p> and <li> don’t ever need to be closed, do they? Closing would only be necessary if leaving them open would introduce ambiguity, but it never does.
- mikae1 3y ago
  Nope. But if you don't use a closing tag and put, say, an <img> tag below a <p>, the image will be child of the paragraph. Perhaps that's not always what you want.
- toyg 3y ago
  Cries in XHTML Close your tags, people. Make your intent non-ambiguous. It's basic hygiene.
  - AlienRobot 3y ago
    It's a paragraph, not a div, the intent is clear by definition.
    - toyg 3y ago
      The intent at the beginning of the paragraph, but not at the end. Is an IMG meant to be in the paragraph? Is a SPAN? They are inline elements that can indeed be inside a P. I honestly don't understand this level of laziness in 2023. Editors close tags automatically, ffs. For the sake of saving a keystroke or two we end up with unintuitive and ambiguous crap.

JonChesterfield 3y ago

You could use the parser from commonmark instead of diy'ing your own

jdthedisciple 3y ago
Nah the idea is to stay minimalist. 5-10 lines of VanillaJS maximum for some basic (and custom!) MD features is all I need.

xXx_uwu_xXx 3y ago

Every time you use innerHTML, a kitten dies. How dare you!?

jdthedisciple 3y ago
Hehe- I read it's the fastest possible way to modify DOM