mirror of
https://github.com/Hilbis/Hilbish
synced 2025-07-01 16:52:03 +00:00
feat: add links for main page buttons
This commit is contained in:
parent
d73ae7fb99
commit
b02c521ff5
GPG Key ID:
904FC49417B44DCD
@ -1,35 +1,71 @@
|
|||||||
|
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(
|
||||||
|
[
|
||||||
|
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([attribute.class("gap-1 flex flex-col items-center")], [
|
html.div([attribute.class("gap-1 flex flex-col items-center")], [
|
||||||
html.span([attribute.class("flex flex-row items-center justify-center")], [
|
html.span(
|
||||||
|
[attribute.class("flex flex-row items-center justify-center")],
|
||||||
|
[
|
||||||
html.img([
|
html.img([
|
||||||
attribute.src("./hilbish-flower.png"),
|
attribute.src("./hilbish-flower.png"),
|
||||||
attribute.class("h-20")
|
attribute.class("h-20"),
|
||||||
]),
|
]),
|
||||||
html.p([attribute.class("text-4xl font-bold")], [element.text("Hilbish")]),
|
html.p([attribute.class("text-4xl font-bold")], [
|
||||||
|
element.text("Hilbish"),
|
||||||
|
]),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
html.p([attribute.class("text-4xl font-light")], [
|
||||||
|
element.text("Something Unique."),
|
||||||
]),
|
]),
|
||||||
html.p([attribute.class("text-4xl font-light")], [element.text("Something Unique.")]),
|
|
||||||
]),
|
]),
|
||||||
html.p([attribute.class("text-center")], [
|
html.p([attribute.class("text-center")], [
|
||||||
element.text("Hilbish is the new Moon-powered interactive shell for Lua fans!"),
|
element.text(
|
||||||
|
"Hilbish is the new Moon-powered interactive shell for Lua fans!",
|
||||||
|
),
|
||||||
html.br([]),
|
html.br([]),
|
||||||
element.text("Extensible, scriptable, configurable: All in Lua.")
|
element.text("Extensible, scriptable, configurable: All in Lua."),
|
||||||
]),
|
]),
|
||||||
html.div([attribute.class("flex flex-row gap-2 mt-2")], [
|
html.div([attribute.class("flex flex-row gap-2 mt-2")], [
|
||||||
button("Install", "bg-pink-500/30", ""),
|
button("Install", "bg-pink-500/30", conf.base_url_join("install")),
|
||||||
button("GitHub", "bg-stone-500/30", ""),
|
button(
|
||||||
|
"GitHub",
|
||||||
|
"bg-stone-500/30",
|
||||||
|
"https://github.com/Rosettea/Hilbish",
|
||||||
|
),
|
||||||
]),
|
]),
|
||||||
|
html.p([attribute.class("absolute bottom-4")], [
|
||||||
html.p([attribute.class("absolute bottom-4")], [element.text("Scroll for more")])
|
element.text("Scroll for more"),
|
||||||
]),
|
]),
|
||||||
|
],
|
||||||
|
),
|
||||||
html.div([attribute.class("text-center")], [
|
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.span(
|
||||||
html.div([attribute.class("flex flex-col justify-center items-center gap-6 mt-4")], [
|
[
|
||||||
|
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(
|
feature_section(
|
||||||
"The Moon-powered shell",
|
"The Moon-powered shell",
|
||||||
"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Lua-Logo.svg/2048px-Lua-Logo.svg.png",
|
"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Lua-Logo.svg/2048px-Lua-Logo.svg.png",
|
||||||
@ -37,20 +73,20 @@ pub fn page() -> element.Element(a) {
|
|||||||
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",
|
||||||
@ -58,75 +94,157 @@ pub fn page() -> element.Element(a) {
|
|||||||
"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(
|
||||||
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!")]),
|
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([attribute.class("flex flex-col items-center mt-4 gap-2")], [
|
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!")]),
|
html.p([attribute.class("md:w-3/6")], [
|
||||||
html.h2([attribute.class("text-3xl font-semibold")], [element.text("Featured Downloads")]),
|
element.text(
|
||||||
html.p([], [element.text("These are binary releases of Hilbish from GitHub. Install instructions are located at an INSTALL.md file.")]),
|
"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("mt-6 flex flex-row flex-wrap items-center justify-center gap-8")], [
|
),
|
||||||
|
]),
|
||||||
|
html.h2([attribute.class("text-3xl font-semibold")], [
|
||||||
|
element.text("Featured Downloads"),
|
||||||
|
]),
|
||||||
|
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.div([attribute.class("flex flex-col gap-2")], [
|
||||||
html.img([
|
html.img([
|
||||||
attribute.src("https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png"),
|
attribute.src(
|
||||||
attribute.class("h-36")
|
"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", "")
|
button("Linux (64-bit)", "bg-stone-500/30", ""),
|
||||||
]),
|
]),
|
||||||
html.div([attribute.class("flex flex-col gap-2")], [
|
html.div([attribute.class("flex flex-col gap-2")], [
|
||||||
html.img([
|
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.src(
|
||||||
attribute.class("h-36")
|
"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", "")
|
button("Windows (64-bit)", "bg-stone-500/30", ""),
|
||||||
]),
|
]),
|
||||||
html.div([attribute.class("flex flex-col gap-2 justify-center items-center")], [
|
html.div(
|
||||||
|
[
|
||||||
|
attribute.class(
|
||||||
|
"flex flex-col gap-2 justify-center items-center",
|
||||||
|
),
|
||||||
|
],
|
||||||
|
[
|
||||||
html.img([
|
html.img([
|
||||||
attribute.src("https://images.seeklogo.com/logo-png/38/2/apple-mac-os-logo-png_seeklogo-381401.png"),
|
attribute.src(
|
||||||
attribute.class("h-36")
|
"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", "")
|
button("MacOS (64-bit)", "bg-stone-500/30", ""),
|
||||||
]),
|
],
|
||||||
html.div([attribute.class("flex flex-col gap-2 justify-center items-center")], [
|
),
|
||||||
|
html.div(
|
||||||
|
[
|
||||||
|
attribute.class(
|
||||||
|
"flex flex-col gap-2 justify-center items-center",
|
||||||
|
),
|
||||||
|
],
|
||||||
|
[
|
||||||
html.img([
|
html.img([
|
||||||
attribute.src("https://images.seeklogo.com/logo-png/38/2/apple-mac-os-logo-png_seeklogo-381401.png"),
|
attribute.src(
|
||||||
attribute.class("h-36")
|
"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", "")
|
button("MacOS (ARM)", "bg-stone-500/30", ""),
|
||||||
])
|
],
|
||||||
])
|
),
|
||||||
])
|
],
|
||||||
|
),
|
||||||
]),
|
]),
|
||||||
|
],
|
||||||
|
),
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
fn feature_section(title: String, image: String, text: String, align: String) -> element.Element(a) {
|
fn feature_section(
|
||||||
|
title: String,
|
||||||
|
image: String,
|
||||||
|
text: String,
|
||||||
|
align: String,
|
||||||
|
) -> element.Element(a) {
|
||||||
let reverse = case align {
|
let reverse = case align {
|
||||||
"end" -> "flex-row-reverse"
|
"end" -> "flex-row-reverse"
|
||||||
_ -> ""
|
_ -> ""
|
||||||
}
|
}
|
||||||
// for tailwind to generate these styles
|
// for tailwind to generate these styles
|
||||||
// xl:items-end xl:items-start
|
// xl:items-end xl:items-start
|
||||||
html.div([attribute.class("flex flex-col gap-2 md:w-3/6 text-start xl:items-" <> align)], [
|
html.div(
|
||||||
|
[
|
||||||
|
attribute.class(
|
||||||
|
"flex flex-col gap-2 md:w-3/6 text-start xl:items-" <> align,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
[
|
||||||
html.h1([attribute.class("text-4xl font-semibold")], [element.text(title)]),
|
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)], [
|
html.div(
|
||||||
|
[
|
||||||
|
attribute.class(
|
||||||
|
"flex flex-row flex-wrap xl:flex-nowrap justify-center items-center gap-4 "
|
||||||
|
<> reverse,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
[
|
||||||
case image {
|
case image {
|
||||||
"" -> element.none()
|
"" -> element.none()
|
||||||
_ -> html.img([
|
_ ->
|
||||||
|
html.img([
|
||||||
attribute.src(image),
|
attribute.src(image),
|
||||||
attribute.class("h-32 rounded-md")
|
attribute.class("h-32 rounded-md"),
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
html.p([], [element.text(text)])
|
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)],
|
||||||
|
),
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user