Idyll

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sun Aug 06 2023 15:03:08 GMT-0400 (GMT-04:00)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Idyll
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: a465fcded976e6d4caaa5d325c5f32c5
Keywords: 

My Notes
--------
6 August 2023

In this workbook, I learn and try out some stuff related to Idyll.
Idyll is built using NPM and React.

A Hello World example from ref 7:
--------------------------------

[var name:"x" value:5 /]

# Hello World

The value of x is
[Display value:x format:"d" /].

[Range value:x min:0 max:10 /]


References
----------
(1) https://idyll-lang.org/docs
    A toolkit for creating data-driven stories and explorable explanations.
    
    Idyll can be used to create explorable explanations, write data-driven stories, and add interactivity to blog engines and content management systems.
    The tool can generate standalone webpages or be embedded in existing pages.
    Choose from built-in themes or provide custom CSS.

(2) https://github.com/idyll-lang

(3) https://idyll-lang.org/editor

(4) https://github.com/idyll-lang/idyll-embed
    Embed Idyll directly in an HTML page
    
(5) https://idl.cs.washington.edu/papers/idyll/
    Idyll: A Markup Language for Authoring and Publishing Interactive Articles on the Web
    Matt Conlen, Jeffrey Heer
    Abstract
    The web has matured as a publishing platform: news outlets regularly publish rich, interactive stories
    while technical writers use animation and interaction to communicate complex ideas.
    This style of interactive media has the potential to engage a large audience and more clearly explain concepts, but is expensive and time consuming to produce.
    Drawing on industry experience and interviews with domain experts, we contribute design tools to make it easier to author and publish interactive articles.
    We introduce Idyll, a novel "compile-to- the-web" language for web-based interactive narratives.
    Idyll implements a flexible article model, allowing authors control over document style and layout, reader-driven events (such as button clicks and scroll triggers),
    and a structured interface to JavaScript components.
    Through both examples and first-use results from undergraduate computer science students,
    we show how Idyll reduces the amount of effort and custom code required to create interactive articles.

(6) https://idl.cs.washington.edu/files/2018-Idyll-UIST.pdf
    13 pqges

(7) https://www.youtube.com/watch?v=KnPe6dZuwlg
    2018 conference presentation, 18 minutes
    New York Times, Guardian, 538 also publish this type of article

(8) https://explorabl.es/
    Explorable Explanations
    
    Lion cubs play-fight to learn social skills.
    Rats play to learn emotional skills.
    Monkeys play to learn cognitive skills.
    And yet, in the last century, we humans have convinced ourselves that play is useless, and learning is supposed to be boring.

    Gosh, no wonder we’re all so miserable.

    Welcome to Explorable Explanations, a hub for learning through play!
    We’re a disorganized “movement” of artists, coders & educators who want to reunite play and learning.

    Let's get started! Check out these 3 random Explorables: 

(9) https://distill.pub/
    Distill is dedicated to clear explanations of machine learning
    a Google project ?
    "Distill was a scientific journal which operated 2016-2021."

(10) https://github.com/distillpub

(11) https://labs.minutelabs.io/what-is-a-day/#/welcome

]]></Notes>

<markdown><![CDATA[

# Welcome!

## This application helps you compose Idyll documents.

Type in the textbox on the left, and the output on the right will update. If you want to save your changes, hit the "Save" button that appears in the lower right corner, and a unique URL will be generated. To view your post, click "Fullscreen."

To include components, use the notation `[Name prop:value /]`. See the docs for [a list of available components](https://idyll-lang.org/docs/components).

[var name:"count" value:0 /]

[button onClick:`count++` style:`{padding: 10, background: '#ddd', margin: '0 auto', display: 'block', cursor: 'pointer'}`]
Increment counter
[/button]

You've clicked the button [display var:count format:"d" /] time[display value:`count === 1 ? '' : 's' ` /].

```
[var name:"count" value:0 /]

[button onClick:`count++` style:`/* JS object of styles */`]
Increment counter
[/button]

You've clicked the button [display var:count format:"d" /] time.
```

Use standard markdown syntax for *italics*, **bold**, `codeblocks`, and

* lists

Share what you make [on gitter](https://gitter.im/idyll-lang/Lobby).

**KSW** this is the default content from https://idyll-lang.org/editor

]]></markdown> 

<_-.XholonClass>
  <PhysicalSystem/>
  
  <Hello_World/>
  
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<PhysicalSystem>
  <Hello_World/>
</PhysicalSystem>

<Hello_Worldbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var x = 5;
  // The value of x is
  // [Display value:x format:"d" /].
  if (console) {
    this.println(`The value of x is ${x}.`);
  }
  //# sourceURL=Hello_Worldbehavior.js
]]></Hello_Worldbehavior>

<Heightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var myHeight, testing;
  var beh = {
    postConfigure: function() {
      testing = Math.floor(Math.random() * 10);
      myHeight = this.cnode.parent();
    },
    act: function() {
      myHeight.println(this.toString());
    },
    toString: function() {
      return "testing:" + testing;
    }
  }
  //# sourceURL=Heightbehavior.js
]]></Heightbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Hello World</title>
    <rect id="PhysicalSystem/Hello_World" fill="#98FB98" height="50" width="50" x="25" y="0"/>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>