Create explorable explanations and interactive essays.

Overview

idyll-logo

Tutorials | Examples | Docs | Chatroom | Mailing list | Twitter

What is Idyll?

For an introduction to Idyll, API reference, examples, and tutorials, please see https://idyll-lang.org/.

Contributor's Guide

See CONTRIBUTING for details on the development workflow. If you have any questions, feel free to open an issue or inquire on https://gitter.im/idyll-lang/Lobby.

Support Idyll

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers!

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

Citing

If you use or build on Idyll in academic work, please use this citation:

@inproceedings{2018-idyll,
 title = {Idyll: A Markup Language for Authoring and Publishing Interactive Articles on the Web},
 author = {Matt Conlen AND Jeffrey Heer},
 booktitle = {ACM User Interface Software \& Technology (UIST)},
 year = {2018},
 url = {http://idl.cs.washington.edu/papers/idyll},
}

Changelog / Upgrade Guide

See CHANGELOG

Comments
  • Remove idyll component and implement hook functions

    Remove idyll component and implement hook functions

    This adds support for hooks to all (wrapped) components. Currently implemented hooks are onScroll, onEnterView, and onExitView, though others will be easy to add if we want. Note that the enter hook is implemented to fire when a component comes into view even partially but exit only fires when a component fully leaves view. We probably want to refine the list of hooks to something like this:

    • onEnterViewPartially
    • onEnterViewFully
    • onExitViewPartially
    • onExitViewFully

    I also thought about things like adding a percentInView property to the ref objects, or supporting hooks like in20, out70, etc. but I'd like to know what you think. We'd obviously need to be careful of performance issues if we go too far beyond the above list.

    The last commit in this PR adds hooks to the scatter chart for easy testing. I'll back that out before merge.

    opened by bclinkinbeard 23
  • Idyll: how does it work?

    Idyll: how does it work?

    Since I've mostly worked on the tooling side of things, the inner workings of InteractiveDocument are still a bit of a mystery to me. Hopefully @mathisonian can drop some knowledge here to help me with my refactorings, but I think a good overview would also be good to have in the docs/site.

    Specifically, I'm not clear on the following bits that are specific to Idyll, and not native React concepts.

    I think I'm missing the key insight of exactly how the reactive changes are triggered and propagated through the document.

    opened by bclinkinbeard 23
  • idyll-document rewrite

    idyll-document rewrite

    This PR aims to clean up the document creation to allow for better debugging and future evolution. After some housekeeping I added tests for the existing behavior that verified, given an AST, the doc's state and derivedVars are populated as expected. With the tests in place I implemented new logic for parsing the AST into those properties.

    (Side note, the getNodesByName function is essentially borrowed from https://github.com/idyll-lang/idyll/blob/master/packages/idyll-cli/src/pipeline/parse.js#L17 so we may want to extract some common utils at some point.)

    The new approach has one big difference, as seen in 4ec9a62. The existing implementation of update on the derived vars relied on a lot of global state that we want to avoid. The new code relies on updateDerivedVars, defined on InteractiveDocument, and this.derivedVars.foo.update(newState) is no longer supported. I don't think this will cause any issues but @mathisonian can confirm.

    I am now moving on to the datasets and refs so we can get rid of the var walker entirely.

    Feedback please!

    opened by bclinkinbeard 23
  • Component overlay

    Component overlay

    Context

    As it stands, while the docs pages has information of the various components, some components don't list out all of the available props that a component accepts. This lack of information can limit a author's use of Idyll, not making full use of a component's ability. This may especially be the case with custom components, and outside components. It would be pretty nice if authors had a debugging information UI for their page, so that they can easily see components and the props of each component. Lastly, this is likely in the far future, but it would be great for authors to be able to dynamically update their components (and even source code) on the Idyll UI.

    This PR (WIP)

    This PR introduces an overlay feature that will be helpful for authors to view debugging information on their components:

    idyll-debug-overlay-demo

    As it stands, here are some new features/views introduced.

    • Borders around each component. I mainly introduced this to debug and see how much of a page a component takes up. This idea/design could be incorporated for a final design.

    • A "debug" icon on the top right of each component. The Idyll-quill icon is being used, as it makes for a nice "edit" button [: Upon hovering over the icon (where upon the icon then darkens to show that it's active), information is displayed showing the props of the component, as well as the values of each prop.

      • In the future, this debug icon can be pressed and perhaps the source code can appear, be edited, and changes be reflected dynamically on the page.

    This PR is not ready to be merged at all. Something to be implemented would be to provide a small button or icon that lets an author go into this debugging UI, while otherwise maintaining their original page.

    Components Future Feature WIP 
    opened by tanalan 21
  • feat : incorporate desmos component

    feat : incorporate desmos component

    • Please check if the PR fulfills these requirements
    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Add Desmos component

    • What is the current behavior? (You can also link to an open issue here) Addresses #357

    • What is the new behavior (if this is a feature change)? User can embed Desmos graph into idyll document

    • Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?) No

    • Other information:

    opened by amitbadala 19
  • Regroup

    Regroup

    Things have gotten into a weird state and I think we need to resolve some issues before going any further. I don't know where the issues are coming from but I flailed all day yesterday with bizarre issues and failures. Between Lerna, Babel, Jest, and React, I don't know where the issues lie but they're disconcerting and super frustrating. I think we need to get all the tests working before we do anything else.

    • The idyll-components and idyll-document tests are failing, even after #174
    • I have no idea why these tests are failing, and they are generating errors that don't make any sense. Things like TypeError: Path must be a string. Received undefined, Cannot find module 'fbjs/lib/warning' from 'ReactNoopUpdateQueue.js', etc.

    Some notes:

    • Jest will automatically set NODE_ENV to test so we shouldn't need to call anything but jest from the package.json.
    • #174 added babel-jest but that is supposed to come with jest by default
    • #174 tries to use babel-preset-es2015 when running the tests but it's not listed as a dependency and it's deprecated
    opened by bclinkinbeard 16
  • Cannot find module

    Cannot find module

    hi, I did a fresh install of idyll and yo. Ran yo idyll and npm start and got:

    Spellcheck:
    var: did you mean vary
    Error: Cannot find module 'c:\git\demo-idyll\c' from 'c:\git\demo-idyll'
    

    anyone else got this problem?

    opened by themre 15
  • React 16

    React 16

    This updates the project to use react-16 (targeted against the idyll-doc-updates branch). Its a relatively minor change, but will be good to get in, and will potentially allow us to take advantage of the new error boundary features.

    There are some warnings being thrown by Victory (only in dev - not production) but they are aware and say they'll fix these in the next release https://github.com/FormidableLabs/victory/issues/724

    v2 
    opened by mathisonian 13
  • uses image component to add graphics to annotation

    uses image component to add graphics to annotation

    • Please check if the PR fulfills these requirements
    • [x] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Uses the Image component to for displaying images inside of the annotation div.
    • What is the current behavior? (You can also link to an open issue here) Current Annotation component does not allow for images.
    • What is the new behavior (if this is a feature change)? New Annotation component places images at the start of the annotation, can have text and image in the same annotation div.
    • Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?) None
    • Other information:
    opened by jasenlo123 12
  • Move Docs to Vercel

    Move Docs to Vercel

    This PR gets rid of server.js and routes.js in favor of Next.js redirects.

    It also makes use of the Router and Link components provided by Next.js.

    There may be some behavior with the routing that has been changed and requires amending. If so, please let me know in the comments here and we can do so.

    Edit: definitely scope for another PR upgrading Next.js and making the docs fully static!

    opened by mcsdevv 12
  • Add support for multiple configurations in package.json

    Add support for multiple configurations in package.json

    Is your feature request related to a problem? Please describe. It is relatively common to want to have two different idyll configurations, one for local development, and one for your production server.

    Describe the solution you'd like There should be a way to specify multiple configurations in the package.json file. Something like this could work:

    {
      "idyll": [
         ["myDevConfig", { ...configuration options...}],
         ["myProductionConfig", { ...configuration options...}]
      ]
    }
    

    There would also need to be a way to specify which config you want to use. Something like idyll --config myDevConfig or idyll --env myProductionConfig. It should default to the first entry if none is specified, and clearly log which config is being used.

    If an object is passed instead of an array, the current behavior would remain unchanged:

    {
      "idyll": { ...configuration options... }
    }
    
    help wanted CLI Good First PR 
    opened by mathisonian 12
  • Scroller not working

    Scroller not working

    Describe the bug Hi! just recently trying out the idyll framework. The [Scroller]...[/Scroller] components do not display the inner 'text-containers' nor the graphic component. It's just empty.

    To Reproduce Steps to reproduce the behavior:

    1. Use idyll create cli command to create a 'scrollytelling' project
    2. run with 'idyll'
    3. Errors: The scroller components are empty.

    Expected behavior Expected text or a graphics, anything. It's just blank space

    Screenshots Screen Shot 2022-12-30 at 10 22 30 AM

    Desktop (please complete the following information):

    • macOS Monteray 12.5
    • chrome

    Additional context

    I've followed the docs closely. I also tried looking at other people's projects that use scroller. As I look into idyll-components/src/scroller.js line 167 seems to return an empty list of child elements. It looks like the filter function is returning false everytime because c.type.name is usually 'x'. Does anyone know why the c.type.name is x? Where is it creating react elements that are of x type?

    Thanks in advance!

    opened by curtisjhu 0
  • chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump socket.io-parser from 4.0.4 to 4.0.5

    chore(deps): bump socket.io-parser from 4.0.4 to 4.0.5

    Bumps socket.io-parser from 4.0.4 to 4.0.5.

    Release notes

    Sourced from socket.io-parser's releases.

    4.0.5

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    Links

    Changelog

    Sourced from socket.io-parser's changelog.

    4.0.5 (2022-06-27)

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    4.2.0 (2022-04-17)

    Features

    • allow the usage of custom replacer and reviver (#112) (b08bc1a)

    4.1.2 (2022-02-17)

    Bug Fixes

    • allow objects with a null prototype in binary packets (#114) (7f6b262)

    4.1.1 (2021-10-14)

    4.1.0 (2021-10-11)

    Features

    • provide an ESM build with and without debug (388c616)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Add new component for google analytics 4

    Add new component for google analytics 4

    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? Feature
    • What is the current behavior? Only old google universal analytics is supported in Idyll.
    • What is the new behavior (if this is a feature change)? New component Ga4Analytics added to support google analytics 4.
    • Does this PR introduce a breaking change? No
    • Other information: Component can be used as [Ga4Analytics google: "G-XXXXX" /]
    opened by ashwan1 1
  • Support for google analytics 4

    Support for google analytics 4

    Currently analytics component only support google universal analytics.

    Need to add component for google analytics 4.

    I can create pull request if this feature is approved.

    opened by ashwan1 3
  • Error while building post in multipage setup

    Error while building post in multipage setup

    Describe the bug In multipage setup, when I build a post, I get following error:

    PS D:\github_projects\site\posts\post-1> idyll build
    
    Building Idyll project with output directory: ../../docs/post-1/
    
    Could not import component custom-component for server-side rendering.
    Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'
        at new NodeError (node:internal/errors:387:5)
        at throwIfUnsupportedURLScheme (node:internal/modules/esm/resolve:1075:11)
        at defaultResolve (node:internal/modules/esm/resolve:1155:3)
        at nextResolve (node:internal/modules/esm/loader:173:28)
        at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
        at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
        at ESMLoader.import (node:internal/modules/esm/loader:536:22)
        at importModuleDynamically (node:internal/modules/cjs/loader:1059:29)
        at importModuleDynamicallyWrapper (node:internal/vm/module:438:21)
        at importModuleDynamically (node:vm:389:46) {
      code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
    }
    Could not import component custom-d3-component for server-side rendering.
    Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'
        at new NodeError (node:internal/errors:387:5)
        at throwIfUnsupportedURLScheme (node:internal/modules/esm/resolve:1075:11)
        at defaultResolve (node:internal/modules/esm/resolve:1155:3)
        at nextResolve (node:internal/modules/esm/loader:173:28)
        at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
        at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
        at ESMLoader.import (node:internal/modules/esm/loader:536:22)
        at importModuleDynamically (node:internal/modules/cjs/loader:1059:29)
        at importModuleDynamicallyWrapper (node:internal/vm/module:438:21)
        at importModuleDynamically (node:vm:389:46) {
      code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
    }
    

    To Reproduce Steps to reproduce the behavior:

    1. Go to '<root_folder/posts/post-1'
    2. Run idyll build
    3. See error

    Expected behavior Should build without any errors

    Desktop:

    • OS: Windows 11
    opened by ashwan1 0
Owner
Idyll
A toolkit for creating data-driven stories and explorable explanations.
Idyll
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures This repository contains JavaScript based examples of many popular algorithms and data structures. Each algo

Oleksii Trekhleb 158k Dec 31, 2022
Travel Lovers - an application that allows a travel enthusiast to create an account to log past, upcoming, and bucket-list trips

Travel Lovers Table of Contents Description Tools Used Installation Instructions Usage License Tests Questions Description Travel Lovers is an applica

Nicholas Nolen 5 Aug 31, 2022
A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

Sean T. McBeth 1.1k Dec 27, 2022
The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

List.js Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on

Jonny Strömberg 10.9k Jan 1, 2023
Drag and drop library for two-dimensional, resizable and responsive lists

GridList Drag and drop library for a two-dimensional resizable and responsive list of items Demo: http://hootsuite.github.io/grid/ The GridList librar

Hootsuite 3.6k Dec 14, 2022
Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters.

Sisyphus Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. Descriptio

Alexander Kaupanin 2k Dec 8, 2022
A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

Readmore.js V3 alpha I am deprecating the 2.x version of Readmore.js. A new version is coming soon! Check it out and help me test it! Readmore.js A sm

Jed Foster 1.5k Nov 30, 2022
FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

FriendAdvisor is a mobile app with a focus on allowing friends and family to coordinate and receive text notifications about upcoming group events.

Brad Johnson 4 Sep 29, 2022
Defines the communication layer between mobile native(iOS/Android) and webview using JSON Schema and automatically generates SDK code

Defines the communication layer between mobile native(iOS/Android) and webview using JSON Schema and automatically generates SDK code.

당근마켓 31 Dec 8, 2022
A responsive image polyfill for , srcset, sizes, and more

Picturefill A responsive image polyfill. Authors: See Authors.txt License: MIT Picturefill has three versions: Version 1 mimics the Picture element pa

Scott Jehl 10k Dec 31, 2022
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

MixItUp 3 MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove D

Patrick Kunka 4.5k Dec 24, 2022
JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

SurveyJS 3.5k Jan 1, 2023
Extensive math expression evaluator library for JavaScript and Node.js

?? Homepage Fcaljs is an extensive math expression evaluator library for JavaScript and Node.js. Using fcal, you can perform basic arithmetic, percent

Santhosh Kumar 93 Dec 19, 2022
Browser fingerprinting library with the highest accuracy and stability.

FingerprintJS is a browser fingerprinting library that queries browser attributes and computes a hashed visitor identifier from them. Unlike cookies a

FingerprintJS 18.1k Dec 31, 2022
autoNumeric is a standalone library that provides live as-you-type formatting for international numbers and currencies.

What is autoNumeric? autoNumeric is a standalone Javascript library that provides live as-you-type formatting for international numbers and currencies

AutoNumeric 1.7k Dec 16, 2022
Bookmarklet to remove sticky elements and restore scrolling to web pages!

Bookmarklet to remove sticky elements and restore scrolling to web pages!

Tim Martin 648 Dec 29, 2022
Free, open-source crypto trading bot, automated bitcoin / cryptocurrency trading software, algorithmic trading bots. Visually design your crypto trading bot, leveraging an integrated charting system, data-mining, backtesting, paper trading, and multi-server crypto bot deployments.

Free, open-source crypto trading bot, automated bitcoin / cryptocurrency trading software, algorithmic trading bots. Visually design your crypto trading bot, leveraging an integrated charting system, data-mining, backtesting, paper trading, and multi-server crypto bot deployments.

Superalgos 3.1k Jan 1, 2023
Scheme flooding vulnerability: how it works and why it is a threat to anonymous browsing

Scheme flooding vulnerability: how it works and why it is a threat to anonymous browsing

FingerprintJS 623 Dec 28, 2022
🔥 Miniflare is a simulator for developing and testing Cloudflare Workers.

?? Miniflare is a simulator for developing and testing Cloudflare Workers.

Cloudflare 3.1k Jan 3, 2023