mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
feat: cooler info chips, minor refactoring
This commit is contained in:
afn
parent
831c4d9d47
commit
aac71915e5
@ -1,14 +1,12 @@
|
||||
import { readable } from 'svelte/store';
|
||||
import type { Repository } from '$lib/types';
|
||||
import type { Repository } from 'src/data/types';
|
||||
|
||||
export type ContribData = { repositories: Repository[] };
|
||||
|
||||
const fetchContributors = async (): Promise<ContribData> => {
|
||||
const response = await fetch('https://releases.rvcd.win/contributors');
|
||||
const data = await response.json();
|
||||
return data;
|
||||
const data = await response.json();
|
||||
return data;
|
||||
};
|
||||
|
||||
export const ContributorsStore = readable(fetchContributors());
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { readable } from 'svelte/store';
|
||||
import type { Patch } from '$lib/types';
|
||||
import type { Patch } from 'src/data/types';
|
||||
|
||||
export type PatchesData = { patches: Patch[]; packages: string[] };
|
||||
|
||||
|
||||
@ -1,29 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { slide, fade } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import type { CompatiblePackage, PatchOption } from '$lib/types';
|
||||
import type { CompatiblePackage, Patch } from 'src/data/types';
|
||||
|
||||
export let name: string;
|
||||
export let description: string;
|
||||
export let version: string;
|
||||
export let options: PatchOption[];
|
||||
export let compatiblePackages: CompatiblePackage[];
|
||||
export let hasPatchOptions: boolean;
|
||||
export let patch: Patch;
|
||||
export let current: boolean;
|
||||
|
||||
const hasPatchOptions = !!patch.options.length;
|
||||
let expanded: boolean = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="patch-container {hasPatchOptions ? 'expanded' : ''}"
|
||||
class:rotate={expanded === true}
|
||||
class="patch-container"
|
||||
class:expanded={hasPatchOptions}
|
||||
class:rotate={expanded}
|
||||
on:click={() => (expanded = !expanded)}
|
||||
>
|
||||
<div class="things">
|
||||
<div class="title">
|
||||
<h1>
|
||||
{name
|
||||
{patch.name
|
||||
// im sorry
|
||||
.replace(/-/g, ' ')
|
||||
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())
|
||||
@ -40,25 +36,30 @@
|
||||
</div>
|
||||
|
||||
<div class="info-container">
|
||||
{#each compatiblePackages as pkg, i}
|
||||
{#each patch.compatiblePackages as pkg, i}
|
||||
{#if current === false}
|
||||
<h2>{pkg.name}</h2>
|
||||
<h2>📦 {pkg.name}</h2>
|
||||
{/if}
|
||||
<!-- gets only the last supported version (cant get 'any' to work without duplicates help) -->
|
||||
<!-- gets only the lastest supported version (cant get 'any' to work without duplicates help) -->
|
||||
{#if i < pkg.versions.length - 1}
|
||||
<h2>
|
||||
Target Package Version: {pkg.versions.slice(-1)[0] || 'Any'}
|
||||
🎯 {pkg.versions.slice(-1)[0] || 'Any'}
|
||||
</h2>
|
||||
{/if}
|
||||
{/each}
|
||||
<h2>Patch Version: {version}</h2>
|
||||
|
||||
<h2>🧩 {patch.version}</h2>
|
||||
|
||||
{#if hasPatchOptions}
|
||||
<h2>⚙️ Patch Options</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<h4>{description}</h4>
|
||||
<h4>{patch.description}</h4>
|
||||
|
||||
{#if expanded && hasPatchOptions}
|
||||
<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
|
||||
<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
|
||||
{#each options as option}
|
||||
{#each patch.options as option}
|
||||
<div class="option">
|
||||
<h3>{option.title}</h3>
|
||||
<h4>{option.description}</h4>
|
||||
@ -117,7 +118,6 @@
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
|
||||
.patch-container:active {
|
||||
background-color: var(--grey-three);
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<script lang="ts">
|
||||
export let current: string | boolean;
|
||||
export let name: string;
|
||||
export let current: string | boolean;
|
||||
export let name: string;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="package"
|
||||
class:selected = {current === name}
|
||||
on:click={() => (current = (current === name) ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
class:selected={current === name}
|
||||
on:click={() =>
|
||||
(current = current === name ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
>
|
||||
<h3>{name}</h3>
|
||||
<h3>{name}</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.package {
|
||||
padding: 0.6rem;
|
||||
@ -42,9 +42,9 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.package > h3 {
|
||||
color: var(--grey-five);
|
||||
@ -64,4 +64,4 @@
|
||||
.package:not(.selected):hover > h3 {
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { Contributor } from '$lib/types';
|
||||
import type { Contributor } from 'src/data/types';
|
||||
import ContributorButton from '../atoms/ContributorPerson.svelte';
|
||||
|
||||
export let contribs: Contributor[];
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { ContribData } from '../../../data/ContributorsStore';
|
||||
import { ContributorsStore } from '../../../data/ContributorsStore';
|
||||
|
||||
|
||||
let data: ContribData;
|
||||
|
||||
onMount(() => {
|
||||
@ -20,8 +20,8 @@
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
<div>
|
||||
<h1>
|
||||
<span>Re</span>Vanced
|
||||
</h1>
|
||||
<span>Re</span>Vanced
|
||||
</h1>
|
||||
<h6>Copyright © 2022, we are very legal</h6>
|
||||
</div>
|
||||
</section>
|
||||
@ -39,17 +39,18 @@
|
||||
<h5>Repos</h5>
|
||||
{#if data}
|
||||
{#each data.repositories as { name }}
|
||||
<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
|
||||
<div>
|
||||
<h6>{name
|
||||
.replace(/-/g, ' ')
|
||||
.replace(/revanced\/revanced/g, '')
|
||||
.replace(/cli/g, 'CLI')
|
||||
.replace(/api/g, 'API')
|
||||
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
|
||||
</h6>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
|
||||
<div>
|
||||
<h6>
|
||||
{name
|
||||
.replace(/-/g, ' ')
|
||||
.replace(/revanced\/revanced/g, '')
|
||||
.replace(/cli/g, 'CLI')
|
||||
.replace(/api/g, 'API')
|
||||
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
|
||||
</h6>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
@ -67,7 +68,6 @@
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
|
||||
footer {
|
||||
margin: 4rem 0 5rem 0;
|
||||
margin-inline: auto;
|
||||
@ -81,14 +81,14 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.main-content span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.main-content span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.main-content h1 {
|
||||
letter-spacing: -0.04rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.main-content h1 {
|
||||
letter-spacing: -0.04rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 3rem;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import type { Patch } from '$lib/types';
|
||||
import type { CompatiblePackage, Patch } from 'src/data/types';
|
||||
import type { PatchesData } from '../../data/PatchesStore';
|
||||
import { PatchesStore } from '../../data/PatchesStore';
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
import PatchCell from '$lib/components/atoms/PatchCell.svelte';
|
||||
import Footer from '$lib/components/molecules/Footer.svelte';
|
||||
|
||||
let patches: Patch[]
|
||||
let packages: string[];
|
||||
let patches: Patch[];
|
||||
let packages: string[];
|
||||
let current: boolean = false;
|
||||
|
||||
onMount(() => {
|
||||
@ -22,14 +22,14 @@
|
||||
});
|
||||
});
|
||||
|
||||
function search(findTerm, array){
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
if (array[i].name === findTerm) {
|
||||
return true;
|
||||
};
|
||||
};
|
||||
return false;
|
||||
};
|
||||
function search(findTerm: string | boolean, array: CompatiblePackage[]) {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
if (array[i].name === findTerm) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -51,20 +51,12 @@
|
||||
|
||||
<div class="patches-container">
|
||||
{#if patches}
|
||||
{#each patches as { name, description, version, options, compatiblePackages }, i}
|
||||
{#if search(current, compatiblePackages) || !current}
|
||||
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
|
||||
<PatchCell
|
||||
bind:current
|
||||
{name}
|
||||
{description}
|
||||
{version}
|
||||
{options}
|
||||
{compatiblePackages}
|
||||
hasPatchOptions={!!options.length}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#each patches as patch, i}
|
||||
{#if search(current, patch.compatiblePackages) || !current}
|
||||
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
|
||||
<PatchCell bind:current {patch} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
@ -89,7 +81,7 @@
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
min-height: calc(100vh - 7.5rem);
|
||||
min-height: calc(100vh - 7.5rem);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user