✨ feat(shortcodes): add 'aside' shortcode for side notes (#452)

content/blog/shortcodes/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2024-11-27
+updated = 2024-12-24
 description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran."
 
 [taxonomies]
@@ -216,6 +216,36 @@ dist/
 
 ## Shortcodes de text
 
+### Aside (nota al marge)
+
+Afegeix contingut complementari als marges en pantalles amples, o com a blocs distintius en mòbil.
+
+{{ aside(text="*Nota al marge* ve de *nota* (del llatí, 'marca' o 'senyal') i *marge* (del llatí *margo*, 'vora' o 'límit').") }}
+
+El shortcode accepta dos paràmetres:
+
+- `position`: Establir com a "right" per col·locar al marge dret (per defecte, esquerre)
+- El contingut es pot proporcionar mitjançant el paràmetre `text` o entre les etiquetes del shortcode
+
+#### Ús
+
+Fent servir el paràmetre `text`:
+
+```
+{{/* aside(text="*Nota al marge* ve de *nota* (del llatí, 'marca' o 'senyal') i *marge* (del llatí *margo*, 'vora' o 'límit').") */}}
+```
+
+Fent servir el cos del contingut:
+
+```
+{%/* aside() */%}
+Una nota més llarga que
+pot ocupar diverses línies.
+
+S'admet *Markdown*.
+{%/* end */%}
+```
+
 ### Text remot
 
 Afegeix text des d'una URL remota o un arxiu local.

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2024-11-27
+updated = 2024-12-24
 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
 
 [taxonomies]
@@ -215,6 +215,36 @@ dist/
 
 ## Shortcodes de texto
 
+### Aside (nota al margen)
+
+Añade contenido complementario en los márgenes en pantallas anchas, o como bloques distintivos en móvil.
+
+{{ aside(text="*Nota al margen* viene de *nota* (del latín, 'marca' o 'señal') y *margen* (del latín *margo*, 'borde' o 'límite').") }}
+
+El shortcode acepta dos parámetros:
+
+- `position`: Establecer como "right" para colocar en el margen derecho (por defecto, izquierdo)
+- El contenido puede proporcionarse mediante el parámetro `text` o entre las etiquetas del shortcode
+
+#### Uso
+
+Usando el parámetro `text`:
+
+```
+{{/* aside(text="*Nota al margen* viene de *nota* (del latín, 'marca' o 'señal') y *margen* (del latín *margo*, 'borde' o 'límite').") */}}
+```
+
+Usando el cuerpo del contenido:
+
+```
+{%/* aside() */%}
+Una nota más larga que
+puede ocupar varias líneas.
+
+Se admite *Markdown*.
+{%/* end */%}
+```
+
 ### Texto remoto
 
 Añade texto desde una URL remota o un archivo local.

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2024-11-27
+updated = 2024-12-24
 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
 
 [taxonomies]
@@ -216,6 +216,36 @@ dist/
 
 ## Text shortcodes
 
+### Aside (side/margin note)
+
+Add supplementary content in the margins on wide screens, or as distinct blocks on mobile.
+
+{{ aside(text="*Sidenote* comes from Latin *nota* ('mark') + Old English *síde* ('side').") }}
+
+The shortcode accepts two parameters:
+
+- `position`: Set to "right" to place in right margin (defaults to left)
+- Content can be provided via `text` parameter or between shortcode tags
+
+#### Usage
+
+Using the `text` parameter:
+
+```
+{{/* aside(text="*Sidenote* comes from Latin *nota* ('mark') + Old English *síde* ('side').") */}}
+```
+
+Using the content body:
+
+```
+{%/* aside() */%}
+A longer note that
+can span multiple lines.
+
+*Markdown* is supported.
+{%/* end */%}
+```
+
 ### Remote text
 
 Embed text from a remote URL or a local file. To display the path or URL on the code block, see the [show source or path shortcode](#show-source-or-path).

sass/main.scss

@@ -1,5 +1,6 @@
 @use 'parts/_admonitions.scss';
 @use 'parts/_archive.scss';
+@use 'parts/_aside.scss';
 @use 'parts/_cards.scss';
 @use 'parts/_code.scss';
 @use 'parts/_comments.scss';
@@ -161,6 +162,7 @@ body {
 
 article {
     $base-margin: 6rem;
+    position: relative;
     margin: 0 auto;
 
     max-width: calc(var(--max-layout-width) - 2*$base-margin);

sass/parts/_aside.scss

@@ -0,0 +1,31 @@
+aside {
+    margin-block-end: var(--paragraph-spacing);
+    border-radius: 4px;
+    background: var(--bg-0);
+    padding-block: 0.8rem;
+    padding-inline: 1rem;
+    color: var(--meta-color);
+    font-size: 0.9rem;
+
+    article & p {
+        margin: 0;
+        font-family: var(--sans-serif-font);
+    }
+
+    @media only screen and (min-width: 1300px) {
+        position: absolute;
+        inset-inline-start: -14rem;
+        margin-block: 0;
+        border-radius: 0;
+        background: none;
+        padding: 0;
+        width: 12rem;
+        text-align: end;
+
+        &[data-position="right"] {
+            inset-inline-start: auto;
+            inset-inline-end: -14rem;
+            text-align: start;
+        }
+    }
+}

templates/shortcodes/aside.html

@@ -0,0 +1,5 @@
+{%- set text = text | default(value=body) -%}
+
+<aside {% if position %}data-position="{{ position }}"{% endif %}>
+    {{ text | markdown | safe }}
+</aside>