Added quickstart from blag

This commit is contained in:
Liliesh 2025-07-06 07:56:58 +02:00
parent 1c7cc625d5
commit fba3ddb1a5
Signed by: liliesh
GPG key ID: 680387646C7BAE8E
19 changed files with 607 additions and 8 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
build/

6
config.ini Normal file
View file

@ -0,0 +1,6 @@
[main]
base_url = https://example.com/
title = Liliesh Blog
description = Da Blog
author = Liliesh

8
content/about.md Normal file
View file

@ -0,0 +1,8 @@
title: About Me
description: Short description of this page.
## About Me
This is a regular page, i.e. not a blog post. Feel free to delete this page,
populate it with more content or generate more [pages like this](testpage.md).

51
content/hello-world.md Normal file
View file

@ -0,0 +1,51 @@
Title: Hello World!
Description: Hello there, this is the first blog post. You should read me first.
Date: 2023-01-01 12:00
Tags: blag, pygments
## Hello World
This is an example blog post. Internally, blag differentiates between **pages**
and **articles**. Intuitively, pages are simple pages and articles are blog
posts. The decision whether a document is a page or an article is made
depending on the presence of the `date` metadata element: Any document that
contains the `date` metadata element is an article, everything else a page.
This differentiation has consequences:
* blag uses different templates: `page.html` and `article.html`
* only articles are collected in the Atom feed
* only articles are aggregated in the tag pages
For more detailed information, please refer to the [documentation][doc]
[doc]: https://blag.readthedocs.io
### Syntax Highlighting
```python
def foo(bar):
"""This is a docstring.
"""
# comment
return bar
```
Syntax highlighting is done via [Pygments][pygments]. For code blocks, blag
generates the necessary CSS classes by default, which you can use to style your
code using CSS. It provides you with a default light- and dark theme, for more
information on how to generate a different theme, please refer to [Pygments'
documentation][pygments].
[pygments]: https://pygments.org
### Next Steps
* Adapt the files in `templates` to your needs
* Check out the files in `static` and modify as needed
* Add some content
* Change the [favicon.ico](favicon.ico)

11
content/second-post.md Normal file
View file

@ -0,0 +1,11 @@
Title: Second Post
Description: This is the second blog post, so you can see how it looks like on the front page.
Date: 2023-01-02 12:00
Tags: blag
## Second Post
This page serves no purpose :)
![Blag Screenshot](blag.png)

46
content/testpage.md Normal file
View file

@ -0,0 +1,46 @@
# This Is A Headline
This is some **bold text** with some `code` inside. This is _some_underlined_
text with some `code` inside. This is some text with some `code` inside. This
is some text with some `code` inside. This is some text with some `code`
inside. This is some text with some `code` inside. This is some text with some
`code` inside. This is some text with some `code` inside.
This is some [link](https://example.com) inside the text -- it does not really
lead anywhere! This is some [link](https://example.com) inside the text -- it
does not really lead anywhere! This is some [link](https://example.com) inside
the text -- it does not really lead anywhere!
* some bullets
* some other
* bullets
* foo
```python
# this is some python code
class Foo:
def __init__(self, foo, bar):
self.foo = foo
self.bar = bar
def do_something():
"""This is the docstring of this method.
"""
return foo
```
## Some other headline
This is some other text
```makefile
# some comment
foo:
ls -lh
```

View file

@ -1,8 +0,0 @@
<html>
<head>
<title>Liliesh's Homepage</title>
</head>
<body>
</body>
</html>

BIN
static/blag.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

84
static/code-dark.css Normal file
View file

@ -0,0 +1,84 @@
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.hll { background-color: #49483e }
.c { color: #959077 } /* Comment */
.err { color: #ed007e; background-color: #1e0010 } /* Error */
.esc { color: #f8f8f2 } /* Escape */
.g { color: #f8f8f2 } /* Generic */
.k { color: #66d9ef } /* Keyword */
.l { color: #ae81ff } /* Literal */
.n { color: #f8f8f2 } /* Name */
.o { color: #ff4689 } /* Operator */
.x { color: #f8f8f2 } /* Other */
.p { color: #f8f8f2 } /* Punctuation */
.ch { color: #959077 } /* Comment.Hashbang */
.cm { color: #959077 } /* Comment.Multiline */
.cp { color: #959077 } /* Comment.Preproc */
.cpf { color: #959077 } /* Comment.PreprocFile */
.c1 { color: #959077 } /* Comment.Single */
.cs { color: #959077 } /* Comment.Special */
.gd { color: #ff4689 } /* Generic.Deleted */
.ge { color: #f8f8f2; font-style: italic } /* Generic.Emph */
.ges { color: #f8f8f2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.gr { color: #f8f8f2 } /* Generic.Error */
.gh { color: #f8f8f2 } /* Generic.Heading */
.gi { color: #a6e22e } /* Generic.Inserted */
.go { color: #66d9ef } /* Generic.Output */
.gp { color: #ff4689; font-weight: bold } /* Generic.Prompt */
.gs { color: #f8f8f2; font-weight: bold } /* Generic.Strong */
.gu { color: #959077 } /* Generic.Subheading */
.gt { color: #f8f8f2 } /* Generic.Traceback */
.kc { color: #66d9ef } /* Keyword.Constant */
.kd { color: #66d9ef } /* Keyword.Declaration */
.kn { color: #ff4689 } /* Keyword.Namespace */
.kp { color: #66d9ef } /* Keyword.Pseudo */
.kr { color: #66d9ef } /* Keyword.Reserved */
.kt { color: #66d9ef } /* Keyword.Type */
.ld { color: #e6db74 } /* Literal.Date */
.m { color: #ae81ff } /* Literal.Number */
.s { color: #e6db74 } /* Literal.String */
.na { color: #a6e22e } /* Name.Attribute */
.nb { color: #f8f8f2 } /* Name.Builtin */
.nc { color: #a6e22e } /* Name.Class */
.no { color: #66d9ef } /* Name.Constant */
.nd { color: #a6e22e } /* Name.Decorator */
.ni { color: #f8f8f2 } /* Name.Entity */
.ne { color: #a6e22e } /* Name.Exception */
.nf { color: #a6e22e } /* Name.Function */
.nl { color: #f8f8f2 } /* Name.Label */
.nn { color: #f8f8f2 } /* Name.Namespace */
.nx { color: #a6e22e } /* Name.Other */
.py { color: #f8f8f2 } /* Name.Property */
.nt { color: #ff4689 } /* Name.Tag */
.nv { color: #f8f8f2 } /* Name.Variable */
.ow { color: #ff4689 } /* Operator.Word */
.pm { color: #f8f8f2 } /* Punctuation.Marker */
.w { color: #f8f8f2 } /* Text.Whitespace */
.mb { color: #ae81ff } /* Literal.Number.Bin */
.mf { color: #ae81ff } /* Literal.Number.Float */
.mh { color: #ae81ff } /* Literal.Number.Hex */
.mi { color: #ae81ff } /* Literal.Number.Integer */
.mo { color: #ae81ff } /* Literal.Number.Oct */
.sa { color: #e6db74 } /* Literal.String.Affix */
.sb { color: #e6db74 } /* Literal.String.Backtick */
.sc { color: #e6db74 } /* Literal.String.Char */
.dl { color: #e6db74 } /* Literal.String.Delimiter */
.sd { color: #e6db74 } /* Literal.String.Doc */
.s2 { color: #e6db74 } /* Literal.String.Double */
.se { color: #ae81ff } /* Literal.String.Escape */
.sh { color: #e6db74 } /* Literal.String.Heredoc */
.si { color: #e6db74 } /* Literal.String.Interpol */
.sx { color: #e6db74 } /* Literal.String.Other */
.sr { color: #e6db74 } /* Literal.String.Regex */
.s1 { color: #e6db74 } /* Literal.String.Single */
.ss { color: #e6db74 } /* Literal.String.Symbol */
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.fm { color: #a6e22e } /* Name.Function.Magic */
.vc { color: #f8f8f2 } /* Name.Variable.Class */
.vg { color: #f8f8f2 } /* Name.Variable.Global */
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
.vm { color: #f8f8f2 } /* Name.Variable.Magic */
.il { color: #ae81ff } /* Literal.Number.Integer.Long */

74
static/code-light.css Normal file
View file

@ -0,0 +1,74 @@
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.hll { background-color: #ffffcc }
.c { color: #3D7B7B; font-style: italic } /* Comment */
.err { border: 1px solid #FF0000 } /* Error */
.k { color: #008000; font-weight: bold } /* Keyword */
.o { color: #666666 } /* Operator */
.ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.cp { color: #9C6500 } /* Comment.Preproc */
.cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.gd { color: #A00000 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.gr { color: #E40000 } /* Generic.Error */
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
.gi { color: #008400 } /* Generic.Inserted */
.go { color: #717171 } /* Generic.Output */
.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.gt { color: #0044DD } /* Generic.Traceback */
.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #008000 } /* Keyword.Pseudo */
.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.kt { color: #B00040 } /* Keyword.Type */
.m { color: #666666 } /* Literal.Number */
.s { color: #BA2121 } /* Literal.String */
.na { color: #687822 } /* Name.Attribute */
.nb { color: #008000 } /* Name.Builtin */
.nc { color: #0000FF; font-weight: bold } /* Name.Class */
.no { color: #880000 } /* Name.Constant */
.nd { color: #AA22FF } /* Name.Decorator */
.ni { color: #717171; font-weight: bold } /* Name.Entity */
.ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.nf { color: #0000FF } /* Name.Function */
.nl { color: #767600 } /* Name.Label */
.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.nt { color: #008000; font-weight: bold } /* Name.Tag */
.nv { color: #19177C } /* Name.Variable */
.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mb { color: #666666 } /* Literal.Number.Bin */
.mf { color: #666666 } /* Literal.Number.Float */
.mh { color: #666666 } /* Literal.Number.Hex */
.mi { color: #666666 } /* Literal.Number.Integer */
.mo { color: #666666 } /* Literal.Number.Oct */
.sa { color: #BA2121 } /* Literal.String.Affix */
.sb { color: #BA2121 } /* Literal.String.Backtick */
.sc { color: #BA2121 } /* Literal.String.Char */
.dl { color: #BA2121 } /* Literal.String.Delimiter */
.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.s2 { color: #BA2121 } /* Literal.String.Double */
.se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.sh { color: #BA2121 } /* Literal.String.Heredoc */
.si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.sx { color: #008000 } /* Literal.String.Other */
.sr { color: #A45A77 } /* Literal.String.Regex */
.s1 { color: #BA2121 } /* Literal.String.Single */
.ss { color: #19177C } /* Literal.String.Symbol */
.bp { color: #008000 } /* Name.Builtin.Pseudo */
.fm { color: #0000FF } /* Name.Function.Magic */
.vc { color: #19177C } /* Name.Variable.Class */
.vg { color: #19177C } /* Name.Variable.Global */
.vi { color: #19177C } /* Name.Variable.Instance */
.vm { color: #19177C } /* Name.Variable.Magic */
.il { color: #666666 } /* Literal.Number.Integer.Long */

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

153
static/style.css Normal file
View file

@ -0,0 +1,153 @@
@import "code-light.css" (prefers-color-scheme: light);
@import "code-dark.css" (prefers-color-scheme: dark);
:root {
color-scheme: light dark;
--background: light-dark(#FFFFFF, #2B363B);
--background-dim: light-dark(#f5f7f9, #2F3C42);
--foreground: light-dark(#2B303A, #f0f2f3);
--foreground-dim: light-dark(#576379, #d5d5d5);
--foreground-heavy: light-dark(#191C22, #f2f4f5);
--primary-color: light-dark(#375287, #A1C5FF);
}
html {
font-size: 18px;
font-family: serif;
}
body {
margin: 0 auto;
max-width: 50rem;
background: var(--background);
color: var(--foreground);
line-height: 1.5;
padding: 0rem 0.5rem;
}
aside {
font-size: smaller;
font-style: italic;
color: var(--foreground-dim);
}
img {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
color: var(--foreground-heavy);
}
a {
color: var(--primary-color);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
text-decoration: underline;
}
nav ul {
list-style: none;
}
nav li {
display: inline;
}
nav li + li:before {
content: " · ";
margin: 0 0.5ex;
}
article header {
display: flex;
flex-direction: row;
margin: 1rem 0;
}
article header time {
white-space: nowrap;
color: var(--foreground-dim);
font-style: italic;
flex: 0 0 12ex;
}
article header h2,
article header p {
font-size: 1rem;
display: inline;
}
code,
pre {
background: var(--background-dim);
border-radius: 0.3rem;
font-family: monospace;
}
pre {
padding: 1rem;
border-left: 2px solid var(--primary-color);
overflow: auto;
}
code {
padding: 0.1rem 0.2rem;
}
/* reset the padding for code inside pre */
pre code {
padding: 0;
}
blockquote {
background: var(--background-dim);
border-radius: 0 0.3rem 0.3rem 0;
font-style: italic;
border-left: 2px solid var(--primary-color);
margin: 0;
padding: 1rem;
}
/* reset the margin for p inside blockquotes */
blockquote p {
margin: 0;
}
body > header {
padding: 2rem 0;
}
body footer {
margin: 3rem 0;
color: var(--foreground-dim);
font-size: smaller;
text-align: center;
}
header nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
header h1 {
margin: 0 auto;
color: var(--primary-color);
}
header h2 {
display: inline;
font-size: 1.2rem;
}

23
templates/archive.html Normal file
View file

@ -0,0 +1,23 @@
{% extends "base.html" %}
{% block title %}Archive{% endblock %}
{% block content %}
{% for entry in archive %}
<article>
<header>
<time datetime="{{ entry.date }}">{{ entry.date.date() }}</time>
<div>
<h2><a href="{{ entry.dst }}">{{ entry.title }}</a></h2>
{% if entry.description %}
<p>— {{ entry.description }}</p>
{% endif %}
</div>
</header>
</article>
{% endfor %}
{% endblock %}

27
templates/article.html Normal file
View file

@ -0,0 +1,27 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
{% if title %}
<h2>{{ title }}</h2>
{% endif %}
<aside>
<p>published on {{ date.date() }}
{% if tags %}
· tagged with
{% for tag in tags|sort(case_sensitive=true) %}
{%- if not loop.first and not loop.last %}, {% endif -%}
{%- if loop.last and not loop.first %} and {% endif %}
<a href="/tags/{{ tag }}.html">#{{ tag }}</a>
{%- endfor %}
{% endif %}
</p>
</aside>
{{ content }}
{% endblock %}

50
templates/base.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="author" content="{{ site.author }}">
{%- if description %}
<meta name="description" content="{{ description }}">
{%- else %}
<meta name="description" content="{{ site.description }}">
{%- endif %}
<link rel="alternate" href="/atom.xml" type="application/atom+xml">
<link rel="stylesheet" href="/style.css" type="text/css">
<title>{% block title %}{% endblock %} | {{ site.description }}</title>
</head>
<body>
<header>
<h1><a href="/">{{ site.title }}</a></h1>
<nav>
<h2>{{ site.description }}</h2>
<ul>
<li><h2><a href="/">Blog</a></h2></li>
<li><h2><a href="/archive.html">Archive</a></h2></li>
<li><h2><a href="/tags/">Tags</a></h2></li>
<li><h2><a href="/about.html">About Me</a></h2></li>
</ul>
</nav>
</header>
<main>
{% block content %}
{% endblock %}
</main>
<footer>
<p>This website was built with <a href="https://github.com/venthur/blag">blag</a>.
<br>
Subscribe to the <a href="/atom.xml">atom feed</a>.
<br>
Contact me via
<a rel="me" href="https://mastodon.social/[FIXME]">[FIXME] Mastodon</a> or
<a href="https://github.com/[FIXME]">[FIXME] Github</a>.
</p>
</footer>
</body>
</html>

25
templates/index.html Normal file
View file

@ -0,0 +1,25 @@
{% extends "base.html" %}
{% block title %}{{ site.title }}{% endblock %}
{% block content %}
{% for entry in archive[:15] %}
<article>
<header>
<time datetime="{{ entry.date }}">{{ entry.date.date() }}</time>
<div>
<h2><a href="{{ entry.dst }}">{{ entry.title }}</a></h2>
{% if entry.description %}
<p>— {{ entry.description }}</p>
{% endif %}
</div>
</header>
</article>
{% endfor %}
<p><a href="/archive.html">all articles...</a></p>
{% endblock %}

9
templates/page.html Normal file
View file

@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
{{ content }}
{% endblock %}

25
templates/tag.html Normal file
View file

@ -0,0 +1,25 @@
{% extends "base.html" %}
{% block title %}#{{ tag }}{% endblock %}
{% block content %}
<h2>Articles tagged "{{ tag }}"</h2>
{% for entry in archive %}
<article>
<header>
<time datetime="{{ entry.date }}">{{ entry.date.date() }}</time>
<div>
<h2><a href="../{{ entry.dst }}">{{ entry.title }}</a></h2>
{% if entry.description %}
<p>— {{ entry.description }}</p>
{% endif %}
</div>
</header>
</article>
{% endfor %}
{% endblock %}

14
templates/tags.html Normal file
View file

@ -0,0 +1,14 @@
{% extends "base.html" %}
{% block title %}Tags{% endblock %}
{% block content %}
<h2>Tags</h2>
<ul>
{% for tag, size in tags %}
<li>
<a href="{{ tag }}.html">{{ tag }} ({{ size }} articles)</a>
</li>
{% endfor %}
</ul>
{% endblock %}