Changelog: de MD a HTML
Escenario
Me gusta que las aplicaciones Spring Boot en las que trabajo consten de un fichero de tipo markdown con el histórico de cambios por los que ha pasado el código. Dado que el número de versión aumenta cada vez que publico un cambio en el entorno de producción, gracias a un formato de este tipo puedo saber qué cambios y cuándo se introdujeron en tal versión desplegada.:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
## [0.12.0](https://git.marcospena.es/acme/tree/v0.12.0) (2022-12-14) **Gráfico estadísticas** - Con opción de exportar a csv - Arregla fallos - Mejora de rendimiento ## [0.12.1](https://git.marcospena.es/acme/tree/v0.12.1) (2022-12-14) **Arregla fallo** - No cuadraban los datos del gráfico de estadísticas |
Problema
No es un problema en sí, utilizo la cabecera por respetar el formato de posts de estos últimos años. Es más bien una mejora relacionada con el fichero de CHANGELOG. Puesto que me preocupo por mantenerlo sería interesante que el cliente también pudiera apreciar los cambios realizados. Pero al estar el fichero en la raíz del directorio del código, no es accesible desde las plantillas de Spring Boot.Solución
Usar un plugin de Grunt con una tarea que haga una copia del fichero de markdown en HTML y lo deje en una carpeta de /templates. No encontré ninguno disponible así que programé uno sencillo y lo di de alta en npmjs. A continuación lo incluí en el package.json de la aplicación, npm install grunt-changelog-to-html --save y configuré Gruntfile.js para que genera el fichero:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
changelog_to_html: { options: { xhtml: true, toLowerSnakeCase: true }, acme: { files: { 'src/main/resources/templates/fragment': ['./CHANGELOG.md'] } } } grunt.loadNpmTasks('grunt-changelog-to-html'); ... // Task definition grunt.registerTask('default', ['concat', 'concat_css', 'copy', 'messages_js_localization', 'browserify', 'changelog_to_html']); |
|
1 2 3 4 5 6 |
@RequestMapping(value = "/changelog", method = RequestMethod.GET) public String changelog(Model model) { return "admin/changelog"; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{admin-layout}"> <head> <title th:text="#{general.changelog}" >Change log</title> <meta charset="UTF-8" /> </head> <body layout:fragment="content"> <!-- Content Header (Page header) --> <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0" th:text="#{general.changelog}"></h1> </div><!-- /.col --> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="/admin">Home</a></li> <li class="breadcrumb-item active" th:text="#{general.changelog}">Changelog</li> </ol> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.container-fluid --> </div> <!-- /.content-header --> <!-- Main content --> <section class="content"> <div class="container-fluid"> <div class="card card-info"> <div class="card-body"> <div th:replace="fragment/changelog"></div> </div> </div> </div><!--/. container-fluid --> </section> <!-- /.content --> </body> </html> |