Landing pagge
This commit is contained in:
Araozu
commit
75c65c2ee4
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
static/css
|
||||||
18
package.json
Normal file
18
package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
1228
pnpm-lock.yaml
Normal file
1228
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
166
static/index.html
Normal file
166
static/index.html
Normal file
@ -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>
|
||||||
24
tailwind.config.js
Normal file
24
tailwind.config.js
Normal file
@ -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: [],
|
||||||
|
}
|
||||||
|
|
||||||
33
tailwind.css
Normal file
33
tailwind.css
Normal file
@ -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
Block a user