Timeline de Mastodon en tu sitio web
2024-06-17
Si estás buscando la manera de insertar un timeline de tus toots de Mastodon en tu sitio web, existe este proyecto que te va a permitir hacerlo con tan sólo un archivo CSS y JS.
Instalación en Hugo
Este articulo esta basado en el tema Congo para Hugo pero las instrucciones para instalarlo en otro tema deben de ser parecidas.
Descarga la carpeta /src desde el repositorio del proyecto y copia los archivos mastodon-timeline.js y mastodon-timeline.css en las carpetas assets/js y css dentro de /static de tu proyecto.
~/Documentos/proyectos/ebdl > tree static
static
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── assets
│ └── js
│ ├── mastodon-timeline.js
│ ├── mastodon-timeline.min.js
├── css
│ ├── mastodon-timeline.css
│ └── mastodon-timeline.min.css
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
└── site.webmanifest
4 directories, 11 files
Crea otra carpeta dentro de layouts, por ejemplo toots, y copia dentro el fichero index.html (ubicado dentro de /src) y cambiale el nombre a toots.html
~/Documentos/proyectos/ebdl > tree layouts
layouts
├── partials
│ ├── home
│ │ └── custom.html
│ └── analytics.html
└── toots
└── toots.html
4 directories, 3 files
He personalizado el fichero index.html para que se adapte a mi tema, observa que llamo a la hoja css <link rel="stylesheet" href="/css/mastodon-timeline.css"/> al principio y al script <script src="/assets/js/mastodon-timeline.js"></script> al final de la etiqueta /body
{{ define "main" }}
<link rel="stylesheet" href="/css/mastodon-timeline.css" />
<article class="max-w-full">
<header>
{{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
{{ partial "breadcrumbs.html" . }}
{{ end }}
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
{{ .Title | emojify }}
</h1>
</header>
<section class="max-w-full mt-6 prose dark:prose-invert">
{{ .Content | emojify }}
</section>
<style>
html {
height: 100%;
}
body {
height: 100%;
background: lightslategray;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.dummy-wrapper {
width: 100%;
max-width: 46rem;
height: calc(100% - 4rem);
margin: 2rem auto;
}
</style>
</head>
<body>
<div class="dummy-wrapper">
<div class="mt-container">
<div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div>
</div>
</div>
</div>
<script src="/assets/js/mastodon-timeline.js"></script>
</body>
<footer class="pt-8">
{{ partial "sharing-links.html" . }}
</footer>
</article>
{{ end }}
Configuración
La configuración se hace editando el archivo mastodon-timeline.js
instance_url: 'Your Mastodon instance (not including the last `/` symbol)',
timeline_type: 'local',
Introduce la URL de tu instancia de Mastodon y vuelve a cargar la página. Deberías ver los toots de tu instancia local en tu línea de tiempo.
Si quieres mostrar la línea de tiempo de tu perfil, cambia el valor de timeline_type a profile y establece los valores:
user_id: 'Your user ID number on Mastodon instance',
profile_name: 'Your user name on Mastodon instance (including the `@` symbol at the beginning)',
Si prefieres mostrar una línea de tiempo con un hashtag específico, entonces cambia el valor de timeline_type a hashtag y pon el valor del hashtag:
hashtag_name: 'YourHashtag (not including the `#` symbol)',
Estos son los principales parámetros de configuración para personalizar el timeline pero existen más dentro del fichero mastodon-timeline.js
Añadir a la barra del Menú
Para terminar, si quieres añadir una entrada en el menú de navegación, edita tu fichero de configuración menus.toml, en Congo se encuentra dentro de la carpeta Config -> _default y añade la nueva entrada:
[[main]]
name = "Toots"
pageRef = "/toots"
weight = 30
Título
Para finalizar, crea una nueva carpeta dentro de content y llámala igual que el nombre de pusiste en pageRef de tu fichero de configuración y crea un nuevo fichero _index.md
~/Documentos/proyectos/ebdl > tree content/toots
content/toots
└── _index.md
1 directory, 1 file
Con el contenido que quieres que aparezca antes de mostrar el timeline, por ejemplo
---
title: Toots
---
Espero que te haya gustado, pasa un gran día 🐧