Svelte kit docset

July 12th, 2021
docsetsvelte kit

Svelte kit docset

Call me old-fashioned, but I like to have an offline copy of the documentation I use. perldoc for Perl, ansible-doc for Ansible, and Zeal (the Linux little brother of Dash) as my general-purpose documentation tool.

But at last news, I didn’t find a Svelte kit docset for Zeal/Dash. Very sad.

But a docset is mostly only HTML, so I can generate that, no problem! Even moreso considering that the Svelte kit documentation’s source is both publically available and in glorious, easy-to-parse Markdown.

But I couldn’t find any solution to generate a docset from markdown files that satisfy me as my old greasy Perl tool did. Very sad.

So I wrote a new version of that said grease Perl tool in TypeScript. For giggles.

And thus, born out of

import { DocsetBuilder } from '.';
import fs from 'fs-extra';
import front from 'front-matter';
import globby from "globby";
import toc from 'remark-toc';
import slug from 'remark-slug';
import highlight from 'remark-prism';

const transformHTML = doc => {

    let headers = doc.dom('h2');

    headers.each(function(this: any) {
        const header = doc.dom(this);
        header.attr('data-dash-type', 'section');
        header.attr('data-dash-name', header.text());

    });

    return doc;
}

async function processFile(filename: string) {

    const { attributes: meta, body } = await fs.readFile(filename, 'utf8').then(front);

    const content = '## ' + meta.title + "\n" + body;

    return { filename, meta, content };
}

async function generateDocuments() {
    const markdownFiles = await globby('./kit/documentation/docs/*.md');
    markdownFiles.sort();

    const docs = await Promise.all(markdownFiles.map(processFile));

    return [{
        filename: 'index.md',
        content: "# Svelte kit\n\n" +
            "## Table of Contents\n\n"
            + docs.map(({ content }) => content).join("\n\n")
    }];

}


new DocsetBuilder({
    name: 'Svelte kit',
    icon: './kit/examples/hn.svelte.dev/static/favicon.png',
    cssFiles: ['./assets/prism.css', './assets/github-pandoc.css'],
    platform_family: 'svelte-kit',
    output_dir: './build',
    homepage: 'https://kit.svelte.dev/',
    docs: generateDocuments,
    transformHTML,
    remarkConfig: remark => remark.use(toc).use(slug).use(highlight)
}).build();

I now have

Screenshot of the Svelte kit docset in Zeal

Not quite as snazzy as the online version, but it’s here, it’s here and it’s all mine!

The docset can be accessed via the repo https://github.com/yanick/sveltekit-docset.

The feed for it is in the repo, as sveltekit.xml, and if you have Dash installed you should be able to get it directly bby clicking on this link.

Seen a typo or an error? Submit an edit on GitHub!