Logspot is an open source change log template made with Nuxt, Vue, and Tailwindcss. Subscribe to our newsletter to get the latest updates or follow us on twitter.
Thrilled to announce the launch of logspot!
Logspot is a lightweight, free and open source template for your changelog made with Vue, Nuxt and Tailwindcss. It leverages Nuxt Content for your feed which allows you to write markdown and use them as a CMS. It has a beautiful UI and is easy to use.
Logspot also supports code syntax highlighting as well
// Javascriptconst url = "https://jsonplaceholder.typicode.com/posts/";async function fetchPosts() { const response = await fetch(url); console.log(response);}Currently this is only supported for the following languages, to keep the bundle small for this demo.
You can always add your own languages to the highlight array in the nuxt.config.js file.
Support for inline code blocks is also available example const name = "John Doe"
Shiki also supports different themes for codeblocks, you can learn mode about them here
This template also supports a few ui components that I have designed, which you can directly use within markdown.
Internally it uses the Iconify icons library. You can copy the icon key and just pass it as a prop like this :icon{name="ph:user-circle-duotone"}, which results in rendering the icon
Examples
You can also an alert component, which accepts an icon, title and description.
The alert component accepts three props, the icon(optional, defaults to the exclaimation icon), title and description.
::alert---icon: fluent:error-circle-24-regulartitle: This is alert with default variant colors.description: This will pick up colors from your primary color set in the tailwind config file. You can use this to show some kind of message to your users.---::This will pick up colors from your primary color set in the tailwind config file. You can use this to show some kind of message to your users.
A simple green colored alert, with a different icon.
Something aweful has happened
Logspot provides a built in widget page, which is responsive, lightweight, minimal and easily customizable. Embed it in your website, blog, or any other website, using it as an iframe. Here is an example page which has both the floating and overlay widgets.