0xMRTT/webcompile
1
0
Fork 0
forked from ProjectSegfault/website
Code Pull Requests Activity

implement state api

Browse Source
This commit is contained in:
Akis
2022-10-01 16:11:54 +03:00
parent 04041ecf63
commit e614734b8a
10 changed files with 2431 additions and 1730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3815
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

131
src/lib/Announcements.svelte Normal file
View File

@@ -0,0 +1,131 @@
<script lang="ts">
import fetchState from "$lib/fetchState";
const promise = fetchState("announcements");
import Note from "$lib/Form/Note.svelte";
import dayjs from "dayjs";
let announcements: any = [];
async function fetchAnnouncements() {
const url = `https://segfautils.projectsegfau.lt/api/announcements`;
const response = await fetch(url);
announcements = await response.json();
return announcements;
}
</script>
{#await promise}
<span />
{:then state}
{#if state.enabled === "true"}
<div class="announcements">
{#await fetchAnnouncements()}
<span />
{:then}
<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>
{dayjs
.unix(announcements.created)
.format("DD/MM/YYYY HH:mm")}
</span>
</div>
<div class="title">
<h1>{announcements.title}</h1>
</div>
{#if announcements.link}
<div class="read-more">
<a href={announcements.link}>Read more...</a>
</div>
{/if}
</div>
</div>
{:catch}
<span />
{/await}
</div>
<noscript>
<div class="no-js">
<Note
content="Announcements do not work without JavaScript enabled."
/>
</div>
<style>
.announcements {
display: none;
}
</style>
</noscript>
{#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;
}
.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}
{/await}

62
src/lib/ContactForm.svelte
View File

@@ -1,27 +1,43 @@
<script lang="ts">
import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
import fetchState from "$lib/fetchState";
const promise = fetchState("form");
</script>
<Form
action="https://segfautils.projectsegfau.lt/api/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>
{#await promise}
loading
{:then state}
{#if state.enabled === "true"}
<Form
action="https://segfautils.projectsegfau.lt/api/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}
{/await}

2
src/lib/Form/TextArea.svelte
View File

@@ -18,4 +18,4 @@
textarea {
resize: vertical;
}
</style>
</style>

5
src/lib/Nav.svelte
View File

@@ -38,7 +38,10 @@
href={url}>{name}</a
>
{/each}
<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/" class="icon">
<a
href="https://matrix.to/#/#project-segfault:projectsegfau.lt/"
class="icon"
>
<div class="i-simple-icons:matrix" />
<span>Matrix</span>
</a>

9
src/lib/ThemeToggle.svelte
View File

@@ -15,8 +15,11 @@
<DarkMode bind:theme />
<button on:click={toggle} class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-[var(--font-primary)] color-[var(--text)]">
<div class="i-fa6-solid:{theme === "dark" ? "sun" : "moon"}" />
<button
on:click={toggle}
class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-[var(--font-primary)] color-[var(--text)]"
>
<div class="i-fa6-solid:{theme === 'dark' ? 'sun' : 'moon'}" />
<span class="ml-2">Toggle theme</span>
</button>
@@ -27,4 +30,4 @@
margin-left: 0.25rem;
}
}
</style>
</style>

7
src/lib/fetchState.ts Normal file
View File

@@ -0,0 +1,7 @@
let state: any = [];
export default async function fetchState(module: "announcements" | "form") {
const url = `https://segfautils.projectsegfau.lt/api/set/${module}`;
const response = await fetch(url);
state = await response.json();
return state;
}

113
src/routes/+page.svelte
View File

@@ -2,20 +2,9 @@
import SvelteSeo from "svelte-seo";
import Hero from "$lib/Hero.svelte";
import LinkButton from "$lib/LinkButton.svelte";
import Note from "$lib/Form/Note.svelte";
import dayjs from "dayjs";
import Announcements from "$lib/Announcements.svelte";
let description: string = "Open source development and hosted services.";
let announcements: any = [];
async function fetchAnnouncements() {
const url = `https://segfautils.projectsegfau.lt/api/announcements`;
const response = await fetch(url);
announcements = await response.json();
return announcements;
}
const promise = fetchAnnouncements();
</script>
<SvelteSeo title="Home | Project Segfault" {description} />
@@ -41,76 +30,7 @@
</div>
</Hero>
<div class="announcements">
{#await promise}
<span />
{:then}
<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>
{dayjs
.unix(announcements.created)
.format("DD/MM/YYYY HH:mm")}
</span>
</div>
<div class="title">
<h1>{announcements.title}</h1>
</div>
{#if announcements.link}
<div class="read-more">
<a href={announcements.link}>Read more...</a>
</div>
{/if}
</div>
</div>
{:catch}
<span />
{/await}
</div>
<noscript>
<div class="no-js">
<Note content="Announcements do not work without JavaScript enabled." />
</div>
<style>
.announcements {
display: none;
}
</style>
</noscript>
{#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}
<Announcements />
<style>
.buttons {
@@ -127,33 +47,4 @@
flex-direction: column;
}
}
.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;
}
.announcement a {
color: #252525;
}
.announcement .general {
display: flex;
align-items: center;
gap: 8px;
}
.no-js {
@apply flex justify-center text-center text-red;
}
</style>

5
src/routes/legal/tos/+page.md
View File

@@ -14,5 +14,6 @@ description: We're not anarchists, so we have some rules.
5. While we do try to keep your data safe, you have to acknowledge that **we are not responsible** if anything **unintentional** happens (such as **data loss**, **inability to extract your data** due to the server being down.). It is also **your responsibility** to **keep a backup of your data** if it matters to you.
### Failure to comply will either end up **disabling** your account, and/or if it is illegal, **reporting** to the police.
* Be aware that "**reporting** to the police" only happens if the individual is using our services to **post, promote, or encourage** actions that are **morally unnacceptable**. (Such as: pedophilia, murder, or CSAM.)
* **No warnings will be issued if we find this out.**
- Be aware that "**reporting** to the police" only happens if the individual is using our services to **post, promote, or encourage** actions that are **morally unnacceptable**. (Such as: pedophilia, murder, or CSAM.)
- **No warnings will be issued if we find this out.**

12
src/routes/timeline/+page.svelte
View File

@@ -232,11 +232,15 @@
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<h3>
Resignation of members and the start of a new era.
</h3>
<h3>Resignation of members and the start of a new era.</h3>
<p>
Devnol, Odyssey and akisblack resigned from the team leading to a serious loss of manpower. To combat this, we decided to shut down some of our unused instances as well as the ones that were painful to deal with. You can read more over at <a href="https://blog.projectsegfau.lt/resignation-of-3-members-of-projectsegfault/">this blog post</a>.
Devnol, Odyssey and akisblack resigned from the team leading to
a serious loss of manpower. To combat this, we decided to shut
down some of our unused instances as well as the ones that were
painful to deal with. You can read more over at <a
href="https://blog.projectsegfau.lt/resignation-of-3-members-of-projectsegfault/"
>this blog post</a
>.
</p>
</TimelineContent>
</TimelineItem>