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