-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (116 loc) · 8.57 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coem | Home</title>
<meta name="description" content="A poetic programming language.">
<link href="//fonts.cdnfonts.com/css/ibm-plex-serif-2" rel="stylesheet">
<link href="//fonts.cdnfonts.com/css/ibm-plex-mono-3" rel="stylesheet">
<link href="//fonts.cdnfonts.com/css/ibm-plex-sans" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="/assets/css/examples.css">
<!-- favicon -->
<link rel="icon" href="/assets/img/logo/logo-bg-32.png" sizes="32x32">
<link rel="icon" href="/assets/img/logo/logo-bg-57.png" sizes="57x57">
<link rel="icon" href="/assets/img/logo/logo-bg-76.png" sizes="76x76">
<link rel="icon" href="/assets/img/logo/logo-bg-96.png" sizes="96x96">
<link rel="icon" href="/assets/img/logo/logo-bg-128.png" sizes="128x128">
<link rel="icon" href="/assets/img/logo/logo-bg-192.png" sizes="192x192">
<link rel="icon" href="/assets/img/logo/logo-bg-228.png" sizes="228x228">
</head>
<body>
<header>
<a href="#main" id="skip-to-content">Skip to content</a>
<h1 class="title"><a href="/">Coem</a></h1>
<button class="navToggle" aria-label="Toggle menu">☰</button>
<nav class="nav">
<ul class="nav__items">
<li class="nav__item"><a href="/" aria-current="page">Home</a></li>
<li class="nav__item"><a href="/about">About</a></li>
<li class="nav__item"><a href="/learn">Learn</a></li>
<li class="nav__item"><a href="/examples">Examples</a></li>
<li class="nav__item"><a href="/reference">Reference</a></li>
<li class="nav__item"><a href="//editor.coem-lang.org">Editor</a></li>
</ul>
</nav>
</header>
<main id="main" tabindex="-1">
<div class="intro">
<blockquote class="blockquote">
Poetry makes nothing happen.
<p><cite><a href="https://www.poetryfoundation.org/harriet-books/2009/11/poetry-makes-nothing-happen-or-does-it" rel="external noopener noreferrer" target="_blank">“In Memory of W. B. Yeats”</a>, W. H. Auden, 1940</cite></p>
</blockquote>
<p>Introducing Coem, a poetic programming language.</p>
</div>
<div>
<h2>Tokens / Metaphors</h2>
<p>Play with re-interpreting and blurring words and symbols, in consideration of their uses in both programming and literary contexts.</p>
<div class="example">
<pre><code><span class="token to">to</span> <span class="token function sleep">sl?eep</span><span class="token operator emdash">—</span><span class="token var">when</span><span class="token operator emdash">—</span><span class="token operator colon">:</span>
<span class="token string"><span class="quote">“</span>dreams<span class="quote">”</span></span><span class="token operator dot">.</span>
<span class="token function">sleep</span><span class="token operator emdash">—</span><span class="token operator string"><span class="quote">“</span>now<span class="quote">”</span></span><span class="token operator emdash">—</span>
<span class="token function">sleep</span><span class="token operator emdash">—</span><span class="token string"><span class="quote">“</span>never<span class="quote">”</span></span><span class="token operator emdash">—</span>
<span class="token function">seep</span><span class="token operator emdash">—</span><span class="token string"><span class="quote">“</span>continually<span class="quote">”</span></span><span class="token operator emdash">—</span></code></pre>
</div>
</div>
<div>
<h2>Regular expressions / Ambiguities</h2>
<p>Express multiplicity and place ideas into juxtaposition. Use regular expressions (a sequence of characters specifying a search pattern) in identifiers and values.</p>
<div class="example">
<pre><code><span class="token let">let</span> <span class="token var">me</span> <span class="token be">be</span> <span class="token boolean">true</span>
<span class="token let">let</span> <span class="token var see">se(e|a)</span> <span class="token be">be</span> <span class="token string"><span class="quote">“</span>blue<span class="quote">”</span></span>
<span class="token let">let</span> <span class="token var mist">mis(t|sed)</span> <span class="token be">be</span> <span class="token string"><span class="quote">“</span>thick<span class="quote">”</span></span>
<span class="token let">let</span> <span class="token var mourning">mou?rning</span> <span class="token be">be</span> <span class="token string"><span class="quote">“</span>dark<span class="quote">”</span></span></code></pre>
</div>
</div>
<div>
<h2>Identifiers as strings / Code as text</h2>
<p>Let the compiler trust your own private interpretations of variable names. Identifiers that aren’t explicitly defined are interpreted simply as strings.</p>
<div class="example">
<pre><code><span class="token let">let</span> <span class="token var">me</span> <span class="token be">be</span> <span class="token var">alive</span>
<span class="token know">know</span><span class="token operator emdash">—</span><span class="token var">me</span><span class="token operator emdash">—</span> <span class="token comment">† alive</span></code></pre>
</div>
</div>
<div>
<h2>Directives / Customisability</h2>
<p>Teach the compiler how to interpret and interact with you. Directives allow you to use different features and play with different ideas.</p>
<div class="example">
<pre><code><span class="token comment">#using palimpsest</span>
<span class="token comment">#using daisychain</span>
<span class="token comment">#be gentle</span></code></pre>
</div>
</div>
<div>
<h2>One-panel editor / Source code as primary text</h2>
<p>Write intimately and collaboratively with the compiler in one text area.</p>
<div class="example">
<pre><code><span class="token comment"><span class="symbol">†</span> based on Emmy Meli's “I Am Woman”</span>
<span class="token directive">#as palimpsest</span>
<span class="token let">let</span> <span class="token var memyselfI">I|me|myself</span> <span class="token be">be</span> <span class="token string"><span class="quote">“</span>woman<span class="quote">”</span></span>
<span class="token let">let</span> <span class="token var">me</span> <span class="token be">be</span> <span class="token string"><span class="quote">“</span>fearless<span class="quote">”</span></span>
<span class="token let">let</span> <span class="token var">me</span> <span class="token be">be</span> <span class="token string"><span class="quote">“</span>sexy<span class="quote">”</span></span>
<span class="token let">let</span> <span class="token var">me</span> <span class="token be">be</span> <span class="token string"><span class="quote">“</span>divine<span class="quote">”</span></span>
<span class="token know">know</span><span class="token operator emdash">—</span><span class="token var">myself</span><span class="token operator emdash">—</span> <span class="token comment">† woman fearless sexy divine</span></code></pre>
</div>
</div>
<div>
<h2>Syntax highlighting / Code as display object</h2>
<p>Treat your code as a display object to be viewed and appreciated. See your words become typographically transformed through parsing.</p>
<div class="example">
<pre><code><span class="token to">to</span> <span class="token var">breathing</span><span class="token operator emdash">—</span><span class="token operator emdash">—</span><span class="token operator colon">:</span>
<span class="token comment"><span class="symbol">†</span> in and out, and thus to</span>
<span class="token know">know</span><span class="token operator emdash">—</span><span class="token string"><span class="quote">“</span>myself<span class="quote">”</span></span><span class="token operator emdash">—</span>
<span class="token operator ampersand">&</span> <span class="token nothing">nothing</span><span class="token operator dot">.</span></code></pre>
</div>
</div>
<div class="big-link">
<a href="/learn">Learn how it works →</a>
</div>
</main>
<footer>
<p><small>A project by <a href="https://kayserifserif.place" rel="external noopener noreferrer" target="_blank">Katherine Yang</a>. Contribute on <a href="https://github.com/coem-lang" rel="external noopener noreferrer" target="_blank">GitHub</a>.</small></p>
</footer>
<script src="/assets/js/scripts.js"></script>
</body>
</html>