VitePress

release-timeline fully supports VitePress, including changing light and dark themes and adapting to its styles.

Installation

pnpm

pnpm add release-timeline

yarn

pnpm add release-timeline

npm

npm install release-timeline

Usage

In any markdown file:

<script setup>
import { ReleaseTimeline, DefaultOptions as options } from "release-timeline";
import "release-timeline/dist/style.css";
import "release-timeline/dist/vitepress.css";
// import "release-timeline/dist/animated-background.css";

options.github.owner = "vuesence";
options.github.repo = "release-timeline";
</script>

<ReleaseTimeline :options="options" />

CSS variables

The release-timeline CSS variables are connected to the VitePress CSS variables in vitepress.css. Here are its contents:

:root {
  --rt-c-text-1: var(--vp-c-text-1);
  --rt-c-text-2: var(--vp-c-text-2);
  --rt-c-text-3: var(--vp-c-text-3);
  --rt-c-border: var(--vp-c-border);
  --rt-c-bg: var(--vp-c-bg);
  --rt-c-bg-alt: var(--vp-c-bg-alt);
  --rt-c-brand-1: var(--vp-c-brand-1);
  --rt-c-brand-2: var(--vp-c-brand-2);
  --rt-c-circle-bg: #888;
  --rt-font-family-base: var(--vp-font-family-base);
}