Skip to content

Commit 6b0633c

Browse files
lollekololleko
committed
Landing Page
Created Landing Page Split online compiler and main page in 2 different webpack projects Improved Playground look & feel Added favicons Moved tstl compiler and Lua VM to web worker instances Added build and debug scripts
1 parent 1f1bcd6 commit 6b0633c

34 files changed

+553
-286
lines changed

‎src/assets/images/favicons/android-chrome-192x192.png renamed to ‎assets/images/favicons/android-chrome-192x192.png

File renamed without changes.

‎src/assets/images/favicons/android-chrome-512x512.png renamed to ‎assets/images/favicons/android-chrome-512x512.png

File renamed without changes.

‎src/assets/images/favicons/apple-touch-icon.png renamed to ‎assets/images/favicons/apple-touch-icon.png

File renamed without changes.

‎src/assets/images/favicons/browserconfig.xml renamed to ‎assets/images/favicons/browserconfig.xml

File renamed without changes.

‎src/assets/images/favicons/favicon-16x16.png renamed to ‎assets/images/favicons/favicon-16x16.png

File renamed without changes.

‎src/assets/images/favicons/favicon-32x32.png renamed to ‎assets/images/favicons/favicon-32x32.png

File renamed without changes.

‎src/assets/images/favicons/favicon.ico renamed to ‎assets/images/favicons/favicon.ico

File renamed without changes.

‎src/assets/images/favicons/mstile-150x150.png renamed to ‎assets/images/favicons/mstile-150x150.png

File renamed without changes.

‎src/assets/images/favicons/safari-pinned-tab.svg renamed to ‎assets/images/favicons/safari-pinned-tab.svg

File renamed without changes.

‎src/assets/images/favicons/site.webmanifest renamed to ‎assets/images/favicons/site.webmanifest

File renamed without changes.

‎src/assets/images/lua_logo.svg renamed to ‎assets/images/lua_logo.svg

File renamed without changes.

‎src/assets/images/lua_logo_edit.svg renamed to ‎assets/images/lua_logo_edit.svg

File renamed without changes.

‎src/assets/images/typescript_logo.svg renamed to ‎assets/images/typescript_logo.svg

File renamed without changes.

‎assets/layout/landing.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<header>
2+
<nav>
3+
<a href="https://github.com/Perryvw/TypescriptToLua/wiki">
4+
<div class="nav-item">
5+
Docs
6+
</div>
7+
</a>
8+
<a href="https://github.com/Perryvw/TypescriptToLua">
9+
<div class="nav-item">
10+
Code
11+
</div>
12+
</a>
13+
<a href="play.html">
14+
<div class="nav-item">
15+
Playground
16+
</div>
17+
</a>
18+
</nav>
19+
<div id="title"><span class="title-bold">Type</span>ScriptTo<span class="title-bold">Lua</span></div>
20+
<div id="headline">Write Lua in TypeScript</div>
21+
</header>
22+
<main>
23+
<div id="example">
24+
<div id="ts">
25+
<div class="example-item" id="ts-declarations"><b>// TS Declarations</b>
26+
27+
type Vector = [number, number, number];
28+
29+
declare class Unit {
30+
getLevel(): number;
31+
isEnemy(other: Unit): boolean;
32+
kill(): void;
33+
FindUnitsInRadius(radius: number): Unit[];
34+
}</div>
35+
<div class="example-item" id="ts-source"><b>// TS Source</b>
36+
37+
function onSpellStart(caster: Unit, targetLocation: Vector): void {
38+
const units = caster.FindUnitsInRadius(event.targetLocation, 500);
39+
const enemies = units.filter(unit => event.caster.isEnemy(unit));
40+
41+
for (const enemy of enemies) {
42+
enemy.kill();
43+
}
44+
}</div>
45+
</div>
46+
<div class="example-item" id="lua"><b>-- Lua Output</b>
47+
48+
function onSpellStart(caster, targetLocation)
49+
local units = FindUnitsInRadius(targetLocation, 500);
50+
local enemies = __TS__ArrayFilter(units, function(unit) return caster:isEnemy(unit) end);
51+
for _, enemy in ipairs(enemies) do
52+
do
53+
enemy:kill();
54+
end
55+
end
56+
end</div>
57+
</div>
58+
<div id="features">
59+
<div class="feature-item">
60+
<div class="feature-header">Extend existing APIs</div>
61+
This project is useful in any environment where Lua code is accepted,
62+
with the powerful option of simply declaring any existing API using TypeScript declaration files.
63+
</div>
64+
<div class="feature-item">
65+
<div class="feature-header">Type Safety</div>
66+
Large projects written in lua can become hard to maintain and make it easy to make mistakes.
67+
</div>
68+
<div class="feature-item">
69+
<div class="feature-header">IDE Support</div>
70+
Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.
71+
</div>
72+
</div>
73+
</main>

‎assets/layout/play.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div id="header">
2+
<div id="logo">
3+
<span class="logo-bold">Type</span>ScriptTo<span class="logo-bold">Lua</span> Playground
4+
</div>
5+
</div>
6+
<div id="content">
7+
<div id="editor-container">
8+
<div id="editor-ts" class="editor">
9+
</div>
10+
<div id="editor-lua" class="editor">
11+
</div>
12+
<div id="editor-output" class="editor">
13+
<div id="editor-output-linenumbers">
14+
>_
15+
</div>
16+
<div id="editor-output-content">
17+
18+
</div>
19+
</div>
20+
</div>
21+
</div>

‎assets/layout/template.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="apple-touch-icon" sizes="180x180" href="<%= require('../images/favicons/apple-touch-icon.png') %>">
8+
<link rel="icon" type="image/png" sizes="32x32" href="<%= require('../images/favicons/favicon-32x32.png') %>">
9+
<link rel="icon" type="image/png" sizes="16x16" href="<%= require('../images/favicons/favicon-16x16.png') %>">
10+
<link rel="manifest" href="<%= require('../images/favicons/site.webmanifest') %>">
11+
<link rel="mask-icon" href="<%= require('../images/favicons/safari-pinned-tab.svg') %>" color="#418fd6">
12+
<meta name="msapplication-TileColor" content="#2d89ef">
13+
<meta name="theme-color" content="#ffffff">
14+
<title><%= htmlWebpackPlugin.options.title %></title>
15+
</head>
16+
<body>
17+
<%= require('html-loader!./' + htmlWebpackPlugin.options.contentFile ) %>
18+
</body>
19+
</html>

‎assets/styles/_base.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import 'fonts';
2+
@import 'colors';
3+
4+
html, body {
5+
width: 100%; height: 100%;
6+
padding: 0px;
7+
margin: 0px;
8+
font-family: "Open Sans";
9+
background-color: $body-background;
10+
color: $body-font-color;
11+
}
12+
13+
div {
14+
box-sizing: border-box;
15+
}

‎assets/styles/_colors.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$lua-purple: rgb(30, 40, 111);
2+
$ts-blue: rgb(67, 119, 194);
3+
$body-background: #1e1e1e;
4+
$grey-accent: #333333;
5+
$body-font-color: #ededed;
6+
$card-color: #1d2021;

‎assets/styles/_fonts.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Raleway:300,400,700');
2+
3+
$console-fonts: "Lucida Console", Monaco, monospace;

‎assets/styles/landing.scss

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
@import 'base';
2+
3+
main, header {
4+
width: 900px;
5+
overflow: hidden;
6+
margin-left: auto;
7+
margin-right: auto;
8+
}
9+
10+
header {
11+
#title {
12+
margin-top: 10px;
13+
font-size: 72px;
14+
width: 100%;
15+
text-align: center;
16+
font-weight: 300;
17+
}
18+
19+
.title-bold {
20+
font-weight: 400;
21+
}
22+
23+
#headline {
24+
font-size: 24px;
25+
text-align: center;
26+
}
27+
28+
nav {
29+
margin-top: 10px;
30+
text-align: center;
31+
color: #5690fc;
32+
width: auto;
33+
font-size: 28px;
34+
font-weight: 400;
35+
36+
a {
37+
color: inherit;
38+
text-decoration: none;
39+
}
40+
41+
a:hover {
42+
color: $grey-accent;
43+
}
44+
45+
.nav-item {
46+
display: inline-block;
47+
margin-left: 20px;
48+
}
49+
}
50+
}
51+
52+
#features {
53+
margin-top: 10px;
54+
margin-bottom: 20px;
55+
display: flex;
56+
}
57+
58+
.feature-item {
59+
flex: 33%;
60+
padding: 10px;
61+
}
62+
63+
.feature-header {
64+
font-weight: 700;
65+
font-size: 24px;
66+
margin-bottom: 10px;
67+
}
68+
69+
.example-item {
70+
padding: (10px !important);
71+
white-space: pre;
72+
font-size: 12px;
73+
font-family: $console-fonts;
74+
}
75+
76+
#example #ts {
77+
display: flex;
78+
border-bottom: solid 2px #5690fc;
79+
}
80+
81+
#example {
82+
margin-top: 40px;
83+
width: 100%;
84+
85+
#ts-declarations, #ts-source {
86+
display: inline-block;
87+
overflow: hidden;
88+
}
89+
90+
#ts-declarations {
91+
flex: 39%;
92+
}
93+
94+
#ts-source {
95+
flex: 61%;
96+
border-left: solid 2px #5690fc;
97+
}
98+
}

‎assets/styles/play.scss

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
$header-height: 40px;
2+
$output-height: 120px;
3+
4+
@import 'base';
5+
6+
#header {
7+
width: 100%;
8+
height: $header-height;
9+
//border-bottom-left-radius: 10%;
10+
//border-bottom-right-radius: 60%;
11+
//background: linear-gradient(135deg, $ts-blue, $lua-purple);
12+
//-webkit-clip-path: polygon(100% 0, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0 0);
13+
//clip-path: polygon(100% 0, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0 0);
14+
background-color: $grey-accent;
15+
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
16+
z-index: 10;
17+
}
18+
19+
#logo {
20+
position: absolute;
21+
top: 7px;
22+
left: 10px;
23+
font-weight: 300;
24+
font-size: 20px;
25+
}
26+
27+
.logo-bold {
28+
font-weight: 400;
29+
}
30+
31+
#content {
32+
height: calc(100% - #{$header-height});
33+
}
34+
35+
#editor-container {
36+
width: 100%;
37+
height: 100%;
38+
display: flex;
39+
flex-wrap: wrap;
40+
41+
.editor {
42+
height: calc(100% - #{$output-height});
43+
background-color:$body-background;
44+
color: white;
45+
display: inline-block;
46+
overflow: hidden;
47+
border-bottom: 1px $grey-accent solid;
48+
}
49+
50+
#editor-ts {
51+
flex: 50%;
52+
}
53+
54+
#editor-lua {
55+
flex: 50%;
56+
}
57+
58+
#editor-output {
59+
height: $output-height;
60+
flex: 100%;
61+
overflow: scroll;
62+
font-family: $console-fonts;
63+
display: flex;
64+
}
65+
66+
#editor-output-linenumbers {
67+
width: 40px;
68+
height: 100%;
69+
border-right: 1px $grey-accent solid;
70+
padding-top: 10px;
71+
padding-left: 10px;
72+
padding-right: 10px;
73+
}
74+
75+
#editor-output-content {
76+
padding-top: 10px;
77+
padding-left: 10px;
78+
width: calc(100% - 20px);
79+
}
80+
}

0 commit comments

Comments
 (0)