Skip to content

Commit

Permalink
Replace if-else statement with ternary operator for title in default …
Browse files Browse the repository at this point in the history 
…layout
  • Loading branch information
@Nitrrine
Nitrrine committed Nov 3, 2024
1 parent f9526b1 commit b4ce210
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 181 deletions.
204 changes: 103 additions & 101 deletions src/layouts/Default.astro
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,109 @@
---
import "../components/Logotype.astro"
import Logotype from "../components/Logotype.astro"
import VitalLink from "../components/VitalLink.astro"
import { MessageSquare, Github } from "lucide-astro"
import "../styles/global.css"
import SizeAwareLogo from "../components/SizeAwareLogo.astro"
let { title } = Astro.props
if (title === "" || title === undefined) {
title = "Vital"
} else {
title += " | Vital"
}
import "../components/Logotype.astro";
import Logotype from "../components/Logotype.astro";
import VitalLink from "../components/VitalLink.astro";
import { MessageSquare, Github } from "lucide-astro";
import "../styles/global.css";
import SizeAwareLogo from "../components/SizeAwareLogo.astro";
const { title } = Astro.props;
---

<!doctype html>
<html class="h-full bg-brand-background text-brand-text">
<head>
<title>{title}</title>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="title" content="Home - Vital" />
<meta
name="description"
content="Alternative to the Essential mod with world hosting features, free cosmetics, and much more!"
/>
<meta name="keywords" content="minecraft,notessential,vital,bulb,ward,text,fabric,modpack" />
<meta name="robots" content="index" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" />
<meta name="author" content="Vital" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Vital" />
<meta property="og:url" content="https://usevital.github.io" />
<meta property="og:image" content="https://usevital.github.io/og.png" />
<meta property="twitter:card" content="summary_large_image" />
<meta
property="og:description"
content="Alternative to the Essential mod with world hosting features, free cosmetics, and much more!"
/>
</head>
<body class="flex h-dvh flex-col">
<nav class="flex w-full flex-row justify-center border-b">
<div class="flex w-full max-w-[80rem] flex-row items-center justify-center gap-4 px-6 sm:justify-between">
<div class="grid w-full grid-cols-4 border-x">
<a
href="https://modrinth.com/modpack/vital"
class="centre flex h-20 bg-brand-purple p-6 transition active:bg-brand-purple-dark">
<SizeAwareLogo fill={true} type="vital" />
</a>
<a
href="https://notessential.blurry.gay"
class="centre h-20 border-l bg-brand-blue p-6 transition active:bg-brand-blue-dark">
<SizeAwareLogo fill={true} type="ne" />
</a>
<a
href="https://ward.worldwidepixel.ca"
class="centre h-20 border-l bg-brand-green p-6 transition active:bg-brand-green-dark">
<SizeAwareLogo fill={true} type="ward" />
</a>
<a class="centre h-20 cursor-not-allowed border-l bg-brand-rose p-6 transition active:bg-brand-rose-dark">
<SizeAwareLogo fill={true} type="bulb" />
<span
class="text-md absolute rotate-6 select-none rounded-lg bg-brand-rose-dark bg-opacity-60 p-1 sm:text-lg"
>STAY TUNED</span
>
</a>
</div>
</div>
</nav>
<main class="flex w-full flex-auto flex-row justify-center">
<div class="w-full max-w-[80rem] p-6">
<slot />
</div>
</main>
<footer class="flex w-full flex-row justify-center border-t">
<div class="w-full max-w-[80rem] px-6">
<div class="grid w-full grid-cols-1 border-x sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col gap-3 bg-brand-purple-dark p-6 [&>*]:fill-brand-purple-light">
<Logotype fill={true} />
<span class="flex flex-row flex-wrap items-center gap-1 text-brand-text-secondary">
This page is
<VitalLink showIcon={true} external={true} to="https://github.com/usevital/usevital.github.io">
open source.
</VitalLink>
</span>
</div>
<div class="flex flex-col gap-2 border-l bg-brand-blue-dark p-6">
<span class="font-bold">About</span>
We're a group of cool people making cool things.
</div>
<div class="flex flex-col gap-2 border-l bg-brand-green-dark p-6">
<span class="font-bold">Interact</span>
<VitalLink external={true} to="https://discord.gg/wncdz7e8jy"><MessageSquare />Discord</VitalLink>
<VitalLink external={true} to="https://github.com/usevital"><Github />GitHub</VitalLink>
</div>
<div class="flex flex-col gap-2 border-l bg-brand-rose-dark p-6">
<span class="font-bold">Extra</span>
<span>&copy; 2024 Vital contributors</span>
<span>Site by WorldWidePixel</span>
</div>
</div>
</div>
</footer>
</body>
<head>
<title>{title ? title + " | Vital" : "Vital"}</title>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="title" content="Home - Vital" />
<meta
name="description"
content="Alternative to the Essential mod with world hosting features, free cosmetics, and much more!"
/>
<meta name="keywords" content="minecraft,notessential,vital,bulb,ward,text,fabric,modpack" />
<meta name="robots" content="index" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" />
<meta name="author" content="Vital" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Vital" />
<meta property="og:url" content="https://usevital.github.io" />
<meta property="og:image" content="https://usevital.github.io/og.png" />
<meta property="twitter:card" content="summary_large_image" />
<meta
property="og:description"
content="Alternative to the Essential mod with world hosting features, free cosmetics, and much more!"
/>
</head>
<body class="flex h-dvh flex-col">
<nav class="flex w-full flex-row justify-center border-b">
<div class="flex w-full max-w-[80rem] flex-row items-center justify-center gap-4 px-6 sm:justify-between">
<div class="grid w-full grid-cols-4 border-x">
<a
href="https://modrinth.com/modpack/vital"
class="centre flex h-20 bg-brand-purple p-6 transition active:bg-brand-purple-dark">
<SizeAwareLogo fill={true} type="vital" />
</a>
<a
href="https://notessential.blurry.gay"
class="centre h-20 border-l bg-brand-blue p-6 transition active:bg-brand-blue-dark">
<SizeAwareLogo fill={true} type="ne" />
</a>
<a
href="https://ward.worldwidepixel.ca"
class="centre h-20 border-l bg-brand-green p-6 transition active:bg-brand-green-dark">
<SizeAwareLogo fill={true} type="ward" />
</a>
<a
class="centre h-20 cursor-not-allowed border-l bg-brand-rose p-6 transition active:bg-brand-rose-dark">
<SizeAwareLogo fill={true} type="bulb" />
<span
class="text-md absolute rotate-6 select-none rounded-lg bg-brand-rose-dark bg-opacity-60 p-1 sm:text-lg"
>STAY TUNED</span
>
</a>
</div>
</div>
</nav>
<main class="flex w-full flex-auto flex-row justify-center">
<div class="w-full max-w-[80rem] p-6">
<slot />
</div>
</main>
<footer class="flex w-full flex-row justify-center border-t">
<div class="w-full max-w-[80rem] px-6">
<div class="grid w-full grid-cols-1 border-x sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col gap-3 bg-brand-purple-dark p-6 [&>*]:fill-brand-purple-light">
<Logotype fill={true} />
<span class="flex flex-row flex-wrap items-center gap-1 text-brand-text-secondary">
This page is
<VitalLink
showIcon={true}
external={true}
to="https://github.com/usevital/usevital.github.io">
open source.
</VitalLink>
</span>
</div>
<div class="flex flex-col gap-2 border-l bg-brand-blue-dark p-6">
<span class="font-bold">About</span>
We're a group of cool people making cool things.
</div>
<div class="flex flex-col gap-2 border-l bg-brand-green-dark p-6">
<span class="font-bold">Interact</span>
<VitalLink external={true} to="https://discord.gg/wncdz7e8jy"
><MessageSquare />Discord</VitalLink
>
<VitalLink external={true} to="https://github.com/usevital"><Github />GitHub</VitalLink>
</div>
<div class="flex flex-col gap-2 border-l bg-brand-rose-dark p-6">
<span class="font-bold">Extra</span>
<span>&copy; 2024 Vital contributors</span>
<span>Site by WorldWidePixel</span>
</div>
</div>
</div>
</footer>
</body>
</html>
180 changes: 100 additions & 80 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,106 @@
---
import Button from "../components/Button.astro"
import Logo from "../components/Logo.astro"
import VitalLink from "../components/VitalLink.astro"
import Default from "../layouts/Default.astro"
import Button from "../components/Button.astro";
import Logo from "../components/Logo.astro";
import VitalLink from "../components/VitalLink.astro";
import Default from "../layouts/Default.astro";
---

<Default>
<div class="flex h-full flex-col justify-center gap-2">
<div class="flex w-full flex-col">
<div class="flex w-full flex-col gap-2 border-b bg-gradient-to-bl from-black to-brand-purple-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">Vital<Logo type="vital" /></span>
<span
>Vital is a modpack designed as an alternative to Essential (and OptiFine). It includes the majority of
Essential and OptiFine's features, including but not limited to: world hosting, cosmetics, many resource pack
features, shaders, and a major improvement in rendering and logic performance.</span
>
<div class="flex flex-row flex-wrap items-center gap-2">
<Button to="https://modrinth.com/modpack/vital/" external={true} showIcon={true}> Modrinth </Button>
<Button to="https://github.com/intergrav/vital/" external={true} showIcon={true}> GitHub </Button>
</div>
</div>
<div class="flex w-full flex-col gap-2 border-b bg-gradient-to-bl from-black to-brand-blue-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">NotEssential<Logo type="ne" /></span>
<span>NotEssential is a website which links to mods that can substitute Essential's features.</span>
<div class="flex h-full flex-col justify-center gap-2">
<div class="flex w-full flex-col">
<div class="flex w-full flex-col gap-2 border-b bg-gradient-to-bl from-black to-brand-purple-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">Vital<Logo type="vital" /></span>
<span
>Vital is a modpack designed as an alternative to Essential (and OptiFine). It includes the majority
of Essential and OptiFine's features, including but not limited to: world hosting, cosmetics, many
resource pack features, shaders, and a major improvement in rendering and logic performance.</span
>
<div class="flex flex-row flex-wrap items-center gap-2">
<Button to="https://modrinth.com/modpack/vital/" external={true} showIcon={true}> Modrinth </Button>
<Button to="https://github.com/intergrav/vital/" external={true} showIcon={true}> GitHub </Button>
</div>
</div>
<div class="flex w-full flex-col gap-2 border-b bg-gradient-to-bl from-black to-brand-blue-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">NotEssential<Logo type="ne" /></span>
<span>NotEssential is a website which links to mods that can substitute Essential's features.</span>

<div class="flex flex-row flex-wrap items-center gap-2">
<Button to="https://notessential.blurry.gay/" classList="bg-brand-blue" external={true} showIcon={true}>
Visit
</Button>
<Button
to="https://usevital.github.io/notessential-gallery/"
classList="bg-brand-blue"
external={true}
showIcon={true}>
Gallery
</Button>
<Button
to="https://github.com/usevital/notessential"
classList="bg-brand-blue"
external={true}
showIcon={true}>
GitHub
</Button>
</div>
</div>
<div class="grid w-full grid-cols-1 border-b md:grid-cols-2">
<div
class="flex w-full flex-col gap-2 bg-gradient-to-bl from-brand-background-secondary to-brand-green-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">Ward<Logo type="ward" /></span>
<span>Ward is a simple text manipulator for the web. Made to do silly translations for NotEssential.</span>
<div class="flex flex-row flex-wrap items-center gap-2">
<Button to="https://ward.worldwidepixel.ca" classList="bg-brand-green" external={true} showIcon={true}>
Visit
</Button>
<Button to="https://github.com/usevital/ward" classList="bg-brand-green" external={true} showIcon={true}>
GitHub
</Button>
</div>
</div>
<div class="flex w-full flex-col gap-2 border-l bg-gradient-to-bl from-black to-cyan-900 p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold"
>Translator<Logo fill={true} type="ward" /></span
>
<span>A Python script that can help you convert and manipulate your text in many different ways.</span>
<div class="flex flex-row flex-wrap items-center gap-2">
<Button to="https://github.com/usevital/translator" classList="bg-cyan-700" external={true} showIcon={true}>
GitHub
</Button>
<Button
to="https://github.com/usevital/translator/releases"
classList="bg-cyan-700"
external={true}
showIcon={true}>
Releases
</Button>
</div>
</div>
</div>
<div class="flex w-full flex-col gap-2 border-b bg-gradient-to-bl from-black to-brand-rose-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">Bulb<Logo type="bulb" /></span>
<span>Bulb is a work in progress. Watch this space.</span>
</div>
</div>
</div>
<div class="flex flex-row flex-wrap items-center gap-2">
<Button
to="https://notessential.blurry.gay/"
classList="bg-brand-blue"
external={true}
showIcon={true}>
Visit
</Button>
<Button
to="https://usevital.github.io/notessential-gallery/"
classList="bg-brand-blue"
external={true}
showIcon={true}>
Gallery
</Button>
<Button
to="https://github.com/usevital/notessential"
classList="bg-brand-blue"
external={true}
showIcon={true}>
GitHub
</Button>
</div>
</div>
<div class="grid w-full grid-cols-1 border-b md:grid-cols-2">
<div
class="flex w-full flex-col gap-2 bg-gradient-to-bl from-brand-background-secondary to-brand-green-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">Ward<Logo type="ward" /></span>
<span
>Ward is a simple text manipulator for the web. Made to do silly translations for NotEssential.</span
>
<div class="flex flex-row flex-wrap items-center gap-2">
<Button
to="https://ward.worldwidepixel.ca"
classList="bg-brand-green"
external={true}
showIcon={true}>
Visit
</Button>
<Button
to="https://github.com/usevital/ward"
classList="bg-brand-green"
external={true}
showIcon={true}>
GitHub
</Button>
</div>
</div>
<div class="flex w-full flex-col gap-2 border-l bg-gradient-to-bl from-black to-cyan-900 p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold"
>Translator<Logo fill={true} type="ward" /></span
>
<span
>A Python script that can help you convert and manipulate your text in many different ways.</span
>
<div class="flex flex-row flex-wrap items-center gap-2">
<Button
to="https://github.com/usevital/translator"
classList="bg-cyan-700"
external={true}
showIcon={true}>
GitHub
</Button>
<Button
to="https://github.com/usevital/translator/releases"
classList="bg-cyan-700"
external={true}
showIcon={true}>
Releases
</Button>
</div>
</div>
</div>
<div class="flex w-full flex-col gap-2 border-b bg-gradient-to-bl from-black to-brand-rose-dark p-8">
<span class="flex flex-row items-center gap-2 text-4xl font-bold">Bulb<Logo type="bulb" /></span>
<span>Bulb is a work in progress. Watch this space.</span>
</div>
</div>
</div>
</Default>

0 comments on commit b4ce210

Please sign in to comment.