Fix formatting and spelling
This commit is contained in:
parent
343caffbc8
commit
933d1e511f
20 changed files with 202 additions and 209 deletions
|
|
@ -18,16 +18,10 @@ discuss issues:
|
|||
> For framing, hustle and isolation<br>
|
||||
> — <cite>this.ven[^1]</cite>
|
||||
|
||||
[^1]: This quote is from the lyrics of the song [Layer 8](/music/inconvenient-ep/layer-8/).
|
||||
|
||||
Whenever engaging in a project I typically use FLOSS[^2] and GNU/Linux[^3]. As a
|
||||
graduate of media engineering and computer science I focus on networked audio,
|
||||
IT security and privacy.
|
||||
|
||||
[^2]: [Free Software](https://fsfe.org/freesoftware/comparison.en.html) or Free,
|
||||
Libre and Open Source (FLOSS) definition by the Free Software Foundation Europe.
|
||||
[^3]: Switch to FLOSS: [get GNU/Linux!](https://www.getgnulinux.org/)
|
||||
|
||||
### Profile
|
||||
|
||||
{{< figure src="/img/profile.jpg" title="this.ven" width="50%"
|
||||
|
|
@ -38,9 +32,6 @@ Libre and Open Source (FLOSS) definition by the Free Software Foundation Europe.
|
|||
|
||||
Talk with me in the Matrix[^4] room:
|
||||
|
||||
[^4]: Learn about the [Matrix](https://matrix.org/) protocol for
|
||||
instant messaging.
|
||||
|
||||
```
|
||||
#talk2this:ven.uber.space
|
||||
```
|
||||
|
|
@ -60,10 +51,8 @@ Otherwise [contact](imprint/#contact) me via email.
|
|||
## This site
|
||||
|
||||
I don't use tracking tools and your IP address is anonymized, if I need to
|
||||
enable logging. Please use the Tor Browser[^5] to make some cryptonoise[^6].
|
||||
|
||||
[^5]: Use [Tor](https://www.torproject.org/) to browse privately.
|
||||
[^6]: Make [cryptonoise](https://cryptonoise.org/) to protect digital rights.
|
||||
enable logging. Please use the [Tor Browser](https://www.torproject.org/) to
|
||||
make some [cryptonoise](https://cryptonoise.org/).
|
||||
|
||||
{{< callout type="info" >}}
|
||||
Let's put it this way: Your personal information is yours, and my content is
|
||||
|
|
@ -75,4 +64,11 @@ enable logging. Please use the Tor Browser[^5] to make some cryptonoise[^6].
|
|||
|
||||
This work is licensed under [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)
|
||||
{{< icon creative-commons >}} {{< icon creative-commons-by >}}
|
||||
{{< icon creative-commons-sa >}}
|
||||
{{< icon creative-commons-sa >}}
|
||||
|
||||
[^1]: This quote is from the lyrics of the song [Layer 8](/music/inconvenient-ep/layer-8/).
|
||||
[^2]: [Free Software](https://fsfe.org/freesoftware/comparison.en.html)
|
||||
comparison by the Free Software Foundation Europe.
|
||||
[^3]: Switch to FLOSS: [get GNU/Linux!](https://www.getgnulinux.org/)
|
||||
[^4]: Learn about the [Matrix](https://matrix.org/) protocol for
|
||||
instant messaging.
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@ draft: true
|
|||
The hosting[^1] and [the way this site is built](/docs/website/) allows a high
|
||||
degree of data minimization in addition to privacy.
|
||||
|
||||
[^1]: [Privacy policy](https://uberspace.de/en/about/privacy/) of Uberspace.
|
||||
|
||||
## Privacy policy
|
||||
|
||||
The EU General Data Protection Regulation (GDPR)[^2] has ensured data protection
|
||||
|
|
@ -18,8 +16,6 @@ found on this page.
|
|||
|
||||
Accountability can be found in the [imprint](../imprint/).
|
||||
|
||||
[^2]: [Legal text](https://gdpr-info.eu/) of the GDPR.
|
||||
|
||||
### Principles of data processing
|
||||
|
||||
Personal data includes any information that identifies a natural person, such as
|
||||
|
|
@ -29,28 +25,20 @@ transmitting) such data requires a legal basis or your consent. Once personal
|
|||
data is processed and no longer needed, it will be deleted unless there is a
|
||||
legal obligation to retain it.
|
||||
|
||||
[^3]: [IP address](https://en.wikipedia.org/wiki/IP_address) in the Wikipedia.
|
||||
|
||||
### Use of this Website
|
||||
|
||||
In general, you can browse this site without providing any personal data. The
|
||||
chosen [Hugo theme](/docs/website/hugo/#choosing-a-theme) provides some
|
||||
convenient functions, including a search bar, a dark and light mode, a code copy
|
||||
and scroll-to-top button, which are implemented using JavaScript (JS) [^4]. Feel
|
||||
and scroll-to-top button, which are implemented using JavaScript (JS)[^4]. Feel
|
||||
free to turn JS off or block certain scripts, if this is your security model.
|
||||
|
||||
[^4]: [Sources](https://github.com/imfing/hextra/tree/main/assets/js) of the
|
||||
theme's JavaScript code at GitHub.
|
||||
|
||||
### Web server logs
|
||||
|
||||
The web server logs are currently disabled by default. Therefor your IP address
|
||||
is not recorded. If enabled, this information will be saved in an anonymized
|
||||
way and deleted after 7 days as per Uberspace policy[^5].
|
||||
|
||||
[^5]: [Privacy](https://manual.uberspace.de/web-logs.html#privacy) of web logs
|
||||
at Uberspace.
|
||||
|
||||
### Cookies, social network plugins, tracking and analytics tools
|
||||
|
||||
None of these technologies are used on this site.
|
||||
|
|
@ -71,10 +59,17 @@ operators, which you can recognize by a changed URL[^6] in the browser. Please
|
|||
note that any issues concerning those websites are beyond the scope of this
|
||||
policy.
|
||||
|
||||
[^6]: [URL](https://en.wikipedia.org/wiki/URL) in the Wikipedia.
|
||||
|
||||
### Data security
|
||||
|
||||
Finally, it is your responsibility to ensure data protection. Other individuals
|
||||
or organizations may not adhere to data protection regulations, so be cautious,
|
||||
use encryption for emails etc. to prevent unauthorized access to your data.
|
||||
use encryption for emails etc. to prevent unauthorized access to your data.
|
||||
|
||||
[^1]: [Privacy policy](https://uberspace.de/en/about/privacy/) of Uberspace.
|
||||
[^2]: [Legal text](https://gdpr-info.eu/) of the GDPR.
|
||||
[^3]: [IP address](https://en.wikipedia.org/wiki/IP_address) in the Wikipedia.
|
||||
[^4]: [Sources](https://github.com/imfing/hextra/tree/main/assets/js) of the
|
||||
theme's JavaScript code at GitHub.
|
||||
[^5]: [Privacy](https://manual.uberspace.de/web-logs.html#privacy) of web logs
|
||||
at Uberspace.
|
||||
[^6]: [URL](https://en.wikipedia.org/wiki/URL) in the Wikipedia.
|
||||
|
|
@ -17,10 +17,9 @@ the terms `music` and `logo` in the [Pixabay](https://pixabay.com/) community.
|
|||
{{< icon "link" >}} URL: https://pixabay.com/vectors/search/music%20logo/
|
||||
|
||||
The idea of using notes appeals to me and as I also want to convey the spirit of
|
||||
[FLOSS](https://fsfe.org/freesoftware/comparison.en.html) I need to extend it by
|
||||
something that represents its characteristics. I remember that in the logo of
|
||||
the Gitea fork [Forgejo](https://forgejo.org/) the letter `F` is shown as a
|
||||
forking path and want to combine it with notes.
|
||||
FLOSS[^1] I need to extend it by something that represents its characteristics.
|
||||
I remember that in the logo of the Gitea fork [Forgejo](https://forgejo.org/)
|
||||
the letter `F` is shown as a forking path and want to combine it with notes.
|
||||
|
||||
## Creating shapes
|
||||
|
||||
|
|
@ -47,7 +46,7 @@ another iteration to realize that the symbol of a note may be misleading as it
|
|||
is typically associated with sheet music and notation programs. Thus, I start
|
||||
a new approach and play around with the Pen tool to create a music wave that
|
||||
forks into two different directions. The wave form is just a single path with
|
||||
some [Bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) handles.
|
||||
some Bezier curve[^2] handles.
|
||||
This drawing technique and a lot of useful applications are described in the
|
||||
[advanced](https://inkscape.org/doc/tutorials/advanced/tutorial-advanced.html)
|
||||
Inkscape tutorial.
|
||||
|
|
@ -55,21 +54,20 @@ Inkscape tutorial.
|
|||
{{< figure src="img/inkscape-edit-path.png" alt="Inkscape edit path"
|
||||
caption="Editing a path using Bezier curve handles in Inkscape" >}}
|
||||
|
||||
Before saving the document as [SVG](https://en.wikipedia.org/wiki/SVG), useful
|
||||
meta data can be added by opening the document settings (`<Ctrl><Shift><D>`) and
|
||||
selecting the *Meta data* tab. Additionally, the *License* tab allows to
|
||||
integrate URLs and the license deed and granted rights. Besides saving this file
|
||||
for further editing, I use the export dialog (`<Ctrl><Shift><E>`) to create a
|
||||
*Plain SVG* file leaving out Inkscape specific meta data which supports to
|
||||
decrease the file size.
|
||||
Before saving the document as SVG[^3], useful meta data can be added by opening
|
||||
the document settings (`<Ctrl><Shift><D>`) and selecting the *Meta data* tab.
|
||||
Additionally, the *License* tab allows to integrate URLs and the license deed
|
||||
and granted rights. Besides saving this file for further editing, I use the
|
||||
export dialog (`<Ctrl><Shift><E>`) to create a *Plain SVG* file leaving out
|
||||
Inkscape specific meta data which supports to decrease the file size.
|
||||
|
||||
## Serving diversity
|
||||
|
||||
The shapes of the logo are simple and recognizable. Thus, it can be perfectly
|
||||
used as [favicon](https://en.wikipedia.org/wiki/Favicon) for the website. Though
|
||||
recent browsers and devices can render SVG files for this resource, it's good
|
||||
practice to serve other file types. Consequently, the last step is to convert
|
||||
(and if necessary scale) the SVG file to support older browsers and devices.
|
||||
used as Favicon[^4] for the website. Though recent browsers and devices can
|
||||
render SVG files for this resource, it's good practice to serve other file
|
||||
types. Consequently, the last step is to convert (and if necessary scale) the
|
||||
SVG file to support older browsers and devices.
|
||||
|
||||
I open the SVG file in GIMP and confirm the dialog to render the Scalable Vector
|
||||
Graphics using default settings. Depending on the target file type and device I [scale](https://docs.gimp.org/en/gimp-image-scale.html) the image and convert it
|
||||
|
|
@ -104,23 +102,21 @@ convert favicon-tmp.png favicon.ico
|
|||
rm favicon-tmp.png
|
||||
```
|
||||
|
||||
In addition to [ICO](https://en.wikipedia.org/wiki/ICO_(file_format)) file type
|
||||
conversion best practice is to stack smaller size versions on top of the 48 x 48
|
||||
pixels one. This can achieved by opening the `favicon.ico` in GIMP, copying and
|
||||
scaling the original layer down to 32 x 32 and 16 x 16 pixels, and inserting it
|
||||
as a [new layer](https://docs.gimp.org/en/gimp-using-layers.html) (`<Ctrl><V>`).
|
||||
The new layer is inserted into the center of the image and has to be dragged to
|
||||
the top left corner.
|
||||
In addition to ICO[^5] file type conversion best practice is to stack smaller
|
||||
size versions on top of the 48 x 48 pixels one. This can achieved by opening the
|
||||
`favicon.ico` in GIMP, copying and scaling the original layer down to 32 x 32
|
||||
and 16 x 16 pixels, and inserting it as a [new layer](https://docs.gimp.org/en/gimp-using-layers.html)
|
||||
(`<Ctrl><V>`). The new layer is inserted into the center of the image and has to
|
||||
be dragged to the top left corner.
|
||||
|
||||
{{< figure src="img/gimp-stack-layers.png" alt="GIMP stack layers"
|
||||
caption="Stacking layers of scaled image versions in GIMP" >}}
|
||||
|
||||
## Adding a manifest
|
||||
|
||||
For a [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app)
|
||||
(PWA) create a [manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
||||
file. At least provide the following values to serve different icon sizes and
|
||||
change `<your-name>` to fit your needs:
|
||||
For a Progressive Web App[^6] (PWA) create a Manifest[^7] file. At least provide
|
||||
the following values to serve different icon sizes and change `<your-name>` to
|
||||
fit your needs:
|
||||
|
||||
```json {filename="site.webmanifest"}
|
||||
{
|
||||
|
|
@ -149,4 +145,17 @@ MDN Web Docs.
|
|||
|
||||
## Resources
|
||||
|
||||
Repository: https://dri.ven.uber.space/thisven/Identity/src/branch/main/logo
|
||||
Repository: https://dri.ven.uber.space/thisven/Identity/src/branch/main/logo
|
||||
|
||||
[^1]: [Free Software](https://fsfe.org/freesoftware/comparison.en.html)
|
||||
comparison by the Free Software Foundation Europe
|
||||
[^2]: [Bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) in the
|
||||
Wikipedia
|
||||
[^3]: [SVG](https://en.wikipedia.org/wiki/SVG) in the Wikipedia
|
||||
[^4]: [Favicon](https://en.wikipedia.org/wiki/Favicon) in the Wikipedia
|
||||
[^5]: [ICO (file format)](https://en.wikipedia.org/wiki/ICO_(file_format)) in
|
||||
the Wikipedia
|
||||
[^6]: [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app)
|
||||
in the Wikipedia
|
||||
[^7]: [Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) in the
|
||||
MDN Web Docs
|
||||
|
|
@ -70,7 +70,7 @@ size can be varying. As I drastically reduced the colors by posterization the
|
|||
color [mode](https://docs.gimp.org/en/gimp-image-mode.html) can be changed to
|
||||
[Indexed](https://docs.gimp.org/en/gimp-image-convert-indexed.html). However, in
|
||||
my case this doesn't decrease the file size significantly. Thus, for images in
|
||||
[JPEG](https://en.wikipedia.org/wiki/JPEG) format the quality is a key value for
|
||||
JPEG[^1] format the quality is a key value for
|
||||
[compressing images](https://docs.gimp.org/en/gimp-tutorial-quickie-jpeg.html).
|
||||
This value is set in another dialog that appears after specifying the file name
|
||||
and `.jpg` extension in the *Export image* dialog. A quality of 75 percent
|
||||
|
|
@ -92,4 +92,6 @@ advance.
|
|||
|
||||
## Resources
|
||||
|
||||
Repository: https://dri.ven.uber.space/thisven/Identity/src/branch/main/profile-image
|
||||
Repository: https://dri.ven.uber.space/thisven/Identity/src/branch/main/profile-image
|
||||
|
||||
[^1]: [JPEG](https://en.wikipedia.org/wiki/JPEG) in the Wikipedia
|
||||
|
|
@ -4,9 +4,9 @@ date: 2024-02-06T22:25:56+01:00
|
|||
draft: true
|
||||
---
|
||||
|
||||
[Self-hosting](https://en.wikipedia.org/wiki/Self-hosting_(web_services)) is a
|
||||
great way for decentralization, autonomy and privacy. As I'm trying to be a good
|
||||
role model I share my knowledge by documenting the whole infrastructure setup.
|
||||
Self-hosting[^1] is a great way for decentralization, autonomy and privacy. As
|
||||
I'm trying to be a good role model I share my knowledge by documenting the whole
|
||||
infrastructure setup.
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="eturnal/" title="eturnal"
|
||||
|
|
@ -24,4 +24,7 @@ role model I share my knowledge by documenting the whole infrastructure setup.
|
|||
{{< card link="nextcloud/" title="Nextcloud"
|
||||
image="nextcloud/img/nextcloud-logo-blue.svg"
|
||||
subtitle="Running a Nextcloud for file shares" >}}
|
||||
{{< /cards >}}
|
||||
{{< /cards >}}
|
||||
|
||||
[^1]: [Self-hosting (web services)](https://en.wikipedia.org/wiki/Self-hosting_%28web_services%29)
|
||||
in the Wikipedia
|
||||
|
|
@ -10,15 +10,6 @@ another solution as drop-in service for STUN[^2] and TURN[^3].
|
|||
Erlang[^4]. Clients can connect using UDP, TCP, or TLS over IPv4 or IPv6. It
|
||||
supports the mechanism described in an IETF draft[^5] for authentication.
|
||||
|
||||
[^1]: [Issue #844](https://github.com/Uberspace/lab/issues/844) at GitHub
|
||||
[^2]: Session Traversal Utilities for NAT
|
||||
([STUN](https://en.wikipedia.org/wiki/STUN)) in the Wikipedia
|
||||
[^3]: [Traversal Using Relays arount NAT](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT)
|
||||
(TURN) in the Wikipedia
|
||||
[^4]: [Erlang](https://erlang.org/)/OTP website
|
||||
[^5]: [REST API for Access to TURN Services](https://datatracker.ietf.org/doc/html/draft-uberti-behave-turn-rest-00)
|
||||
specification as IETF draft
|
||||
|
||||
{{< figure src="img/stun-turn-server.svg" alt="STUN/TURN server symbol"
|
||||
width="25%" >}}
|
||||
|
||||
|
|
@ -32,4 +23,13 @@ file.
|
|||
## Logging level
|
||||
|
||||
To investigate configuration errors, I can change the `log_level` setting value
|
||||
to `debug`, for example. Afterwards the eturnal service has to be restarted.
|
||||
to `debug`, for example. Afterwards the eturnal service has to be restarted.
|
||||
|
||||
[^1]: [Issue #844](https://github.com/Uberspace/lab/issues/844) at GitHub
|
||||
[^2]: Session Traversal Utilities for NAT
|
||||
([STUN](https://en.wikipedia.org/wiki/STUN)) in the Wikipedia
|
||||
[^3]: [Traversal Using Relays arount NAT](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT)
|
||||
(TURN) in the Wikipedia
|
||||
[^4]: [Erlang](https://erlang.org/)/OTP website
|
||||
[^5]: [REST API for Access to TURN Services](https://datatracker.ietf.org/doc/html/draft-uberti-behave-turn-rest-00)
|
||||
specification as IETF draft
|
||||
|
|
@ -10,9 +10,6 @@ and use version control[^1] during iteration. As a
|
|||
it compares to other platforms and providers (BitBucket, GitHub, etc.) in that it
|
||||
provides most crucial features while being a lightweigt, self-hostable solution.
|
||||
|
||||
[^1]: [Version control](https://en.wikipedia.org/wiki/Version_control) in the
|
||||
Wikipedia
|
||||
|
||||
{{< figure src="img/forgejo-wordmark.svg" alt="Forgejo logo" width="25%" >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
|
|
@ -40,11 +37,13 @@ Two-Factor authentication[^2] is found in the user drop down menu in *Settings*
|
|||
\> *Security* and *SSH / GPG keys* is another separate menu entry in the
|
||||
settings page.
|
||||
|
||||
[^2]: [Multi-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication)
|
||||
in the Wikipedia
|
||||
|
||||
## Guides
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="submodules" title="Submodules" icon="puzzle" >}}
|
||||
{{< /cards >}}
|
||||
{{< /cards >}}
|
||||
|
||||
[^1]: [Version control](https://en.wikipedia.org/wiki/Version_control) in the
|
||||
Wikipedia
|
||||
[^2]: [Multi-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication)
|
||||
in the Wikipedia
|
||||
|
|
@ -14,9 +14,6 @@ in this repo and want to access the folder `hidden @ <hash>`, you'll get a 404
|
|||
page as this is a link to the private repo. Only authenticated users can access
|
||||
it.
|
||||
|
||||
[^1]: [Software repository](https://en.wikipedia.org/wiki/Software_repository)
|
||||
in the Wikipedia
|
||||
|
||||
## Enabling auto-update
|
||||
|
||||
To automatically update submodules on `git clone` and `git pull` I enable [submodule.rescurse](https://git-scm.com/docs/git-config#Documentation/git-config.txt-submodulerecurse):
|
||||
|
|
@ -54,4 +51,7 @@ git submodule update --remote
|
|||
```
|
||||
|
||||
If you are cloning an existing main repo that contains submodules, you can use
|
||||
`git clone` with the `--recurse-submodules` option.
|
||||
`git clone` with the `--recurse-submodules` option.
|
||||
|
||||
[^1]: [Software repository](https://en.wikipedia.org/wiki/Software_repository)
|
||||
in the Wikipedia
|
||||
|
|
@ -9,8 +9,6 @@ standards such as the Ogg Vorbis[^1] container format. You can used it to create
|
|||
an internet radio station or live streaming applications. My [streaming setup](streaming-setup/)
|
||||
is based on Icecast and drives live streaming without 3rd party services.
|
||||
|
||||
[^1]: [Vorbis](https://en.wikipedia.org/wiki/Vorbis) in the Wikipedia
|
||||
|
||||
{{< figure src="img/icecast-logo.svg" alt="Icecast logo" width="25%" >}}
|
||||
|
||||
## Basic setup
|
||||
|
|
@ -29,9 +27,6 @@ Additionally, specify a `<tls-certificate>` in the [<path>](https://www.icecast.
|
|||
block and provide a file containing the cert and private key in sequence at the
|
||||
specified location. Finally, restart Icecast server to reload new configuration.
|
||||
|
||||
[^2]: [Transport Layer Security](https://en.wikipedia.org/wiki/Transport_Layer_Security)
|
||||
(TLS) in the Wikipedia
|
||||
|
||||
{{< callout type="info" >}}
|
||||
If Icecast refuses to start, increase the [logging level](#logging-level),
|
||||
analyze the logfiles and check if it has been compiled against
|
||||
|
|
@ -60,9 +55,6 @@ Change `/file.ogg` to fit your needs. The provided file should have the same
|
|||
encoding parameters (for example: 192 kbps CBR[^3]) to prevent listener dropouts and must exist in Icecast's webroot to be accessible. [Fileserving](https://www.icecast.org/docs/icecast-trunk/config_file/#general-settings)
|
||||
must also be activated. (Enabled by default.)
|
||||
|
||||
[^3]: [Constant bitrate](https://en.wikipedia.org/wiki/Constant_bitrate) (CBR)
|
||||
in the Wikipedia
|
||||
|
||||
## No-cache
|
||||
|
||||
Applications playing streams may automatically cache data. This behaviour can
|
||||
|
|
@ -85,8 +77,6 @@ cannot be disabled, but written to a Null device[^4]. This can be done by
|
|||
removing the standard log files `access.log` and `error.log` and creating
|
||||
symbolic links as follows:
|
||||
|
||||
[^4]: [Null device](https://en.wikipedia.org/wiki/Null_device) in the Wikipedia
|
||||
|
||||
```bash
|
||||
rm /var/log/icecast/access.log
|
||||
rm /var/log/icecast/error.log
|
||||
|
|
@ -97,7 +87,12 @@ ln -s /dev/null /var/log/icecast/error.log
|
|||
## Applications
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="streaming-setup" title="Streaming setup" icon="play" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< card link="streaming-setup" title="Streaming setup" icon="play" >}}
|
||||
|
||||
{{< /cards >}}
|
||||
[^1]: [Vorbis](https://en.wikipedia.org/wiki/Vorbis) in the Wikipedia
|
||||
[^2]: [Transport Layer Security](https://en.wikipedia.org/wiki/Transport_Layer_Security)
|
||||
(TLS) in the Wikipedia
|
||||
[^3]: [Constant bitrate](https://en.wikipedia.org/wiki/Constant_bitrate) (CBR)
|
||||
in the Wikipedia
|
||||
[^4]: [Null device](https://en.wikipedia.org/wiki/Null_device) in the Wikipedia
|
||||
|
|
@ -6,12 +6,7 @@ draft: true
|
|||
|
||||
Live streaming[^1] can be done independently from 3rd parties by using a
|
||||
streaming media server[^2] such as [Icecast](../) and a [source client](https://icecast.org/apps/#source-clients)
|
||||
for encoding and streaming to that server.
|
||||
|
||||
[^1]: [Live streaming](https://en.wikipedia.org/wiki/Live_streaming) in the
|
||||
Wikipedia
|
||||
[^2]: [Media server](https://en.wikipedia.org/wiki/Media_server) in the
|
||||
Wikipedia
|
||||
for encoding and streaming to that server.
|
||||
|
||||
I'm using Icecast and [oggfwd](https://r-w-x.org/r/oggfwd) in combination with
|
||||
[ffmpeg](https://ffmpeg.org/) as source client to realize live streaming
|
||||
|
|
@ -38,30 +33,27 @@ also necessary.
|
|||
|
||||
Get the ffmpeg and oggfwd package by using your distribution's package manager
|
||||
or compile from sources. You need to have [mpv](https://mpv.io/) installed in
|
||||
order to play waiting music and [wget](https://www.gnu.org/software/wget/) for
|
||||
triggering tasks via Icecast's [Admin Interface](https://www.icecast.org/docs/icecast-trunk/admin_interface/). In ArchLinux, ffmpeg and wget are provided in the official repositories and [oggfwd in the AUR](https://aur.archlinux.org/packages/oggfwd).
|
||||
order to play waiting music and `wget`[^3] for triggering tasks via Icecast's
|
||||
[Admin Interface](https://www.icecast.org/docs/icecast-trunk/admin_interface/).
|
||||
In ArchLinux, ffmpeg and wget are provided in the official repositories and
|
||||
[oggfwd in the AUR](https://aur.archlinux.org/packages/oggfwd).
|
||||
|
||||
## Start live streaming
|
||||
|
||||
The following chapters document how to manage the live streaming in detail by
|
||||
describing the steps and providing numbered Bash[^3] scripts. Create the files
|
||||
describing the steps and providing numbered Bash[^4] scripts. Create the files
|
||||
using the filenames in the code block header, copy and paste the code, and make
|
||||
the files executable.
|
||||
|
||||
[^3]: [GNU Bash](https://www.gnu.org/software/bash/) project website
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### Setting up the environment
|
||||
|
||||
To simply copy and paste the commands used in this guide, I set the following
|
||||
environment variables[^4] to my needs. Most of the values depend on the settings
|
||||
environment variables[^5] to my needs. Most of the values depend on the settings
|
||||
applied in the [Icecast basic setup](../#basic-setup). The following script is
|
||||
an example and needs to be adapted:
|
||||
|
||||
[^4]: [Environment variable](https://en.wikipedia.org/wiki/Environment_variable)
|
||||
in the Wikipedia
|
||||
|
||||
```bash{filename="1-setting-up-env.sh"}
|
||||
# ffmpeg options
|
||||
export CONCERT_TITLE="My streaming concert"
|
||||
|
|
@ -91,12 +83,9 @@ and arm the desired tracks using the [audio track controls](https://manual.ardou
|
|||
|
||||
The output of ardour must be encoded to the Ogg Vorbis container format and
|
||||
provided at `stdout` to be forwarded by oggfwd. This can be achieved by using
|
||||
ffmpeg's JACK input device, audio encoding parameters and piping[^5] the output
|
||||
ffmpeg's JACK input device, audio encoding parameters and piping[^6] the output
|
||||
to oggfwd using the `|` operator:
|
||||
|
||||
[^5]: [Pipeline (Unix)](https://en.wikipedia.org/wiki/Pipeline_(Unix)) in the
|
||||
Wikipedia
|
||||
|
||||
```bash{filename="2-encoding-forwarding.sh"}
|
||||
ffmpeg -f $AUDIO_BACKEND -i $JACK_CLIENT1 \
|
||||
-vn \
|
||||
|
|
@ -227,4 +216,15 @@ killall ffmpeg oggfwd mpv
|
|||
|
||||
In ardour, I can stop the recording and save the session for later production.
|
||||
|
||||
{{% /steps %}}
|
||||
{{% /steps %}}
|
||||
|
||||
[^1]: [Live streaming](https://en.wikipedia.org/wiki/Live_streaming) in the
|
||||
Wikipedia
|
||||
[^2]: [Media server](https://en.wikipedia.org/wiki/Media_server) in the
|
||||
Wikipedia
|
||||
[^3]: [GNU Wget](https://www.gnu.org/software/wget/) website
|
||||
[^4]: [GNU Bash](https://www.gnu.org/software/bash/) website
|
||||
[^5]: [Environment variable](https://en.wikipedia.org/wiki/Environment_variable)
|
||||
in the Wikipedia
|
||||
[^6]: [Pipeline (Unix)](https://en.wikipedia.org/wiki/Pipeline_(Unix)) in the
|
||||
Wikipedia
|
||||
|
|
@ -12,10 +12,6 @@ homeserver like [Synapse](synapse/). To connect with me, register at another
|
|||
[public server](public-server-list/) and join my Matrix room found at the
|
||||
[about](/about/#contact) page.
|
||||
|
||||
[^1]: [End-to-end encryption](https://en.wikipedia.org/wiki/End-to-end_encryption)
|
||||
in the Wikipedia
|
||||
[^2]: [Federation](https://en.wikipedia.org/wiki/Federation_(information_technology)) in the Wikipedia
|
||||
|
||||
{{< figure src="img/matrix-logo.svg" alt="Matrix logo" width="25%" >}}
|
||||
|
||||
## Basic concepts
|
||||
|
|
@ -46,8 +42,6 @@ the following syntax for a room alias:
|
|||
#room_alias:exmaple.org
|
||||
```
|
||||
|
||||
[^3]: [Internet Relay Chat (IRC)](https://en.wikipedia.org/wiki/Intenet_Relay_Chat) in the Wikipedia
|
||||
|
||||
There's a web service at https://matrix.to/ provided by the Matrix.org
|
||||
Foundation for linking users, rooms and messages, which can ease onboarding.
|
||||
Additionally, https://view.matrix.org lists rooms that can be joined without
|
||||
|
|
@ -57,8 +51,11 @@ their links displays a history of messages in this room.
|
|||
## Guides
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="public-server-list" title="Public server list" icon="login" >}}
|
||||
{{< card link="synapse" title="Synapse" icon="server" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< card link="public-server-list" title="Public server list" icon="login" >}}
|
||||
{{< card link="synapse" title="Synapse" icon="server" >}}
|
||||
|
||||
{{< /cards >}}
|
||||
[^1]: [End-to-end encryption](https://en.wikipedia.org/wiki/End-to-end_encryption)
|
||||
in the Wikipedia
|
||||
[^2]: [Federation](https://en.wikipedia.org/wiki/Federation_(information_technology)) in the Wikipedia
|
||||
[^3]: [Internet Relay Chat (IRC)](https://en.wikipedia.org/wiki/Intenet_Relay_Chat) in the Wikipedia
|
||||
|
|
@ -19,10 +19,6 @@ Provider | Homeserver URL | Status page | Special features (selection)
|
|||
[sp-codes](https://sp-codes.de/en/services/matrix) | `matrix.sp-codes.de` | https://the-federation.info/node/matrix.sp-codes.de | Run by a security and privacy enthusiast[^3] providing a [german guide](https://sp-codes.de/de/services/matrix/setup/part-1)
|
||||
[tchncs.de](https://tchncs.de/matrix) | `tchncs.de` | https://the-federation.info/node/tchncs.de | Bridges: Discord, Signal, Telegram, WhatsApp
|
||||
|
||||
[^1]: [Freifunk](https://freifunk.net/) community website
|
||||
[^2]: [About page of Nitrokey](https://www.nitrokey.com/about)
|
||||
[^3]: [Personal website](https://samuel-philipp.com/) of the sp-code provider
|
||||
|
||||
Although I'm trying to keep this list up to date, it might be outdated once in
|
||||
a while. Therefore, you may check if the homeserver of your choice still
|
||||
provides open signups on its status page before registering.
|
||||
|
|
@ -40,11 +36,15 @@ Federation. Be patient when opening this site as it renders statistics on demand
|
|||
and may take some time to load.
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
Last but not at least there's another unofficial list
|
||||
of public Matrix servers at hello-matrix.net, but it seems rather outdated.
|
||||
Last but not at least there's another unofficial list of public Matrix servers
|
||||
at hello-matrix.net, but it seems rather outdated.
|
||||
{{< /callout >}}
|
||||
|
||||
## Join at my server
|
||||
|
||||
There's no open registration for my Matrix homeserver, but you can talk to me by
|
||||
joining the matrix room in the [contact](/about/#contact) section.
|
||||
joining the matrix room in the [contact](/about/#contact) section.
|
||||
|
||||
[^1]: [Freifunk](https://freifunk.net/) community website
|
||||
[^2]: [About page of Nitrokey](https://www.nitrokey.com/about)
|
||||
[^3]: [Personal website](https://samuel-philipp.com/) of the sp-code provider
|
||||
|
|
@ -11,13 +11,6 @@ For running a Matrix server on Raspberry Pi[^2], for example, consider a more
|
|||
lightweight solution such as Conduit or Dendrite[^3]. The source code of Synapse
|
||||
is written in Python3/Twisted[^4] and can be found at GitHub.
|
||||
|
||||
[^1]: [About Matrix](https://matrix.org/foundation) website
|
||||
[^2]: [Raspberry Pi](https://en.wikipedia.org/wiki/Raspberry_Pi) in the
|
||||
Wikipedia
|
||||
[^3]: [Conduit](https://conduit.rs) and [Dendrite](https://github.com/matrix-org/dendrite) projects
|
||||
[^4]: [Twisted](https://en.wikipedia.org/wiki/Twisted_(software)) in the
|
||||
Wikipedia
|
||||
|
||||
## Basic setup
|
||||
|
||||
The [Synapse — UberLab 7 documentation](https://lab.uberspace.de/guide_synapse)
|
||||
|
|
@ -41,9 +34,6 @@ of my webserver containing:
|
|||
}
|
||||
```
|
||||
|
||||
[^5]: [Well-known URI](https://spec.matrix.org/latest/client-server-api/#well-known-uri)
|
||||
in the Matrix specification
|
||||
|
||||
{{< callout type="info" >}}
|
||||
If you're running [Nextcloud](../../nextcloud) in the Document_Root, its
|
||||
`.htaccess` file needs editing for proper [redirection](#nextcloud_redirects).
|
||||
|
|
@ -74,9 +64,6 @@ report_stats: false
|
|||
When using Push notifications[^6], the message content isn't encrypted. For this
|
||||
reason, I create a push section and set `include_content` to `false`.
|
||||
|
||||
[^6]: [Push notifications](https://en.wikipedia.org/wiki/Push_technology#Push_notification)
|
||||
in the Wikipedia
|
||||
|
||||
### Profile data
|
||||
|
||||
As I don't want my profile information to be visible to the public and shared in
|
||||
|
|
@ -112,4 +99,15 @@ inside the `.htaccess` file in both sections before the rewrite rules:
|
|||
|
||||
```
|
||||
RewriteCond %{REQUEST_URI} !^/\.well-known/matrix/server
|
||||
```
|
||||
```
|
||||
|
||||
[^1]: [About Matrix](https://matrix.org/foundation) website
|
||||
[^2]: [Raspberry Pi](https://en.wikipedia.org/wiki/Raspberry_Pi) in the
|
||||
Wikipedia
|
||||
[^3]: [Conduit](https://conduit.rs) and [Dendrite](https://github.com/matrix-org/dendrite) projects
|
||||
[^4]: [Twisted](https://en.wikipedia.org/wiki/Twisted_(software)) in the
|
||||
Wikipedia
|
||||
[^5]: [Well-known URI](https://spec.matrix.org/latest/client-server-api/#well-known-uri)
|
||||
in the Matrix specification
|
||||
[^6]: [Push notifications](https://en.wikipedia.org/wiki/Push_technology#Push_notification)
|
||||
in the Wikipedia
|
||||
|
|
@ -9,10 +9,6 @@ file sharing[^2] solution for me. Due to its extensible design it can also be a
|
|||
communication hub and project management platform. If you'd like to host your
|
||||
own Nextcloud take a look at [Nextcloud at home](https://nextcloud.com/athome/).
|
||||
|
||||
[^1]: [PHP website](https://www.php.net/) by The PHP Foundation
|
||||
[^2]: [File sharing](https://en.wikipedia.org/wiki/File_sharing) in the
|
||||
Wikipedia
|
||||
|
||||
{{< figure src="img/nextcloud-logo-blue.svg" alt="Nextcloud Logo" width="25%">}}
|
||||
|
||||
## Basic setup
|
||||
|
|
@ -70,8 +66,6 @@ with the [Etar Calendar](https://github.com/Etar-Group/Etar-Calendar) app. To
|
|||
access and synchronize notes and task on Android I use the official
|
||||
[Notes](https://github.com/nextcloud/notes-android) app and [Tasks.org](https://tasks.org/).
|
||||
|
||||
[^3]: [CardDAV](https://en.wikipedia.org/wiki/CardDAV) in the Wikipedia
|
||||
|
||||
### Cookbook
|
||||
|
||||
One of my favorites is the [Cookbook](https://apps.nextcloud.com/apps/cookbook)
|
||||
|
|
@ -84,9 +78,6 @@ The [Talk](https://apps.nextcloud.com/apps/spreed) app offers video conferencing
|
|||
within Nextcloud and is backed by [eturnal](../eturnal/) in my infrastructure to
|
||||
support users in NAT[^4] environments.
|
||||
|
||||
[^4]: [Network address translation](https://en.wikipedia.org/wiki/Network_address_translation)
|
||||
(NAT) in the Wikipedia
|
||||
|
||||
## Known issues
|
||||
|
||||
This section is about issues I came accross in relation to the interaction with
|
||||
|
|
@ -100,4 +91,11 @@ introduced due to [code signing](https://docs.nextcloud.com/server/latest/admin_
|
|||
complains about the extra file `.well-known/matrix/server` and an invalid hash
|
||||
for `.htaccess`. As there is no option to exclude files by design and any code
|
||||
alterations also affect the integrity check, there's currently no way to get rid
|
||||
of that error message.
|
||||
of that error message.
|
||||
|
||||
[^1]: [PHP website](https://www.php.net/) by The PHP Foundation
|
||||
[^2]: [File sharing](https://en.wikipedia.org/wiki/File_sharing) in the
|
||||
Wikipedia
|
||||
[^3]: [CardDAV](https://en.wikipedia.org/wiki/CardDAV) in the Wikipedia
|
||||
[^4]: [Network address translation](https://en.wikipedia.org/wiki/Network_address_translation)
|
||||
(NAT) in the Wikipedia
|
||||
|
|
@ -4,14 +4,15 @@ date: 2024-02-28T12:10:00+01:00
|
|||
draft: true
|
||||
---
|
||||
|
||||
The art of [tinkering](https://en.wikipedia.org/wiki/Tinkering) is a great way
|
||||
to construct yourself tools and learn about the details of various crafts.
|
||||
Usually, I tinker constructions that I want to customize or can't afford. If a
|
||||
product doesn't serve my individual needs or is too expensive, I try to find a
|
||||
tinkerer solution.
|
||||
The art of tinkering[^1] is a great way to construct yourself tools and learn
|
||||
about the details of various crafts. Usually, I tinker constructions that I want
|
||||
to customize or can't afford. If a product doesn't serve my individual needs or
|
||||
is too expensive, I try to find a tinkerer solution.
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="vocal-booth/" title="Vocal booth"
|
||||
image="vocal-booth/img/carton-wall.jpg"
|
||||
subtitle="Building a vocal booth from carton boxes and blankets" >}}
|
||||
{{< /cards >}}
|
||||
{{< /cards >}}
|
||||
|
||||
[^1]: [Tinkering](https://en.wikipedia.org/wiki/Tinkering) in the Wikipedia
|
||||
|
|
@ -11,11 +11,6 @@ cheap and flexible DIY[^2] approach is to build a small room out of moving boxes
|
|||
and blankets. Even though there isn't the same amount of noise reduction
|
||||
achieved, this solution minimizes reverberation.
|
||||
|
||||
[^1]: [Spill (audio)](https://en.wikipedia.org/wiki/Spill_(audio)) in the
|
||||
Wikipedia
|
||||
[^2]: [Do it Yourself](https://en.wikipedia.org/wiki/Do_it_yourself) (DIY) in
|
||||
the Wikipedia
|
||||
|
||||
## Conception
|
||||
|
||||
Before building a DIY vocal booth, I choose a location inside my room that
|
||||
|
|
@ -26,8 +21,6 @@ the vocal booth upon it. By this, I can place a display, keyboard and mouse
|
|||
in front of the microphone stand for reading the lyrics and controlling the DAW
|
||||
during performance.
|
||||
|
||||
[^3]: [Room modes](https://en.wikipedia.org/wiki/Room_modes) in the Wikipedia
|
||||
|
||||
## Building
|
||||
|
||||
The building process is easy. I fold the moving boxes and form walls around the
|
||||
|
|
@ -43,8 +36,6 @@ I arrange the microphone stand and other equipment, and try to establish a cable
|
|||
layout carrying the connectors preferably outside of the box. I set up my
|
||||
computer and other noisy hardware outside of the booth, ideally in another room.
|
||||
|
||||
[^4]: [Cable tie](https://en.wikipedia.org/wiki/Cable_tie) in the Wikipedia
|
||||
|
||||
## Sound check
|
||||
|
||||
Finally, I can set up my equipment and enter the DIY vocal booth. I place myself
|
||||
|
|
@ -67,4 +58,11 @@ You can listen to the acapella version of *WEAK* from the
|
|||
{{< callout type="info" >}}
|
||||
If the embedded audio player is cumbersome, access this song directly via
|
||||
[{{< icon "funkwhale" >}} Funkwhale](https://open.audio/library/tracks/398355/).
|
||||
{{< /callout >}}
|
||||
{{< /callout >}}
|
||||
|
||||
[^1]: [Spill (audio)](https://en.wikipedia.org/wiki/Spill_(audio)) in the
|
||||
Wikipedia
|
||||
[^2]: [Do it Yourself](https://en.wikipedia.org/wiki/Do_it_yourself) (DIY) in
|
||||
the Wikipedia
|
||||
[^3]: [Room modes](https://en.wikipedia.org/wiki/Room_modes) in the Wikipedia
|
||||
[^4]: [Cable tie](https://en.wikipedia.org/wiki/Cable_tie) in the Wikipedia
|
||||
|
|
@ -5,8 +5,7 @@ draft: true
|
|||
---
|
||||
|
||||
After some years of manually creating`.html` source files I switch to using a
|
||||
[static site generator](https://en.wikipedia.org/wiki/Static_site_generator).
|
||||
I got used to the [Markdown](https://www.markdownguide.org/) format and like the
|
||||
static site generator[^1]. I got used to the Markdown[^2] format and like the
|
||||
idea of self-contained applications. Thus, the [Hugo](https://gohugo.io/)
|
||||
framework seems to be a promising solution.
|
||||
|
||||
|
|
@ -57,8 +56,8 @@ git clone https://dri.ven.uber.space/thisven/Website
|
|||
### Configuring a site
|
||||
|
||||
Though the Hextra theme documentation recommends installing it as a Hugo module
|
||||
I prefer a [Git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules)
|
||||
setup in [getting started](https://imfing.github.io/hextra/docs/getting-started/#setup-hextra-as-git-submodule):
|
||||
I prefer a [Git submodule](/docs/infrastructure/forgejo/submodules/) setup in
|
||||
[getting started](https://imfing.github.io/hextra/docs/getting-started/#setup-hextra-as-git-submodule):
|
||||
|
||||
```bash
|
||||
hugo new site --force Website --format=yaml
|
||||
|
|
@ -116,12 +115,14 @@ quirks that I found useful.
|
|||
## Customizations
|
||||
|
||||
{{< cards >}}
|
||||
|
||||
{{< card link="archetypes" title="Archetypes" icon="book-open" >}}
|
||||
{{< card link="shortcodes" title="Shortcodes" icon="collection" >}}
|
||||
|
||||
{{< card link="archetypes" title="Archetypes" icon="book-open" >}}
|
||||
{{< card link="shortcodes" title="Shortcodes" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## Resources
|
||||
|
||||
Repository: https://dri.ven.uber.space/thisven/Website
|
||||
Repository: https://dri.ven.uber.space/thisven/Website
|
||||
|
||||
[^1]: [Static site generator](https://en.wikipedia.org/wiki/Static_site_generator)
|
||||
in the Wikipedia
|
||||
[^2]: [Markdown Guide](https://www.markdownguide.org/) website
|
||||
|
|
@ -6,9 +6,9 @@ draft: true
|
|||
|
||||
## Default front matter format
|
||||
|
||||
As the Hextra theme prefers the [YAML](https://yaml.org) format in its docs and
|
||||
the Hugo [configuration](https://gohugo.io/getting-started/configuration/) has
|
||||
also been [created in this format](../#step-3-configuring-a-site), I switch the
|
||||
As the Hextra theme prefers the YAML[^1] format in its docs and the Hugo
|
||||
[configuration](https://gohugo.io/getting-started/configuration/) has also been
|
||||
[created in this format](../#step-3-configuring-a-site), I switch the
|
||||
[front matter](https://gohugo.io/content-management/front-matter/) format to
|
||||
YAML as well. Therefor, I create the file `archetype/default.md` containing:
|
||||
|
||||
|
|
@ -22,4 +22,6 @@ draft: true
|
|||
|
||||
Using this [archetype](https://gohugo.io/content-management/archetypes/) the
|
||||
front matter format for a content file created by the `hugo new content` command
|
||||
is specified to be YAML.
|
||||
is specified to be YAML.
|
||||
|
||||
[^1]: [YAML](https://en.wikipedia.org/wiki/YAML) in the Wikipedia
|
||||
|
|
@ -9,13 +9,13 @@ draft: true
|
|||
Hugo provides [built-in shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes),
|
||||
Hextra adds [some more](https://imfing.github.io/hextra/docs/guide/shortcodes/).
|
||||
However, I need to embed other media sources and want to migrate some of my own
|
||||
HTML and CSS structures. For this purpose there is a official guide on how to
|
||||
[create your own shortcodes](https://gohugo.io/templates/shortcode-templates/).
|
||||
HTML[^1] and CSS[^2] structures. For this purpose there is an official guide on
|
||||
[creating own shortcodes](https://gohugo.io/templates/shortcode-templates/).
|
||||
|
||||
### iFrame
|
||||
|
||||
To embed arbitrary media `layouts/shortcodes/iframe.html` is created containing
|
||||
the following [HTML](https://en.wikipedia.org/wiki/HTML) code:
|
||||
the following code:
|
||||
|
||||
```html {filename="layouts/shortcodes/iframe.html"}
|
||||
{{ $src := .Get "src" -}}
|
||||
|
|
@ -60,9 +60,9 @@ variables and inserted, if not null. Additionally, the file
|
|||
}
|
||||
```
|
||||
|
||||
The definitions of the [CSS](https://en.wikipedia.org/wiki/CSS) classes
|
||||
`wrap-element` and `wrapped-iframe` are applied to the `div` and `iframe`element
|
||||
to make the embeded resource responsible. This idea originates from a snippet of
|
||||
The definitions of the CSS classes `wrap-element` and `wrapped-iframe` are
|
||||
applied to the `div` and `iframe`element to make the embeded resource
|
||||
responsible. This idea originates from a snippet of
|
||||
[W3Schools](https://www.w3schools.com/howto/howto_css_responsive_iframes.asp).
|
||||
The `funkwhale` class is used for embedding Funkwhale media in order to decrease
|
||||
the height of the iframe on bigger screens.
|
||||
|
|
@ -89,12 +89,9 @@ closing `{{</* /rawhtml */>}}` shortcode. The idea is taken from a blog post by
|
|||
|
||||
### Media figure
|
||||
|
||||
Audio and video sources can be enclosed in a `<figure>`[^1] element providing additional description in a caption and a link to the source file. My audio
|
||||
Audio and video sources can be enclosed in a `<figure>`[^3] element providing additional description in a caption and a link to the source file. My audio
|
||||
shortcode is inspired by the [solution in the Zen theme](https://github.com/frjo/hugo-theme-zen/blob/main/layouts/shortcodes/audio.html):
|
||||
|
||||
[^1]: [Figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
|
||||
in the MDN Web Docs.
|
||||
|
||||
```html {filename="layouts/shortcodes/audio.html"}
|
||||
{{ $caption := .Get "caption" -}}
|
||||
{{ $preload := .Get "preload" | default "none" -}}
|
||||
|
|
@ -137,7 +134,7 @@ playing back the video:
|
|||
</figure>
|
||||
```
|
||||
|
||||
The additional `<figcaption>` and `<a>` elements are organized by a grid[^2]
|
||||
The additional `<figcaption>` and `<a>` elements are organized by a grid[^4]
|
||||
using the following CSS code added to the `assets/css/custom.css` file:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
|
|
@ -175,9 +172,6 @@ figure.media a {
|
|||
}
|
||||
```
|
||||
|
||||
[^2]: [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
|
||||
in the MDN Web Docs
|
||||
|
||||
## Nesting
|
||||
|
||||
In order to nest several shortcodes using the Hextra theme, I have to explicitly
|
||||
|
|
@ -209,4 +203,11 @@ of a figure for a thumbnail image small I add the following CSS code to the
|
|||
figure.thumbnail {
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
[^1]: [HTML](https://en.wikipedia.org/wiki/HTML) in the Wikipedia
|
||||
[^2]: [CSS](https://en.wikipedia.org/wiki/CSS) in the Wikipedia
|
||||
[^3]: [Figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
|
||||
in the MDN Web Docs.
|
||||
[^4]: [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
|
||||
in the MDN Web Docs
|
||||
|
|
@ -13,10 +13,8 @@ draft: true
|
|||
In this talk I present the MODEP virtual pedalboard with the Pisound HAT for Raspberry Pi powered by Patchbox OS.
|
||||
|
||||
{{< details title="Details" >}}
|
||||
|
||||
{{< icon "location-marker" >}} Event: [Sonoj 2023](https://sonoj.org/2023/)
|
||||
{{< icon "calendar" >}} Date: 2023-10-07
|
||||
{{< icon "link" >}} Source: [media.ccc.de](https://media.ccc.de/v/sonoj2023-23004-modep-pisound)
|
||||
{{< icon "document" >}} Slides: [modep-with-pisound.pdf](slides/modep-with-pisound.pdf)
|
||||
|
||||
{{< icon "location-marker" >}} Event: [Sonoj 2023](https://sonoj.org/2023/)
|
||||
{{< icon "calendar" >}} Date: 2023-10-07
|
||||
{{< icon "link" >}} Source: [media.ccc.de](https://media.ccc.de/v/sonoj2023-23004-modep-pisound)
|
||||
{{< icon "document" >}} Slides: [modep-with-pisound.pdf](slides/modep-with-pisound.pdf)
|
||||
{{< /details >}}
|
||||
Loading…
Reference in a new issue