From 7a8f99d8e29f26099ef6adf1f5cf4a8799b0017b Mon Sep 17 00:00:00 2001 From: welpo Date: Tue, 24 Dec 2024 01:48:12 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(shortcodes):=20add=20'aside'?= =?UTF-8?q?=20shortcode=20for=20side=20notes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/blog/shortcodes/index.ca.md | 32 ++++++++++++++++++++++++++++- content/blog/shortcodes/index.es.md | 32 ++++++++++++++++++++++++++++- content/blog/shortcodes/index.md | 32 ++++++++++++++++++++++++++++- sass/main.scss | 2 ++ sass/parts/_aside.scss | 31 ++++++++++++++++++++++++++++ templates/shortcodes/aside.html | 5 +++++ 6 files changed, 131 insertions(+), 3 deletions(-) create mode 100644 sass/parts/_aside.scss create mode 100644 templates/shortcodes/aside.html diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index 8160a5fb1..ef0ba5661 100644 --- a/content/blog/shortcodes/index.ca.md +++ b/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. diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index 14de35a70..e33c45c4e 100644 --- a/content/blog/shortcodes/index.es.md +++ b/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. diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index 3ebcfeeed..7e95afa79 100644 --- a/content/blog/shortcodes/index.md +++ b/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). diff --git a/sass/main.scss b/sass/main.scss index 74b964cf0..f2b36c718 100644 --- a/sass/main.scss +++ b/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); diff --git a/sass/parts/_aside.scss b/sass/parts/_aside.scss new file mode 100644 index 000000000..4757524b9 --- /dev/null +++ b/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; + } + } +} diff --git a/templates/shortcodes/aside.html b/templates/shortcodes/aside.html new file mode 100644 index 000000000..ca337f900 --- /dev/null +++ b/templates/shortcodes/aside.html @@ -0,0 +1,5 @@ +{%- set text = text | default(value=body) -%} + +