code block experiments
This commit is contained in:
parent
1e9f07747d
commit
79b3aac8a4
|
@ -19,3 +19,8 @@ highlight_theme = "charcoal"
|
||||||
[extra]
|
[extra]
|
||||||
# Put all your custom variables here
|
# Put all your custom variables here
|
||||||
list_pages = true
|
list_pages = true
|
||||||
|
|
||||||
|
header_nav = [
|
||||||
|
{ name = "home", url = "/" },
|
||||||
|
{ name = "about", url = "/" },
|
||||||
|
]
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
+++
|
+++
|
||||||
transparent = true
|
title = "2020"
|
||||||
+++
|
+++
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
+++
|
+++
|
||||||
transparent = true
|
title = "2021"
|
||||||
+++
|
+++
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
+++
|
+++
|
||||||
transparent = true
|
title = "2022"
|
||||||
+++
|
+++
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
+++
|
+++
|
||||||
transparent = true
|
title = "2023"
|
||||||
+++
|
+++
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
+++
|
+++
|
||||||
transparent = true
|
title = "2024"
|
||||||
+++
|
+++
|
||||||
|
|
|
@ -38,7 +38,7 @@ To make it work, I used the following:
|
||||||
Squeezelite is a straightforward player. Just start it with two arguments:
|
Squeezelite is a straightforward player. Just start it with two arguments:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
squeezelite -n Toren -z
|
$ squeezelite -n Toren -z
|
||||||
```
|
```
|
||||||
|
|
||||||
'Toren' is the name of the player here. It is Dutch for 'tower', this is my big computer. `-z` lets it run as a background daemon.
|
'Toren' is the name of the player here. It is Dutch for 'tower', this is my big computer. `-z` lets it run as a background daemon.
|
||||||
|
@ -66,7 +66,9 @@ One special case needs to be added, though. If you start up the player for the f
|
||||||
|
|
||||||
We can check for the current length of the queue and issue the command if it is zero. Otherwise, execute pause/play on the media player:
|
We can check for the current length of the queue and issue the command if it is zero. Otherwise, execute pause/play on the media player:
|
||||||
|
|
||||||
```yaml
|
---
|
||||||
|
|
||||||
|
{% details(summary="Click to view a yaml example of the automation") %}
|
||||||
alias: Pause/Play on Squeezelite Toren
|
alias: Pause/Play on Squeezelite Toren
|
||||||
description: ""
|
description: ""
|
||||||
triggers:
|
triggers:
|
||||||
|
@ -97,7 +99,9 @@ actions:
|
||||||
target:
|
target:
|
||||||
device_id: xxx
|
device_id: xxx
|
||||||
mode: single
|
mode: single
|
||||||
```
|
{% end %}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## The Cinnamon applet
|
## The Cinnamon applet
|
||||||
|
|
||||||
|
@ -106,11 +110,13 @@ Now, the applet is the most difficult part. There should not be a player window
|
||||||
Homeassistant has a REST API that provides all the information. Here is a `curl` command that fetches the information of my player:
|
Homeassistant has a REST API that provides all the information. Here is a `curl` command that fetches the information of my player:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl -X GET -H "Authorization: Bearer ${HA_TOKEN}" https://homeassistant.local:8123/api/states/media_player.squeezelite_toren | jq .
|
$ curl -X GET -H "Authorization: Bearer ${HA_TOKEN}" https://homeassistant.local:8123/api/states/media_player.squeezelite_toren | jq .
|
||||||
```
|
```
|
||||||
|
|
||||||
Which returns something like this:
|
Which returns something like this:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
{
|
{
|
||||||
"entity_id": "media_player.squeezelite_toren
|
"entity_id": "media_player.squeezelite_toren
|
||||||
|
@ -146,6 +152,8 @@ Which returns something like this:
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
As one can see, one needs to [create an API token](https://developers.home-assistant.io/docs/api/rest/) to access the REST API of Homeassistant. Our applet will use the same method.
|
As one can see, one needs to [create an API token](https://developers.home-assistant.io/docs/api/rest/) to access the REST API of Homeassistant. Our applet will use the same method.
|
||||||
|
|
||||||
### The actual applet
|
### The actual applet
|
||||||
|
@ -172,8 +180,9 @@ This folder will need three files:
|
||||||
|
|
||||||
This is the metadata that helps Cinnamon understand the applet.
|
This is the metadata that helps Cinnamon understand the applet.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
```json
|
```json
|
||||||
// metadata.json
|
|
||||||
{
|
{
|
||||||
"uuid": "currentlyplaying@ewintr",
|
"uuid": "currentlyplaying@ewintr",
|
||||||
"name": "Currently playing",
|
"name": "Currently playing",
|
||||||
|
@ -183,12 +192,15 @@ This is the metadata that helps Cinnamon understand the applet.
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### settings-schema.json
|
### settings-schema.json
|
||||||
|
|
||||||
This enables a form where the user of the applet can enter their Homeassistant API key.
|
This enables a form where the user of the applet can enter their Homeassistant API key.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
```json
|
```json
|
||||||
// settings-schema.json
|
|
||||||
{
|
{
|
||||||
"ha_token": {
|
"ha_token": {
|
||||||
"type": "entry",
|
"type": "entry",
|
||||||
|
@ -198,12 +210,15 @@ This enables a form where the user of the applet can enter their Homeassistant A
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### applet.js
|
### applet.js
|
||||||
|
|
||||||
A Javascript snippets that polls the Homeassistant API about the status of the media player and displays the band and song when playing.
|
A Javascript snippets that polls the Homeassistant API about the status of the media player and displays the band and song when playing.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// applet.js
|
|
||||||
const Applet = imports.ui.applet;
|
const Applet = imports.ui.applet;
|
||||||
const Util = imports.misc.util;
|
const Util = imports.misc.util;
|
||||||
const Mainloop = imports.mainloop;
|
const Mainloop = imports.mainloop;
|
||||||
|
@ -258,4 +273,6 @@ function main(metadata, orientation, panelHeight, instance_id) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
And there you have it: plenty of moving parts, but on the surface it quietly just works.
|
And there you have it: plenty of moving parts, but on the surface it quietly just works.
|
||||||
|
|
|
@ -25,6 +25,8 @@ What to do? On the page is a piece of JavaScript that is very eager to move you
|
||||||
|
|
||||||
And then I figured that the script would probably not be very sophisticated. It would likely just look at the protocol, not the host or the whole URL. So I asked an AI to generate a nginx configuration snippet that would let nginx function as an HTTPS proxy with a self-signed certificate:
|
And then I figured that the script would probably not be very sophisticated. It would likely just look at the protocol, not the host or the whole URL. So I asked an AI to generate a nginx configuration snippet that would let nginx function as an HTTPS proxy with a self-signed certificate:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
```nginx
|
```nginx
|
||||||
server {
|
server {
|
||||||
listen 443 ssl http2 default_server;
|
listen 443 ssl http2 default_server;
|
||||||
|
@ -60,6 +62,8 @@ server {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
Now if I want to access the configuration of my Zyxel:
|
Now if I want to access the configuration of my Zyxel:
|
||||||
|
|
||||||
- Disable the normal default site and enable the one above
|
- Disable the normal default site and enable the one above
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
+++
|
+++
|
||||||
transparent = true
|
title = "2025"
|
||||||
+++
|
+++
|
||||||
|
|
|
@ -51,6 +51,7 @@ li { margin: 0.4rem 0; }
|
||||||
padding: 4rem 2rem;
|
padding: 4rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
hr {
|
hr {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -58,6 +59,7 @@ hr {
|
||||||
&:before { content: '/////' }
|
&:before { content: '/////' }
|
||||||
&:after { content: attr(data-content) '/////' }
|
&:after { content: attr(data-content) '/////' }
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
table { width: 100%; }
|
table { width: 100%; }
|
||||||
|
|
||||||
|
@ -77,8 +79,8 @@ code {
|
||||||
pre code {
|
pre code {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
//white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
padding: 1rem;
|
//padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
|
|
|
@ -3,14 +3,14 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{{ section.content | safe }}
|
{{ section.content | safe }}
|
||||||
|
|
||||||
{% if config.extra.list_pages %}
|
{% set section = get_section(path="_index.md") %}
|
||||||
{% if paginator %}
|
{% set subsections = section.subsections | sort | reverse %}
|
||||||
{% set pages = paginator.pages | sort(attribute="date") | reverse %}
|
{% for s in subsections %}
|
||||||
{% else %}
|
{% set ss = get_section(path=s) %}
|
||||||
{% set pages = section.pages | sort(attribute="date") | reverse %}
|
<h2>{{ ss.title }}</h2>
|
||||||
{% endif %}
|
{% set ps = ss.pages | sort(attribute="date") | reverse %}
|
||||||
<ul>
|
<ul>
|
||||||
{% for page in pages %}
|
{% for page in ss.pages %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ page.permalink | safe }}">{% if page.date and not config.extra.no_list_date %}{{ page.date }} - {% endif %}{{ page.title }}</a>
|
<a href="{{ page.permalink | safe }}">{% if page.date and not config.extra.no_list_date %}{{ page.date }} - {% endif %}{{ page.title }}</a>
|
||||||
<br />
|
<br />
|
||||||
|
@ -18,8 +18,5 @@
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% if paginator %}
|
{% endfor %}
|
||||||
<p>{% if paginator.previous %}<a href="{{ paginator.first }}"><< First</a> <a href="{{ paginator.previous }}">< Previous</a>{% endif %} [{{ paginator.current_index }}/{{ paginator.number_pagers }}] {% if paginator.next %}<a href="{{ paginator.next }}">Next ></a> <a href="{{ paginator.last }}">Last >></a>{% endif %}</p>
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
|
@ -1,7 +1,6 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block header %}
|
{% block header %}
|
||||||
<p><a href="..">..</a>/{{ page.slug }}</p>
|
|
||||||
<p class="post-meta"><time datetime="{{ page.date }}">{{ page.date }}</time></p>
|
<p class="post-meta"><time datetime="{{ page.date }}">{{ page.date }}</time></p>
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
{% endblock header %}
|
{% endblock header %}
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
<details>
|
||||||
|
<summary>{{ summary }}</summary>
|
||||||
|
<pre><code>
|
||||||
|
{{- body -}}
|
||||||
|
</code></pre>
|
||||||
|
</details>
|
Loading…
Reference in New Issue