ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-06-12 21:27:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: cooler info chips, minor refactoring

Browse Source
This commit is contained in:
afn
2022-10-23 10:54:19 -04:00
parent 831c4d9d47
commit aac71915e5
8 changed files with 74 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/components/atoms/PatchCell.svelte
View File

@ -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);
}

20
src/lib/components/atoms/TreeMenuButton.svelte
View File

@ -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>

2
src/lib/components/molecules/ContributorHost.svelte
View File

@ -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[];

44
src/lib/components/molecules/Footer.svelte
View File

@ -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;

34
src/lib/types.ts
View File

@ -1,34 +0,0 @@
export interface Contributor {
login: string;
avatar_url: string;
html_url: string;
}
export interface Repository {
name: string;
contributors: Contributor[];
}
export interface Patch {
name: string;
description: string;
version: string;
excluded: boolean;
deprecated: boolean;
dependencies: string[];
options: PatchOption[];
compatiblePackages: CompatiblePackage[];
}
export interface CompatiblePackage {
name: string;
versions: string[];
}
export interface PatchOption {
key: string;
title: string;
description: string;
required: boolean;
choices: string[];
}