diff --git a/config.toml b/config.toml index 3fcbb9e4b..5226e0f2f 100644 --- a/config.toml +++ b/config.toml @@ -28,7 +28,7 @@ include_content = true # At which character to truncate the content to. Useful if you have a lot of pages and the index would # become too big to load on the site. Defaults to not being set. # truncate_content_length = 100 -# Wether to produce the search index as a javascript file or as a JSON file. +# Whether to produce the search index as a javascript file or as a JSON file. # Accepted value "elasticlunr_javascript" or "elasticlunr_json". index_format = "elasticlunr_json" @@ -372,6 +372,47 @@ service = "goatcounter" # Leave this field empty if you're using the service's default hosting. self_hosted_url = "https://tabi-stats.osc.garden" +[extra.webmentions] +enabled = true +# Specify the domain registered with webmention.io. +domain = "www.example.com" + +# The HTML ID for the object to fill in with the webmention data. +# Defaults to "webmentions" +# id = "webmentions" + +# data configuration for the webmention.min.js script +# The base URL to use for this page. Defaults to window.location +page_url = "https://www.jrussell.ie/blog/update-and-release/10-update-and-release/" + +# Additional URLs to check, separated by |s +# add_urls + +# The maximum number of words to render in reply mentions. +wordcount = 20 + +# The maximum number of mentions to retrieve. Defaults to 30. +# max_webmentions + +# By default, Webmentions render using the mf2 'url' element, which plays +# nicely with webmention bridges (such as brid.gy and telegraph) +# but allows certain spoofing attacks. If you would like to prevent +# spoofing, set this to a non-empty string (e.g. "true"). +# prevent_spoofing + +# What to order the responses by; defaults to 'published'. See +# https://github.com/aaronpk/webmention.io#api +# sort_by + +# The order to sort the responses by; defaults to 'up' (i.e. oldest +# first). See https://github.com/aaronpk/webmention.io#api +# sort_dir + +# If set to a non-empty string (e.g. "true"), will display comment-type responses +# (replies/mentions/etc.) as being part of the reactions +# (favorites/bookmarks/etc.) instead of in a separate comment list. +# comments_are_reactions = "true" + # giscus support for comments. https://giscus.app # Setup instructions: https://welpo.github.io/tabi/blog/comments/#setup [extra.giscus] diff --git a/content/blog/javascript/index.ca.md b/content/blog/javascript/index.ca.md index 6b54200c2..d9e461f2e 100644 --- a/content/blog/javascript/index.ca.md +++ b/content/blog/javascript/index.ca.md @@ -1,7 +1,7 @@ +++ title = "Sense JavaScript obligatori" date = 2023-01-06 -updated = 2025-02-15 +updated = 2025-02-21 description = "JavaScript només s'utilitza quan HTML i CSS no són suficients." [taxonomies] diff --git a/content/blog/javascript/index.es.md b/content/blog/javascript/index.es.md index 0e0c54acd..36e550e99 100644 --- a/content/blog/javascript/index.es.md +++ b/content/blog/javascript/index.es.md @@ -1,7 +1,7 @@ +++ title = "Sin JavaScript obligatorio" date = 2023-01-06 -updated = 2025-02-15 +updated = 2025-02-21 description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes." [taxonomies] diff --git a/content/blog/javascript/index.md b/content/blog/javascript/index.md index c43844d3e..57864b029 100644 --- a/content/blog/javascript/index.md +++ b/content/blog/javascript/index.md @@ -1,7 +1,7 @@ +++ title = "No mandatory JavaScript" date = 2023-01-06 -updated = 2025-02-15 +updated = 2025-02-21 description = "JavaScript is only used when HTML and CSS aren't enough." [taxonomies] diff --git a/content/blog/markdown/index.ca.md b/content/blog/markdown/index.ca.md index 432180396..16cf16571 100644 --- a/content/blog/markdown/index.ca.md +++ b/content/blog/markdown/index.ca.md @@ -1,7 +1,7 @@ +++ title = "Exemples de Markdown" date = 2023-01-31 -updated = 2024-11-23 +updated = 2025-02-21 description = "Aquesta publicació mostra alguns exemples de format en Markdown, incloent-hi una taula, blocs de codi i etiquetes, citacions, taules i notes a peu de pàgina." [taxonomies] diff --git a/content/blog/markdown/index.es.md b/content/blog/markdown/index.es.md index 754bb31b1..af38f4777 100644 --- a/content/blog/markdown/index.es.md +++ b/content/blog/markdown/index.es.md @@ -1,7 +1,7 @@ +++ title = "Ejemplos de Markdown" date = 2023-01-31 -updated = 2024-11-23 +updated = 2025-02-21 description = "Esta publicación muestra algunos ejemplos de formato Markdown, incluyendo una tabla, bloques de código y etiquetas, citas, tablas y notas al pie de página." [taxonomies] diff --git a/content/blog/markdown/index.md b/content/blog/markdown/index.md index f036a3fd0..ca2f4cfdb 100644 --- a/content/blog/markdown/index.md +++ b/content/blog/markdown/index.md @@ -1,7 +1,7 @@ +++ title = "Markdown examples" date = 2023-01-31 -updated = 2024-11-23 +updated = 2025-02-21 description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes." [taxonomies] diff --git a/content/blog/mastering-tabi-settings/img/webmention_dark.webp b/content/blog/mastering-tabi-settings/img/webmention_dark.webp new file mode 100644 index 000000000..7bd602509 Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/webmention_dark.webp differ diff --git a/content/blog/mastering-tabi-settings/img/webmention_light.webp b/content/blog/mastering-tabi-settings/img/webmention_light.webp new file mode 100644 index 000000000..b19a3443b Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/webmention_light.webp differ diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md index 74f62f476..2f6dd718f 100644 --- a/content/blog/mastering-tabi-settings/index.ca.md +++ b/content/blog/mastering-tabi-settings/index.ca.md @@ -1,7 +1,7 @@ +++ title = "Domina la configuració de tabi: guia completa" date = 2023-09-18 -updated = 2025-02-16 +updated = 2025-02-21 description = "Descobreix les múltiples maneres en què pots personalitzar tabi." [taxonomies] diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md index e999216ac..ca4d2e567 100644 --- a/content/blog/mastering-tabi-settings/index.es.md +++ b/content/blog/mastering-tabi-settings/index.es.md @@ -1,7 +1,7 @@ +++ title = "Domina la configuración de tabi: guía completa" date = 2023-09-18 -updated = 2025-02-16 +updated = 2025-02-21 description = "Descubre las múltiples maneras en que puedes personalizar tabi." [taxonomies] diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index 4ab8238eb..cb76affe3 100644 --- a/content/blog/mastering-tabi-settings/index.md +++ b/content/blog/mastering-tabi-settings/index.md @@ -1,7 +1,7 @@ +++ title = "Mastering tabi Settings: A Comprehensive Guide" date = 2023-09-18 -updated = 2025-02-16 +updated = 2025-02-21 description = "Discover the many ways you can customise your tabi site." [taxonomies] @@ -113,7 +113,7 @@ The description is regular Markdown content, set outside the front matter. #### Listing Recent Posts -To show posts on your main page, you first need to decide where these posts will be served from: the root path (`/`) or a subdirectory (e.g., `/blog`). +To show posts on your main page, you first need to decide where these posts will be served from: the root path (`/`) or a subdirectory (e.g., `/blog`). **Option A: Serve posts from the root path (`/`)** @@ -789,6 +789,34 @@ If you have enabled a system globally, but want to disable it on a specific page Read [the docs](@/blog/comments/index.md) for more information on the available systems and their setup. +### Webmentions {#adding-webmentions} + +As described by the recommended W3C standard [Webmention][1] is a simple way to notify any URL when you mention it on your site. From the receiver's perspective, it's a way to request notifications when other sites mention it. + +For static sites [webmention.io][2] hosts a webmention endpoint that can be used to receive webmentions. This feature fetches the webmentions stored at webmention.io and displays them for a page. You will need to have setup an account for your website at webmention.io. When you enable the webmention feature it will advertise your webmention.io endpoint and display the webmentions for any post using the webmention shortcut. + +Enable webmentions for your site by adding the following to your `config.toml` file. + +``` +[extra.webmentions] +enable = true +# Specify the domain registered with webmention.io. +domain = "www.example.com" +``` + +Add the shortcut on the page where you want to display the webmentions: + +``` +{{/* webmentions() */}} +``` + +The webmentions section will then be displayed where you added it on the page as follows: + +{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/webmention_light.webp", dark_src="blog/mastering-tabi-settings/img/webmention_dark.webp" alt="Page footer, showing a 'Site source' link") }} + +[1]: https://www.w3.org/TR/webmention/#abstract-p-1 +[2]: https://webmention.io/ + ### Analytics | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | diff --git a/content/blog/security/index.ca.md b/content/blog/security/index.ca.md index 797996177..6d3ebfe3d 100644 --- a/content/blog/security/index.ca.md +++ b/content/blog/security/index.ca.md @@ -1,7 +1,7 @@ +++ title = "Seguretat per defecte" date = 2023-02-22 -updated = 2024-08-28 +updated = 2025-02-21 description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l'Observatori de Mozilla." [taxonomies] diff --git a/content/blog/security/index.es.md b/content/blog/security/index.es.md index 068b42906..0a6f66338 100644 --- a/content/blog/security/index.es.md +++ b/content/blog/security/index.es.md @@ -1,7 +1,7 @@ +++ title = "Seguro por defecto" date = 2023-02-22 -updated = 2024-08-28 +updated = 2025-02-21 description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilmente personalizable con configuraciones seguras. Obtén tranquilidad y una calificación de A+ en Mozilla Observatory." [taxonomies] diff --git a/content/blog/security/index.md b/content/blog/security/index.md index 548ab12fd..77652876c 100644 --- a/content/blog/security/index.md +++ b/content/blog/security/index.md @@ -1,7 +1,7 @@ +++ title = "Secure by default" date = 2023-02-22 -updated = 2024-08-28 +updated = 2025-02-21 description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory." [taxonomies] diff --git a/content/blog/series/index.ca.md b/content/blog/series/index.ca.md index bd840aaa8..adb399855 100644 --- a/content/blog/series/index.ca.md +++ b/content/blog/series/index.ca.md @@ -1,7 +1,7 @@ +++ title = "Guia completa sobre sèries" date = 2024-11-08 -updated = 2025-02-15 +updated = 2025-02-21 description = "Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts." [taxonomies] diff --git a/content/blog/series/index.es.md b/content/blog/series/index.es.md index 7c2ac06e5..9c6d6732d 100644 --- a/content/blog/series/index.es.md +++ b/content/blog/series/index.es.md @@ -1,7 +1,7 @@ +++ title = "Guía completa sobre series" date = 2024-11-08 -updated = 2025-02-15 +updated = 2025-02-21 description = "Aprende a organizar tus publicaciones en series secuenciales, perfectas para tutoriales, cursos e historias de varias partes." [taxonomies] diff --git a/content/blog/series/index.md b/content/blog/series/index.md index 5678f42b2..b17ce42c3 100644 --- a/content/blog/series/index.md +++ b/content/blog/series/index.md @@ -1,7 +1,7 @@ +++ title = "A Complete Guide to Series" date = 2024-11-08 -updated = 2025-02-15 +updated = 2025-02-21 description = "Learn how to organize your posts into sequential series, perfect for tutorials, courses, and multi-part stories." [taxonomies] diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index c94b9c94e..b6a497b36 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 = 2025-02-15 +updated = 2025-02-21 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] diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index 6fa148cae..bc89c3dd4 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 = 2025-02-15 +updated = 2025-02-21 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] diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index b13f19106..a10e7bbef 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 = 2025-02-15 +updated = 2025-02-21 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] @@ -79,9 +79,9 @@ classDiagram +MakeAssumptions() } CognitiveDistortions *-- AllOrNothingThinking - CognitiveDistortions *-- Overgeneralization + CognitiveDistortions*-- Overgeneralization CognitiveDistortions *-- MentalFilter - CognitiveDistortions *-- JumpingToConclusions + CognitiveDistortions*-- JumpingToConclusions {% end %} The Mermaid shortcode supports two parameters: @@ -121,6 +121,7 @@ Useful if you want to use a different image for the light and dark themes: {{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }} #### Usage + ``` {{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") */}} ``` @@ -151,7 +152,7 @@ Images with too much brightness or contrast can be jarring against a dark backgr ### Swap image on hover -Povides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example. +Provides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example. {{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }} @@ -312,19 +313,19 @@ Display lines 3 to 7 (both inclusive) of a local file: Bring attention to information with these admonition shortcodes. They come in five `type`s: `note`, `tip`, `info`, `warning`, and `danger`. -{{ admonition(type="note", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} +{{ admonition(type="note", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }} -{{ admonition(type="tip", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} +{{ admonition(type="tip", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }} -{{ admonition(type="info", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} +{{ admonition(type="info", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }} -{{ admonition(type="warning", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} +{{ admonition(type="warning", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }} -{{ admonition(type="danger", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} +{{ admonition(type="danger", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }} You can change the `title` and `icon` of the admonition. Both parameters take a string and default to the type of admonition. `icon` can be any of the available admonition types. -{{ admonition(type="note", icon="tip", title="Custom title and icon", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} +{{ admonition(type="note", icon="tip", title="Custom title and icon", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }} #### Usage @@ -352,12 +353,12 @@ Both methods support the same parameters (`type`, `icon`, and `title`), with the This shortcode allows you to display both the translated and original text for a quote. The quotation marks will be added automatically: -{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") }} +{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquillity, to go through life in silence, greeting only friends.", author="Francisco Umbral") }} #### Usage ``` -{{/* multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") */}} +{{/* multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquillity, to go through life in silence, greeting only friends.", author="Francisco Umbral") */}} ``` ### References with hanging indent @@ -414,7 +415,7 @@ Use this shortcode if you want to have a wider table, paragraph, code block… O | Title | Year | Director | Cinematographer | Genre | IMDb | Duration | |-------------------|-------|----------------------|-----------------------|---------------|-------|--------------| -| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Mystery | 7.5 | 148 min | +| Burning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Mystery | 7.5 | 148 min | | The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/History | 7.1 | 137 min | | The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min | @@ -439,10 +440,12 @@ Force the text direction of a content block. Overrides both the global `force_co Accepts the parameter `direction`: the desired text direction. This can be either "ltr" (left-to-right) or "rtl" (right-to-left). Defaults to "ltr". {% force_text_direction(direction="rtl") %} + ```python def مرحبا_بالعالم(): print("مرحبا بالعالم!") ``` + {% end %} #### Usage @@ -459,3 +462,37 @@ def مرحبا_بالعالم(): {%/* end */%} ```` + +## Displaying webmentions for your posts + +As described by the recommended W3C standard [Webmention][1] is a simple way to notify any URL when you mention it on your site. From the receiver's perspective, it's a way to request notifications when other sites mention it. + +For static sites [webmention.io][2] hosts a webmention endpoint that can be used to receive webmentions. This feature fetches the webmentions stored at webmention.io and displays them for a page. You will need to have setup an account for your website at webmention.io. When you enable the webmention feature it will advertise your webmention.io endpoint and display the webmentions for any post using the webmention shortcut. + +### Configuration and Usage + +Enable webmentions for your site, add the following to your `config.toml` file: + +```toml +[extra.webmentions] +enabled = true +# Specify the domain registered with webmention.io. +domain = "www.example.com" +``` + +Add the shortcut on the page where you want to display the webmentions: + +``` +{{/* webmentions() */}} +``` + +The webmentions section will then be displayed where you added it on the page as follows: + +{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/webmention_light.webp", dark_src="blog/mastering-tabi-settings/img/webmention_dark.webp" alt="Page footer, showing a 'Site source' link") }} + +The following is a live example based on the specific page_url configured in the template config.toml. + +{{ webmentions() }} + +[1]: https://www.w3.org/TR/webmention/#abstract-p-1 +[2]: https://webmention.io/ diff --git a/sass/main.scss b/sass/main.scss index f2b36c718..d1d13aeeb 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -23,6 +23,7 @@ @use 'parts/_tags.scss'; @use 'parts/_theme-switch.scss'; @use 'parts/_zola-error.scss'; +@use 'parts/_webmention.scss'; @font-face { src: local('Inter'), diff --git a/sass/parts/_webmention.scss b/sass/parts/_webmention.scss new file mode 100644 index 000000000..8458b23ed --- /dev/null +++ b/sass/parts/_webmention.scss @@ -0,0 +1,96 @@ +#webmentions { + margin: 0; + position: relative; + z-index: 100; + line-height: 1.2em; + color: var(--text-color); + background-color: var(--background-color); +} + +#webmentions .comments { + max-height: 20em; + overflow-x: hidden; + overflow-y: scroll; + font-size: 80%; +} + +#webmentions h2 { + font-size: medium; + margin: 0; + margin-top: 1.4em; + margin-bottom: 1.2em; + padding: 2px; + background: var(--background-color); +} + +#webmentions .reacts img { + margin: 3px -1ex 1px 0; + display: inline; +} + +#webmentions img.missing { + background: white; + border: dashed black 1px; +} + +#webmentions ul { + list-style-type: none; + margin: 0; + padding: 4px; +} + +#webmentions li { + text-indent: -1em; + padding-left: 1em; +} + +#webmentions a.reaction { + position: relative; + text-decoration: none; + text-shadow: 0px 0px 3px white; + margin-right: 0; + letter-spacing: -1ex; + margin-right: 1ex; +} + +#webmentions a.source { + margin-right: 1ex; + text-decoration: none; + color: var(--primary-color); + background-color: var(--background-color); +} + +#webmentions a.reaction img { + max-height: 1.3em; + display: inline; + width: auto; + margin-right: -1ex; + border-radius: 25%; +} + +#webmentions a.reaction sub { + font-size: 50%; +} + +#webmentions .comments li { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +#webmentions .comments li .text { + color: var(--meta-color); + font-style: italic; + text-decoration: none; + text-wrap: wrap; + padding-left: 0.5em; +} + +#webmentions .comments li .name { + color: var(--meta-color); + padding-left: 0.5em; +} + +#webmentions .comments li .emoji { + display: none; +} \ No newline at end of file diff --git a/static/js/webmention.js b/static/js/webmention.js new file mode 100644 index 000000000..49d23d360 --- /dev/null +++ b/static/js/webmention.js @@ -0,0 +1,475 @@ +/* webmention.js + +Simple thing for embedding webmentions from webmention.io into a page, client-side. + +(c)2018-2022 fluffy (http://beesbuzz.biz) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +GitHub repo (for latest released versions, issue tracking, etc.): + + https://github.com/PlaidWeb/webmention.js + +Basic usage: + + + + + - + {# If JavaScript is disabled, hide the button. #} + + + {%- endif -%} {%- if config.extra.analytics.service -%} @@ -151,6 +153,11 @@ {%- endif -%} + {# Webmentions #} + {%- if config.extra.webmentions.enabled -%} + {%- include "partials/webmentions.html" -%} + {%- endif -%} + {# Search #} {%- if config.build_search_index -%} {%- if config.search.index_format -%} diff --git a/templates/partials/webmentions.html b/templates/partials/webmentions.html new file mode 100644 index 000000000..5d4d68bb1 --- /dev/null +++ b/templates/partials/webmentions.html @@ -0,0 +1,69 @@ +{# Incorporate webmention.io links and script into the page head. +1. Provide the link to the webmention data in the at webmention.io. +2. Link to the stylesheet for styling webmentions on a page. +3. Add and configure the javascript to fetch and display the webmentions collected at webmention.io. #} + + + +{# Calculate the configured data for the script, if any #} + +{% set script_data = "" %} + +{% if config.extra.webmentions.id %} + {% set script_data = script_data ~ "data-id=" ~ config.extra.webmentions.id %} +{% endif %} + +{% if config.extra.webmentions.page_url %} + {% set script_data = script_data ~ " data-page-url=" ~ config.extra.webmentions.page_url %} +{% endif %} + +{% if config.extra.webmentions.add_urls %} + {% set script_data = script_data ~ "data-add-urls=" ~ config.extra.webmentions.add_urls %} +{% endif %} + +{% if config.extra.webmentions.wordcount %} + {% set script_data = script_data ~ " data-wordcount=" ~ config.extra.webmentions.wordcount %} +{% endif %} + +{% if config.extra.webmentions.max_webmentions %} + {% set script_data = script_data ~ "data-max-webmentions=" ~ config.extra.webmentions.max_webmentions %} +{% endif %} + +{% if config.extra.webmentions.prevent_spoofing %} + {% set script_data = script_data ~ "data-prevent-spoofing=" ~ config.extra.webmentions.prevent_spoofing %} +{% endif %} + +{% if config.extra.webmentions.sort_by %} + {% set script_data = script_data ~ "data-sort-by=" ~ config.extra.webmentions.sort_by %} +{% endif %} + +{% if config.extra.webmentions.sort_dir %} + {% set script_data = script_data ~ "data-sort-dir=" ~ config.extra.webmentions.sort_dir %} +{% endif %} + +{% if config.extra.webmentions.comments_are_reactions %} + {% set script_data = script_data ~ " data-comments-are-reactions=" ~ config.extra.webmentions.comments_are_reactions %} +{% endif %} + + + +{# + + +#} \ No newline at end of file diff --git a/templates/shortcodes/webmentions.html b/templates/shortcodes/webmentions.html new file mode 100644 index 000000000..33986fbdc --- /dev/null +++ b/templates/shortcodes/webmentions.html @@ -0,0 +1,8 @@ +{%- set format = config.extra.webmentions.format | default(value="") -%} +{% if format == "" %} +{%- set dash = "" -%} +{% else %} +{%- set dash = "-" -%} +{% endif %} + +
hello
\ No newline at end of file diff --git a/theme.toml b/theme.toml index db3384ede..6dc9cf8c2 100644 --- a/theme.toml +++ b/theme.toml @@ -320,6 +320,47 @@ custom_subset = true # Leave this field empty if you're using the service's default hosting. # self_hosted_url = "" +[extra.webmentions] +# enabled = true +# Specify the domain registered with webmention.io. +# domain = "www.example.com" + +# The HTML ID for the object to fill in with the webmention data. +# Defaults to "webmentions" +# id = "webmentions" + +# data configuration for the webmention.min.js script +# The base URL to use for this page. Defaults to window.location +# page_url = + +# Additional URLs to check, separated by |s +# add_urls + +# The maximum number of words to render in reply mentions. +# wordcount = 20 + +# The maximum number of mentions to retrieve. Defaults to 30. +# max_webmentions + +# By default, Webmentions render using the mf2 'url' element, which plays +# nicely with webmention bridges (such as brid.gy and telegraph) +# but allows certain spoofing attacks. If you would like to prevent +# spoofing, set this to a non-empty string (e.g. "true"). +# prevent_spoofing + +# What to order the responses by; defaults to 'published'. See +# https://github.com/aaronpk/webmention.io#api +# sort_by + +# The order to sort the responses by; defaults to 'up' (i.e. oldest +# first). See https://github.com/aaronpk/webmention.io#api +# sort_dir + +# If set to a non-empty string (e.g. "true"), will display comment-type responses +# (replies/mentions/etc.) as being part of the reactions +# (favorites/bookmarks/etc.) instead of in a separate comment list. +# comments_are_reactions = "true" + # giscus support for comments. https://giscus.app # Setup instructions: https://welpo.github.io/tabi/blog/comments/#setup [extra.giscus]