Add services page
This commit is contained in:
parent
6f5c9ccb14
commit
f188277a73
4 changed files with 211 additions and 37 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
87
src/components/Service.astro
Normal file
87
src/components/Service.astro
Normal 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>
|
||||
|
|
@ -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
124
src/pages/instances.astro
Normal 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>
|
||||
Loading…
Reference in a new issue