Git Product home page Git Product logo

notion-to-astro's Introduction

notion-to-astro

So you've written your documentation in Notion but want to switch to Astro Starlight to publish it. So have we! This is the script we used to convert from one to the other. Here's what it does:

Notion Astro Starlight
File names include UUIDs Clean file names
Title is the first h1 heading Title is in YAML frontmatter
Embeds are self-links Embeds are HTML
Exports <aside></aside> elements Wants ::note syntax
Links & images are URL-encoded They aren't

Notion bugs

This fixes a bug in Notion: if you have a link in Notion, and the link text is an inline code span, like in markdown:

[`getTest`](https://google.com/)

Notion messes this up and outputs this instead:

`[getTest](https://google.com/)`

So any roughly Commonmark Markdown implementation will render the latter as the markdown raw text rather than the intended link.

YouTube embeds

This is kind of opinionated about YouTube embeds: it compiles them to lite-youtube-embed elements. So an embed will end up looking like:

<lite-youtube videoid="ogfYd705cRs"></lite-youtube>

So, this assumes that you're using lite-youtube-embed. Which you should because it's great. In Astro Starlight, we configure lite-youtube-embed like this:

starlight({
  // …
  head: [
    {
      tag: "script",
      attrs: {
        src: "https://cdn.jsdelivr.net/npm/[email protected]/src/lite-yt-embed.min.js",
        defer: true,
      },
    },
    {
      tag: "link",
      attrs: {
        href: "https://cdn.jsdelivr.net/npm/[email protected]/src/lite-yt-embed.min.css",
        rel: "stylesheet",
      },
    },
  ],
});

If you need this to have customizable behavior instead, happy to accept a PR.

Install

npx @valtown/notion-to-astro

Usage

npx @valtown/notion-to-astro --help

One-pass

This is intended to be run once in order to start a conversion, and then you'd do some manual tweaking. It isn't a solution to maintain content in Notion while publishing with Starlight: that would require something a lot more complicated.

See also

  • notion-to-md - this takes a different path of exporting Markdown from the Notion API, rather than using Notion's default Markdown exports.

notion-to-astro's People

Contributors

tmcw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

notion-to-astro's Issues

Implement other kinds of embeds

Notion basically gives you just the URL someone uses to trigger the embed generator. This handles val town embeds and YouTube embeds because it needed to, but there are obviously others.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.