Landing pagge
Araozu
commit
75c65c2ee4
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
static/css
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "docs",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"watch": "concurrently -k \"pnpm tailwind:watch\" \"serve ./static/ -l 3333\"",
|
||||
"tailwind:watch": "tailwindcss -i ./tailwind.css -o ./static/css/out.css --watch"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"concurrently": "^8.2.0",
|
||||
"serve": "^14.2.0",
|
||||
"tailwindcss": "^3.2.7"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,166 @@
|
|||
<!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="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 my-4 mx-4 p-4 bg-c-bg-card"
|
||||
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>
|
||||
|
||||
<button class="m-4 py-2 px-4 rounded font-display text-white
|
||||
bg-c-purple hover:bg-c-purple-light transition-colors"
|
||||
>
|
||||
Learn
|
||||
</button>
|
||||
</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"
|
||||
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
|
||||
><code>type Person = {
|
||||
String name,
|
||||
String lastName,
|
||||
Int age,
|
||||
}
|
||||
|
||||
Option[Array[Person]] persons = PersonManager::getAll()
|
||||
|
||||
print("There are {persons?.length ?? 0} persons registered!")
|
||||
</code></pre>
|
||||
|
||||
</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"
|
||||
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
|
||||
><code>val name = "John Doe"
|
||||
|
||||
val lastNamePos = name.indexOf("Doe") // Instead of `strpos`
|
||||
val letters = name.split("") // Instead of `str_split` or `explode`
|
||||
|
||||
val notALetters = letters.filter { $ != "a" } // Instead of `array_filter`
|
||||
</code></pre>
|
||||
|
||||
</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"
|
||||
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
|
||||
><code>val colors = Array("red", "blue", "green")
|
||||
|
||||
val response = match colors.search("purple") {
|
||||
Some(_) -> "purple is a color!"
|
||||
None -> "purple is not a color"
|
||||
}
|
||||
|
||||
print(response)
|
||||
</code></pre>
|
||||
|
||||
<pre
|
||||
class="p-2 my-2 rounded-md bg-c-bg"
|
||||
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
|
||||
><code>use PDO
|
||||
use Globals::Env
|
||||
|
||||
val #(Some(dbUri), Some(dbUser), Some(dbPassword)) = #(
|
||||
Env::get("DB_URI"),
|
||||
Env::get("DB_USERNAME"),
|
||||
Env::get("DB_PASSWORD"),
|
||||
)
|
||||
else {
|
||||
die("All 3 db environment variables must be set.")
|
||||
}
|
||||
|
||||
match PDO(dbUri, dbUser, dbPassword) {
|
||||
Ok(connection) -> { /* db operations */ }
|
||||
Err(pdoException) -> { /* handle exception */ }
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./static/*.html"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"c-bg": "var(--c-bg)",
|
||||
"c-text": "var(--c-text)",
|
||||
"c-purple": "var(--c-purple)",
|
||||
"c-purple-light": "var(--c-purple-light)",
|
||||
"c-box-shadow": "var(--c-box-shadow)",
|
||||
"c-bg-card": "var(--c-bg-card)",
|
||||
"c-ping": "var(--c-pink)"
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
"mono": ["Inconsolata", "Iosevka", "monospace"],
|
||||
"display": ["'Fugaz One'", "Inter", "'Fira Sans Extra Condensed'", "sans-serif"],
|
||||
"body": ["'Fira Sans Extra Condensed'", "Inter", "sans-serif"],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--c-bg: #121212;
|
||||
--c-text: #fdfffc;
|
||||
--c-purple: #7F669D;
|
||||
--c-purple-light: #BA94D1;
|
||||
--c-box-shadow: #FBFACD;
|
||||
--c-bg-card: #374259;
|
||||
--c-pink: #AE508D;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--c-bg: #F7FFE5;
|
||||
--c-text: #121212;
|
||||
--c-purple: #374259;
|
||||
--c-purple-light: #BA94D1;
|
||||
--c-box-shadow: #374259;
|
||||
--c-bg-card: #FFB4B4;
|
||||
--c-pink: #374259;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Fira Sans Extra Condensed', Inter, sans-serif;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: Inconsolata, monospace;
|
||||
}
|
||||
Loading…
Reference in New Issue