Add services page

This commit is contained in:
Korbs 2024-06-02 23:54:08 -04:00
parent 6f5c9ccb14
commit f188277a73
4 changed files with 211 additions and 37 deletions

BIN
bun.lockb

Binary file not shown.

View file

@ -0,0 +1,87 @@
---
// Properties
const {
Icon,
Title,
Description,
Source,
Link,
Status
} = Astro.props
// Icons
import {CheckCircleSolid, XmarkCircleSolid} from 'iconoir-react'
---
<div class="service">
<div class="service-icon">
<img src={Icon}/>
{
()=> {
if (Status === "online") {
return <p style="color: rgb(121, 235, 121)" class="service-status"><CheckCircleSolid/> Online</p>
} else if (Status === "offline") {
return <p style="color: rgb(248, 77, 77)" class="service-status"><XmarkCircleSolid/> Offline</p>
}
}
}
</div>
<div class="service-content">
<div>
<h2>{Title}</h2>
<p>{Description}</p>
<p class="service-links"><a href={Source}>Source</a> <a href={Link}>View</a></p>
</div>
</div>
</div>
<style>
.service {
position: relative;
background: transparent;
border-radius: 10px;
border: 1px #2b2b2b solid;
padding: 24px;
display: flex;
flex-direction: row;
align-items: start;
gap: 24px;
margin: 6px;
.service-icon {
display: flex;
flex-direction: column;
img {
width: 92px;
border-radius: 12px;
}
.service-status {
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
}
.service-content {
width: 100%;
h2, p {
margin: 0px;
}
h2 {
font-size: 18px;
}
p {
font-size: 14px;
}
.service-links {
position: absolute;
bottom: 24px;
right: 24px;
display: flex;
gap: 12px;
a {
text-decoration: underline;
}
}
}
}
</style>

View file

@ -1,37 +0,0 @@
---
// Layout
import Default from "@layouts/Default.astro";
// Components
import Hero from "@components/Hero.astro";
import Heading from "@components/Heading.astro";
import Posts from "@components/blog/posts.astro";
import LargeCard from "@components/Feature.astro";
// Icons
import { BookmarkBook, ReportColumns, Search } from "iconoir-react";
---
<Default MobileTitle="Init Privacy">
<Fragment slot="sub-header">
<div>
<p class="header-sub-service"><span id="show-w-scroll">SudoVanilla</span> Ark</p>
<a href="#" onclick="ToggleSearchOnclick()"><Search/> Search</a>
</div>
<div>
<a href="#">Explore</a>
<a href="#">Issues</a>
<a href="#">Pull Requests</a>
<a href="#">Your Account</a>
</div>
</Fragment>
<Fragment slot="body">
<Hero
Title="Ark"
Description="The heart of SudoVanilla"
VideoSrc="https://md.sudovanilla.org/videos/mp4/3783818-hd_1920_1080_24fps.mp4"
VideoPoster="https://md.sudovanilla.org/images/vlcsnap-2024-05-02-17h23m53s431.png"
VideoCredit="Drone Footage Of The Island And The Sea By Taryn Elliott Taryn Elliott on Pexels"
/>
</Fragment>
</Default>

124
src/pages/instances.astro Normal file
View file

@ -0,0 +1,124 @@
---
// Layout
import Default from "@layouts/Default.astro";
// Components
import Hero from "@components/Hero.astro";
import Heading from "@components/Heading.astro";
import Posts from "@components/blog/posts.astro";
import LargeCard from "@components/Feature.astro";
import Service from "@components/Service.astro";
// List Posts
import { getCollection } from "astro:content";
const posts = await getCollection("posts");
// Netweak Status
const NetweakPing = await fetch('https://status.sudovanilla.org/json');
const NetweakStatus = await NetweakPing.json();
var StatusForOpengist = NetweakStatus.services['24'].status
var StatusForPingvin = NetweakStatus.services['22'].status
var StatusFor4Get = NetweakStatus.services['10'].status
var StatusForTeddit = NetweakStatus.services['21'].status
var StatusForSafetwitch = NetweakStatus.services['20'].status
var StatusForRimgo = NetweakStatus.services['16'].status
var StatusForAnonymousoverflow = NetweakStatus.services['17'].status
var StatusForQuetre = NetweakStatus.services['19'].status
var StatusForLibmedium = NetweakStatus.services['23'].status
console.log(StatusForPingvin)
// Icons
import { BookmarkBook, ReportColumns } from "iconoir-react";
---
<Default MobileTitle="Instances">
<Fragment slot="sub-header">
<p class="header-sub-service"><span id="show-w-scroll">SudoVanilla</span> Instances</p>
<div>
<a href="#">Services</a>
<a href="#">Frontends</a>
</div>
</Fragment>
<Fragment slot="body">
<Heading Title="Services"/>
<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(400px,1fr));">
<Service
Icon="https://md.sudovanilla.org/images/icons/OpenGist.svg"
Title="OpenGist"
Description="Gist"
Link="https://gist.sudovanilla.org/"
Source="https://github.com/thomiceli/opengist"
Status={StatusForOpengist}
/>
<Service
Icon="https://md.sudovanilla.org/images/icons/Pingvin.png"
Title="Pingvin Share"
Description="File Share"
Link="https://s.sudovanilla.org/"
Source="https://github.com/stonith404/pingvin-share"
Status={StatusForPingvin}
/>
<Service
Icon="https://4get.sudovanilla.org/favicon.ico"
Title="4Get"
Description="Search Engine"
Link="https://4get.sudovanilla.org/"
Source="https://git.lolcat.ca/lolcat/4get"
Status={StatusFor4Get}
/>
</div>
<Heading Title="Frontends"/>
<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(400px,1fr));">
<Service
Icon="https://md.sudovanilla.org/images/icons/Teddit.webp"
Title="Teddit"
Description="For Reddit"
Link="https://t.sudovanilla.org/"
Source="https://codeberg.org/teddit/teddit"
Status={StatusForTeddit}
/>
<Service
Icon="https://md.sudovanilla.org/images/icons/SafeTwitch.webp"
Title="SafeTwitch"
Description="For Twitch"
Link="https://twitch.sudovanilla.org/"
Source="https://codeberg.org/SafeTwitch/safetwitch"
Status={StatusForSafetwitch}
/>
<Service
Icon="https://md.sudovanilla.org/images/icons/Rimgo.svg"
Title="Rimgo"
Description="For Imgur"
Link="https://i.sudovanilla.org/"
Source="https://codeberg.org/rimgo/rimgo"
Status={StatusForRimgo}
/>
<Service
Icon="https://md.sudovanilla.org/images/icons/AnonymousOverflow.webp"
Title="AnonymousOverflow"
Description="For StackOverflow"
Link="https://o.sudovanilla.org/"
Source="https://github.com/httpjamesm/AnonymousOverflow"
Status={StatusForAnonymousoverflow}
/>
<Service
Icon="https://md.sudovanilla.org/images/icons/Quetre.webp"
Title="Quetre"
Description="For Quora"
Link="https://a.sudovanilla.org/"
Source="https://github.com/zyachel/quetre"
Status={StatusForQuetre}
/>
<Service
Icon="https://md.sudovanilla.org/images/icons/libmedium.png"
Title="LibMedium"
Description="For Medium"
Link="https://r.sudovanilla.org/"
Source="https://github.com/realaravinth/libmedium"
Status={StatusForLibmedium}
/>
</div>
</Fragment>
</Default>