-
-
Notifications
You must be signed in to change notification settings - Fork 86
/
index.html
26 lines (23 loc) · 3.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>
Page Title
</title>
<meta property="og:title" content="Page Title">
<meta charset="utf-8">
<meta property="og:type" content="article">
<meta property="og:description" content="Short description of your project">
<meta property="description" content="Short description of your project">
<link rel="stylesheet" href="static/idyll_styles.css">
</head>
<body>
<div id="idyll-mount"><div data-reactroot=""><div class="idyll-root"><div style="max-width:600px;margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto" class=" idyll-text-container"><div class="article-header"><h1 class="hed">Welcome to Idyll</h1><h2 class="dek">Open index.idl to start writing</h2><div class="byline">By: <a href="https://idyll-lang.github.io">Your Name Here</a></div></div><p>This is an Idyll file. Write text
as you please in here. To add interactivity,
you can add different components to the text.</p><div class="ReactTable table "><div class="rt-table" role="grid"><div class="rt-thead -header" style="min-width:200px"><div class="rt-tr" role="row"><div class="rt-th rt-resizable-header -cursor-pointer" role="columnheader" tabindex="-1" style="flex:100 0 auto;width:100px"><div class="rt-resizable-header-content">x</div><div class="rt-resizer"></div></div><div class="rt-th rt-resizable-header -cursor-pointer" role="columnheader" tabindex="-1" style="flex:100 0 auto;width:100px"><div class="rt-resizable-header-content">y</div><div class="rt-resizer"></div></div></div></div><div class="rt-tbody" style="min-width:200px"><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -odd" role="row"><div class="rt-td" role="gridcell" style="flex:100 0 auto;width:100px">0</div><div class="rt-td" role="gridcell" style="flex:100 0 auto;width:100px">0</div></div></div><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -even" role="row"><div class="rt-td" role="gridcell" style="flex:100 0 auto;width:100px">1</div><div class="rt-td" role="gridcell" style="flex:100 0 auto;width:100px">1</div></div></div></div></div><div class="-loading"><div class="-loading-inner">Loading...</div></div></div><p>Here is how you can use a variable:</p><input type="range" value="5" min="0" max="10" step="1"/><span>5.00</span><pre style="display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8"><code><span style="color:#333;font-weight:bold">var</span> code = <span style="color:#008080">true</span>;</code></pre><p>And here is a custom component:</p><div>This is a custom component</div><p>You can use standard html tags if a
component with the same name
doesn’t exist.</p><svg viewBox="0 0 100 100"><g transform="rotate(-90 50 50)"><path d="M 50,50 l 49,0 a49,49 0 0,0 -9.358167275627572,-28.801477362331184 z" fill="#7b3af5"></path><path d="M 50,50 l 39.64183272437243,-28.801477362331184 a49,49 0 1,0 9.358167275627572,28.801477362331195 z" fill="#EAE7D6"></path></g></svg><div>This is a custom component</div><p>This adds support for indexed components: <div>This is another custom component</div></p><div>Let's put the fun back in functional!</div><div>This is some text<button>And a button</button>Then some more text</div><div>This is a custom component</div></div></div></div></div>
<script src="static/idyll_index.js"></script>
</body>
</html>