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>

67
src/pages/index.astro
View File

@ -2,6 +2,7 @@
import BaseLayout from "../layouts/BaseLayout.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import CodeEditor from "../components/CodeEditor.astro"; import CodeEditor from "../components/CodeEditor.astro";
import HeroSection from "../components/HeroSection.astro";
--- ---
<BaseLayout> <BaseLayout>
@ -66,7 +67,11 @@ import CodeEditor from "../components/CodeEditor.astro";
height="14" height="14"
viewBox="0 0 54 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 <circle
cx="6" cx="6"
cy="6" cy="6"
@ -97,32 +102,10 @@ import CodeEditor from "../components/CodeEditor.astro";
</div> </div>
</div> </div>
<div> <HeroSection
<div class="bg-c-thp text-c-bg"> subtitle="THP is"
<h1 class="container mx-auto font-medium py-8 text-3xl"> title="typed"
THP is <span class="font-black">actually typed</span> thpcode={`
</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={`
Array[Int] numbers = [0, 1, 2, 3, 4, 5] Array[Int] numbers = [0, 1, 2, 3, 4, 5]
numbers.push("7") // Compile error: expected an Int, found a String numbers.push("7") // Compile error: expected an Int, found a String
@ -138,10 +121,32 @@ import CodeEditor from "../components/CodeEditor.astro";
val result = mock() val result = mock()
// Ok // Ok
val result = mock() as String val result = mock() as String
`} /> `}
</div> >
</div> THP enforces type safety at compile time and, at the programmer's
</div> 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> <script>
import { thp_highlighter, CodeJar } from "../lexer/highlighter"; import { thp_highlighter, CodeJar } from "../lexer/highlighter";