fernando
/
thp-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Component for Hero sections

master
Araozu 2024-06-28 21:37:20 -05:00
parent 1714d7ee76
commit b32329935c
2 changed files with 176 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/HeroSection.astro Normal file
View File

@ -0,0 +1,36 @@
---
import CodeEditor from "./CodeEditor.astro";
const { title, thpcode, subtitle } = Astro.props;
if (!subtitle) {
throw new Error("subtitle is required");
}
if (!thpcode) {
throw new Error("thpcode is required");
}
if (!title) {
throw new Error("title is required");
}
---
<div>
<div class="bg-c-thp text-c-bg">
<h1 class="container mx-auto font-medium py-8 text-3xl">
{subtitle} <span class="font-black">{title}</span>
</h1>
</div>
<div class="container mx-auto lg:grid lg:grid-cols-2 gap-4">
<div class="px-8 py-12 flex h-full items-center">
<div>
<slot />
</div>
</div>
<div>
<CodeEditor thpcode={thpcode} />
</div>
</div>
</div>

69
src/pages/index.astro
View File

@ -2,6 +2,7 @@
import BaseLayout from "../layouts/BaseLayout.astro";
import Navbar from "../components/Navbar.astro";
import CodeEditor from "../components/CodeEditor.astro";
import HeroSection from "../components/HeroSection.astro";
---
<BaseLayout>
@ -66,7 +67,11 @@ import CodeEditor from "../components/CodeEditor.astro";
height="14"
viewBox="0 0 54 14"
>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<g
fill="none"
fill-rule="evenodd"
transform="translate(1 1)"
>
<circle
cx="6"
cy="6"
@ -97,32 +102,10 @@ import CodeEditor from "../components/CodeEditor.astro";
</div>
</div>
<div>
<div class="bg-c-thp text-c-bg">
<h1 class="container mx-auto font-medium py-8 text-3xl">
THP is <span class="font-black">actually typed</span>
</h1>
</div>
<div class="container mx-auto lg:grid lg:grid-cols-2 gap-4">
<div class="px-8 py-12 flex h-full items-center">
<div>
THP enforces type safety at compile time and, at the programmer's
request, at runtime.
<br>
<br>
Everything has a type.
There are generics.
No implicit type conversions. No <code>mixed</code>.
No client <code>Any</code> .Type inference included.
<br>
<br>
All possible checks are made at compile time. Runtime checks
have a small performance penalty.
</div>
</div>
<div>
<CodeEditor thpcode={`
<HeroSection
subtitle="THP is"
title="typed"
thpcode={`
Array[Int] numbers = [0, 1, 2, 3, 4, 5]
numbers.push("7") // Compile error: expected an Int, found a String
@ -138,10 +121,32 @@ import CodeEditor from "../components/CodeEditor.astro";
val result = mock()
// Ok
val result = mock() as String
`} />
</div>
</div>
</div>
`}
>
THP enforces type safety at compile time and, at the programmer's
request, at runtime.
<br />
<br />
Everything has a type. There are generics. No implicit type conversions.
No <code>mixed</code>. No client <code>Any</code> .Type inference included.
<br />
<br />
All possible checks are made at compile time. Runtime checks have a small
performance penalty.
</HeroSection>
<HeroSection
subtitle="THP is"
title="match"
thpcode={`
match value
case A
{
}
`}
>
:D (carita feliz)
</HeroSection>
<script>
import { thp_highlighter, CodeJar } from "../lexer/highlighter";
@ -172,7 +177,7 @@ case Cat(name, lives) {
);
</script>
<script>
import {highlightOnDom} from "../layouts/thpHighlighter";
import { highlightOnDom } from "../layouts/thpHighlighter";
document.addEventListener("DOMContentLoaded", highlightOnDom);
</script>
</BaseLayout>