Landing page discussion

[mathisonian]

From @bclinkinbeard

I don't know if this goes here or in the docs-redux repo, but I keep picturing something and wanted to write it down.

I think the editor is compelling enough that it should be front and center. I think a great homepage would be the logo, a headline, a couple sentences of description, and then the editor inline. Controls along the top of the editor could allow you to switch between pre-made examples (that you could of course edit) or start from scratch. We could also implement live layout and theme switching like I did in Literasee.

If we did those things and ported the existing examples to work inside it I think we'd have a hell of a site. People could understand the project in 20 seconds.

[mathisonian]

Here's a (very much work in progress) redesign of the landing page. I worry about overwhelming by putting the full editor here, but I was thinking that when you scroll down to the next section there would be an "editor lite" that has a short (< 10 lines) section of editable text and the associated output.

[mathisonian]

Other thoughts:

• I'd love to add live layout and theme switching. What do we need to facilitate this?
• @pavankUW is starting work on saving / loading links for the editor, which should make pre-populating with different examples fairly straightforward.
• An issue is that most of the current examples use custom components, which don't have a story in the online editor as it exists right now

[mathisonian]

I'm still struggling to come up with a succinct (1-2 sentence) description of the project that would be appropriate here.

For reference, here's a suggestion from a commenter on HN:

Idyll helps you tell data-driven web stories using charts, graphs and other dynamic controls that respond both to direct user interaction, and interaction with the story as a whole.

and here's what you see when landing on https://idyll-lang.org currently:

Idyll is a tool that makes it easier to author interactive narratives for the web. The goal of the project is to provide a friendly markup language — and an associated toolchain — that can be used to create dynamic, text-driven web pages.

Idyll helps you create documents that use common narrative techniques such as embedding interactive charts and graphs, responding to scroll events, and explorable explanations. Additionally, its readable syntax facilitates collaboration between writers, editors, designers, and programmers on complex projects.

[mathisonian]

And here's a revised version of the internal docs pages, now with some additional hierarchy via the top nav bar.

The left panel still needs some cleanup work.

[bclinkinbeard]

I dig the docs page and the idea of a smaller editor. As long as we can clearly and efficiently communicate "This normal-ish looking text creates that app over there." I think we're OK. The lite editor could have a prominent "Open in Editor" or something.

Custom components are definitely a wrinkle. Maybe we could just make them read-only on the site or something? Or maybe we go ahead and solve that problem of live code eval... :)

Layout and theme switching just required changing which CSS files were pulled in and used. I'm going to open a separate issue to discuss it but I started playing with glob support the other day and I think it has the potential to simplify a lot of the crazy path stuff we currently do. It could also support the CSS/theme/layout switching.

Lastly, here's my stab:

Idyll extends the ubiquitous Markdown format to enable the creation of dynamic, interactive narratives for the web. The language and toolchain aim to empower journalists, researchers, and subject-matter experts to create compelling content using familiar tools and processes.

[mathisonian]

Here's some progress incorporating the mini-editor:

I like the idea of being able to toggle through a few small examples.

@bclinkinbeard thanks for the help on copy - I'll try to get that in next. Solving the live eval problem should be fun - maybe time to start thinking about it seriously? Making them read only is always a good temp option but feels like cheating a little bit.

[mathisonian]

Some more progress:

[mathisonian]

One way to handle custom components in the editor would be:

1) establish a format for specifying idyll documents and their dependencies. This could take the form of e.g. JSON object 2) create a service that generates bundles based on these specifications, 3) the bundles would be swapped dynamically on the client, to allow for customization of dependencies.

[mathisonian]

Here's a first pass at this:

https://docs-redux-mreewjdtyf.now.sh/

Let me know if you find bugs or have design suggestions!