joshpoll / sid

Idyll in Svelte

Sid: Idyll in Svelte

This is take two of porting Idyll to Svelte.

How to Use

Currently there's no easy way to use this as a standalone library. So for now...

1. Clone the repo
2. yarn
3. yarn dev
4. Hack on the App.svelte file.

Why?

Idyll and Svelte are great tools on their own, but even better together.

Idyll's greatest strength is that it provides a great collection of built-in components, templates, and styles that makes authoring interactive articles much easier.'

Svelte's greatest strengths lie in its reactive semantics, language tooling, and component composition.

By rewriting Idyll as a Svelte library, we get the best of both worlds. A great library of defaults that lets you

• embed sid files in other sid files
• use any svelte component as a sid component
• get typing information, compiler errors, autocomplete, and syntax highlighting
• take advantage of existing svelte and MDsveX documentation and their future advancements

How does it work?

To support mixed markdown/code files, we use pngwn's MDsveX preprocessor. This preprocessor also gives us a way to supply frontmatter and layout configuration. Since sid files are just special svelte files, we get access to svelte's language server protocol (LSP) goodness.

Progress

Components

Level 0

• case (svelte if/else)
• conditional (svelte if/else)
• default (svelte if/else)
• switch (svelte if/else)
• h1 (md #)
• h2 (md ##)
• h3 (md ###)
• h4 (md ####)
• h5 (md #####)
• h6 (md ######)
• link (md )

Level 1

• boolean
• button
• aside
• inline
• code-highlight
• display
• image
• svg
• radio
• float
• fixed
• range
• select
• text-container
• graphic
• action

Level 2+

• chart
• cite
• desmos
• header
• youtube
• tweet
• table
• loop
• text-input
• preload
• preview
• gist
• analytics
• annotation
• dynamic
• equation
• scroller
• step
• stepper-control
• stepper

Layouts

• blog
• centered
• none

Themes

• github
• idyll
• none
• tufte

Template Projects

• article
• multipage
• scrollytelling
• slideshow

Fidyll

???

sid's Issues

figure out how to get layouts to work with typed svelte

For some reason, TS code doesn't work in layouts. I'm not 100% sure why but I suspect it's because the Layout component provided by MDsveX is untyped and/or some part of MDsveX is embedded my typed scripts in untyped contexts, causing the parser to fail.