save all temp files
This commit is contained in:
130
wtmp/barf/build/about/index.html
Normal file
130
wtmp/barf/build/about/index.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="icon" href="data:,">
|
||||
<title>About `barf`</title>
|
||||
<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.45;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
hr {
|
||||
background-color: grey;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
nav {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
main {
|
||||
hyphens: auto;
|
||||
}
|
||||
main p {
|
||||
margin: 1rem;
|
||||
}
|
||||
h1,h2,h3,h4 {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 + p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
span.created {
|
||||
display: block;
|
||||
margin: 4px 15px;
|
||||
}
|
||||
img {
|
||||
border: 1px solid lightgrey;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
blockquote {
|
||||
border: 1px solid;
|
||||
border-left: 6px solid;
|
||||
margin: 2rem 0;
|
||||
padding: 10px;
|
||||
}
|
||||
blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
figure {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
figcaption {
|
||||
color: slategrey;
|
||||
}
|
||||
code {
|
||||
border: 1px solid;
|
||||
padding: 0.1rem 0.3rem;
|
||||
tab-size: 4;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid;
|
||||
}
|
||||
pre code {
|
||||
border: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
tr:nth-of-type(odd) td {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
th,td {
|
||||
padding: 6px;
|
||||
}
|
||||
footer {
|
||||
border-top: 1px dashed grey;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
@supports (color-scheme: dark light) {
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
a:link {color: #9e9eff;}
|
||||
a:visited {color: #d0adf0;}
|
||||
a:active {color: red;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a><span> | </span><a href="/about">About</a><span> | </span><a href="/websites">Websites</a><span> | </span><a href="https://git.sr.ht/~bt/barf">Source Code</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>About <code>barf</code></h1>
|
||||
<p>barf is a minimal and suckless-inspired blog generator. It is a tweaked and slightly patched version of Karl Bartel's fantastic <a href="https://github.com/karlb/karl.berlin">blog.sh</a>.</p>
|
||||
<h2>Why?</h2>
|
||||
<p>This project was created by me, <a href="https://bt.ht">Bradley Taunt</a>, out of frustration with overly complex and bloated blogging options. I tried <em>so many</em> "minimal" generators but each one ended up having some glaring issue or heavy reliance on dependencies. </p>
|
||||
<p>I wanted to have a system that I could easily replicate on any Linux machine. Something that didn't require me to download half the internet just to get up and running. I'm a sucker for keeping things simple.</p>
|
||||
<footer role="contentinfo">
|
||||
<span><a href="#">↑ Back to Top</a></span><br><br>
|
||||
<small>
|
||||
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
|
||||
The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
|
||||
</small>
|
||||
</footer>
|
||||
294
wtmp/barf/build/atom.xml
Normal file
294
wtmp/barf/build/atom.xml
Normal file
@ -0,0 +1,294 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<title>barf</title>
|
||||
<link href="https://barf.bt.ht/atom.xml" rel="self" />
|
||||
<updated>2023-03-09T10:53:26Z</updated>
|
||||
<author>
|
||||
<name>Bradley Taunt</name>
|
||||
</author>
|
||||
<id>https://barf.bt.ht,2023-01-04:default-atom-feed/</id>
|
||||
<entry>
|
||||
<title>Markdown Examples in barf</title>
|
||||
<content type="html"><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></content>
|
||||
<link href="https://barf.bt.ht/markdown-examples"/>
|
||||
<id>https://barf.bt.ht/markdown-examples</id>
|
||||
<updated>2023-01-05T00:00:00Z</updated>
|
||||
<published>2023-01-05T00:00:00Z</published>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>Running `barf` on MacOS</title>
|
||||
<content type="html"><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></content>
|
||||
<link href="https://barf.bt.ht/macos"/>
|
||||
<id>https://barf.bt.ht/macos</id>
|
||||
<updated>2023-01-18T00:00:00Z</updated>
|
||||
<published>2023-01-18T00:00:00Z</published>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>Supporting Basic Dark Mode</title>
|
||||
<content type="html"><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></content>
|
||||
<link href="https://barf.bt.ht/dark-mode"/>
|
||||
<id>https://barf.bt.ht/dark-mode</id>
|
||||
<updated>2023-03-07T00:00:00Z</updated>
|
||||
<published>2023-03-07T00:00:00Z</published>
|
||||
</entry>
|
||||
</feed>
|
||||
136
wtmp/barf/build/dark-mode/index.html
Normal file
136
wtmp/barf/build/dark-mode/index.html
Normal file
@ -0,0 +1,136 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="icon" href="data:,">
|
||||
<title>Supporting Basic Dark Mode</title>
|
||||
<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.45;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
hr {
|
||||
background-color: grey;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
nav {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
main {
|
||||
hyphens: auto;
|
||||
}
|
||||
main p {
|
||||
margin: 1rem;
|
||||
}
|
||||
h1,h2,h3,h4 {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 + p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
span.created {
|
||||
display: block;
|
||||
margin: 4px 15px;
|
||||
}
|
||||
img {
|
||||
border: 1px solid lightgrey;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
blockquote {
|
||||
border: 1px solid;
|
||||
border-left: 6px solid;
|
||||
margin: 2rem 0;
|
||||
padding: 10px;
|
||||
}
|
||||
blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
figure {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
figcaption {
|
||||
color: slategrey;
|
||||
}
|
||||
code {
|
||||
border: 1px solid;
|
||||
padding: 0.1rem 0.3rem;
|
||||
tab-size: 4;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid;
|
||||
}
|
||||
pre code {
|
||||
border: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
tr:nth-of-type(odd) td {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
th,td {
|
||||
padding: 6px;
|
||||
}
|
||||
footer {
|
||||
border-top: 1px dashed grey;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
@supports (color-scheme: dark light) {
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
a:link {color: #9e9eff;}
|
||||
a:visited {color: #d0adf0;}
|
||||
a:active {color: red;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a><span> | </span><a href="/about">About</a><span> | </span><a href="/websites">Websites</a><span> | </span><a href="https://git.sr.ht/~bt/barf">Source Code</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<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><meta name="color-scheme" content="dark light">
|
||||
</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>
|
||||
<footer role="contentinfo">
|
||||
<span><a href="#">↑ Back to Top</a></span><br><br>
|
||||
<small>
|
||||
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
|
||||
The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
|
||||
</small>
|
||||
</footer>
|
||||
138
wtmp/barf/build/index.html
Normal file
138
wtmp/barf/build/index.html
Normal file
@ -0,0 +1,138 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="icon" href="data:,">
|
||||
<title>barf</title>
|
||||
<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.45;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
hr {
|
||||
background-color: grey;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
nav {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
main {
|
||||
hyphens: auto;
|
||||
}
|
||||
main p {
|
||||
margin: 1rem;
|
||||
}
|
||||
h1,h2,h3,h4 {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 + p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
span.created {
|
||||
display: block;
|
||||
margin: 4px 15px;
|
||||
}
|
||||
img {
|
||||
border: 1px solid lightgrey;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
blockquote {
|
||||
border: 1px solid;
|
||||
border-left: 6px solid;
|
||||
margin: 2rem 0;
|
||||
padding: 10px;
|
||||
}
|
||||
blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
figure {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
figcaption {
|
||||
color: slategrey;
|
||||
}
|
||||
code {
|
||||
border: 1px solid;
|
||||
padding: 0.1rem 0.3rem;
|
||||
tab-size: 4;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid;
|
||||
}
|
||||
pre code {
|
||||
border: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
tr:nth-of-type(odd) td {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
th,td {
|
||||
padding: 6px;
|
||||
}
|
||||
footer {
|
||||
border-top: 1px dashed grey;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
@supports (color-scheme: dark light) {
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
a:link {color: #9e9eff;}
|
||||
a:visited {color: #d0adf0;}
|
||||
a:active {color: red;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a><span> | </span><a href="/about">About</a><span> | </span><a href="/websites">Websites</a><span> | </span><a href="https://git.sr.ht/~bt/barf">Source Code</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>barf</h1>
|
||||
<p><strong>barf is an extremely minimal blog generator.</strong></p>
|
||||
<p>The entire build script is less than 100 lines of shell.</p>
|
||||
<p>It could almost be called "suckless", but probably isn't. It was created for those focused on writing, not tinkering.</p>
|
||||
<p>You can learn more by reading the <a href="https://git.sr.ht/~bt/barf">official README</a>.</p>
|
||||
<p>You can also view the generated <a href="/atom.xml">Atom feed here</a></p>
|
||||
<blockquote><p><strong>barf</strong></p>
|
||||
<p>Blogs Are Really Fun</p>
|
||||
</blockquote>
|
||||
<hr />
|
||||
<span class='created'>2023-03-07 — <a href="dark-mode/">Supporting Basic Dark Mode</a></span>
|
||||
<span class='created'>2023-01-18 — <a href="macos/">Running `barf` on MacOS</a></span>
|
||||
<span class='created'>2023-01-05 — <a href="markdown-examples/">Markdown Examples in barf</a></span>
|
||||
<footer role="contentinfo">
|
||||
<span><a href="#">↑ Back to Top</a></span><br><br>
|
||||
<small>
|
||||
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
|
||||
The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
|
||||
</small>
|
||||
</footer>
|
||||
144
wtmp/barf/build/macos/index.html
Normal file
144
wtmp/barf/build/macos/index.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="icon" href="data:,">
|
||||
<title>Running `barf` on MacOS</title>
|
||||
<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.45;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
hr {
|
||||
background-color: grey;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
nav {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
main {
|
||||
hyphens: auto;
|
||||
}
|
||||
main p {
|
||||
margin: 1rem;
|
||||
}
|
||||
h1,h2,h3,h4 {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 + p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
span.created {
|
||||
display: block;
|
||||
margin: 4px 15px;
|
||||
}
|
||||
img {
|
||||
border: 1px solid lightgrey;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
blockquote {
|
||||
border: 1px solid;
|
||||
border-left: 6px solid;
|
||||
margin: 2rem 0;
|
||||
padding: 10px;
|
||||
}
|
||||
blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
figure {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
figcaption {
|
||||
color: slategrey;
|
||||
}
|
||||
code {
|
||||
border: 1px solid;
|
||||
padding: 0.1rem 0.3rem;
|
||||
tab-size: 4;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid;
|
||||
}
|
||||
pre code {
|
||||
border: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
tr:nth-of-type(odd) td {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
th,td {
|
||||
padding: 6px;
|
||||
}
|
||||
footer {
|
||||
border-top: 1px dashed grey;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
@supports (color-scheme: dark light) {
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
a:link {color: #9e9eff;}
|
||||
a:visited {color: #d0adf0;}
|
||||
a:active {color: red;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a><span> | </span><a href="/about">About</a><span> | </span><a href="/websites">Websites</a><span> | </span><a href="https://git.sr.ht/~bt/barf">Source Code</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<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>
|
||||
<footer role="contentinfo">
|
||||
<span><a href="#">↑ Back to Top</a></span><br><br>
|
||||
<small>
|
||||
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
|
||||
The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
|
||||
</small>
|
||||
</footer>
|
||||
358
wtmp/barf/build/markdown-examples/index.html
Normal file
358
wtmp/barf/build/markdown-examples/index.html
Normal file
@ -0,0 +1,358 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="icon" href="data:,">
|
||||
<title>Markdown Examples in barf</title>
|
||||
<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.45;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
hr {
|
||||
background-color: grey;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
nav {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
main {
|
||||
hyphens: auto;
|
||||
}
|
||||
main p {
|
||||
margin: 1rem;
|
||||
}
|
||||
h1,h2,h3,h4 {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 + p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
span.created {
|
||||
display: block;
|
||||
margin: 4px 15px;
|
||||
}
|
||||
img {
|
||||
border: 1px solid lightgrey;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
blockquote {
|
||||
border: 1px solid;
|
||||
border-left: 6px solid;
|
||||
margin: 2rem 0;
|
||||
padding: 10px;
|
||||
}
|
||||
blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
figure {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
figcaption {
|
||||
color: slategrey;
|
||||
}
|
||||
code {
|
||||
border: 1px solid;
|
||||
padding: 0.1rem 0.3rem;
|
||||
tab-size: 4;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid;
|
||||
}
|
||||
pre code {
|
||||
border: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
tr:nth-of-type(odd) td {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
th,td {
|
||||
padding: 6px;
|
||||
}
|
||||
footer {
|
||||
border-top: 1px dashed grey;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
@supports (color-scheme: dark light) {
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
a:link {color: #9e9eff;}
|
||||
a:visited {color: #d0adf0;}
|
||||
a:active {color: red;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a><span> | </span><a href="/about">About</a><span> | </span><a href="/websites">Websites</a><span> | </span><a href="https://git.sr.ht/~bt/barf">Source Code</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<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><hr></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><h1>Heading</h1>
|
||||
<h2>Topic</h2>
|
||||
</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><></code>.</p>
|
||||
<pre><code><http://s01.de>
|
||||
</code></pre>
|
||||
<p>You can do the same for E-Mail addresses:</p>
|
||||
<pre><code><yourname@s01.de>
|
||||
</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><a href="http://s01.de/~gottox/index.cgi/proj_smu">smu - simple mark up</a></p>
|
||||
</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><ul>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
</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><ol start="2">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ol>
|
||||
</code></pre>
|
||||
<h2>Code & Blockquote</h2>
|
||||
<p>Use the <code>> </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>> Hello
|
||||
> This is a quote with a [link](http://s01.de/~gottox)
|
||||
</code></pre>
|
||||
<p>Result:
|
||||
</p>
|
||||
<pre><code><blockquote><p>
|
||||
Hello
|
||||
This is a quote with a <a href="http://s01.de/~gottox">link</a></p>
|
||||
</blockquote>
|
||||
</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><pre><code>this.is(code)</code></pre>
|
||||
<pre><code>this.is(code, too)
|
||||
</code></pre>
|
||||
</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
|
||||
{"some": "code"}
|
||||
```
|
||||
</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 & 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><p>
|
||||
Hello
|
||||
<hr />
|
||||
</code></pre>
|
||||
<pre><code>Hello2</p>
|
||||
</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>!"#$%&'()*+,-./:;<=>?@[]^_`{|}~\
|
||||
</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>
|
||||
<footer role="contentinfo">
|
||||
<span><a href="#">↑ Back to Top</a></span><br><br>
|
||||
<small>
|
||||
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
|
||||
The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
|
||||
</small>
|
||||
</footer>
|
||||
2
wtmp/barf/build/pages.tsv
Normal file
2
wtmp/barf/build/pages.tsv
Normal file
@ -0,0 +1,2 @@
|
||||
pages/about.md About `barf`
|
||||
pages/websites.md Websites Built with `barf`
|
||||
|
3
wtmp/barf/build/posts.tsv
Normal file
3
wtmp/barf/build/posts.tsv
Normal file
@ -0,0 +1,3 @@
|
||||
posts/markdown-examples.md Markdown Examples in barf
|
||||
posts/macos.md Running `barf` on MacOS
|
||||
posts/dark-mode.md Supporting Basic Dark Mode
|
||||
|
130
wtmp/barf/build/websites/index.html
Normal file
130
wtmp/barf/build/websites/index.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="icon" href="data:,">
|
||||
<title>Websites Built with `barf`</title>
|
||||
<link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.45;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
hr {
|
||||
background-color: grey;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
nav {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
main {
|
||||
hyphens: auto;
|
||||
}
|
||||
main p {
|
||||
margin: 1rem;
|
||||
}
|
||||
h1,h2,h3,h4 {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 + p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
span.created {
|
||||
display: block;
|
||||
margin: 4px 15px;
|
||||
}
|
||||
img {
|
||||
border: 1px solid lightgrey;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
blockquote {
|
||||
border: 1px solid;
|
||||
border-left: 6px solid;
|
||||
margin: 2rem 0;
|
||||
padding: 10px;
|
||||
}
|
||||
blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
figure {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
figcaption {
|
||||
color: slategrey;
|
||||
}
|
||||
code {
|
||||
border: 1px solid;
|
||||
padding: 0.1rem 0.3rem;
|
||||
tab-size: 4;
|
||||
}
|
||||
pre {
|
||||
border: 1px solid;
|
||||
}
|
||||
pre code {
|
||||
border: 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
tr:nth-of-type(odd) td {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
th,td {
|
||||
padding: 6px;
|
||||
}
|
||||
footer {
|
||||
border-top: 1px dashed grey;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
@supports (color-scheme: dark light) {
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
a:link {color: #9e9eff;}
|
||||
a:visited {color: #d0adf0;}
|
||||
a:active {color: red;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a><span> | </span><a href="/about">About</a><span> | </span><a href="/websites">Websites</a><span> | </span><a href="https://git.sr.ht/~bt/barf">Source Code</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>Websites Built with <code>barf</code></h1>
|
||||
<p>Send an email to brad [at] bt [dot] ht if you would like me to add your barf-generated website to this list.</p>
|
||||
<ul>
|
||||
<li><a href="https://bt.ht">https://bt.ht</a></li>
|
||||
</ul>
|
||||
<footer role="contentinfo">
|
||||
<span><a href="#">↑ Back to Top</a></span><br><br>
|
||||
<small>
|
||||
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
|
||||
The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
|
||||
</small>
|
||||
</footer>
|
||||
Reference in New Issue
Block a user