SavUgo

Table

Fri, 08 May 2026 17:22:26 +0200

Table

{{< svugo/table/table name=table1 colnamesdef=table1 toJSVar=table1 >}}

You also need to add ‘svugo.tables.’ to the frontmatter.

Example

Hello	World

{{< svugo/table/table name=table1 colnamesdef=table1 >}}

Example with dynamic javascript

Hello	World

{{/*
In the frontmatter:
*/}}
+++
[svugo.tables]
table1 = ["Hello", "World"]
+++

{{/*
In the content body:
*/}}
{{< svugo/table/table name=table2 colnamesdef=table1 toJSVar=table2 >}}

{{< svugo/js/function name=addrows params="formId, event, formData" >}}
```js
table2._meta.addRows("innerText", [1, 2], [2, 3]);
```
{{< /svugo/js/function >}}

{{< svugo/js/function name=addrow params="formId, event, formData" >}}
```js
table2._meta.addRow("innerText", 4, 5);
```
{{< /svugo/js/function >}}

{{< svugo/js/function name=clearrows params="formId, event, formData" >}}
```js
table2._meta.clearRows();
```
{{< /svugo/js/function >}}

{{< svugo/forms/form name=form1 onSubmitCallback="addrows" >}}
    {{< svugo/forms/submit value="Add Rows" >}}
{{< /svugo/forms/form >}}
{{< svugo/forms/form name=form2 onSubmitCallback="addrow" >}}
    {{< svugo/forms/submit value="Add Row" >}}
{{< /svugo/forms/form >}}
{{< svugo/forms/form name=form3 onSubmitCallback="clearrows" >}}
    {{< svugo/forms/submit value="Clear Rows" >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/table/table.html

JS

Sat, 02 May 2026 12:08:14 +0200

Function

{{< svugo/js/function name=alertHello >}}
{{< /svugo/js/function >}}

Example

{{< svugo/js/function name=alertHello params="formId, event, formData" >}}
```js
alert(username.value);
```
{{< /svugo/js/function >}}

{{< svugo/forms/form name=form1 onSubmitCallback="alertHello" >}}
    {{< svugo/forms/text name=text1 label="Username" toJSVar="username" >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/js/function.html

Include

{{< svugo/js/include name=pyodide url="https://cdn.jsdelivr.net/pyodide/v0.29.3/full/pyodide.js" >}}

Attributes {Optional}

download: if specified, it will download the content, and serve it (Only for remote url)

Example Remote

{{< svugo/js/include name=pyodide url="https://cdn.jsdelivr.net/pyodide/v0.29.3/full/pyodide.js" >}}
{{< svugo/js/function name=formRunPyodide async=1 params="formId, event, formData" >}}
```js
alert("The next step will setup pyodide, This can takes some times.");
let pyodide = await loadPyodide();
alert(pyodide.runPython(`
    import sys
    sys.version
`));
```
{{< /svugo/js/function >}}

{{< svugo/forms/form name=form2 onSubmitCallback="formRunPyodide" >}}
    {{< svugo/forms/submit value="Run Pyodide" >}}
{{< /svugo/forms/form >}}

Example Local

{{< svugo/js/include name=helloword path="assets/js/alertHelloWord.js" >}}
{{< svugo/js/function name=formAlertHelloWord params="formId, event, formData" >}}
```js
alertHelloWord();
```
{{< /svugo/js/function >}}

{{< svugo/forms/form name=form3 onSubmitCallback="formAlertHelloWord" >}}
    {{< svugo/forms/submit value="Run script" >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/js/include.html

Script

{{< svugo/js/script name=rawScript >}}
{{< /svugo/js/script >}}

Example

{{< svugo/js/script name=rawScript async=1 >}}
```js
const MySuperValueIsSet = "Yes";
```
{{< /svugo/js/script >}}
{{< svugo/js/function name=showSuperMyValue async=1 params="formId, event, formData" >}}
```js
alert(MySuperValueIsSet);
```
{{< /svugo/js/function >}}

{{< svugo/forms/form name=form4 onSubmitCallback="showSuperMyValue" >}}
    {{< svugo/forms/submit value=Run >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/js/script.html

Getting Started

Sat, 02 May 2026 11:07:45 +0200

Install

In your git repository, add this as a submodule.

git submodule add https://gitlab.com/Saverio976/savugo.git plugin/savugo

Set up

Add the config to your hugo.toml

[[module.mounts]]
source = './plugin/savugo/svugoLayouts'
target = 'layouts'

If this is the first mention of module.mounts with a layout target, you need to add the previous default:

[[module.mounts]]
source = 'layouts'
target = 'layouts'

Usage

Now you can use the shortcodes in your contents.

Example:

{{< svugo/js/function name=printSubmitValues params="formId, event, formData" >}}
```js
let output = "";
for (const entry of formData) {
    output = `${output}${entry[0]}=${entry[1]}\n`;
}
alert(output);
```
{{< /svugo/js/function >}}

{{< svugo/forms/form name=form1 onSubmitCallback="printSubmitValues" >}}
{{< svugo/forms/fieldset legend="Form Example" >}}
    {{< svugo/forms/fieldset legend="Is it ok ?" >}}
        {{< svugo/forms/radio name=radio1 value="1" label="Yes" >}}
        {{< svugo/forms/radio name=radio1 value="0" label="No" checked="true" >}}
    {{< /svugo/forms/fieldset >}}
    {{< svugo/forms/fieldset legend="How is it ?" >}}
        {{< svugo/forms/checkbox name=checkbox1 label="Fun" value="fun" >}}
        {{< svugo/forms/checkbox name=checkbox1 label="Boring" value="boring" >}}
        {{< svugo/forms/checkbox name=checkbox1 label="Sad" value="sad" >}}
    {{< /svugo/forms/fieldset >}}
    {{< svugo/forms/number name=number1 label="Note /20:" min="0" max="20" >}}
    {{< svugo/newline >}}
    {{< svugo/forms/text name=text1 label="Additional Comments:" >}}
    {{< svugo/newline >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/fieldset >}}
{{< /svugo/forms/form >}}

Forms

Fri, 01 May 2026 12:21:05 +0200

Form

{{< svugo/forms/form name=form1 >}}
{{< /svugo/forms/form >}}

Example

{{< svugo/forms/form name=form1 >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Example with javascript function callback

{{< svugo/forms/form name=form2 onSubmitCallback="alert" >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/form.html

Fieldset

{{< svugo/forms/fieldset legend="some category" >}}
{{< /svugo/forms/fieldset >}}

Example

{{< svugo/forms/form name=form1a >}}
    {{< svugo/forms/fieldset legend="Collect data:" >}}
        {{< svugo/forms/checkbox name=checkbox1a label="yes" value="1" >}}
        {{< svugo/forms/checkbox name=checkbox1a label="no" value="0" >}}
    {{< /svugo/forms/fieldset >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/fieldset.html

Input

Text

{{< svugo/forms/text name=text1 label="Text:" >}}

Attributes (Input Text) {Optional}

More documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/text

list
maxlength
minlength
pattern
placeholder
readonly
size
spellcheck

Attributes (Shortcode)

name: html id, html name

Attributes (Shortcode) {Optional}

label: label text
toJSVar: js variable name

Example

{{< svugo/forms/form name=form3 >}}
    {{< svugo/forms/text name=text1 label="Text:" >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/text.html

Radio

{{< svugo/forms/radio name=radio1 value="ok" label="ok" >}}
{{< svugo/forms/radio name=radio1 value="ko" label="ko" >}}

Attributes (HTML) {Optional}

More documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio

checked

Attributes (Shortcode)

name: html name
value: element value

Attributes (Shortcode) {Optional}

label: label text
toJSVar: js variable name

Example

{{< svugo/forms/form name=form4 >}}
    {{< svugo/forms/radio name=radio1 label="ok" value="ok" >}}
    {{< svugo/forms/radio name=radio1 label="ko" value="ko" >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/radio.html

Number

{{< svugo/forms/number name=number1 label="Number:" >}}

Attributes (HTML) {Optional}

More documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number

list
max
min
placeholder
readonly
step

Attributes (Shortcode)

name: html id, html name

Attributes (Shortcode) {Optional}

label: label text
toJSVar: js variable name

Example

{{< svugo/forms/form name=form5 >}}
    {{< svugo/forms/number name=number1 label="Number:" >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/number.html

Submit

{{< svugo/forms/submit value="Submit" >}}

Attributes (HTML)

Attributes (Shortcode)

value: display text

Attributes (Shortcode) {Optional}

Example

{{< svugo/forms/form name=form6 >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/submit.html

Checkbox

{{< svugo/forms/checkbox name=checkbox1 label="ok1" value="ok1" >}}
{{< svugo/forms/checkbox name=checkbox1 label="ok2" value="ok2" >}}

Attributes (HTML) {Optional}

More documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox

checked

Attributes (Shortcode)

name: html name
value: element value

Attributes (Shortcode) {Optional}

label: label text
toJSVar: js variable name

Example

{{< svugo/forms/form name=form7 >}}
    {{< svugo/forms/checkbox name=checkbox1 label="1" value="1" >}}
    {{< svugo/forms/checkbox name=checkbox1 label="2" value="2" >}}
    {{< svugo/forms/submit value=Submit >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/checkbox.html

Select

{{< svugo/forms/select name=select1 label="Select options" >}}
{{< /svugo/forms/select >}}

Attributes (HTML) {Optional}

More documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select

multiple

Attributes (Shortcode)

name: html name, html id

Attributes (Shortcode) {Optional}

label: label text
toJSVar: js variable name

Example

{{< svugo/forms/form name=form7 >}}
    {{< svugo/forms/select name=select1 label="Select options" >}}
        {{< svugo/forms/option value="value1" label="This Super Value 1" >}}
        {{< svugo/forms/option value="value2" label="This Super Value 2" >}}
        {{< svugo/forms/option value="value42" label="42" >}}
    {{< /svugo/forms/select >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/select.html

Option

{{< svugo/forms/option value="value1" label="Value 1" >}}

Attributes (HTML)

More documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select

value: option value

Attributes (Shortcode)

Attributes (Shortcode) {Optional}

label: label text

Example

{{< svugo/forms/form name=form8 >}}
    {{< svugo/forms/select name=select1 label="Select options" >}}
        {{< svugo/forms/option value="value1" label="This Super Value 1" >}}
        {{< svugo/forms/option value="value2" label="This Super Value 2" >}}
        {{< svugo/forms/option value="value42" label="42" >}}
    {{< /svugo/forms/select >}}
{{< /svugo/forms/form >}}

Source

https://gitlab.com/Saverio976/savugo/-/blob/main/svugoLayouts/_shortcodes/svugo/forms/option.html