thp-web/static/index.html

164 lines
7.3 KiB
HTML
Raw Normal View History

2023-06-25 12:59:18 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THP: Typed Hypertext Processor</title>
<!-- Tailwind output -->
<link href="/css/out.css" rel="stylesheet">
<link rel="stylesheet" href="/css/xcode-colors.css">
2023-06-25 12:59:18 +00:00
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&family=Fugaz+One&family=Inconsolata&family=Inter&display=swap" rel="stylesheet">
</head>
<body class="bg-c-bg text-c-text">
<div class="px-2 grid grid-cols-2 gap-4 relative">
<div class="text-center h-screen overflow-hidden sticky top-0 left-0">
<div class="rounded-md m-4 p-4 bg-c-bg-card"
2023-06-25 12:59:18 +00:00
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
>
<h1
class="py-8 font-display"
style="font-size: 10rem; text-shadow: 3px 3px 0 var(--c-bg)"
>
thp 23
</h1>
<h1 class="text-6xl text-center py-8 font-display"
style="text-shadow: 1px 1px 0 var(--c-bg)"
>
Typed Hypertext Processor
</h1>
<p class="text-2xl">
A <b>modern, consistent</b> typed language for PHP.
</p>
<button class="m-4 py-2 px-4 rounded font-display text-white
bg-c-purple hover:bg-c-purple-light transition-colors"
>
Get started
</button>
<a class="m-4 py-2 px-4 rounded font-display text-white
2023-06-25 12:59:18 +00:00
bg-c-purple hover:bg-c-purple-light transition-colors"
href="/learn/"
2023-06-25 12:59:18 +00:00
>
Learn
</a>
2023-06-25 12:59:18 +00:00
</div>
</div>
<div>
<div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card"
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
>
<h2 class="text-2xl mb-2">
A truly Static Type System
</h2>
<p>
thp keeps track of the datatype of all variables, and allows
you to have complex types and type inference.
</p>
<pre
class="p-2 my-2 rounded-md bg-c-bg language-misti"
2023-06-25 12:59:18 +00:00
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
>type <span class="token class-name">Person</span> = {
<span class="token class-name">String</span> name,
<span class="token class-name">String</span> lastName,
<span class="token class-name">Int</span> age,
2023-06-25 12:59:18 +00:00
}
<span class="token class-name">Option</span>[<span class="token class-name">Array</span>[<span class="token class-name">Person</span>]] persons = <span class="token class-name">PersonManager</span>::getAll()
2023-06-25 12:59:18 +00:00
print(<span class="token string">"There are {persons?.length ?? 0} persons registered!"</span>)</pre>
2023-06-25 12:59:18 +00:00
</div>
<div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card"
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
>
<h2 class="text-2xl mb-2">
Make the PHP stdlib <b>good</b>
</h2>
<p>
thp groups all global variables and function of PHP into modules,
to allow easy access and organization.
<br>
Function names, parameters and return types are improved, and you
can treat primitive types as objects.
</p>
<pre
class="p-2 my-2 rounded-md bg-c-bg language-misti"
2023-06-25 12:59:18 +00:00
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
><span class="token keyword">val</span> name = <span class="token string">"John Doe"</span>
2023-06-25 12:59:18 +00:00
<span class="token keyword">val</span> lastNamePos = name.indexOf(<span class="token string">"Doe"</span>) <span class="token comment">// Instead of `strpos`</span>
<span class="token keyword">val</span> letters = name.split(<span class="token string">""</span>) <span class="token comment">// Instead of `str_split` or `explode`</span>
2023-06-25 12:59:18 +00:00
<span class="token keyword">val</span> notALetters = letters.filter { $ != <span class="token string">"a"</span> } <span class="token comment">// Instead of `array_filter`</span></pre>
2023-06-25 12:59:18 +00:00
</div>
<div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card"
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
>
<h2 class="text-2xl mb-2">
Sound null safety & Pattern Matching
</h2>
<p>
All null values must be explicitly marked and handled,
avoiding many errors, via the <code>Option</code> ADT.
<br>
<br>
Also, functions that return <code>false</code> as
an error state now return an <code>Option</code>,
and exceptions return a <code>Result</code> instead.
</p>
<pre
class="p-2 my-2 rounded-md bg-c-bg language-misti"
2023-06-25 12:59:18 +00:00
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
><span class="token keyword">val</span> colors = <span class="token class-name">Array</span>(<span class="token string">"red"</span>, <span class="token string">"blue"</span>, <span class="token string">"green"</span>)
2023-06-25 12:59:18 +00:00
<span class="token keyword">val</span> response = match colors.search(<span class="token string">"purple"</span>) {
<span class="token class-name">Some</span>(_) -&gt; <span class="token string">"purple is a color!"</span>
<span class="token class-name">None</span> -&gt; <span class="token string">"purple is not a color"</span>
2023-06-25 12:59:18 +00:00
}
print(response)</pre>
2023-06-25 12:59:18 +00:00
<pre
class="p-2 my-2 rounded-md bg-c-bg language-misti"
2023-06-25 12:59:18 +00:00
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
>use <span class="token class-name">PDO</span>
use <span class="token class-name">Globals</span>::<span class="token class-name">Env</span>
2023-06-25 12:59:18 +00:00
<span class="token keyword">val</span> #(<span class="token class-name">Some</span>(dbUri), <span class="token class-name">Some</span>(dbUser), <span class="token class-name">Some</span>(dbPassword)) = #(
<span class="token class-name">Env</span>::get(<span class="token string">"DB_URI"</span>),
<span class="token class-name">Env</span>::get(<span class="token string">"DB_USERNAME"</span>),
<span class="token class-name">Env</span>::get(<span class="token string">"DB_PASSWORD"</span>),
2023-06-25 12:59:18 +00:00
)
else {
die(<span class="token string">"All 3 db environment variables must be set."</span>)
2023-06-25 12:59:18 +00:00
}
match <span class="token class-name">PDO</span>(dbUri, dbUser, dbPassword) {
<span class="token class-name">Ok</span>(connection) -&gt; { /* db operations */ }
<span class="token class-name">Err</span>(pdoException) -&gt; { /* handle exception */ }
}</pre>
2023-06-25 12:59:18 +00:00
</div>
</div>
</div>
</body>
</html>