feat: Add announcements

package.json

@@ -46,6 +46,7 @@
 		"@tanstack/query-sync-storage-persister": "^4.36.1",
 		"@tanstack/svelte-query": "^4.36.1",
 		"datetrigger": "^1.1.1",
+		"moment": "^2.30.1",
 		"svelte-material-icons": "^3.0.5"
 	}
 }

src/app.scss

@@ -83,6 +83,10 @@ body {
 	background-color: var(--tertiary);
 }
 
+mark {
+	background-color: var(--secondary);
+}
+
 /*-----headings-----*/
 
 h1 {
@@ -170,14 +174,21 @@ hr {
 	border-top: 1px solid var(--border);
 }
 
-input {
+textarea {
+	resize: vertical;
+	field-sizing: content;
+}
+
+input,
+textarea {
 	padding: 1rem;
 	border-radius: 12px;
 	border: 1px solid var(--border);
 	background-color: transparent;
 	color: var(--secondary);
 }
 
-input:focus {
+input:focus,
+textarea:focus {
 	outline: 1px solid var(--primary);
 }

src/data/api/index.ts

@@ -10,8 +10,12 @@ import type {
 	CryptoWallet,
 	Social,
 	About,
-	CompatiblePackage
+	CompatiblePackage,
+	ResponseAnnouncement,
+	Announcement,
+	Tags
 } from '$lib/types';
+import { get_access_token, is_logged_in, UnauthenticatedError } from '$lib/auth';
 
 export type ContributorsData = { contributables: Contributable[] };
 export type PatchesData = { patches: Patch[]; packages: string[] };
@@ -20,10 +24,70 @@ export type TeamData = { members: TeamMember[] };
 export type AboutData = { about: About };
 export type DonationData = { wallets: CryptoWallet[]; platforms: DonationPlatform[] };
 export type SocialsData = { socials: Social[] };
+export type AnnouncementsData = { announcements: ResponseAnnouncement[] };
+
+type GetAnnouncementsOptions = Partial<{
+	tags: string[];
+	count: number;
+	cursor: number;
+}>;
+
+export function build_url(endpoint: string) {
+	// //////v4/contributors -> v4/contributors
+	endpoint = endpoint.replace(/^\/+/, '');
+
+	// v4/contributors -> contributors
+	if (endpoint.startsWith(settings.API_VERSION)) endpoint = endpoint.split('/').slice(1).join('/');
+
+	return `${settings.api_base_url()}/${settings.API_VERSION}/${endpoint}`;
+}
+
+function build_headers() {
+	const access_token_data = get_access_token();
+	return {
+		'Content-Type': 'application/json',
+		Authorization: access_token_data ? `Bearer ${access_token_data.token}` : ''
+	};
+}
 
 async function get_json(endpoint: string) {
-	const url = `${settings.api_base_url()}/${endpoint}`;
-	return await fetch(url).then((r) => r.json());
+	return await fetch(build_url(endpoint)).then((r) => r.json());
+}
+
+async function post_json(endpoint: string, body?: any) {
+	if (!is_logged_in()) throw new UnauthenticatedError();
+	const headers = build_headers();
+	return await fetch(build_url(endpoint), {
+		method: 'POST',
+		headers,
+		body: body ? JSON.stringify(body) : ''
+	}).then((r) => {
+		return r.headers.get('content-length') === '0' ? null : r.json();
+	});
+}
+
+async function patch_json(endpoint: string, body?: any) {
+	if (!is_logged_in()) throw new UnauthenticatedError();
+	const headers = build_headers();
+	return await fetch(build_url(endpoint), {
+		method: 'PATCH',
+		headers,
+		body: body ? JSON.stringify(body) : ''
+	}).then((r) => {
+		return r.headers.get('content-length') === '0' ? null : r.json();
+	});
+}
+
+async function delete_json(endpoint: string, body?: any) {
+	if (!is_logged_in()) throw new UnauthenticatedError();
+	const headers = build_headers();
+	return await fetch(build_url(endpoint), {
+		method: 'DELETE',
+		headers,
+		body: body ? JSON.stringify(body) : ''
+	}).then((r) => {
+		return r.headers.get('content-length') === '0' ? null : r.json();
+	});
 }
 
 async function contributors(): Promise<ContributorsData> {
@@ -74,31 +138,97 @@ async function about(): Promise<AboutData> {
 	return { about: json };
 }
 
+async function announcements(options: GetAnnouncementsOptions = {}): Promise<AnnouncementsData> {
+	const url = new URL(build_url('announcements'));
+
+	if (options.tags && options.tags.length > 0) url.searchParams.set('tags', options.tags.join(','));
+	if (options.count) url.searchParams.set('count', String(options.count));
+	if (options.cursor) url.searchParams.set('cursor', String(options.cursor));
+
+	const announcements = (await get_json('announcements')) as ResponseAnnouncement[];
+
+	return { announcements };
+}
+
+async function get_announcement_by_id(id: number): Promise<{ announcement: ResponseAnnouncement }> {
+	return { announcement: (await get_json(`announcements/${id}`)) as ResponseAnnouncement };
+}
+
+async function announcementTags(): Promise<{ tags: Tags }> {
+	return { tags: (await get_json(`announcements/tags`)) as Tags };
+}
+
+function show_error_alert(res: Response) {
+	alert(`A ${res.status < 500 ? 'user' : 'server'} error occurred. Please try again.`);
+}
+
+export async function create_announcement(announcement: Announcement) {
+	await post_json('announcements', announcement).catch(show_error_alert);
+}
+
+export async function update_announcement(id: number, announcement: Announcement) {
+	await patch_json(`announcements/${id}`, announcement).catch(show_error_alert);
+}
+
+export async function delete_announcement(id: number) {
+	await delete_json(`announcements/${id}`).catch(show_error_alert);
+}
+
+export async function archive_announcement(id: number) {
+	await post_json(`announcements/${id}/archive`).catch(show_error_alert);
+}
+
+export async function unarchive_announcement(id: number) {
+	await post_json(`announcements/${id}/unarchive`).catch(show_error_alert);
+}
+
+export const admin = {
+	create_announcement,
+	update_announcement,
+	delete_announcement,
+	archive_announcement,
+	unarchive_announcement
+};
+
 export const staleTime = 5 * 60 * 1000;
 export const queries = {
-	manager: {
+	manager: () => ({
 		queryKey: ['manager'],
 		queryFn: manager,
 		staleTime
-	},
-	patches: {
+	}),
+	patches: () => ({
 		queryKey: ['patches'],
 		queryFn: patches,
 		staleTime
-	},
-	contributors: {
+	}),
+	contributors: () => ({
 		queryKey: ['contributors'],
 		queryFn: contributors,
 		staleTime
-	},
-	team: {
+	}),
+	team: () => ({
 		queryKey: ['team'],
 		queryFn: team,
 		staleTime
-	},
-	about: {
+	}),
+	about: () => ({
 		queryKey: ['info'],
 		queryFn: about,
 		staleTime
-	}
+	}),
+	announcements: () => ({
+		queryKey: ['announcements'],
+		queryFn: () => announcements(),
+		staleTime
+	}),
+	announcementById: (id: number) => ({
+		queryKey: ['announcementById', id],
+		queryFn: () => get_announcement_by_id(id)
+	}),
+	announcementTags: () => ({
+		queryKey: ['announcementTags'],
+		queryFn: () => announcementTags(),
+		staleTime
+	})
 };

src/data/api/settings.ts

@@ -5,6 +5,8 @@ export const default_api_url = RV_API_URL;
 
 const URL_KEY = 'revanced_api_url';
 
+export const API_VERSION = 'v4';
+
 // Get base URL
 export function api_base_url(): string {
 	if (browser) {
@@ -14,11 +16,8 @@ export function api_base_url(): string {
 	return default_api_url;
 }
 
-// (re)set base URL.
+// (Re)set base URL.
 export function set_api_base_url(url?: string) {
-	if (!url) {
-		localStorage.removeItem(URL_KEY);
-	} else {
-		localStorage.setItem(URL_KEY, url);
-	}
+	if (!url) localStorage.removeItem(URL_KEY);
+	else localStorage.setItem(URL_KEY, url);
 }

src/layout/Footer/FooterHost.svelte

@@ -7,11 +7,11 @@
 
 	import Query from '$lib/components/Query.svelte';
 	import FooterSection from './FooterSection.svelte';
-
+	import Divider from '$lib/components/Divider.svelte';
 	import { RV_DMCA_GUID } from '$env/static/public';
 	import { onMount } from 'svelte';
 
-	const aboutQuery = createQuery(['about'], queries.about);
+	const aboutQuery = createQuery(queries.about());
 
 	let location: string;
 
@@ -22,22 +22,7 @@
 </script>
 
 <!-- squiggly divider line -->
-<svg
-	aria-hidden="true"
-	width="100%"
-	height="8"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
-	in:fly={{ y: 10, easing: quintOut, duration: 750 }}
->
-	<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>
+<Divider />
 <footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<div class="footer-top">
 		<section class="main-content">

src/layout/Hero/SocialHost.svelte

@@ -4,7 +4,7 @@
 	import { createQuery } from '@tanstack/svelte-query';
 	import Query from '$lib/components/Query.svelte';
 
-	const aboutQuery = createQuery(['about'], queries.about);
+	const aboutQuery = createQuery(queries.about());
 </script>
 
 <div class="social-host">