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

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.