sammyette/Hilbish
2
2
Fork 0
mirror of https://github.com/Hilbis/Hilbish synced 2025-07-01 16:52:03 +00:00
Code Issues Releases Wiki Activity

feat: add links for main page buttons

Browse Source
This commit is contained in:
sammyette 2025-06-13 20:23:21 -04:00
parent d73ae7fb99
commit b02c521ff5
Signed by: sammyette
GPG Key ID: 904FC49417B44DCD
1 changed files with 233 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

348
website/src/pages/index.gleam
View File

@ -1,132 +1,250 @@
import conf
import lustre/attribute import lustre/attribute
import lustre/element import lustre/element
import lustre/element/html import lustre/element/html
pub fn page() -> element.Element(a) { pub fn page() -> element.Element(a) {
html.main([attribute.class("flex flex-col gap-4 mx-4")], [ html.main([attribute.class("flex flex-col gap-4 mx-4")], [
html.div([attribute.class("border-b border-b-zinc-300 gap-3 -mx-4 p-2 h-screen bg-radial-[at_100%_100%] from-pink-500 to-stone-50 dark:to-neutral-950 to-35% flex flex-col items-center justify-center")], [ html.div(
html.div([attribute.class("gap-1 flex flex-col items-center")], [ [
html.span([attribute.class("flex flex-row items-center justify-center")], [ attribute.class(
html.img([ "border-b border-b-zinc-300 gap-3 -mx-4 p-2 h-screen bg-radial-[at_100%_100%] from-pink-500 to-stone-50 dark:to-neutral-950 to-35% flex flex-col items-center justify-center",
attribute.src("./hilbish-flower.png"), ),
attribute.class("h-20") ],
]), [
html.p([attribute.class("text-4xl font-bold")], [element.text("Hilbish")]), html.div([attribute.class("gap-1 flex flex-col items-center")], [
]), html.span(
html.p([attribute.class("text-4xl font-light")], [element.text("Something Unique.")]), [attribute.class("flex flex-row items-center justify-center")],
]), [
html.p([attribute.class("text-center")], [ html.img([
element.text("Hilbish is the new Moon-powered interactive shell for Lua fans!"), attribute.src("./hilbish-flower.png"),
html.br([]), attribute.class("h-20"),
element.text("Extensible, scriptable, configurable: All in Lua.") ]),
]), html.p([attribute.class("text-4xl font-bold")], [
html.div([attribute.class("flex flex-row gap-2 mt-2")], [ element.text("Hilbish"),
button("Install", "bg-pink-500/30", ""), ]),
button("GitHub", "bg-stone-500/30", ""), ],
]), ),
html.p([attribute.class("text-4xl font-light")], [
html.p([attribute.class("absolute bottom-4")], [element.text("Scroll for more")]) element.text("Something Unique."),
]), ]),
html.div([attribute.class("text-center")], [ ]),
html.span([attribute.class("rounded-md backdrop-blur-md bg-pink-500/20 p-2 text-xs font-light")], [element.text("Feature Overview")]), html.p([attribute.class("text-center")], [
html.div([attribute.class("flex flex-col justify-center items-center gap-6 mt-4")], [ element.text(
feature_section( "Hilbish is the new Moon-powered interactive shell for Lua fans!",
"The Moon-powered shell", ),
"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Lua-Logo.svg/2048px-Lua-Logo.svg.png", html.br([]),
"Hilbish makes use of the Lua programming language for interactive and config scripting. element.text("Extensible, scriptable, configurable: All in Lua."),
]),
html.div([attribute.class("flex flex-row gap-2 mt-2")], [
button("Install", "bg-pink-500/30", conf.base_url_join("install")),
button(
"GitHub",
"bg-stone-500/30",
"https://github.com/Rosettea/Hilbish",
),
]),
html.p([attribute.class("absolute bottom-4")], [
element.text("Scroll for more"),
]),
],
),
html.div([attribute.class("text-center")], [
html.span(
[
attribute.class(
"rounded-md backdrop-blur-md bg-pink-500/20 p-2 text-xs font-light",
),
],
[element.text("Feature Overview")],
),
html.div(
[
attribute.class(
"flex flex-col justify-center items-center gap-6 mt-4",
),
],
[
feature_section(
"The Moon-powered shell",
"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Lua-Logo.svg/2048px-Lua-Logo.svg.png",
"Hilbish makes use of the Lua programming language for interactive and config scripting.
If you write Lua on a regular basis, Hilbish will be the perfect resident in your terminal. If you write Lua on a regular basis, Hilbish will be the perfect resident in your terminal.
You can still use shell script, but Lua takes the spotlight (or the moonlight..)", You can still use shell script, but Lua takes the spotlight (or the moonlight..)",
"start" "start",
), ),
feature_section( feature_section(
"Modern, Helpful Interactive Features", "Modern, Helpful Interactive Features",
"https://safe.saya.moe/osR0bplExBC0.png", "https://safe.saya.moe/osR0bplExBC0.png",
"Graphical TUI history, sensible tab completions, elegantly refreshing prompts, name it all and Hilbish either has it or it's 1 suggestion or 1 script away from being possible. "Graphical TUI history, sensible tab completions, elegantly refreshing prompts, name it all and Hilbish either has it or it's 1 suggestion or 1 script away from being possible.
Everything present in Hilbish is meant to enhance your interactive shell experience.", Everything present in Hilbish is meant to enhance your interactive shell experience.",
"end" "end",
), ),
feature_section( feature_section(
"Sensible, Friendly Defaults", "Sensible, Friendly Defaults",
"https://safe.saya.moe/7ze8NQVPD9vO.png", "https://safe.saya.moe/7ze8NQVPD9vO.png",
"Hilbish's default config makes a simple but presentable showcase of its Lua API and a few of its features.", "Hilbish's default config makes a simple but presentable showcase of its Lua API and a few of its features.",
"start" "start",
), ),
feature_section( feature_section(
"Truly Make It Yours", "Truly Make It Yours",
"", "",
"Many things about Hilbish are designed to be changed and swapped out. "Many things about Hilbish are designed to be changed and swapped out.
If you want to make use of a Lua derivative in your interactive use (like Fennel) instead of If you want to make use of a Lua derivative in your interactive use (like Fennel) instead of
Lua, that can be done!", Lua, that can be done!",
"end" "end",
) ),
]), ],
]), ),
html.div([attribute.class("text-center bg-neutral-100 dark:bg-neutral-900 -mx-4 p-4")], [ ]),
html.span([attribute.class("rounded-md backdrop-blur-md bg-blue-500/20 p-2 text-xs font-light")], [element.text("Download It Now!")]), html.div(
html.div([attribute.class("flex flex-col items-center mt-4 gap-2")], [ [
html.p([attribute.class("md:w-3/6")], [element.text("To find out all that Hilbish can do, you should just try it out! It's officially available on Linux, MacOS, Windows, and probably builds on anything Go is available on!")]), attribute.class(
html.h2([attribute.class("text-3xl font-semibold")], [element.text("Featured Downloads")]), "text-center bg-neutral-100 dark:bg-neutral-900 -mx-4 p-4",
html.p([], [element.text("These are binary releases of Hilbish from GitHub. Install instructions are located at an INSTALL.md file.")]), ),
html.div([attribute.class("mt-6 flex flex-row flex-wrap items-center justify-center gap-8")], [ ],
html.div([attribute.class("flex flex-col gap-2")], [ [
html.img([ html.span(
attribute.src("https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png"), [
attribute.class("h-36") attribute.class(
]), "rounded-md backdrop-blur-md bg-blue-500/20 p-2 text-xs font-light",
button("Linux (64-bit)", "bg-stone-500/30", "") ),
]), ],
html.div([attribute.class("flex flex-col gap-2")], [ [element.text("Download It Now!")],
html.img([ ),
attribute.src("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg/2321px-Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg.png"), html.div([attribute.class("flex flex-col items-center mt-4 gap-2")], [
attribute.class("h-36") html.p([attribute.class("md:w-3/6")], [
]), element.text(
button("Windows (64-bit)", "bg-stone-500/30", "") "To find out all that Hilbish can do, you should just try it out! It's officially available on Linux, MacOS, Windows, and probably builds on anything Go is available on!",
]), ),
html.div([attribute.class("flex flex-col gap-2 justify-center items-center")], [ ]),
html.img([ html.h2([attribute.class("text-3xl font-semibold")], [
attribute.src("https://images.seeklogo.com/logo-png/38/2/apple-mac-os-logo-png_seeklogo-381401.png"), element.text("Featured Downloads"),
attribute.class("h-36") ]),
]), html.p([], [
button("MacOS (64-bit)", "bg-stone-500/30", "") element.text(
]), "These are binary releases of Hilbish from GitHub. Install instructions are located at an INSTALL.md file.",
html.div([attribute.class("flex flex-col gap-2 justify-center items-center")], [ ),
html.img([ ]),
attribute.src("https://images.seeklogo.com/logo-png/38/2/apple-mac-os-logo-png_seeklogo-381401.png"), html.div(
attribute.class("h-36") [
]), attribute.class(
button("MacOS (ARM)", "bg-stone-500/30", "") "mt-6 flex flex-row flex-wrap items-center justify-center gap-8",
]) ),
]) ],
]) [
]), html.div([attribute.class("flex flex-col gap-2")], [
]) html.img([
attribute.src(
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png",
),
attribute.class("h-36"),
]),
button("Linux (64-bit)", "bg-stone-500/30", ""),
]),
html.div([attribute.class("flex flex-col gap-2")], [
html.img([
attribute.src(
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg/2321px-Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg.png",
),
attribute.class("h-36"),
]),
button("Windows (64-bit)", "bg-stone-500/30", ""),
]),
html.div(
[
attribute.class(
"flex flex-col gap-2 justify-center items-center",
),
],
[
html.img([
attribute.src(
"https://images.seeklogo.com/logo-png/38/2/apple-mac-os-logo-png_seeklogo-381401.png",
),
attribute.class("h-36"),
]),
button("MacOS (64-bit)", "bg-stone-500/30", ""),
],
),
html.div(
[
attribute.class(
"flex flex-col gap-2 justify-center items-center",
),
],
[
html.img([
attribute.src(
"https://images.seeklogo.com/logo-png/38/2/apple-mac-os-logo-png_seeklogo-381401.png",
),
attribute.class("h-36"),
]),
button("MacOS (ARM)", "bg-stone-500/30", ""),
],
),
],
),
]),
],
),
])
} }
fn feature_section(title: String, image: String, text: String, align: String) -> element.Element(a) { fn feature_section(
let reverse = case align { title: String,
"end" -> "flex-row-reverse" image: String,
_ -> "" text: String,
} align: String,
// for tailwind to generate these styles ) -> element.Element(a) {
// xl:items-end xl:items-start let reverse = case align {
html.div([attribute.class("flex flex-col gap-2 md:w-3/6 text-start xl:items-" <> align)], [ "end" -> "flex-row-reverse"
html.h1([attribute.class("text-4xl font-semibold")], [element.text(title)]), _ -> ""
html.div([attribute.class("flex flex-row flex-wrap xl:flex-nowrap justify-center items-center gap-4 " <> reverse)], [ }
case image { // for tailwind to generate these styles
"" -> element.none() // xl:items-end xl:items-start
_ -> html.img([ html.div(
attribute.src(image), [
attribute.class("h-32 rounded-md") attribute.class(
]) "flex flex-col gap-2 md:w-3/6 text-start xl:items-" <> align,
}, ),
html.p([], [element.text(text)]) ],
]) [
]) html.h1([attribute.class("text-4xl font-semibold")], [element.text(title)]),
html.div(
[
attribute.class(
"flex flex-row flex-wrap xl:flex-nowrap justify-center items-center gap-4 "
<> reverse,
),
],
[
case image {
"" -> element.none()
_ ->
html.img([
attribute.src(image),
attribute.class("h-32 rounded-md"),
])
},
html.p([], [element.text(text)]),
],
),
],
)
} }
fn button(text: String, color: String, link: String) -> element.Element(a) { fn button(text: String, color: String, link: String) -> element.Element(a) {
html.a([attribute.href(link), attribute.target("_blank")], [ html.a([attribute.href(link), attribute.target("_blank")], [
html.button([attribute.class(color <> " rounded-md backdrop-blur-md py-2 px-4 font-semibold")], [element.text(text)]) html.button(
]) [
attribute.class(
color <> " rounded-md backdrop-blur-md py-2 px-4 font-semibold",
),
],
[element.text(text)],
),
])
} }