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 */
|
||||
|
||||
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());
|
||||
}
|
||||
}
|
||||
/* Tabloid: the clickbait headline programming language */
|
||||
|
||||
/* tokenizer */
|
||||
|
||||
@ -538,7 +513,12 @@ class ReturnError {
|
||||
}
|
||||
|
||||
class Environment {
|
||||
constructor() {
|
||||
constructor(runtime) {
|
||||
/**
|
||||
* Runtime contains the following functions:
|
||||
* - print(s)
|
||||
*/
|
||||
this.runtime = runtime;
|
||||
this.scopes = [{}]; // begin with global scope
|
||||
}
|
||||
run(nodes) {
|
||||
@ -595,7 +575,6 @@ class Environment {
|
||||
}
|
||||
i --;
|
||||
}
|
||||
console.log(this.scopes[this.scopes.length - 1]);
|
||||
throw new Error(`Runtime error: Undefined variable "${node.val}"`);
|
||||
}
|
||||
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