feat: Rewrite in Zola
This commit is contained in:
daudix-UFO
70
content/_index.md
Normal file
70
content/_index.md
Normal file
@ -0,0 +1,70 @@
|
||||
+++
|
||||
+++
|
||||
|
||||
{% crt() %}
|
||||
```
|
||||
_ _ _ _ _
|
||||
>(')____, >(')____, >(')____, >(')____, >(') ___,
|
||||
(` =~~/ (` =~~/ (` =~~/ (` =~~/ (` =~~/
|
||||
jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
|
||||
```
|
||||
{% end %}
|
||||
|
||||
# Duckquill
|
||||
|
||||
[Duckquill](https://codeberg.org/daudix-UFO/duckquill) is a modern, pretty, and clean (and very opinionated) [Zola](https://www.getzola.org) theme that has the purpose of greatly simplifying the process of rolling up your blog. It aims to provide all the needed options for comfortable writing, keeping the balance of it being simple.
|
||||
|
||||
Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!
|
||||
|
||||
- Pretty, yet lightweight. No JavaScript are used.
|
||||
- For a very pleasant look, the colors are tinted with an accent color.
|
||||
- Proper favicon for modern browsers and Apple device icons.
|
||||
- Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test.
|
||||
- Local copy of the amazing [Inter](https://rsms.me/inter/) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/) fonts. No slowdowns pulling from external hosting.
|
||||
- Mobile friendly, with proper dark variant.
|
||||
- [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon). Comment using any ActivityPub service by replying to Mastodon post.
|
||||
|
||||
> See [demo](@/demo/index.md) for showcase of all Duckquill possibilities. Oh and [comments demo](@/demo/comments.md) for showcase of Mastodon-powered comments.
|
||||
|
||||
Make yourself a cup of your <abbr title="Coffee, tea, or water">favorite drink</abbr> and let's start!
|
||||
|
||||
## Getting started
|
||||
|
||||
> If you already have Zola site with Git skip to step #3
|
||||
|
||||
Setting up Zola blog with Duckquill is very simple and consists of the following steps:
|
||||
|
||||
1. [Install Zola](https://www.getzola.org/documentation/getting-started/installation/) and create default site:
|
||||
|
||||
```sh
|
||||
zola init blog
|
||||
```
|
||||
|
||||
2. Initialize Git:
|
||||
|
||||
```sh
|
||||
git init
|
||||
```
|
||||
|
||||
3. Add Duckquill as Git submodule for easy updating:
|
||||
|
||||
```
|
||||
git submodule add https://codeberg.org/daudix-UFO/duckquill.git themes
|
||||
```
|
||||
|
||||
4. Edit `config.toml` and enable Duckquill theme:
|
||||
|
||||
```
|
||||
theme = "duckquill"
|
||||
```
|
||||
|
||||
Voilà! now it's just a matter of changing some settings and writing your first post.
|
||||
|
||||
See project's [README](https://codeberg.org/daudix-UFO/duckquill#duckquill) for all available configuration variables and [Zola docs](https://www.getzola.org/documentation/) for everything else.
|
||||
|
||||
## Special thanks ♥
|
||||
|
||||
- [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
|
||||
- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
|
||||
- [Mehdi](https://codepen.io/meduzen) for an awesome [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
|
||||
- dwb, ejm and jgs for awesome ASCII art
|
||||
5
content/blog/_index.md
Normal file
5
content/blog/_index.md
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
sort_by = "date"
|
||||
template = "blog_list.html"
|
||||
page_template = "blog.html"
|
||||
+++
|
||||
60
content/blog/the-quill-of-duck/index.md
Normal file
60
content/blog/the-quill-of-duck/index.md
Normal file
@ -0,0 +1,60 @@
|
||||
+++
|
||||
title = "The Quill of Duck"
|
||||
date = 2023-08-31
|
||||
[taxonomies]
|
||||
tags = ["Demo", "Test"]
|
||||
[extra]
|
||||
toc = true
|
||||
disclaimer = """
|
||||
See [demo](/demo) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
|
||||
"""
|
||||
[extra.comments]
|
||||
id = ""
|
||||
+++
|
||||
|
||||
|
||||
|
||||
## The what?
|
||||
|
||||
This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo.
|
||||
|
||||
## Some info
|
||||
|
||||
Well, open this file and look at how it's made, it includes all the essential front matter stuff.
|
||||
|
||||
Now to the _Stanley!_
|
||||
|
||||
## The _Stanley_!
|
||||
|
||||
This is the story of a man named _Stanley_.
|
||||
|
||||
_Stanley_ worked for a company in a big building where he was Employee `#427`.
|
||||
|
||||
|
||||
<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
|
||||
|
||||
Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard.
|
||||
|
||||
Orders came to him through a monitor on his desk telling him what buttons to push, how long to push them, and in what order.
|
||||
|
||||
This is what Employee `#427` did every day of every month of every year, and although others may have considered it soul rending,
|
||||
|
||||
_Stanley_ relished every moment that the orders came in, as though he had been made exactly for this job.
|
||||
|
||||
And _Stanley_ was happy.
|
||||
|
||||
And then one day, something very peculiar happened.
|
||||
|
||||
Something that would forever change _Stanley_;
|
||||
|
||||
Something he would never quite forget.
|
||||
|
||||
He had been at his desk for nearly an hour when he had realized not one single order had arrived on the monitor for him to follow.
|
||||
|
||||
No one had shown up to give him instructions, call a meeting, or even say 'hi'. Never in all his years at the company had this happened, this complete isolation.
|
||||
|
||||
Something was very clearly wrong. Shocked, frozen solid, _Stanley_ found himself unable to move for the longest time.
|
||||
|
||||
But as he came to his wits and regained his senses, he got up from his desk and stepped out of his office.
|
||||
|
||||
All of his co-workers were gone. What could it mean? Stanley decided to go to the meeting room; perhaps he had simply missed a memo.
|
||||
BIN
content/blog/the-quill-of-duck/quill.png
Normal file
BIN
content/blog/the-quill-of-duck/quill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
content/blog/the-quill-of-duck/the-office.webp
Normal file
BIN
content/blog/the-quill-of-duck/the-office.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
6
content/demo/comments.md
Normal file
6
content/demo/comments.md
Normal file
@ -0,0 +1,6 @@
|
||||
+++
|
||||
template = "blog.html"
|
||||
title = "ActivityPub/Fediverse comments demo"
|
||||
[extra.comments]
|
||||
id = "110896168682002971"
|
||||
+++
|
||||
284
content/demo/index.md
Normal file
284
content/demo/index.md
Normal file
@ -0,0 +1,284 @@
|
||||
+++
|
||||
template = "blog.html"
|
||||
title = "Demo Page"
|
||||
[extra]
|
||||
archive = "This page is, in fact, not archived, meaning it will receive content updates."
|
||||
trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
|
||||
disclaimer = """
|
||||
- All tricks in this page are performed by the lab boys, don't try this at home.
|
||||
- Don't expose yourself to 4000° kelvin.
|
||||
- Don't take party escort submission position.
|
||||
- Don't interact with asbestos and moon rocks.
|
||||
"""
|
||||
+++
|
||||
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](@/demo/page.md).
|
||||
|
||||
There should be whitespace between paragraphs.
|
||||
|
||||
There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
|
||||
|
||||
# Header 1
|
||||
|
||||
This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
|
||||
|
||||
## Header 2
|
||||
|
||||
> This is a blockquote following a header.
|
||||
>
|
||||
> When something is important enough, you do it even if the odds are not in your favor.
|
||||
|
||||
### Header 3
|
||||
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require("./lang/" + l);
|
||||
return true;
|
||||
};
|
||||
```
|
||||
|
||||
```ruby
|
||||
# Ruby code with syntax highlighting
|
||||
GitHubPages::Dependencies.gems.each do |gem, version|
|
||||
s.add_dependency(gem, "= #{version}")
|
||||
end
|
||||
```
|
||||
|
||||
#### Header 4
|
||||
|
||||
- This is an unordered list following a header.
|
||||
- This is an unordered list following a header.
|
||||
- This is an unordered list following a header.
|
||||
|
||||
##### Header 5
|
||||
|
||||
1. This is an ordered list following a header.
|
||||
2. This is an ordered list following a header.
|
||||
3. This is an ordered list following a header.
|
||||
|
||||
###### Header 6
|
||||
|
||||
| head1 | head two | three |
|
||||
| :----------- | :---------------- | :---- |
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
### There's a horizontal rule below this.
|
||||
|
||||
---
|
||||
|
||||
### Here is an unordered list:
|
||||
|
||||
- Item foo
|
||||
- Item bar
|
||||
- Item baz
|
||||
- Item zip
|
||||
|
||||
### And an ordered list:
|
||||
|
||||
1. Item one
|
||||
1. Item two
|
||||
1. Item three
|
||||
1. Item four
|
||||
|
||||
### And a nested list:
|
||||
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 3 item
|
||||
- level 3 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
|
||||
### Here is a checkboxes:
|
||||
|
||||
- [ ] Milk
|
||||
- [x] Eggs
|
||||
- [x] Flour
|
||||
- [ ] Coffee
|
||||
|
||||
### Small image
|
||||
|
||||
{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png", alt="Codeberg icon", transparent=true, no_hover=true) }}
|
||||
|
||||
### Large image
|
||||
|
||||
{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png", alt="Codeberg horizontal", transparent=true, no_hover=true) }}
|
||||
|
||||
### Definition lists can be used with HTML syntax.
|
||||
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
|
||||
```
|
||||
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||
```
|
||||
|
||||
```
|
||||
The final element.
|
||||
```
|
||||
|
||||
### Extra
|
||||
|
||||
Alright now that the generic (slightly extended) ~~Jekyll~~ Zola demo page have ended, we can get to the custom stuff, which believe me, are neat.
|
||||
|
||||
#### Shortcodes
|
||||
|
||||
Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks.
|
||||
|
||||
##### Image
|
||||
|
||||
By default images come with styling, such as round corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.
|
||||
|
||||
Available variables are:
|
||||
|
||||
- `url`: URL to an image.
|
||||
- `url_min`: URL to compressed version of an image, original can be opened by clicking on the image.
|
||||
- `alt`: Alt text, same as if the text were inside square brackets in Markdown.
|
||||
- `full`: Forces image/video to be full-width.
|
||||
- `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
|
||||
- `transparent`: Removes rounded corners and shadow, useful for transparent images.
|
||||
- `no_hover`: Removes zoom on hover.
|
||||
|
||||
Variables should be comma-separated and be inside the brackets.
|
||||
|
||||
```
|
||||
{{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
|
||||
```
|
||||
|
||||
{{ image(url="https://i.imgur.com/Fr1ImW9.png", alt="Portal Gun blueprint", no_hover=true) }}
|
||||
|
||||
##### Video
|
||||
|
||||
Same as images, but with a few differences: `no_hover` and `url_min` are not available.
|
||||
|
||||
```
|
||||
{{/* video(url="video.webm", alt="This is a video") */}}
|
||||
```
|
||||
|
||||
{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
|
||||
|
||||
##### CRT
|
||||
|
||||
Alright, this one doesn't simplify anything, it just adds a CRT-like effect around Markdown code blocks.
|
||||
|
||||
```
|
||||
{%/* crt() */%}
|
||||
-> Markdown code block <-
|
||||
{%/* end */%}
|
||||
```
|
||||
|
||||
{% crt() %}
|
||||
```
|
||||
_____________________________________________
|
||||
|.'', Public_Library_Halls ,''.|
|
||||
|.'.'', ,''.'.|
|
||||
|.'.'.'', ,''.'.'.|
|
||||
|.'.'.'.'', ,''.'.'.'.|
|
||||
|.'.'.'.'.| |.'.'.'.'.|
|
||||
|.'.'.'.'.|===; ;===|.'.'.'.'.|
|
||||
|.'.'.'.'.|:::|', ,'|:::|.'.'.'.'.|
|
||||
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|
||||
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|
||||
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|
||||
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|
||||
|.'.'.'.'.|---|',' /%%%\ ','|---|.'.'.'.'.|
|
||||
|.'.'.'.'.|===:' /%%%%%\ ':===|.'.'.'.'.|
|
||||
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|
||||
|.'.'.'.',' /%%%%%%%%%\ ','.'.'.'.|
|
||||
|.'.'.',' /%%%%%%%%%%%\ ','.'.'.|
|
||||
|.'.',' /%%%%%%%%%%%%%\ ','.'.|
|
||||
|.',' /%%%%%%%%%%%%%%%\ ','.|
|
||||
|;____________/%%%%%Spicer%%%%%%\____________;|
|
||||
```
|
||||
{% end %}
|
||||
|
||||
### Captions
|
||||
|
||||
Media can have additional text description using the `<figcaption>` HTML tag.
|
||||
|
||||
```
|
||||
|
||||
<figcaption>The image caption</figcaption>
|
||||
```
|
||||
|
||||
|
||||
<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
|
||||
|
||||
### Accordion
|
||||
|
||||
<details>
|
||||
<summary>I can be a spoiler, I can be a long text, I could be anything.</summary>
|
||||
|
||||
_Quack-quack!_
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
### Small
|
||||
|
||||
<small>Small, cute text that doesn't catch attention.</small>
|
||||
|
||||
### Abbreviation
|
||||
|
||||
The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!
|
||||
|
||||
### Keyboard shortcut
|
||||
|
||||
```
|
||||
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
|
||||
```
|
||||
|
||||
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
|
||||
|
||||
### Highlighted
|
||||
|
||||
You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>important</mark> that even **bold** is not enough.
|
||||
|
||||
### Link to page (rightwards arrow)
|
||||
|
||||
```
|
||||
<a class="page-link" href="demo/demo-page">Link to page</a>
|
||||
```
|
||||
|
||||
<a class="link-page" href="demo/page">Link to page</a>
|
||||
|
||||
### Link to site (up-rightwards arrow)
|
||||
|
||||
```
|
||||
<a class="site-link" href="https://example.org">Link to site</a>
|
||||
```
|
||||
|
||||
<a class="link-site" href="https://example.org">Link to site</a>
|
||||
|
||||
### Buttons
|
||||
|
||||
```
|
||||
<p class="dialog-buttons">
|
||||
<a class="inline-button" href="#top">Go to top</a>
|
||||
<a href="{{site.issuesurl}}">File an issue</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
> Look at the end of this page xD
|
||||
10
content/demo/page.md
Normal file
10
content/demo/page.md
Normal file
@ -0,0 +1,10 @@
|
||||
+++
|
||||
+++
|
||||
|
||||
# Welcome to the cake party!
|
||||
|
||||
<img class="transparent no-hover" style="width:50%" src="https://i.imgur.com/ZS4LFj8.png"/>
|
||||
|
||||
Sadly, the cake is a _lie_
|
||||
|
||||
<a class="inline-button" href="demo">Go Crying</a>
|
||||
Reference in New Issue
Block a user