Live-export: A tool to programmatically export notes for writing blogs with Inkdrop

Inkdrop is designed to provide a seamless experience between devices and platforms, but that makes it a bit cumbersome working in local filesystems.
It’d be great to provide a way to share your notes on the web, while giving you full control of its design and content.
So, I’ve created a tool that allows you to export notes programmatically to a local filesystem:

As its name says, it supports ‘live export’, which means that it exports continuously as changes occur in your notes.
It provides APIs so you can flexibly specify paths to export the notes and images from a notebook like so:

const sub = await liveExport.start({
  live: true,
  bookId: '<YOUR_BOOK_ID>',
  preProcessNote: ({ note, frontmatter, tags }) => {
    frontmatter.title = note.title
    // Convert note title to kebab case (eg. "kebab-case-note-title")
    frontmatter.slug = toKebabCase(note.title)
    frontmatter.tags = tags.map(t => t.name)
  },
  pathForNote: ({ /* note, */ frontmatter }) => {
    // export only if it's public
    if (frontmatter.public) {
      return `./<PATH_TO_EXPORT_NOTES>/${frontmatter.slug}.md`
    } else return false
  },
  urlForNote: ({ frontmatter }) => {
    if (frontmatter.public) {
      return `/<URL_TO_LINK_NOTES>/${frontmatter.slug}`
    } else return false
  },
  pathForFile: ({ mdastNode, /* note, file, */ extension, frontmatter }) => {
    if (frontmatter.slug && mdastNode.alt) {
      const fn = `${frontmatter.slug}_${toKebabCase(
        mdastNode.alt
      )}${extension}`
      const res = {
        filePath: `./<PATH_TO_EXPORT_IMAGES>/${fn}`,
        url: `./<URL_TO_LINK_IMAGES>/${fn}`
      }
      // If the `alt` attribute of the image is 'thumbnail', use it as a hero image
      if (mdastNode.alt === 'thumbnail') {
        frontmatter.heroImage = res.filePath
      }
      return res
    } else return false
  },
  postProcessNote: ({ md }) => {
    // Remove the thumbnail image from the Markdown body
    const md2 = md.replace(/\!\[thumbnail\]\(.*\)\n/, '')
    return md2
  }
})

I’ve created a demo project, which is my blog about the tech I use. Check it out:

A video tutorial is also available on YouTube:

I hope you enjoy it!

2 Likes

A tutorial is now available on the documentation here:

A blog template:

Enjoy!