npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@lgastler/slidev-addon-citations

v0.0.1

Published

add citations and biliography to slidev using citation.js

Readme

slidev-addon-citations

Add bibliography and citation features for Slidev PowerBy citation-js

The addon allows Json and Bibtex input bibliography by default.
An example is provided in this repository (see example.md)
A running view of example.md is here : example.md

Install

You only need to add "slidev-addon-citations" in the addon section of the frontmatter of your presentation and npm install slidev-addon-citations to your project.

addons:
- slidev-addon-citations

Configuration is done in the presentation configuration (frontmatter of first slide) by using the tag biblio

Input is declared as follow:

biblio:
  filename: foo.bib

or

biblio:
  filename:
    - foo.bib
    - bar.json

The input files foo.bib and bar.json will be read into the "public/biblio" folder of the presentation

Usage

Standard

References could be cited in two ways.

Using the Cite component:

<Cite bref="myref" />

Or using directly the markdown pre-processor

[@myref]

The bibliography list could be display with:

<BiblioList />

or using the layout

---
layout: biblio
---

Advanced

The input field allow to provided reference definition directly to citation-js without using a file. It's design to load reference from identifier (only the citation-js doi plugin is loaded by default)

<Cite input="10.1142/S0219525918500145" />   
<Cite input="10.1142/S0219525918500145" bref="myid" />

The bref field is used to specify the referenced id of the input field and to cite this element again in the slide deck.

Style & configuration

Additional options are provided by the addon for formatting the bibliography: those customization of the bibliography could be setup globally (in first slide) or localy (in frontmatter of one slide) for only one slide bibliography list.

bibliography formatting

It is possible to configure the output format provided by citation-js and under the hood citeproc by passing the locale and template format for bibliography (apa,harvard1,vancouver) in the frontmatter of the first slide.

biblio:
  #-template; apa
  #- template: harvard1
  - template: vanvouver
  - locale: 'en-US' 
  - numerical_ref: false

numerical_ref could be used to force the reference to be a numeric reference.

Additional property could be used to format the bibliography

biblio:
  - item_per_page: 2
  - show_id: true
  - show_full_bib: true
  • item_per_page : limit the number of biblio entry per page in the bibliography
  • show_full_bib : show all bibliography item from input files event if it is not reference in the presentation
  • show_id : force to show reference cite id regardless of style configuration

Some CSS tag are introduced to customize the display of bibliography list

Reference formatting

biblio:
- tooltips: true
- footnotes: 'none' # true false short full
  • tooltips: enable tooltips where the reference is cite, show full bibliography on mouse over the biblio
  • footnotes: provide addition reference list as footnote on the slide.
    This parameter is disable if set to 'none' or false, provide a short reference with 'short' or complete one with 'full'.

Extension

Import additional template style and locales

biblio:
  - csl_template_file: style.json
  - csl_locale_file: locale.json 

csl_template_file and csl_locale_file allow to extend format and local with custom csl file loaded from the bilio forlder (see citeproc for more information).
note: A bug prevent to use of independant parent style at the moment.

Extend citation-js directly (WIP)

The underline citation-js could customize to add other input type or format via load plugin or customize citation-js/plugin-csl format output.

Example:

npm i citation-js/plugin-doi

Load the plugin in the setup/main.ts entry point of the presentation.
notes:

  • It could be not enough to just install and import plugin, but need to register the plugin manually
  • It did not work with global install at the moment.
import { defineAppSetup } from '@slidev/types'


import {plugins}  from "@citation-js/core"
import {ref as doiref,formats as doiformats} from "@citation-js/plugin-doi"

export default defineAppSetup(({ app, router }) => {
     /* Vue App*/
     console.log("plugmain",plugins.list())
     plugins.add(doiref, {
        input: doiformats
     })
     console.log("plugmain",plugins.list())
})

TODO list & know issues

  • [ ] Improve documentation
  • [x] Fix temporaries id not repeatable on load (from doi,wiki...)
  • [ ] Allow to separate biblio by section (using toc)
  • [ ] add link between ref&biblio (with comes back link)
  • [ ] add/impove css&rendering
  • [ ] change from preparser to parser to avoid problem with online editor
  • [x] provide entry point to load custom csl format without need to write extension
  • [ ] allows to download the bibliography
  • [ ] citation-js extra plugin loading with global install