ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-28 12:20:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: polling init

Browse Source
This commit is contained in:
afn 2022-11-13 21:47:48 -05:00
parent 357440d552
commit 7ebd43016a
17 changed files with 124 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

@ -30,9 +30,13 @@ body {
.wrapper {
margin-inline: auto;
width: min(90%, 100rem);
margin-top: 7rem;
margin-top: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
:root {
--white: #fff;
--accent-color: #9fd5ff;

6
src/lib/components/atoms/Button.svelte
View File

@ -9,7 +9,9 @@
<a {href} {target}>
<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
<img src="../icons/{icon}.svg" alt={icon} />
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
{/if}
<slot />
</div>
</a>
@ -46,8 +48,6 @@
filter: brightness(85%);
}
div,
.button-secondary {
display: flex;

43
src/lib/components/atoms/ContributorPerson.svelte
View File

@ -2,10 +2,13 @@
export let name: string;
export let pfp: string;
export let url: string;
let alt = `${name}'s profile picture`;
let alt = `h`;
let clicked = false;
</script>
<a href={url} rel="noreferrer" target="_blank">
<a href={url} rel="noreferrer" target="_blank" on:click={() => (clicked = !clicked)} class:clicked>
<img src={pfp} {alt} />
<h2>{name}</h2>
</a>
@ -14,24 +17,20 @@
a {
color: var(--white);
text-decoration: none;
padding: 0.5rem;
padding: 1rem;
width: 100%;
transition: all 0.3s var(--bezier-one);
border-radius: 4px;
border-radius: 8px;
display: flex;
gap: 1rem;
align-items: center;
background-color: var(--grey-six);
border: 1px solid var(--grey-three);
cursor: pointer;
}
a:hover {
background-color: var(--accent-color);
}
a:hover > h2 {
color: var(--grey-four);
background-color: var(--grey-one);
}
h2 {
@ -41,12 +40,30 @@
text-overflow: ellipsis;
}
.clicked {
background-color: var(--accent-color);
}
.clicked h2 {
color: var(--grey-four);
}
.clicked:hover {
background-color: var(--accent-color);
}
img {
border-radius: 50%;
height: 30px;
width: 30px;
border-radius: 8px;
height: 150px;
width: 150px;
background-color: var(--grey-two);
transition: transform 0.4s var(--bezier-one);
user-select: none;
}
@media screen and (max-width: 768px) {
a {
flex-direction: column;
}
}
</style>

2
src/routes/+error.svelte
View File

@ -8,7 +8,7 @@
<section class="error">
<h1>{status}</h1>
{#if status == 404}
<p>That page received a cease and desist letter from a multi-billion dollar tech company.</p>
<p>ReVanced Website is still a work in progress.</p>
<br />
<Navigation href="/" is_selected={() => true}>Home</Navigation>
{:else}

2
src/routes/+layout.svelte
View File

@ -30,8 +30,6 @@
<meta name="theme-color" content="#9FD5FF" />
</svelte:head>
<NavHost />
{#if $show_loading_animation}
<Spinner />
{:else}

26
src/routes/api-settings/+page.svelte
View File

@ -1,26 +0,0 @@
<script lang="ts">
import * as settings from '../../data/api/settings';
import { clear } from '../../data/api/cache';
let url = settings.api_base_url();
function handler() {
clear();
settings.set_api_base_url(url);
location.reload(true);
}
</script>
<section class="settings">
<input name="api-url" type="text" bind:value={url} />
<button on:click={handler}>Save</button>
</section>
<section class="cache">
<button on:click={clear}>Clear cache</button>
</section>
<style>
.settings {
padding-top: 5rem;
}
</style>

87
src/routes/contributors/+page.svelte
View File

@ -1,87 +0,0 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
import Footer from '$lib/components/molecules/Footer.svelte';
import { repositories } from '../../data/api';
</script>
<svelte:head>
<title>ReVanced | Contributors</title>
<meta content="ReVanced | Contributors" name="og:title" />
<meta content="ReVanced | Contributors" name="twitter:title" />
</svelte:head>
<main>
<div class="wrapper">
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<h1>Made possible by the community.</h1>
<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
</div>
<div class="contrib-grid">
{#each $repositories as { contributors: contribs, name }}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<ContributorHost {contribs} repo={name} />
</div>
{/each}
</div>
</div>
</main>
<Footer />
<style>
.contrib-grid {
display: flex;
flex-direction: column;
gap: 3rem;
margin-bottom: 3rem;
}
h1 {
font-size: 2.25rem;
font-weight: 600;
text-align: center;
color: var(--grey-four);
}
h2 {
font-size: 1rem;
color: var(--grey-four);
text-align: center;
}
.text-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 2rem;
background-color: var(--accent-color);
padding: 2rem;
border-radius: 8px;
}
a {
text-decoration: none;
color: var(--grey-four);
}
a::after {
padding-left: 5px;
content: '->';
position: absolute;
transition: all 0.3s var(--bezier-one);
}
a:hover::after {
transform: translateX(5px);
}
@media screen and (max-width: 768px) {
h1 {
font-size: 2rem;
}
}
</style>

10
src/routes/docs/+layout.server.ts
View File

@ -1,10 +0,0 @@
import type { PageServerLoad } from './$types';
import { index_content } from '$lib/documentation.server';
// The load function here used to get data from a json file created by a (prerendered) server route.
// This was because we could not prerender the documentation route before.
// If you can no longer prerender the docs, then you are going to have to move the load functions here to a prerendered server route like before and fetch them here.
export const prerender = true;
export const load: PageServerLoad = () => ({ tree: index_content() });

34
src/routes/docs/+layout.svelte
View File

@ -1,34 +0,0 @@
<script lang="ts">
import type { PageData } from './$types';
import DocsNavTree from '$lib/components/molecules/DocsNavTree.svelte';
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
export let data: PageData;
</script>
<section id="doc-section-main" in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
<div class="menu">
<DocsNavTree tree={data.tree} />
</div>
<slot></slot>
</section>
<style lang="scss">
.menu {
padding: 90px 15px 0px 15px;
display: flex;
flex-direction: column;
gap: 1rem;
}
#doc-section-main {
display: grid;
grid-template-columns: 300px 3fr;
height: 100vh;
width: 100%;
}
</style>

17
src/routes/docs/[...slug]/+page.server.ts
View File

@ -1,17 +0,0 @@
import type { PageServerLoad } from './$types';
import { error } from '@sveltejs/kit';
import { get } from '$lib/documentation.server';
// See also: ../+layout.server.ts
export const prerender = true;
export const load: PageServerLoad = ({ params }) => {
const document = get(params.slug);
if (document === null) {
error
throw error(404);
}
return document;
}

22
src/routes/docs/[...slug]/+page.svelte
View File

@ -1,22 +0,0 @@
<script lang="ts">
import type { PageData } from './$types';
import '$lib/documentation.scss';
// Data here comes from a trusted source.
// CSS comes from the layout.
export let data: PageData;
</script>
<svelte:head>
<title>ReVanced | Docs</title>
<meta content="ReVanced | Docs" name="og:title" />
<meta content="ReVanced | Docs" name="twitter:title" />
</svelte:head>
<div id="markup-content">
<h1 class="title">{data.title}</h1>
{@html data.content}
</div>

51
src/routes/download/+page.svelte
View File

@ -1,51 +0,0 @@
<script lang="ts">
import { tools } from '../../data/api';
import Button from '$lib/components/atoms/Button.svelte';
import Footer from '$lib/components/molecules/Footer.svelte';
$: manager = $tools['revanced/revanced-manager'];
</script>
<div class="wrapper">
<h1>ReVanced <span>Manager</span></h1>
<h6>Patch your favourite apps, on-device.</h6>
<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
<img src="../manager_two.png" alt="Manager Screenshot" />
</div>
<Footer />
<style>
div {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 3rem;
text-align: center;
color: var(--white);
}
h6 {
text-align: center;
margin-bottom: 1.5rem;
}
img {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
height: 50rem;
width: auto;
padding: 0.75rem 0.75rem;
border-radius: 2.5rem;
background-color: var(--grey-two);
box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
user-select: none;
}
span {
color: var(--accent-color)
}
</style>

5
src/routes/download/+page.ts
View File

@ -1,5 +0,0 @@
import type { PageLoad } from './$types';
import { tools } from '../../data/api';
export const load: PageLoad = tools.page_load_impl();

74
src/routes/patches/+page.svelte
View File

@ -1,74 +0,0 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import type { CompatiblePackage } from 'src/data/types';
import { patches as api_patches } from '../../data/api';
import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
import PatchCell from '$lib/components/molecules/PatchCell.svelte';
import Footer from '$lib/components/molecules/Footer.svelte';
$: ({ patches, packages } = $api_patches);
let current: boolean = false;
function search(findTerm: string | boolean, array: any) {
for (let i = 0; i < array.length; i++) {
if (array[i].name === findTerm) {
return true;
}
}
return false;
}
</script>
<svelte:head>
<title>ReVanced | Patches</title>
<meta content="ReVanced | Patches" name="og:title" />
<meta content="ReVanced | Patches" name="twitter:title" />
</svelte:head>
<main>
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<TreeMenu title="packages">
{#each packages as pkg}
<TreeMenuButton bind:current name={pkg} />
{/each}
</TreeMenu>
</aside>
<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
{#each patches as patch}
{#if search(current, patch.compatiblePackages) || !current}
<div>
<PatchCell bind:current {patch} />
</div>
{/if}
{/each}
</div>
</main>
<Footer />
<style>
main {
margin-inline: auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 300px 3fr;
gap: 1.5rem;
padding-bottom: 3rem;
}
.patches-container {
margin-top: 7.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
position: sticky;
z-index: 1;
min-height: calc(100vh - 7.5rem);
}
</style>

5
src/routes/patches/+page.ts
View File

@ -1,5 +0,0 @@
import type { PageLoad } from './$types';
import { patches } from '../../data/api';
export const load: PageLoad = patches.page_load_impl();

85
src/routes/polling/+page.svelte Normal file
View File

@ -0,0 +1,85 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import ContributorPerson from '$lib/components/atoms/ContributorPerson.svelte';
import Button from '$lib/components/atoms/Button.svelte';
let selected = [];
</script>
<svelte:head>
<title>ReVanced | Contributors</title>
<meta content="ReVanced | Contributors" name="og:title" />
<meta content="ReVanced | Contributors" name="twitter:title" />
</svelte:head>
<main>
<div class="wrapper">
<div class="text-container">
<h1>Page 1/5</h1>
</div>
<div class="contrib-grid">
<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn" />
<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn 2" />
<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn 3" />
<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="yes" />
</div>
<div class="buttons-container">
<Button>Previous</Button>
<Button kind="primary" href="https://next.com">Next</Button>
</div>
</div>
</main>
<style>
.contrib-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));;
flex-direction: column;
gap: 1rem;
margin-bottom: 3rem;
}
h1 {
font-size: 2.25rem;
font-weight: 600;
text-align: center;
color: var(--grey-four);
}
h2 {
font-size: 1rem;
color: var(--grey-four);
text-align: center;
}
.buttons-container {
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: right;
float: bottom;
}
.text-container {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 2rem;
background-color: var(--accent-color);
padding: 2rem;
border-radius: 8px;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 2rem;
}
.contrib-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));;
}
}
</style>

0
src/routes/contributors/+page.ts → src/routes/polling/+page.ts
View File