Skip to content
Avatar of fayazarafayazara/logspot

Logspot

Open source changelog template made with Nuxt, Vue, and Tailwindcss.

Framework
Use Case
Logspot Thumbnail

Logspot

Logspot is a lightweight, free and open source template for your changelog made with Vue, Nuxt and Tailwindcss.

How it works?

  1. Each .md file in /content/posts/ counts as one changelog post, logspot uses the nuxt content module

Features

  1. Markdown support
  2. Icons support using Iconify
  3. Code syntax highlighting using Shiki.js
  4. Frontmatter - dates, author supported
  5. Vue components inside markdown using Nuxt contents MDC format - More on this here
  6. Icons support - :icon{name="ph:user-circle-duotone"} will show a user icon - find more icons at https://icones.js.org
  7. Alert component with icon, title and description.

Format

::alert
---
icon: fluent:error-circle-24-regular
title: 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 above content will render a alert component, something like this

Setup Locally

Make sure to install the dependencies:

# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Checkout the deployment documentation for more information.

Logspot Thumbnail
Avatar of fayazarafayazara/logspot

Logspot

Open source changelog template made with Nuxt, Vue, and Tailwindcss.

Framework
Use Case

Logspot

Logspot is a lightweight, free and open source template for your changelog made with Vue, Nuxt and Tailwindcss.

How it works?

  1. Each .md file in /content/posts/ counts as one changelog post, logspot uses the nuxt content module

Features

  1. Markdown support
  2. Icons support using Iconify
  3. Code syntax highlighting using Shiki.js
  4. Frontmatter - dates, author supported
  5. Vue components inside markdown using Nuxt contents MDC format - More on this here
  6. Icons support - :icon{name="ph:user-circle-duotone"} will show a user icon - find more icons at https://icones.js.org
  7. Alert component with icon, title and description.

Format

::alert
---
icon: fluent:error-circle-24-regular
title: 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 above content will render a alert component, something like this

Setup Locally

Make sure to install the dependencies:

# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Checkout the deployment documentation for more information.

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential