mirror of
https://github.com/ProjectSegfault/website.git
synced 2025-05-31 14:12:04 +05:30
migrate to segfaultapi
This commit is contained in:
8
src/routes/+page.server.ts
Normal file
8
src/routes/+page.server.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import type { PageServerLoad } from "./$types";
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
return {
|
||||
state: await fetch("https://api.projectsegfau.lt/api/v1/state/announcements").then((res) => res.json()),
|
||||
announcements: await fetch("https://api.projectsegfau.lt/api/v1/announcements").then((res) => res.json())
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,12 @@
|
||||
import SvelteSeo from "svelte-seo";
|
||||
import Hero from "$lib/Hero.svelte";
|
||||
import LinkButton from "$lib/LinkButton.svelte";
|
||||
import Announcements from "$lib/Announcements.svelte";
|
||||
import dayjs from "dayjs";
|
||||
import type { PageData } from "./$types";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let announcements = data.announcements;
|
||||
|
||||
let description: string = "Open source development and hosted services.";
|
||||
</script>
|
||||
@@ -30,7 +35,101 @@
|
||||
</div>
|
||||
</Hero>
|
||||
|
||||
<Announcements />
|
||||
{#if data.state.enabled}
|
||||
<div class="announcements">
|
||||
<div class="announcement-container">
|
||||
<div class="announcement">
|
||||
<div class="general">
|
||||
{#if announcements.severity === "info"}
|
||||
<div class="i-fa6-solid:circle-info" />
|
||||
{:else}
|
||||
<div class="i-fa6-solid:triangle-exclamation" />
|
||||
{/if}
|
||||
<span>
|
||||
{announcements.author} -
|
||||
</span>
|
||||
<span>
|
||||
{dayjs
|
||||
.unix(announcements.created)
|
||||
.format("DD/MM/YYYY HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="text-xl font-semibold">{announcements.title}</span>
|
||||
</div>
|
||||
|
||||
{#if announcements.link}
|
||||
<div class="read-more">
|
||||
<a href={announcements.link}>Read more...</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if announcements.severity === "info"}
|
||||
<style>
|
||||
.announcement {
|
||||
background-color: #8caaee;
|
||||
}
|
||||
</style>
|
||||
{:else if announcements.severity === "low"}
|
||||
<style>
|
||||
.announcement {
|
||||
background-color: #a6d189;
|
||||
}
|
||||
</style>
|
||||
{:else if announcements.severity === "medium"}
|
||||
<style>
|
||||
.announcement {
|
||||
background-color: #e5c890;
|
||||
}
|
||||
</style>
|
||||
{:else if announcements.severity === "high"}
|
||||
<style>
|
||||
.announcement {
|
||||
background-color: #e78284;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.announcement-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.announcement {
|
||||
color: #252525 !important;
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 10px;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.announcement a {
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
.announcement .general {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.no-js {
|
||||
@apply flex justify-center text-center text-red;
|
||||
}
|
||||
</style>
|
||||
{:else}
|
||||
<div class="flex items-center gap-1 text-center justify-center mt-16">
|
||||
<div class="i-fa6-solid:circle-info" />
|
||||
<span>Announcements are currently disabled.</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.buttons {
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: Contact us
|
||||
description: Do you want to contact us? (you don't)
|
||||
---
|
||||
|
||||
<script lang="ts">
|
||||
import ContactForm from "$lib/ContactForm.svelte";
|
||||
import Note from "$lib/Form/Note.svelte";
|
||||
</script>
|
||||
|
||||
# { title }
|
||||
|
||||
{ description }
|
||||
|
||||
<div class="contact-form">
|
||||
<h2>Contact form</h2>
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<Note content="The contact form (and by extension Segfautils) does not work without JavaScript enabled." icon="i-fa6-solid:circle-info" />
|
||||
<style>
|
||||
.contact-form {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
## Our email
|
||||
|
||||
[contact@projectsegfau.lt](mailto:contact@projectsegfau.lt)
|
||||
|
||||
_Please be aware that Microsoft often blocks non-popular emails, if you do contact us through there, make sure to check your spam and mark it as not-spam!_
|
||||
|
||||
## People
|
||||
|
||||
You can find ways to contact individual team members [on our team page](/team).
|
||||
7
src/routes/contact/+page.server.ts
Normal file
7
src/routes/contact/+page.server.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { PageServerLoad } from "../$types";
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
return {
|
||||
state: await fetch("https://api.projectsegfau.lt/api/v1/state/form").then((res) => res.json())
|
||||
}
|
||||
}
|
||||
77
src/routes/contact/+page.svelte
Normal file
77
src/routes/contact/+page.svelte
Normal file
@@ -0,0 +1,77 @@
|
||||
<script lang="ts">
|
||||
import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
|
||||
import type { PageData } from "./$types";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let title = "Contact us | Project Segfault";
|
||||
let description = "Do you want to contact us? (you don't)";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description}>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{title}</h1>
|
||||
|
||||
<span>{description}</span>
|
||||
|
||||
<div class="contact-form">
|
||||
<h2>Contact form</h2>
|
||||
{#if data.state.enabled === true}
|
||||
<Form
|
||||
action="https://api.projectsegfau.lt/api/v1/form"
|
||||
method="POST"
|
||||
id="contact-form"
|
||||
>
|
||||
<Note
|
||||
content="Your IP will be logged for anti-abuse measures."
|
||||
icon="i-fa6-solid:lock"
|
||||
/>
|
||||
<Meta
|
||||
inputType="email"
|
||||
inputPlaceholder="Your email"
|
||||
selectType="commentType"
|
||||
>
|
||||
<option value="" selected disabled
|
||||
>Select a type of comment</option
|
||||
>
|
||||
<option value="Feedback">Feedback</option>
|
||||
<option value="Suggestion">Suggestion</option>
|
||||
<option value="Question">Question</option>
|
||||
<option value="Bug">Bug</option>
|
||||
</Meta>
|
||||
<TextArea id="comment" name="message" placeholder="Your message" />
|
||||
<Captcha />
|
||||
</Form>
|
||||
{:else}
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="i-fa6-solid:circle-info" />
|
||||
<span>The contact form is currently disabled.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<Note content="The contact form does not work without JavaScript enabled." icon="i-fa6-solid:circle-info" />
|
||||
<style>
|
||||
.contact-form {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
<h2>Our Email</h2>
|
||||
|
||||
<a href="mailto:contact@projectsegfau.lt">contact@projectsegfau.lt</a>
|
||||
|
||||
<span class="italic">
|
||||
Please be aware that Microsoft often blocks non-popular emails, if you do contact us through there, make sure to check your spam and mark it as not-spam!
|
||||
</span>
|
||||
|
||||
<h2>People</h2>
|
||||
|
||||
<span>
|
||||
You can find ways to contact individual team members <a href="/team">on our team page</a>.
|
||||
</span>
|
||||
5
src/routes/instances/+page.server.ts
Normal file
5
src/routes/instances/+page.server.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import type { PageServerLoad } from "./$types";
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
return await fetch("https://api.projectsegfau.lt/api/v1/status").then((res) => res.json());
|
||||
}
|
||||
@@ -1,16 +1,14 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { CardInner, CardOuter, LinksOuter, Link } from "$lib/Card";
|
||||
import instances from "$lib/Instances.json";
|
||||
import dayjs from "dayjs";
|
||||
import type { PageData } from "../$types";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let groups = instances.reduce((curr, val) => {
|
||||
let group = curr.find((g) => g.category === `${val.category}`);
|
||||
if (group) {
|
||||
group.values.push(val);
|
||||
} else {
|
||||
curr.push({ category: `${val.category}`, values: [val] });
|
||||
}
|
||||
return curr;
|
||||
}, []);
|
||||
let groups = [
|
||||
{name: "General", data: data.status.General},
|
||||
{name: "Internal", data: data.status.Internal}
|
||||
]
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -19,37 +17,46 @@
|
||||
</svelte:head>
|
||||
|
||||
<h1>Our instances</h1>
|
||||
<CardOuter>
|
||||
<div class="wrapper">
|
||||
{#each groups as group}
|
||||
<h2>{group.category}</h2>
|
||||
<div class="items">
|
||||
{#each group.values as item}
|
||||
<CardInner
|
||||
title={item.name}
|
||||
description={item.description}
|
||||
icon={item.icon}
|
||||
>
|
||||
<LinksOuter>
|
||||
<Link url={item.website} class="web">
|
||||
<div class="withText">
|
||||
<div class="i-fa6-solid:globe" />
|
||||
<span>Instance link</span>
|
||||
</div>
|
||||
</Link>
|
||||
<Link url={item.projectWebsite} class="link">
|
||||
<div class="withText">
|
||||
<div class="i-fa6-solid:circle-info" />
|
||||
<span>Project website</span>
|
||||
</div>
|
||||
</Link>
|
||||
</LinksOuter>
|
||||
</CardInner>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</CardOuter>
|
||||
<div class="flex flex-col gap-4">
|
||||
<CardOuter>
|
||||
<div class="wrapper">
|
||||
{#each groups as group}
|
||||
<h2>{group.name}</h2>
|
||||
<div class="items">
|
||||
{#each group.data as item}
|
||||
<CardInner
|
||||
title={item.name}
|
||||
position={item.status === 200 ? "Up" : "Down"}
|
||||
positionStyles={item.status === 200 ? "color: #4ade80;" : "color: #f87171;"}
|
||||
description={item.description}
|
||||
icon={item.icon}
|
||||
>
|
||||
<LinksOuter>
|
||||
<Link url={item.website} class="web">
|
||||
<div class="withText">
|
||||
<div class="i-fa6-solid:globe" />
|
||||
<span>Instance link</span>
|
||||
</div>
|
||||
</Link>
|
||||
<Link url={item.projectWebsite} class="link">
|
||||
<div class="withText">
|
||||
<div class="i-fa6-solid:circle-info" />
|
||||
<span>Project website</span>
|
||||
</div>
|
||||
</Link>
|
||||
</LinksOuter>
|
||||
</CardInner>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</CardOuter>
|
||||
|
||||
<span>Last updated: {dayjs
|
||||
.unix(data.updated)
|
||||
.format("DD/MM/YYYY HH:mm:ss")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
|
||||
Reference in New Issue
Block a user