fix: move download page components to home

This commit is contained in:
PalmDevs 2024-06-06 23:04:54 +07:00
parent c54c69b5ac
commit d4a5f87760
No known key found for this signature in database
GPG Key ID: 3E6E83A6DD60F38D
4 changed files with 59 additions and 158 deletions

View File

@ -47,7 +47,6 @@
<section class="links-container"> <section class="links-container">
<FooterSection title="Pages"> <FooterSection title="Pages">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/download">Download</a></li>
<li><a href="/patches">Patches</a></li> <li><a href="/patches">Patches</a></li>
<li><a href="/contributors">Contributors</a></li> <li><a href="/contributors">Contributors</a></li>
<li><a href="/donate">Donate</a></li> <li><a href="/donate">Donate</a></li>

View File

@ -1,7 +1,57 @@
<script> <script lang="ts">
import Button from '$lib/components/Button.svelte'; import Button from "$lib/components/Button.svelte";
import { queries } from "$data/api";
import { onMount } from "svelte";
import { createQuery } from "@tanstack/svelte-query";
import Query from "$lib/components/Query.svelte";
import Dialogue from "$lib/components/Dialogue.svelte";
const query = createQuery(["manager"], queries.manager);
let warning: string;
let warningDialogue = false;
let userAgent: string;
let isAndroid: boolean;
let androidVersionMatch: RegExpExecArray | null;
let androidVersion: number;
let managerUrl: string;
onMount(() => {
userAgent = navigator.userAgent;
androidVersionMatch = /Android\s([\d.]+)/i.exec(userAgent);
androidVersion = androidVersionMatch ? parseInt(androidVersionMatch[1]) : 0;
isAndroid = !!androidVersion;
});
query.subscribe((val) => {
if (val.data) managerUrl = val.data.assets[0].browser_download_url;
});
function handleClick() {
if (!isAndroid) {
warning = "Your device is not running Android.";
warningDialogue = true;
} else if (androidVersion < 8) {
warning = `Your device is running ${androidVersion}. ReVanced Manager only supports Android versions 8 and above.`;
warningDialogue = true;
}
}
</script> </script>
<Dialogue bind:modalOpen={warningDialogue}>
<svelte:fragment slot="title">Device unsupported</svelte:fragment>
<svelte:fragment slot="description">{warning} Do you still want to download ReVanced Manager?</svelte:fragment>
<svelte:fragment slot="buttons">
<Button
type="text"
href={managerUrl}
on:click={() => (warningDialogue = false)}>Download</Button
>
<Button type="text" on:click={() => (warningDialogue = false)}>Cancel</Button>
</svelte:fragment>
</Dialogue>
<section class="hero"> <section class="hero">
<div class="hero-text"> <div class="hero-text">
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1> <h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
@ -9,7 +59,13 @@
Customize your mobile experience through ReVanced <br /> by applying patches to your applications. Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
</p> </p>
<div class="hero-buttons"> <div class="hero-buttons">
<Button icon="download" type="filled" href="download">Download</Button> <Button
on:click={handleClick}
type="filled"
icon="download"
>
Download Manager
</Button>
<Button icon="docs" type="tonal" href="patches">View patches</Button> <Button icon="docs" type="tonal" href="patches">View patches</Button>
</div> </div>
</div> </div>

View File

@ -72,7 +72,6 @@
<div id="main-navigation"> <div id="main-navigation">
<ul class="nav-buttons"> <ul class="nav-buttons">
<Navigation href="/" label="Home">Home</Navigation> <Navigation href="/" label="Home">Home</Navigation>
<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation> <Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
<Navigation queryKey="repositories" href="/contributors" label="Contributors"> <Navigation queryKey="repositories" href="/contributors" label="Contributors">
Contributors Contributors

View File

@ -1,153 +0,0 @@
<script lang="ts">
import { queries } from '$data/api';
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import { createQuery } from '@tanstack/svelte-query';
import manager_screenshot from '$images/manager.png?format=avif;webp;png&as=picture';
import Head from '$lib/components/Head.svelte';
import Query from '$lib/components/Query.svelte';
import Button from '$lib/components/Button.svelte';
import Footer from '$layout/Footer/FooterHost.svelte';
import Picture from '$lib/components/Picture.svelte';
import Dialogue from '$lib/components/Dialogue.svelte';
import { onMount } from 'svelte';
const query = createQuery(['manager'], queries.manager);
let warning: string;
let warningDialogue = false;
let userAgent: string;
let isAndroid: boolean;
let androidVersionMatch: RegExpExecArray | null;
let androidVersion: number;
onMount(() => {
userAgent = navigator.userAgent;
androidVersionMatch = /Android\s([\d.]+)/i.exec(userAgent);
androidVersion = androidVersionMatch ? parseInt(androidVersionMatch[1]) : 0;
isAndroid = !!androidVersion;
});
function handleClick() {
if (!isAndroid) {
warning = 'Your device is not running Android.';
warningDialogue = true;
} else if (androidVersion < 8) {
warning = `Your device is running ${androidVersion}. ReVanced only supports Android versions 8 and above.`;
warningDialogue = true;
}
}
</script>
<Head
title="Download ReVanced"
description="Download ReVanced Manager to patch your favourite apps, right on your device."
schemas={[
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
{
'@type': 'ListItem',
position: 1,
name: 'Home',
item: 'https://revanced.app/'
},
{
'@type': 'ListItem',
position: 2,
name: 'Download',
item: 'https://revanced.app/download'
}
]
}
]}
/>
<Dialogue bind:modalOpen={warningDialogue}>
<svelte:fragment slot="title">Warning</svelte:fragment>
<svelte:fragment slot="description">{warning} Do you still want to download?</svelte:fragment>
<svelte:fragment slot="buttons">
<Query {query} let:data>
<Button
type="text"
href={data.assets[0].browser_download_url}
on:click={() => (warningDialogue = false)}>Okay</Button
>
</Query>
<Button type="text" on:click={() => (warningDialogue = false)}>Cancel</Button>
</svelte:fragment>
</Dialogue>
<div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<h2>ReVanced <span>Manager</span></h2>
<p>Patch your favourite apps, right on your device.</p>
<div class="buttons">
<Query {query} let:data>
{#if !isAndroid || androidVersion < 8}
<Button on:click={handleClick} type="filled" icon="download">
{data.metadata.tag_name}
</Button>
{:else}
<Button
on:click={handleClick}
type="filled"
icon="download"
href={data.assets[0].browser_download_url}
>
{data.metadata.tag_name}
</Button>
{/if}
</Query>
<Button type="tonal" href="https://github.com/revanced/revanced-manager" target="_blank">
View Source
</Button>
</div>
<div class="screenshot">
<Picture data={manager_screenshot} alt="Manager Screenshot" />
</div>
</div>
<Footer />
<style>
.center {
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
text-align: center;
color: var(--white);
}
p {
text-align: center;
margin-bottom: 1.5rem;
}
.screenshot :global(img) {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
height: 50rem;
width: auto;
padding: 0.5rem 0.5rem;
border-radius: 2rem;
background-color: var(--grey-six);
user-select: none;
}
.buttons {
display: flex;
gap: 1rem;
}
span {
color: var(--accent-color);
}
</style>