mirror of
https://github.com/ReVanced/revanced-website.git
synced 2026-01-31 06:41:03 +00:00
chore: init new SvelteKit project
This commit is contained in:
madkarmaa
1
src/lib/assets/favicon.svg
Normal file
1
src/lib/assets/favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
134
src/lib/auth.ts
134
src/lib/auth.ts
@@ -1,134 +0,0 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { build_url } from '$data/api';
|
||||
|
||||
export type AuthToken = {
|
||||
token: string;
|
||||
expires: number;
|
||||
};
|
||||
|
||||
type JwtPayload = {
|
||||
exp: number;
|
||||
iss: string;
|
||||
iat: number;
|
||||
};
|
||||
|
||||
export class UnauthenticatedError extends Error {
|
||||
constructor() {
|
||||
super('Unauthenticated. Cannot perform admin operations.');
|
||||
}
|
||||
}
|
||||
|
||||
// Get access token.
|
||||
export function get_access_token(): AuthToken | null {
|
||||
if (!browser) return null;
|
||||
const data = localStorage.getItem('revanced_api_access_token');
|
||||
if (data) return JSON.parse(data) as AuthToken;
|
||||
return null;
|
||||
}
|
||||
|
||||
// (Re)set access token.
|
||||
export function set_access_token(token?: AuthToken) {
|
||||
if (!token) localStorage.removeItem('revanced_api_access_token');
|
||||
else localStorage.setItem('revanced_api_access_token', JSON.stringify(token));
|
||||
}
|
||||
|
||||
// Parse a JWT token
|
||||
export function parseJwt(token: string): JwtPayload {
|
||||
const base64Url = token.split('.')[1];
|
||||
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const jsonPayload = decodeURIComponent(
|
||||
atob(base64)
|
||||
.split('')
|
||||
.map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
|
||||
.join('')
|
||||
);
|
||||
return JSON.parse(jsonPayload) as JwtPayload;
|
||||
}
|
||||
|
||||
// Check if the admin is authenticated
|
||||
export function is_logged_in(): boolean {
|
||||
const token = get_access_token();
|
||||
if (!token) return false;
|
||||
return Date.now() < token.expires;
|
||||
}
|
||||
|
||||
async function digest_fetch(
|
||||
url: string,
|
||||
username: string,
|
||||
password: string,
|
||||
options: RequestInit = {}
|
||||
): Promise<Response> {
|
||||
// Helper function to convert ArrayBuffer to Hex string
|
||||
function bufferToHex(buffer: ArrayBuffer): string {
|
||||
return Array.from(new Uint8Array(buffer))
|
||||
.map((b) => b.toString(16).padStart(2, '0'))
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Generate SHA-256 digest
|
||||
async function sha256(message: string): Promise<string> {
|
||||
const encoder = new TextEncoder();
|
||||
const data = encoder.encode(message);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
|
||||
return bufferToHex(hashBuffer);
|
||||
}
|
||||
|
||||
// Perform an initial request to get the `WWW-Authenticate` header
|
||||
const initialResponse = await fetch(url, {
|
||||
method: options.method || 'GET',
|
||||
headers: options.headers || {}
|
||||
});
|
||||
|
||||
if (!initialResponse.ok && initialResponse.status !== 401)
|
||||
throw new Error(`Initial request failed with status: ${initialResponse.status}`);
|
||||
|
||||
if (initialResponse.ok && initialResponse.status === 200) return initialResponse;
|
||||
|
||||
const authHeader = initialResponse.headers.get('Www-Authenticate');
|
||||
if (!authHeader || !authHeader.startsWith('Digest '))
|
||||
throw new Error('No Digest authentication header found');
|
||||
|
||||
// Parse the `WWW-Authenticate` header to extract the fields
|
||||
const authParams = authHeader
|
||||
.replace('Digest ', '')
|
||||
.split(',')
|
||||
.reduce((acc: Record<string, string>, item) => {
|
||||
const [key, value] = item.trim().split('=');
|
||||
acc[key] = value.replace(/"/g, '');
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const { realm, nonce, algorithm } = authParams;
|
||||
const method = options.method || 'GET';
|
||||
const uri = new URL(url).pathname;
|
||||
|
||||
// https://ktor.io/docs/server-digest-auth.html#flow
|
||||
const HA1 = await sha256(`${username}:${realm}:${password}`);
|
||||
const HA2 = await sha256(`${method}:${uri}`);
|
||||
|
||||
const responseHash = await sha256(`${HA1}:${nonce}:${HA2}`);
|
||||
|
||||
// Build the Authorization header
|
||||
const authHeaderDigest = `Digest username="${username}", realm="${realm}", nonce="${nonce}", uri="${uri}", algorithm=${algorithm}, response="${responseHash}"`;
|
||||
|
||||
// Perform the final request with the Authorization header
|
||||
const finalResponse = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
...options.headers,
|
||||
Authorization: authHeaderDigest
|
||||
}
|
||||
});
|
||||
|
||||
return finalResponse;
|
||||
}
|
||||
|
||||
export async function login(username: string, password: string) {
|
||||
const res = await digest_fetch(build_url('token'), username, password);
|
||||
if (!res.ok) return false;
|
||||
|
||||
const data = await res.json();
|
||||
const payload = parseJwt(data.token);
|
||||
set_access_token({ token: data.token, expires: payload.exp * 1000 });
|
||||
return true;
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ToolTip from './ToolTip.svelte';
|
||||
|
||||
export let type: 'filled' | 'tonal' | 'text' | 'outlined' | 'icon' = 'filled';
|
||||
export let variant: 'default' | 'danger' | 'onDangerBackground' = 'default';
|
||||
export let functionType: typeof HTMLButtonElement.prototype.type = 'button';
|
||||
export let icon: any | undefined = undefined;
|
||||
export let iconSize = 20;
|
||||
export let iconColor = 'currentColor';
|
||||
export let href: string = '';
|
||||
export let target: string = '';
|
||||
export let label: string = '';
|
||||
export let disabled: boolean = false;
|
||||
export let toolTipText: string | undefined = undefined;
|
||||
export let style: string = '';
|
||||
|
||||
$: type = $$slots.default ? type : 'icon';
|
||||
</script>
|
||||
|
||||
<ToolTip content={toolTipText} html={false}>
|
||||
{#if href}
|
||||
<a {href} {target} aria-label={label} class={`${type} ${variant}`} class:disabled>
|
||||
<svelte:component this={icon} size={iconSize} color={iconColor} />
|
||||
<slot />
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
on:click
|
||||
class={`${type} ${variant}`}
|
||||
style="{style}"
|
||||
class:disabled
|
||||
aria-label={label}
|
||||
type={functionType}
|
||||
{disabled}
|
||||
>
|
||||
<svelte:component this={icon} size={iconSize} color={iconColor} />
|
||||
<slot />
|
||||
</button>
|
||||
{/if}
|
||||
</ToolTip>
|
||||
|
||||
<style lang="scss">
|
||||
a,
|
||||
button {
|
||||
min-width: max-content;
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
color: var(--text-one);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.4s var(--bezier-one),
|
||||
filter 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
padding: 16px 24px;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
filter: grayscale(100%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
background-color: var(--primary);
|
||||
color: var(--text-three);
|
||||
}
|
||||
|
||||
&.tonal {
|
||||
background-color: var(--surface-four);
|
||||
}
|
||||
|
||||
&.text {
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.outlined {
|
||||
border: 2px solid var(--primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
&:hover {
|
||||
filter: brightness(75%);
|
||||
}
|
||||
background-color: transparent;
|
||||
color: currentColor;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: var(--red-one);
|
||||
color: var(--surface-four);
|
||||
}
|
||||
|
||||
&.onDangerBackground {
|
||||
background-color: #ffd3d3;
|
||||
color: #601410;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script>
|
||||
export let horizontalPadding;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
style:padding-inline={horizontalPadding}
|
||||
aria-hidden="true"
|
||||
width="100%"
|
||||
height="8"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
|
||||
<path
|
||||
d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
|
||||
stroke-linecap="square"
|
||||
/>
|
||||
</pattern>
|
||||
<rect width="100%" height="100%" fill="url(#a)" />
|
||||
</svg>
|
||||
|
||||
<style lang="scss">
|
||||
svg {
|
||||
margin: 1.5rem 0;
|
||||
|
||||
path {
|
||||
stroke: var(--border);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
<script>
|
||||
import Check from 'svelte-material-icons/Check.svelte';
|
||||
import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
|
||||
|
||||
export let dropdown = false;
|
||||
export let check = false;
|
||||
export let selected = false;
|
||||
</script>
|
||||
|
||||
<button class:selected on:click>
|
||||
{#if check}
|
||||
<Check size="18px" color="var(--surface-six)" />
|
||||
{/if}
|
||||
<slot />
|
||||
{#if dropdown}
|
||||
<ChevronDown size="18px" color="var(--surface-six)" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
button {
|
||||
font-family: var(--font-two);
|
||||
border: none;
|
||||
border: 1.5px solid var(--border);
|
||||
background-color: transparent;
|
||||
color: var(--text-four);
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--tertiary);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ImageDialog from '$layout/Dialogs/ImageDialog.svelte';
|
||||
|
||||
export let images: string[];
|
||||
export let columns: number = 3;
|
||||
export let gap: string = '1rem';
|
||||
|
||||
let selectedImage: { src: string; alt: string } | null = null;
|
||||
|
||||
function openDialog(image: string, index: number) {
|
||||
selectedImage = {
|
||||
src: image,
|
||||
alt: `Gallery image ${index + 1}`
|
||||
};
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
selectedImage = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="gallery" style="--columns: {columns}; --gap: {gap}">
|
||||
{#each images as image, i}
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="image-container">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<img
|
||||
src={image}
|
||||
alt={`Gallery image ${i + 1}`}
|
||||
loading="lazy"
|
||||
on:click={() => openDialog(image, i)}
|
||||
on:keydown={(e) => e.key === 'Enter' && openDialog(image, i)}
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if selectedImage}
|
||||
<ImageDialog src={selectedImage.src} alt={selectedImage.alt} on:close={closeDialog} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--columns), 1fr);
|
||||
gap: var(--gap);
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gallery {
|
||||
--columns: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gallery {
|
||||
--columns: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { JsonLd } from 'svelte-meta-tags';
|
||||
|
||||
let _title: string = '';
|
||||
$: title = _title === '' ? 'ReVanced' : `ReVanced - ${_title}`;
|
||||
|
||||
export { _title as title };
|
||||
|
||||
export let description: string = 'Continuing the legacy of Vanced.';
|
||||
|
||||
export let schemas: any[] | undefined;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="theme-color" content="#9FD5FF" />
|
||||
|
||||
<!-- OpenGraph -->
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
|
||||
{#if schemas}
|
||||
{#each schemas as schema}
|
||||
<JsonLd {schema} />
|
||||
{/each}
|
||||
{/if}
|
||||
</svelte:head>
|
||||
@@ -1,65 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let placeholder: string;
|
||||
export let required: boolean = false;
|
||||
export let value: any = '';
|
||||
export let type: string = 'text';
|
||||
|
||||
export let onenter: () => void = () => {};
|
||||
export let onexit: () => void = () => {};
|
||||
export let oninput: () => void = () => {};
|
||||
export let onkeydown: (event: KeyboardEvent) => void = (event) => {};
|
||||
|
||||
const set_type = (node: HTMLInputElement) => {
|
||||
node.type = type;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
id={placeholder.toLowerCase()}
|
||||
name={placeholder.toLowerCase()}
|
||||
{required}
|
||||
use:set_type
|
||||
on:focus={onenter}
|
||||
on:blur={onexit}
|
||||
on:input={oninput}
|
||||
on:keydown={onkeydown}
|
||||
bind:value
|
||||
/>
|
||||
<label for={placeholder.toLowerCase()}>{placeholder}</label>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.input-wrapper {
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: 29%;
|
||||
left: 1rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
color: var(--surface-six);
|
||||
pointer-events: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:focus + label,
|
||||
&:valid + label {
|
||||
top: -0.65rem;
|
||||
font-size: 0.85rem;
|
||||
background-color: var(--surface-seven);
|
||||
color: var(--text-one);
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +0,0 @@
|
||||
<script lang="ts">
|
||||
// See: https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md#picture
|
||||
import type { Picture } from 'vite-imagetools';
|
||||
export let data: Picture;
|
||||
export let alt: string;
|
||||
</script>
|
||||
|
||||
<picture>
|
||||
{#each Object.entries(data.sources) as [format, srcset]}
|
||||
<source {srcset} type="image/{format}" />
|
||||
{/each}
|
||||
<img {alt} src={data.img.src} />
|
||||
</picture>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import QRious from 'qrious/dist/qrious';
|
||||
|
||||
export let codeValue: string;
|
||||
export let squareSize: number = 150;
|
||||
|
||||
onMount(() => {
|
||||
new QRious({
|
||||
element: document.getElementById('qrcode'),
|
||||
value: codeValue,
|
||||
size: squareSize
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas id="qrcode" />
|
||||
|
||||
<style>
|
||||
canvas {
|
||||
border-radius: 0.5rem;
|
||||
background-color: white;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { CreateQueryResult } from '@tanstack/svelte-query';
|
||||
import { isRestoring } from '../../routes/+layout.svelte';
|
||||
// I might try to get this merged into tanstack query.
|
||||
|
||||
// So basically, this is how you do generics here.
|
||||
//https://github.com/sveltejs/language-tools/issues/273#issuecomment-1003496094
|
||||
type T = $$Generic;
|
||||
interface $$Slots {
|
||||
default: {
|
||||
// slot name
|
||||
data: T;
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: errors
|
||||
|
||||
export let query: CreateQueryResult<T, any>;
|
||||
</script>
|
||||
|
||||
{#if !$isRestoring}
|
||||
{#if $query.isSuccess}
|
||||
<slot data={$query.data} />
|
||||
{:else if $query.isError}
|
||||
<slot name="error" />
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -1,102 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import Magnify from 'svelte-material-icons/Magnify.svelte';
|
||||
|
||||
export let title: string;
|
||||
export let searchTerm: string | null;
|
||||
export let displayedTerm: string | undefined;
|
||||
|
||||
function clear() {
|
||||
searchTerm = '';
|
||||
displayedTerm = '';
|
||||
|
||||
const url = new URL($page.url);
|
||||
url.searchParams.delete('s');
|
||||
goto(url.pathname + url.search);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="search-container">
|
||||
<div id="search">
|
||||
<Magnify size="24px" color="var(--surface-six)" />
|
||||
</div>
|
||||
{#if searchTerm}
|
||||
<div
|
||||
id="clear"
|
||||
on:click={clear}
|
||||
on:keypress={clear}
|
||||
transition:fade={{ easing: quintOut, duration: 250 }}
|
||||
>
|
||||
<Close size="24px" color="var(--surface-six)" />
|
||||
</div>
|
||||
{/if}
|
||||
<input
|
||||
type="text"
|
||||
class:clear={searchTerm}
|
||||
placeholder={title}
|
||||
bind:value={searchTerm}
|
||||
on:keyup
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
#search {
|
||||
/* umm dont ask */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 16px;
|
||||
top: 14px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#clear {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 14px;
|
||||
z-index: 1;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 1rem 3.25rem;
|
||||
width: 100%;
|
||||
color: var(--secondary);
|
||||
font-weight: 500;
|
||||
font-size: 0.92rem;
|
||||
border-radius: 100px;
|
||||
border: none;
|
||||
background-color: var(--surface-nine);
|
||||
outline: none;
|
||||
|
||||
transition: background-color 0.3s var(--bezier-one);
|
||||
&:hover {
|
||||
background-color: var(--surface-five);
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
color: var(--primary);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--surface-two);
|
||||
}
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--text-four);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
}
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { backIn, expoOut } from 'svelte/easing';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
export let open = false;
|
||||
export let dismissTime = 3000;
|
||||
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
$: if (open) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => (open = false), dismissTime);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div id="snackbar" in:slide={{ duration: 400, easing: expoOut }} out:slide={{ duration: 300, easing: backIn }}>
|
||||
<slot name="text" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#snackbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
min-width: 12.5rem;
|
||||
max-width: 35rem;
|
||||
height: 3rem;
|
||||
|
||||
background: var(--surface-one);
|
||||
color: var(--text-two);
|
||||
box-shadow: var(--drop-shadow-one);
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
<div id="spinner" />
|
||||
|
||||
<style lang="scss">
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#spinner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 4.5px solid transparent;
|
||||
border-top-color: var(--primary);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let viewBoxHeight: number;
|
||||
export let viewBoxWidth = viewBoxHeight;
|
||||
export let svgHeight: number;
|
||||
export let svgWidth = svgHeight;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
viewBox="0 0 {viewBoxHeight} {viewBoxWidth}"
|
||||
style:height={svgHeight + 'px'}
|
||||
style:width={svgWidth + 'px'}
|
||||
>
|
||||
<slot />
|
||||
</svg>
|
||||
@@ -1,33 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { tooltip } from 'svooltip';
|
||||
import '../styles/ToolTip.scss';
|
||||
|
||||
export let content: string | undefined;
|
||||
export let html: boolean = false;
|
||||
</script>
|
||||
|
||||
{#if content}
|
||||
<div
|
||||
use:tooltip={{
|
||||
content: content,
|
||||
html: html
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--svooltip-bg: var(--surface-three);
|
||||
--svooltip-text: var(--text-four);
|
||||
--svooltip-padding: 0.75rem 1rem;
|
||||
--svooltip-weight: bold;
|
||||
--svooltip-text-size: 16px;
|
||||
--svooltip-shadow: var(--drop-shadow-one);
|
||||
--svooltip-arrow-size: 0;
|
||||
--svooltip-roundness: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<script>
|
||||
export let visibility = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="wave"
|
||||
viewBox="0 0 1440 500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
style="opacity: {visibility ? '100%' : '0'}; height: {visibility ? '40vh' : '0px'}"
|
||||
>
|
||||
<path class="wave" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
transition: opacity 0.1s var(--bezier-one);
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-height: 780px) {
|
||||
svg {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wave {
|
||||
animation: wave-anim 30s;
|
||||
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
|
||||
animation-iteration-count: infinite;
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
@keyframes wave-anim {
|
||||
0% {
|
||||
d: path(
|
||||
'M0 500C0 500 0 250 0 250 176.5333 300.1333 353.0667 350.2667 496 325 638.9333 299.7333 748.2667 199.0667 900 174 1051.7333 148.9333 1245.8667 199.4667 1440 250 1440 250 1440 500 1440 500Z'
|
||||
);
|
||||
}
|
||||
25% {
|
||||
d: path(
|
||||
'M0 500C0 500 0 250 0 250 154.1333 219.2 308.2667 188.4 449 209 589.7333 229.6 717.0667 301.6 880 317 1042.9333 332.4 1241.4667 291.2 1440 250 1440 250 1440 500 1440 500Z'
|
||||
);
|
||||
}
|
||||
50% {
|
||||
d: path(
|
||||
'M0 500C0 500 0 250 0 250 132.8 242.9333 265.6 235.8667 414 246 562.4 256.1333 726.4 283.4667 900 287 1073.6 290.5333 1256.8 270.2667 1440 250 1440 250 1440 500 1440 500Z'
|
||||
);
|
||||
}
|
||||
75% {
|
||||
d: path(
|
||||
'M0 500C0 500 0 250 0 250 151.3333 206.6667 302.6667 163.3333 472 176 641.3333 188.6667 828.6667 257.3333 993 279 1157.3333 300.6667 1298.6667 275.3333 1440 250 1440 250 1440 500 1440 500Z'
|
||||
);
|
||||
}
|
||||
100% {
|
||||
d: path(
|
||||
'M0 500C0 500 0 250 0 250 176.5333 300.1333 353.0667 350.2667 496 325 638.9333 299.7333 748.2667 199.0667 900 174 1051.7333 148.9333 1245.8667 199.4667 1440 250 1440 250 1440 500 1440 500Z'
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -1,74 +0,0 @@
|
||||
import { readable, writable } from 'svelte/store';
|
||||
import { is_logged_in, get_access_token } from './auth';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
type AdminLoginInfo =
|
||||
| {
|
||||
logged_in: true;
|
||||
expires: number;
|
||||
logged_in_previously: boolean;
|
||||
}
|
||||
| {
|
||||
logged_in: false;
|
||||
expires: undefined;
|
||||
logged_in_previously: boolean;
|
||||
};
|
||||
|
||||
const admin_login_info = (): AdminLoginInfo => {
|
||||
if (is_logged_in())
|
||||
return {
|
||||
logged_in: true,
|
||||
expires: get_access_token()!.expires,
|
||||
logged_in_previously: !!get_access_token()?.token
|
||||
};
|
||||
else
|
||||
return {
|
||||
logged_in: false,
|
||||
expires: undefined,
|
||||
logged_in_previously: !!get_access_token()?.token
|
||||
};
|
||||
};
|
||||
|
||||
export const admin_login = readable<AdminLoginInfo>(admin_login_info(), (set) => {
|
||||
const checkLoginStatus = () => set(admin_login_info());
|
||||
|
||||
checkLoginStatus();
|
||||
|
||||
const interval = setInterval(checkLoginStatus, 100);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
export const read_announcements = writable<Set<number>>(new Set(), (set) => {
|
||||
if (!browser) return;
|
||||
|
||||
const key = 'read_announcements';
|
||||
const data = localStorage.getItem(key);
|
||||
const parsedArray = data ? JSON.parse(data) : [];
|
||||
const currentState = new Set(parsedArray);
|
||||
|
||||
const updateStoreState = () => {
|
||||
set(currentState);
|
||||
};
|
||||
|
||||
const handleLocalStorageUpdate = (e: StorageEvent) => {
|
||||
if (e.key === key) updateStoreState();
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleLocalStorageUpdate);
|
||||
updateStoreState();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleLocalStorageUpdate);
|
||||
localStorage.setItem(key, JSON.stringify(Array.from(currentState)));
|
||||
};
|
||||
});
|
||||
|
||||
read_announcements.subscribe((value) => {
|
||||
if (!browser) return;
|
||||
|
||||
localStorage.setItem('read_announcements', JSON.stringify(Array.from(value)));
|
||||
});
|
||||
|
||||
export const passed_login_with_creds = writable(false); // will only change when the user INPUTS the credentials, not if the session is just valid
|
||||
|
||||
export const allowAnalytics = writable(false);
|
||||
@@ -1,12 +0,0 @@
|
||||
@use 'svooltip/styles.scss' as SvoolTip;
|
||||
|
||||
.svooltip a {
|
||||
text-decoration: none;
|
||||
color: var(--text-four);
|
||||
pointer-events: all;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
107
src/lib/types.ts
107
src/lib/types.ts
@@ -1,107 +0,0 @@
|
||||
export type ResponseAnnouncement = {
|
||||
archived_at?: string;
|
||||
attachments?: string[];
|
||||
author?: string;
|
||||
tags?: string[];
|
||||
content?: string;
|
||||
created_at: string;
|
||||
id: number;
|
||||
level?: number;
|
||||
title: string;
|
||||
};
|
||||
|
||||
export type Announcement = Omit<ResponseAnnouncement, 'id'>;
|
||||
|
||||
export type Tags = { name: string }[];
|
||||
|
||||
export interface Contributor {
|
||||
name: string;
|
||||
avatar_url: string;
|
||||
url: string;
|
||||
contributions: number;
|
||||
}
|
||||
|
||||
export interface Contributable {
|
||||
name: string;
|
||||
url: string;
|
||||
contributors: Contributor[];
|
||||
}
|
||||
|
||||
export interface Patch {
|
||||
name: string;
|
||||
description: string;
|
||||
use: boolean;
|
||||
compatiblePackages: CompatiblePackage[] | null;
|
||||
options: PatchOption[];
|
||||
}
|
||||
|
||||
export interface CompatiblePackage {
|
||||
name: string;
|
||||
versions: string[] | null;
|
||||
}
|
||||
|
||||
export interface PatchOption {
|
||||
key: string;
|
||||
title: string | null;
|
||||
description: string;
|
||||
required: boolean;
|
||||
type: string;
|
||||
default: any | null;
|
||||
values: any[] | null;
|
||||
}
|
||||
|
||||
export interface Release {
|
||||
version: string;
|
||||
created_at: string;
|
||||
description: string;
|
||||
download_url: string;
|
||||
}
|
||||
|
||||
export interface TeamMember {
|
||||
name: string;
|
||||
avatar_url: string;
|
||||
url: string;
|
||||
bio?: string;
|
||||
gpg_key: GpgKey;
|
||||
}
|
||||
|
||||
export interface GpgKey {
|
||||
id: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface CryptoWallet {
|
||||
network: string;
|
||||
currency_code: string;
|
||||
address: string;
|
||||
preferred: boolean;
|
||||
}
|
||||
|
||||
export interface DonationPlatform {
|
||||
name: string;
|
||||
url: string;
|
||||
preferred: boolean;
|
||||
}
|
||||
|
||||
export interface Social {
|
||||
name: string;
|
||||
url: string;
|
||||
preferred: boolean;
|
||||
}
|
||||
|
||||
interface Donations {
|
||||
wallets: CryptoWallet[];
|
||||
links: DonationPlatform[];
|
||||
}
|
||||
|
||||
interface Contact {
|
||||
email: string;
|
||||
}
|
||||
|
||||
export interface About {
|
||||
name: string;
|
||||
about: string;
|
||||
contact: Contact;
|
||||
socials: Social[];
|
||||
donations: Donations;
|
||||
}
|
||||
Reference in New Issue
Block a user