Begin working on web app
This commit is contained in:
Linus Lee
parent
c79c0e4fec
commit
030094045a
2
static/css/blocks.min.css
vendored
Normal file
2
static/css/blocks.min.css
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
body{--block-text-color:#222;--block-background-color:#fff;--block-accent-color:#00ae86;--block-shadow-color:#444}.block{display:block;color:var(--block-text-color);border:3px solid var(--block-text-color);border-radius:3px;padding:4px 8px;background:var(--block-background-color);font-weight:700;cursor:pointer;box-sizing:border-box;position:relative;top:-2px;left:-2px;transition:transform .2s;margin:8px 6px 10px;z-index:1;user-select:none;-webkit-user-select:none;-moz-user-select:none}.block.wrapper,.block.wrapper.inline{display:inline-block;padding:0}.block.wrapper>*{margin:0}.block:before{content:"";background:var(--block-background-color);border:3px solid var(--block-text-color);border-radius:3px;position:absolute;top:-3px;left:-3px;height:100%;width:100%;z-index:-1}.block:focus,.block:hover{transform:translate(2px,2px)}.block:after{content:"";display:block;background:var(--block-shadow-color);border:3px solid var(--block-text-color);border-radius:3px;height:100%;width:100%;position:absolute;top:3px;left:3px;right:0;z-index:-2;transition:transform .2s}.block:focus:after,.block:hover:after{transform:translate(-2px,-3px)}.block:active{color:var(--block-text-color);transform:translate(3px,3px)}.block:active:after{transform:translate(-4px,-4px)}.block:focus{outline:none}.block.fixed{cursor:auto}.block.fixed:active,.block.fixed:active:after,.block.fixed:active:before,.block.fixed:focus,.block.fixed:focus:after,.block.fixed:focus:before,.block.fixed:hover,.block.fixed:hover:after,.block.fixed:hover:before{transform:none}.block.accent{color:var(--block-background-color)}.block.accent,.block.accent:before{background:var(--block-accent-color)}.block.inline{display:inline-block;font-size:.75em;padding:0 6px;margin:3px 2px 1px 4px}.block.inline:after{top:-1px;left:-1px}.block.inline:focus,.block.inline:hover{transform:translate(1px,1px)}.block.inline:focus:after,.block.inline:hover:after{transform:translate(-1px,-1px)}.block.inline:active{transform:translate(2px,2px)}.block.round,.block.round:after,.block.round:before{border-radius:30px}.block.round:after{left:1px}
|
||||||
|
/*# sourceMappingURL=blocks.min.css.map */
|
||||||
34
static/css/main.css
Normal file
34
static/css/main.css
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
html {
|
||||||
|
--ff-mono: 'IBM Plex Mono', monospace;
|
||||||
|
--ff-sans: 'IBM Plex Sans', sans-serif;
|
||||||
|
--ff-tabloid: 'Alfa Slab One', sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* layout */
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
--block-accent-color: #e02345;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: calc(100% - 1.5em);
|
||||||
|
max-width: 840px;
|
||||||
|
margin: 1em auto;
|
||||||
|
font-family: var(--ff-sans);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-family: var(--ff-tabloid);
|
||||||
|
font-weight: normal;
|
||||||
|
color: var(--block-accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
font-family: var(--ff-mono);
|
||||||
|
}
|
||||||
15
static/index.html
Normal file
15
static/index.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Tabloid: the clickbait headline programming language</title>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/blocks.min.css">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>Oops, please turn on JavaScript to enjoy Tabloid :)</noscript>
|
||||||
|
<script src="/js/torus.min.js"></script>
|
||||||
|
<script src="/js/lang.js"></script>
|
||||||
|
<script src="/js/main.js"></script>
|
||||||
|
</body>
|
||||||
@ -1,29 +1,4 @@
|
|||||||
/* the clickbait headline programming language */
|
/* Tabloid: the clickbait headline programming language */
|
||||||
|
|
||||||
const prog = `
|
|
||||||
DISCOVER HOW TO factorial WITH n
|
|
||||||
WE SAID
|
|
||||||
WHAT IF n IS ACTUALLY 0
|
|
||||||
WE SAID
|
|
||||||
SHOCKING DEVELOPMENT 1
|
|
||||||
END OF STORY
|
|
||||||
LIES! WE SAID
|
|
||||||
SHOCKING DEVELOPMENT n MULTIPLY factorial OF n SUBTRACT 1
|
|
||||||
END OF STORY
|
|
||||||
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
|
|
||||||
|
|
||||||
PLEASE LIKE AND SUBSCRIBE
|
|
||||||
`
|
|
||||||
|
|
||||||
const Runtime = {
|
|
||||||
print(s) {
|
|
||||||
console.log(s.toString());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tokenizer */
|
/* tokenizer */
|
||||||
|
|
||||||
@ -538,7 +513,12 @@ class ReturnError {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class Environment {
|
class Environment {
|
||||||
constructor() {
|
constructor(runtime) {
|
||||||
|
/**
|
||||||
|
* Runtime contains the following functions:
|
||||||
|
* - print(s)
|
||||||
|
*/
|
||||||
|
this.runtime = runtime;
|
||||||
this.scopes = [{}]; // begin with global scope
|
this.scopes = [{}]; // begin with global scope
|
||||||
}
|
}
|
||||||
run(nodes) {
|
run(nodes) {
|
||||||
@ -595,7 +575,6 @@ class Environment {
|
|||||||
}
|
}
|
||||||
i --;
|
i --;
|
||||||
}
|
}
|
||||||
console.log(this.scopes[this.scopes.length - 1]);
|
|
||||||
throw new Error(`Runtime error: Undefined variable "${node.val}"`);
|
throw new Error(`Runtime error: Undefined variable "${node.val}"`);
|
||||||
}
|
}
|
||||||
case N.Assignment: {
|
case N.Assignment: {
|
||||||
@ -656,12 +635,3 @@ class Environment {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// main
|
|
||||||
try {
|
|
||||||
const tokens = tokenize(prog);
|
|
||||||
const nodes = new Parser(tokens).parse();
|
|
||||||
const env = new Environment();
|
|
||||||
env.run(nodes);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
59
static/js/main.js
Normal file
59
static/js/main.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
const prog = `
|
||||||
|
DISCOVER HOW TO factorial WITH n
|
||||||
|
WE SAID
|
||||||
|
WHAT IF n IS ACTUALLY 0
|
||||||
|
WE SAID
|
||||||
|
SHOCKING DEVELOPMENT 1
|
||||||
|
END OF STORY
|
||||||
|
LIES! WE SAID
|
||||||
|
SHOCKING DEVELOPMENT n MULTIPLY factorial OF n SUBTRACT 1
|
||||||
|
END OF STORY
|
||||||
|
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
|
||||||
|
|
||||||
|
PLEASE LIKE AND SUBSCRIBE
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Runtime = {
|
||||||
|
print(s) {
|
||||||
|
console.log(s.toString());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// main
|
||||||
|
try {
|
||||||
|
const tokens = tokenize(prog);
|
||||||
|
const nodes = new Parser(tokens).parse();
|
||||||
|
const env = new Environment(Runtime);
|
||||||
|
env.run(nodes);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
Component,
|
||||||
|
} = window.Torus;
|
||||||
|
|
||||||
|
class Editor extends Component {
|
||||||
|
init() {
|
||||||
|
this.val = '';
|
||||||
|
}
|
||||||
|
compose() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
compose() {
|
||||||
|
return jdom`<main>
|
||||||
|
<h1>Tabloid</h1>
|
||||||
|
<p class="subtitle">The Clickbait Headline Programming Language</p>
|
||||||
|
</main>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const app = new App();
|
||||||
|
document.body.appendChild(app.node);
|
||||||
1
static/js/torus.min.js
vendored
Normal file
1
static/js/torus.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user