mirror of
https://github.com/ReVanced/revanced-website.git
synced 2026-01-26 04:11:02 +00:00
feat: use svelte query (#63)
This commit is contained in:
Ax333l
GitHub
@@ -1,6 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { repositories } from '$data/api';
|
||||
import { queries } from '$data/api';
|
||||
import { friendlyName } from '$lib/utils';
|
||||
|
||||
import { createQuery } from '@tanstack/svelte-query';
|
||||
import Query from '$lib/components/Query.svelte';
|
||||
|
||||
const query = createQuery(['repositories'], queries.repositories);
|
||||
</script>
|
||||
|
||||
<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -20,14 +25,15 @@
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
<div>
|
||||
<p>
|
||||
ReVanced was born out of Vanced's discontinuation and it is our goal to continue the legacy
|
||||
of what Vanced left behind. Thanks to ReVanced Patcher, it's possible to create long-lasting
|
||||
patches for nearly any Android app. ReVanced's patching system is designed to allow patches
|
||||
to work on new versions of the apps automatically with bare minimum maintenance.
|
||||
ReVanced was born out of Vanced's discontinuation and it is our goal to continue the
|
||||
legacy of what Vanced left behind. Thanks to ReVanced Patcher, it's possible to create
|
||||
long-lasting patches for nearly any Android app. ReVanced's patching system is designed to
|
||||
allow patches to work on new versions of the apps automatically with bare minimum
|
||||
maintenance.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="links-container">
|
||||
<div class="link-column">
|
||||
<li>Pages</li>
|
||||
@@ -39,23 +45,31 @@
|
||||
</div>
|
||||
<div class="link-column">
|
||||
<li>Repositories</li>
|
||||
{#each $repositories as { name }}
|
||||
<li>
|
||||
<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
|
||||
{friendlyName(name)}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<Query {query} let:data>
|
||||
{#each data as { name }}
|
||||
<li>
|
||||
<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
|
||||
{friendlyName(name)}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</Query>
|
||||
</div>
|
||||
<div class="link-column">
|
||||
<!-- to replace -->
|
||||
<li>Socials</li>
|
||||
<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
|
||||
<li><a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a></li>
|
||||
<li><a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a></li>
|
||||
<li>
|
||||
<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a>
|
||||
</li>
|
||||
<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
|
||||
<li><a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a></li>
|
||||
<li><a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a></li>
|
||||
<li>
|
||||
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a>
|
||||
</li>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -66,7 +80,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<style>
|
||||
footer {
|
||||
margin: 4rem 0 5rem 0;
|
||||
@@ -95,7 +108,7 @@
|
||||
}
|
||||
|
||||
#logo-name span {
|
||||
color: var(--accent-color)
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.footer-bottom a {
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { queries } from '$data/api';
|
||||
import { dev_log } from '$lib/utils';
|
||||
|
||||
import RouterEvents from '$data/RouterEvents';
|
||||
import { useQueryClient } from '@tanstack/svelte-query';
|
||||
const client = useQueryClient();
|
||||
|
||||
export let href: string;
|
||||
export let queryKey: null | keyof typeof queries = null;
|
||||
|
||||
function prefetch() {
|
||||
if (queryKey !== null) {
|
||||
const query = queries[queryKey];
|
||||
dev_log('Prefetching', query);
|
||||
client.prefetchQuery(query as any);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<a data-sveltekit-preload-data {href}>
|
||||
<a data-sveltekit-preload-data on:mouseenter={prefetch} {href}>
|
||||
<!-- Check if href is equal to the first path -->
|
||||
<li class:selected={href === '/' + $RouterEvents.target_url.pathname.split('/')[1]}>
|
||||
<span><slot /></span>
|
||||
|
||||
@@ -9,10 +9,21 @@
|
||||
import Modal from '$lib/components/Dialogue.svelte';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
|
||||
import { clear_and_reload } from '$data/api/cache';
|
||||
import * as settings from '$data/api/settings';
|
||||
import RouterEvents from '$data/RouterEvents';
|
||||
|
||||
import { useQueryClient } from '@tanstack/svelte-query';
|
||||
|
||||
const client = useQueryClient();
|
||||
|
||||
function clear_and_reload() {
|
||||
client.clear();
|
||||
// `client.clear()` does technically do this for us, but it takes a while.
|
||||
localStorage.clear();
|
||||
|
||||
location.reload();
|
||||
}
|
||||
|
||||
let url = settings.api_base_url();
|
||||
|
||||
function save() {
|
||||
@@ -58,13 +69,13 @@
|
||||
<div id="main-navigation">
|
||||
<div class="nav-buttons">
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation href="/patches">Patches</Navigation>
|
||||
<Navigation queryKey="manager" href="/download">Download</Navigation>
|
||||
<Navigation queryKey="patches" href="/patches">Patches</Navigation>
|
||||
<div hidden>
|
||||
<!-- This is just temporary so the build doesn't fail -->
|
||||
<Navigation href="/docs">Docs</Navigation>
|
||||
</div>
|
||||
<Navigation href="/contributors">Contributors</Navigation>
|
||||
<Navigation queryKey="repositories" href="/contributors">Contributors</Navigation>
|
||||
</div>
|
||||
</div>
|
||||
<div id="secondary-navigation">
|
||||
@@ -93,14 +104,16 @@
|
||||
<Modal bind:modalOpen>
|
||||
<svelte:fragment slot="icon">
|
||||
<Svg viewBoxHeight={24} viewBoxWidth={24} svgHeight={24}>
|
||||
<rect fill="none" height="24" width="24"/>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
<path
|
||||
d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
|
||||
/>
|
||||
</Svg>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="title">Settings</svelte:fragment>
|
||||
<svelte:fragment slot="description">Configure the website's API. Defaults to ReVanced.</svelte:fragment>
|
||||
<svelte:fragment slot="description"
|
||||
>Configure the website's API. Defaults to ReVanced.</svelte:fragment
|
||||
>
|
||||
<div id="settings-content">
|
||||
<div class="input-wrapper">
|
||||
<input name="api-url" type="text" bind:value={url} />
|
||||
|
||||
Reference in New Issue
Block a user