butiran-✗

v0.9 panel-dev

· 3 mins read · edit

It is version 0.9 of panel development.

Start presentation
^

panel in hugo post

dev log v0.9

Sparisoma Viridi, Virtual Assistant
20260408_v9 | https://butiran-x.github.io/26c36/
butiran-x/26c36
2026-03-08
1
^

outline

  • misc intro 3
  • some features 7
  • closing 12
butiran-x/26c36
2026-03-08
2
^
misc
intro
butiran-x/26c36
2026-03-08
3
^

about

  • It is about v0.9 of panel development.
  • Currently, it works only as web page but not as presentation.
  • It should be work now but limited.
butiran-x/26c36
2026-03-08
4
^

updates

  • Change id to target in button shortcode, since the anchor of internal url is for target element not the one that triggers it.
  • Navigation panel in presentation mode is corrected with different left and right paddings.
  • Code styles are fixed, but not sure about scrolling and width, height.
butiran-x/26c36
2026-03-08
5
^

to-do

  • Left, width, and height of .content and .content > ul need to be reparied, especially in presentation mode.
  • Mermaid support will be scheduled. Done for Mermaid support but not too perfect. Too many constraints be aware of.
butiran-x/26c36
2026-03-08
6
^
some
features
butiran-x/26c36
2026-03-08
7
^

equation

  • KaTeX helps in displaying equation in panel.
  • Value of math in frontmatter must be set to true.
  • The equation in displayed mode is as follows $$\tag{9} \hat{r} = \frac{\vec{r}}{\sqrt{\vec{r} \cdot \vec{r}}}. $$
  • It can also be in inline mode, e.g. $\vec{r} = x\hat{i} + y\hat{j} + z\hat{k}$.
butiran-x/26c36
2026-03-08
9
^

code

  • An example code.
    # calculate sum of prime numbers
s = 0;
for i in [1, 2, 3, 5, 7, 11]:
  if i > 4:
    print("i =", i)
  s += 1
print("s =", s)
print("end")

# do nothing, only for showing scroll feature
pass
  • Padding, margin, font sizes have been reduced.
butiran-x/26c36
2026-03-08
10
^

flowchart

flowchart LR %% graph B --> I --> P --> O --> E %% elements B(("Beg")):::be I[/"Input"/]:::io P["Process"]:::pr O[/"Output"/]:::io E(("End")):::be %% styles classDef be fill:#9f9,stroke:#494; classDef io fill:#99f,stroke:#449; classDef pr fill:#f99,stroke:#944;
  • It is using Mermaid.
  • The flowchart must be before the text using ul in the panel, otherwise the result is unexpected.
  • It is not perfect but at least it works for some limits.
butiran-x/26c36
2026-03-08
11
^

closing
butiran-x/26c36
2026-03-08
12
^

summaries

  • .. (to be written).
butiran-x/26c36
2026-03-08
13
^

what’s next

butiran-x/26c36
2026-03-08
14
^
vielen dank
butiran-x/26c36
2026-03-08
15