simponic/tabloid-fake-closure
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Flesh out landing page copy

Browse Source
This commit is contained in:
Linus Lee 2020-09-24 07:30:52 -04:00
parent cee091893a
commit 4b487e7a38
2 changed files with 149 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
static/css/main.css
View File

@ -5,6 +5,13 @@ html {
font-size: 18px;
}
/* blocks.css bug shim */
.fixed.inline.block {
pointer-events: none;
line-height: 1.5em;
}
/* resets */
html,
@ -58,15 +65,21 @@ footer {
nav {
margin: .8em 0;
width: 96%;
max-width: 400px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
nav a {
color: var(--block-accent-color);
margin: 0 1em;
}
header .subtitle {
font-size: 1.2em;
line-height: 1.5em;
}
header .lang.block {
@ -77,7 +90,7 @@ header .lang.block {
font-weight: normal;
color: #fff;
display: inline-block; /* for transforms */
transform: rotate(-10deg);
transform: rotate(-10deg) translateY(6px);
pointer-events: none;
}
@ -92,7 +105,7 @@ header .lang.block {
.editor .output,
.editor .errors {
width: 100%;
padding: .5em 1em;
padding: .8em 1em;
border-bottom: 3px solid var(--block-text-color);
box-sizing: border-box;
}
@ -103,6 +116,7 @@ header .lang.block {
.editor.block {
padding: 0;
padding-top: 24px;
}
.editor .controls {
@ -118,6 +132,11 @@ header .lang.block {
justify-content: flex-end;
}
.editor .code {
padding: 0;
position: relative;
}
.editor .output {
min-height: 5em;
display: flex;
@ -130,11 +149,6 @@ header .lang.block {
width: 100%;
}
.editor .code {
padding: 0;
position: relative;
}
.editor .errors {
color: var(--block-accent-color);
}
@ -178,6 +192,40 @@ textarea.editor-input:focus {
color: #777;
}
main > h2 {
margin-top: 1.5em;
}
main > p,
main > ul li {
line-height: 1.5em;
}
main > ul li {
margin-bottom: .5em;
}
main > p a {
color: var(--block-accent-color);
}
footer {
margin-top: 2em;
}
footer a {
color: var(--block-accent-color);
}
@media only screen and (max-width: 600px) {
header .subtitle {
line-height: 1.7em;
}
header .lang.block {
transform: rotate(-5deg) translateY(4px);
}
.filler,
textarea.editor-input {
font-size: .8em;
}
}

98
static/js/main.js
View File

@ -1,4 +1,6 @@
const PROG_DEFAULT = `DISCOVER HOW TO factorial WITH n
const PROG_DEFAULT = `YOU WON'T WANT TO MISS 'Hello, World!'
DISCOVER HOW TO factorial WITH n
WE SAID
WHAT IF n IS ACTUALLY 0
WE SAID
@ -10,7 +12,7 @@ WE SAID
END OF STORY
EXPERTS CLAIM result TO BE factorial OF 10
YOU WON'T WANT TO MISS 'RESULT IS'
YOU WON'T WANT TO MISS 'Result is'
YOU WON'T WANT TO MISS result
PLEASE LIKE AND SUBSCRIBE`;
@ -21,6 +23,7 @@ const HEADLINES = [
`Shocking New Programming Language Bewilders Programmers at Google and Facebook!`,
`Programmer Who Made Everything Now Predicts the Next Big Language!`,
`The Secret Programming Language Every 10x Programmer Recommends!`,
`Programmers at Microsoft Hate This One Trick to Get Good at that Code Thing!`,
];
function randomHeadline() {
@ -56,7 +59,7 @@ class Editor extends Component {
const nodes = new Parser(tokens).parse();
const env = new Environment({
print: s => {
this.output += s.toString() + '\n';
this.output += s.toString().toUpperCase() + '!\n';
this.render();
},
});
@ -73,7 +76,7 @@ class Editor extends Component {
jdom`<button class="block"
onclick=${this.handleReset}>Reset</button>`}
<button class="accent block"
onclick=${this.handleRun}>Run!</button>
onclick=${this.handleRun}>Run this!</button>
</div>
<div class="code">
<div class="filler">
@ -109,6 +112,10 @@ class App extends Component {
<nav>
<a href="https://github.com/thesephist/tabloid"
target="_blank" noopener noreferer>GitHub</a>
<a href="#" onclick=${evt => {
evt.preventDefault();
this.render();
}}>Rewrite headline!</a>
<a href="https://dotink.co/posts/tabloid/"
target="_blank" noopener noreferer>Blog post</a>
</nav>
@ -118,11 +125,92 @@ class App extends Component {
</header>
${this.editor.node}
<h2>What?</h2>
<p>
<strong>Tabloid</strong> is a turing-complete programming
language for writing programs in the style of clickbait news
headlines.
</p>
<p>
Here are <strike>a few things</strike>${' '}<strong>the Top Five
Most Popular Quirks and Features</strong> of the Tabloid
programming language <strong>(Number Four Will Shock You!)</strong>
</p>
<ul>
<li>
Print output with the keywords <code class="inline
fixed block">YOU WON'T WANT TO MISS</code> followed by an
expression. Everything printed by Tabloid is
<strong>automatically capitalized, and an exclamation point is
added.</strong> Why would you want anything else?
</li>
<li>
Declare a function by writing <code class="inline fixed
block">DISCOVER HOW TO ... WITH</code>. Truly, a more
gripping way to declare a function can't possibly exist!
</li>
<li>
Assign to a variable by writing <code class="inline fixed
block">EXPERTS CLAIM ... TO BE</code>. On the Internet,
anyone can be an expert, and Tabloid gives YOU the power to
wield that responsibility and declare anything you'd like!
</li>
<li>
To return from a function, simply write <code class="inline
fixed block">SHOCKING DEVELOPMENT</code>! You're going
to—gasp!—<strong>return</strong>? How shocking!
</li>
<li>
Every program must end with <code
class="inline fixed block">PLEASE LIKE AND
SUBSCRIBE</code>, because you have to grow your audience! <strong>Hashtag hustle</strong>.
</li>
</ul>
<h2>But why?</h2>
<p>
Didn't want to do homework for my
<a href="https://cs186berkeley.net/" target="_blank">database
systems class</a>, and needed something to do to procrastinate.
Will I finish the homework? Did I get enough sleep?
</p>
<p>Stay tuned to find out!</p>
<h2>Does it actually work?</h2>
<p>
Yes. Tabloid is a <strong>fully functioning, turing complete
programming language with an interpreter</strong> written in
JavaScript. Tabloid currently only supports numbers, strings,
and booleans, but with these elements, you can write any
program you'd want to write. You can edit and run the program above, or
<a href="https://github.com/thesephist/tabloid">see how it works for yourself</a>.
</p>
<p>
Before making Tabloid, I also created a more <strike>useful and
well-designed</strike>${' '}<strong>boring and unpopular</strong>
programming language, called <a href="https://dotink.co/"
target="_blank">Ink</a>.
</p>
<h2>How much is there?</h2>
<p>
Here's the full list of non-standard keywords that Tabloid
currently uses, in addition to standard operators like <code
class="inline fixed block">PLUS</code> and <code class="inline
fixed block">MINUS</code>.
</p>
<ul>
<li><code class="inline fixed block">DISCOVER HOW TO...WITH</code> declare a function</li>
<li><code class="inline fixed block">WE SAID</code> begin a block scope</li>
<li><code class="inline fixed block">A OF B, C</code> call function A with arguments B, C</li>
<li><code class="inline fixed block">WHAT IF...LIES!</code> an if-else expression</li>
<li><code class="inline fixed block">END OF STORY</code> end a block scope</li>
<li><code class="inline fixed block">EXPERTS CLAIM...TO BE</code> declare or assign to a variable</li>
<li><code class="inline fixed block">YOU WON'T WANT TO MISS</code> print output</li>
<li><code class="inline fixed block">IS ACTUALLY</code> is equal to</li>
<li><code class="inline fixed block">BEATS / SMALLER THAN</code> greater than / less than</li>
<li><code class="inline fixed block">SHOCKING DEVELOPMENT</code> return from a function</li>
<li><code class="inline fixed block">PLEASE LIKE AND SUBSCRIBE</code> end of program</li>
</ul>
<footer>
<p>
Tabloid is a project by
Tabloid is an overnight hack by
<a href="https://thesephist.com/">@thesephist</a>,
website built with
<a href="https://github.com/thesephist/torus">Torus</a>