Consideraciones para publicar en Digital Garden

No todos los plugin puede ser publicados en Digital Garden por eso que tomo estas consideraciones para mantener el mejor estilo de mi website.

  1. Para publicar un botón emplear el siguiente código donde debo modificar el href para indicar a que url ir y el texto del botón. Podemos jugar con el css para darle colores y estilo.

    <div style="display: flex; justify-content: center; cursor: pointer;">
	<a href="https://github.com/oleeskild/obsidian-digital-garden/issues/55" target="_blank"> 
	<button style=" font-size: 28px; padding: 10px; height: fit-content; margin-top: 50px; background: var(--text-accent); font-weight: 600; color: var(--text-on-accent); "> Esto es un bóton </button> </a> </div>

  1. Para incrustar videos de youtube empleamos el siguiente código donde:

    • El video a incrustar debe sacarse de la url después del símbolo = y ser reemplazado en el código en la sección src de la etiqueta.
      Pasted image 20240422001827.png
    • El título es opcional
    • Todo contenido multimedia debe provenir de otras plataformas de video nunca almacenada en nuestra bóveda.
    <div style="padding-bottom:56.25%; position:relative; display:block; width: 100%"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/WPAV1SNkdFg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" style="position:absolute; top:0; left:0" allowfullscreen></iframe></div>

  1. Para incrustar PDF y sean responsive donde:

    • Solo es posible al usar enlaces compartidos de manera pública con google drive este debe ser modificado antes de reemplazar en el código (buscar la palabra view y modificarla a preview)
    <div style="padding-bottom:80%; position:relative; display:block; width: 100%">
	<iframe width="100%" height="100%" src="https://drive.google.com/file/d/0Bz82Y2lTBnEILXhnZzZWb29pWEE/preview?resourcekey=0-3GG0H5RM0eYL6yymDhPXtA" title="Certificado" frameborder="0" style="position:absolute; top:0; left:0" allowfullscreen></iframe>
</div>

  1. Para incrustar PDF en modo vertical y sean responsive la única variación es en el css de la etiqueta div aumentando el padding-bottom a 100%

    <div style="padding-bottom:100%; position:relative; display:block; width: 100%">
	<iframe width="100%" height="100%" src="https://drive.google.com/file/d/0Bz82Y2lTBnEIV29JY2hvdWtIUzQ/preview?resourcekey=0-gPwCphapexZt95Clr_iLhw" title="Manual" frameborder="0" style="position:absolute; top:0; left:0" allowfullscreen></iframe>
</div>
    ---

Si este artículo te sirvió agradecería puedas apoyarme con un café.