barf 2023-03-09T10:53:26Z Bradley Taunt https://barf.bt.ht,2023-01-04:default-atom-feed/ Markdown Examples in barf <h1>Markdown Examples in barf</h1> <p>2023-01-05</p> <p>This following was lifted from <a href="https://github.com/karlb/smu">https://github.com/karlb/smu</a></p> <h1><code>smu</code> Syntax</h1> <p>smu was started as a rewrite of <a href="http://daringfireball.net/projects/markdown/">markdown</a> but became something more lightweight and consistent. It differs from <a href="https://commonmark.org/">CommonMark</a> in the following ways:</p> <ul> <li>No support for <em>reference style links</em></li> <li>Stricter indentation rules for lists</li> <li>Lists don't end paragraphs by themselves (blank line needed)</li> <li>Horizontal rules (<code>&lt;hr&gt;</code>) must use <code>- - -</code> as syntax</li> <li>Code fences have stricter syntax</li> </ul> <p>Patches that increase the CommonMark compatibility are welcome as long as they don't increase the code complexity significantly.</p> <p>This project is a fork of the <a href="https://github.com/gottox/smu">original smu</a> by <a href="https://eboland.de">Enno Boland (gottox)</a>. The main differences to the original smu are:</p> <ul> <li>Support for code fences</li> <li>Improved <a href="https://commonmark.org/">CommonMark</a> compatibility. E.g. <ul> <li>Code blocks need four spaces indentation instead of three</li> <li>Skip empty lines at end of code blocks</li> <li>Ignore single spaces around code spans</li> <li>Keep HTML comments in output</li> <li>Improved spec compliance for lists</li> <li>Nesting code block in blockquotes works</li> <li>"Empty" lines in lists behave identically, no matter how much whitespace they contain</li> <li>No backslash escapes in code blocks</li> <li>Use first number as start number for ordered lists</li> </ul> </li> <li>Added a simple test suite to check for compliance and avoid regressions</li> </ul> <h2>Inline patterns</h2> <p>There are several patterns you can use to highlight your text:</p> <ul> <li><p>Emphasis</p> <ul> <li>Surround your text with <code>*</code> or <code>_</code> to get <em>emphasised</em> text: <pre><code>This *is* cool. This _is_ cool, too. </code></pre> </li> <li>Surround your text with <code>**</code> or <code>__</code> to get <strong>strong</strong> text: <pre><code>This **is** cool. This __is__ cool, too. </code></pre> </li> <li>Surround your text with <code>***</code> or <code>___</code> to get <strong><em>strong and emphasised</em></strong> text: <pre><code>This ***is*** cool. This ___is___ cool, too. </code></pre> </li> <li>But this example won't work as expected: <pre><code>***Hello** you* </code></pre> <p>This is a wontfix bug because it would make the source too complex. Use this instead: </p> <pre><code>***Hello*** *you* </code></pre> </li> </ul> </li> <li><p>inline Code</p> <p>You can produce inline code by surrounding it with backticks.</p> <pre><code>Use `rm -rf /` if you're a N00b. Use ``rm -rf /`` if you're a N00b. Use ```rm -rf /``` if you're a N00b. </code></pre> <p>Double and triple backticks can be used if the code itself contains backticks.</p> </li> </ul> <h2>Titles</h2> <p>Creating titles in smu is very easy. There are two different syntax styles. The first is underlining with at least three characters:</p> <pre><code>Heading ======= Topic ----- </code></pre> <p>This is very intuitive and self explaining. The resulting sourcecode looks like this:</p> <pre><code>&lt;h1&gt;Heading&lt;/h1&gt; &lt;h2&gt;Topic&lt;/h2&gt; </code></pre> <p>Use the following prefixes if you don't like underlining:</p> <pre><code># h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 </code></pre> <h2>Links</h2> <p>The simplest way to define a link is with simple <code>&lt;&gt;</code>.</p> <pre><code>&lt;http://s01.de&gt; </code></pre> <p>You can do the same for E-Mail addresses:</p> <pre><code>&lt;yourname@s01.de&gt; </code></pre> <p>If you want to define a label for the url, you have to use a different syntax</p> <pre><code>[smu - simple mark up](http://s01.de/~gottox/index.cgi/proj_smu) </code></pre> <p>The resulting HTML-Code</p> <pre><code>&lt;a href=&quot;http://s01.de/~gottox/index.cgi/proj_smu&quot;&gt;smu - simple mark up&lt;/a&gt;&lt;/p&gt; </code></pre> <h2>Lists</h2> <p>Defining lists is very straightforward:</p> <pre><code>* Item 1 * Item 2 * Item 3 </code></pre> <p>Result:</p> <pre><code>&lt;ul&gt; &lt;li&gt;Item 1&lt;/li&gt; &lt;li&gt;Item 2&lt;/li&gt; &lt;li&gt;Item 3&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Defining ordered lists is also very easy:</p> <pre><code>1. Item 1 2. Item 2 3. Item 3 </code></pre> <p>Only the first number in a list is meaningful. All following list items are continously counted. If you want a list starting at 2, you could write:</p> <pre><code>2. Item 1 2. Item 2 2. Item 3 </code></pre> <p>and get the following HTML which will render with the numbers 2, 3, 4:</p> <pre><code>&lt;ol start=&quot;2&quot;&gt; &lt;li&gt;Item 1&lt;/li&gt; &lt;li&gt;Item 2&lt;/li&gt; &lt;li&gt;Item 3&lt;/li&gt; &lt;/ol&gt; </code></pre> <h2>Code &amp; Blockquote</h2> <p>Use the <code>&gt; </code> as a line prefix for defining blockquotes. Blockquotes are interpreted as well. This makes it possible to embed links, headings and even other quotes into a quote:</p> <pre><code>&gt; Hello &gt; This is a quote with a [link](http://s01.de/~gottox) </code></pre> <p>Result: </p> <pre><code>&lt;blockquote&gt;&lt;p&gt; Hello This is a quote with a &lt;a href=&quot;http://s01.de/~gottox&quot;&gt;link&lt;/a&gt;&lt;/p&gt; &lt;/blockquote&gt; </code></pre> <p>You can define a code block with a leading Tab or with <strong>4</strong> leading spaces</p> <pre><code> this.is(code) this.is(code, too) </code></pre> <p>Result: </p> <pre><code>&lt;pre&gt;&lt;code&gt;this.is(code)&lt;/code&gt;&lt;/pre&gt; &lt;pre&gt;&lt;code&gt;this.is(code, too) &lt;/code&gt;&lt;/pre&gt; </code></pre> <p>Please note that you can't use HTML or smu syntax in a code block.</p> <p>Another way to write code blocks is to use code fences:</p> <pre><code>```json {&quot;some&quot;: &quot;code&quot;} ``` </code></pre> <p>This has two advantages:</p> <ul> <li>The optional language identifier will be turned into a <code>language-</code> class name</li> <li>You can keep the original indentation which helps when doing copy &amp; paste</li> </ul> <h2>Tables</h2> <p>Tables can be generated with the following syntax:</p> <pre><code>| Heading1 | Heading2 | | -------- | -------- | | Cell 1 | Cell2 | </code></pre> <p>Aligning the columns make the input nicer to read, but is not necessary to get correct table output. You could just write</p> <pre><code>| Heading1 | Heading2 | | --- | --- | | Cell 1 | Cell2 | </code></pre> <p>To align the content of table cells, use <code>|:--|</code> for left, <code>|--:|</code> for right and <code>|:--:|</code> for centered alignment in the row which separates the header from the table body.</p> <pre><code>| Heading1 | Heading2 | Heading3 | | :------- | :------: | -------: | | Left | Center | Right | </code></pre> <h2>Other interesting stuff</h2> <ul> <li><p>to insert a horizontal rule simple add <code>- - -</code> into an empty line:</p> <pre><code>Hello - - - Hello2 </code></pre> <p>Result: </p> <pre><code>&lt;p&gt; Hello &lt;hr /&gt; </code></pre> <pre><code>Hello2&lt;/p&gt; </code></pre> </li> <li><p>Any ASCII punctuation character may escaped by precedeing them with a backslash to avoid them being interpreted:</p> <pre><code>!&quot;#$%&amp;'()*+,-./:;&lt;=&gt;?@[]^_`{|}~\ </code></pre> </li> <li><p>To force a linebreak simple add two spaces to the end of the line:</p> <pre><code>No linebreak here. But here is one. </code></pre> </li> </ul> <h2>embed HTML</h2> <p>You can include arbitrary HTML code in your documents. The HTML will be passed through to the resulting document without modification. This is a good way to work around features that are missing in smu. If you don't want this behaviour, use the <code>-n</code> flag when executing smu to stricly escape the HTML tags.</p> https://barf.bt.ht/markdown-examples 2023-01-05T00:00:00Z 2023-01-05T00:00:00Z Running `barf` on MacOS <h1>Running <code>barf</code> on MacOS</h1> <p>2023-01-18</p> <p>The <code>barf</code> project was built on Linux and was catered towards Linux users. The core of the project will remain focused on Linux/GNU tools, but that doesn't mean MacOS needs to be left out in the cold.</p> <p>There are some very minor changes you'll need to make in the main <code>barf</code> script if you plan to run it on MacOS.</p> <h2>Download Packages</h2> <p>This walkthrough assumes that you already have <a href="https://brew.sh/">homebrew</a> installed on your machine.</p> <p>You will need to install the GNU versions of both <code>date</code> and <code>sed</code> in order to avoid breaking things when <code>barf</code> tries to build.</p> <pre><code>brew install coreutils brew install gnu-sed </code></pre> <h2>The Script Tweaks</h2> <p>Now open the main <code>barf</code> file in your project and replace all instances of <code>sed</code> with <code>gsed</code>.</p> <p>Then change the following variable:</p> <pre><code>published_date=$(date -d $basic_date +%FT%TZ) </code></pre> <p>to this:</p> <pre><code>published_date=$(gdate -d $basic_date +%FT%TZ) </code></pre> <p>After that everything should work perfectly fine. There is probably a cleaner way to do this, but I like to keep things simple.</p> https://barf.bt.ht/macos 2023-01-18T00:00:00Z 2023-01-18T00:00:00Z Supporting Basic Dark Mode <h1>Supporting Basic Dark Mode</h1> <p>2023-03-07</p> <p>The default <code>barf</code> site generator now supports basic dark mode functionality. This has been achieved by including the standard <code>color-scheme</code> meta tag in the core <code>header.html</code> file:</p> <pre><code>&lt;meta name=&quot;color-scheme&quot; content=&quot;dark light&quot;&gt; </code></pre> <p>This change also ships with some minor updates to the default <code>blockquote</code> design. You can see an example below:</p> <blockquote><p>This is a really <em>cool</em> blockquote</p> </blockquote> <h2>Minor Caveat</h2> <p>Unfortunately, Safari still has minor <code>ahref</code> / link color issue when defaulting to browser dark mode. If this is a problem for your own build of <code>barf</code>, take a look at a <a href="https://bt.ht/safari-default-dark-mode/">solution I wrote about here</a>.</p> <p>Personally, I can't be bothered to add that extra code to this project. The Safari team needs to get their shit together and fix such a simple bug. Plus, you shouldn't be using Safari anyway - it's proprietary garbage.</p> https://barf.bt.ht/dark-mode 2023-03-07T00:00:00Z 2023-03-07T00:00:00Z