mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
refactor: restructure folder layout
This commit is contained in:
afn
parent
6ea64ef873
commit
c60a0a7731
@ -4,7 +4,7 @@
|
||||
box-sizing: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-family: var(--main-font);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ body {
|
||||
|
||||
.wrapper {
|
||||
margin-inline: auto;
|
||||
width: min(95%, 80rem);
|
||||
width: min(90%, 80rem);
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
@ -37,18 +37,20 @@ body {
|
||||
--main-font: "Manrope", sans-serif;
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
--white: hsl(206, 100%, 94%);
|
||||
--accent-color: #9fd5ff;
|
||||
--accent-color-two: hsl(208, 29%, 82%);
|
||||
--accent-low-opacity: #9ed7ff50;
|
||||
--accent-color: hsl(206, 100%, 81%);
|
||||
--accent-color-two: hsl(208, 28%, 82%);
|
||||
--accent-low-opacity: hsla(205, 100%, 81%, 0.1);
|
||||
--bg-color: hsl(252, 10%, 11%);
|
||||
--grey-one: #252b31;
|
||||
--grey-two: #28313b;
|
||||
--grey-three: #373e4d;
|
||||
--grey-four: #182244;
|
||||
--grey-one: hsl(210, 14%, 17%);
|
||||
--grey-two: hsl(212, 19%, 19%);
|
||||
--grey-three: hsl(221, 17%, 26%);
|
||||
--grey-four: hsl(226, 48%, 18%);
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: #202126;
|
||||
--grey-six: hsl(230, 7%, 13%);
|
||||
--grey-seven: hsl(240, 9%, 13.5%);
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--grey-nine: hsla(240, 6%, 7%, 0.3);
|
||||
--grey-ten: hsl(230, 9.5%, 17%);
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
@ -63,14 +65,13 @@ h1 {
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
|
||||
font-size: 2.25rem;
|
||||
letter-spacing: -0.05rem;
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.04rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -104,7 +105,24 @@ h6 {
|
||||
p {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------*/
|
||||
@ -139,7 +157,6 @@ input {
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
@ -97,7 +97,7 @@ export class API<T> implements Readable<T> {
|
||||
}
|
||||
|
||||
// API Endpoints
|
||||
import type { Patch, Repository, Tool } from '../types';
|
||||
import type { Patch, Repository, Tool } from '../../utils/types';
|
||||
import { dev_log } from '$lib/utils';
|
||||
|
||||
export type ReposData = Repository[];
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import Picture from './Picture.svelte';
|
||||
import Picture from '$lib/components/Picture.svelte';
|
||||
import manager_screenshot from '$images/manager_two.png?w=1233;822;411&format=avif;webp;png&picture';
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import SocialButton from '../atoms/SocialButton.svelte';
|
||||
import SocialButton from './SocialButton.svelte';
|
||||
</script>
|
||||
|
||||
<div class="social-host">
|
||||
@ -1,14 +1,12 @@
|
||||
<script>
|
||||
import RouterEvents from '../../../data/RouterEvents';
|
||||
export let href = '/';
|
||||
export let is_selected = (target_url) => href === target_url;
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
export let href: string;
|
||||
</script>
|
||||
|
||||
<a data-sveltekit-prefetch {href}>
|
||||
<li class:selected={is_selected($RouterEvents.target_url.pathname)}>
|
||||
<h5>
|
||||
<slot />
|
||||
</h5>
|
||||
<a data-sveltekit-preload-data {href}>
|
||||
<!-- Check if href is equal to the first path -->
|
||||
<li class:selected={href === '/' + $page.url.pathname.split('/')[1]}>
|
||||
<span><slot /></span>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
@ -38,35 +36,38 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
color: var(--grey-five);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
color: var(--white);
|
||||
background-color: var(--grey-one);
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background-color: var(--grey-one);
|
||||
background-color: var(--accent-low-opacity);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
li.selected h5 {
|
||||
li.selected span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
li {
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
border-radius: 16px;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
li.selected h5 {
|
||||
color: var(--grey-four);
|
||||
span {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
332
src/layout/Navbar/NavHost.svelte
Normal file
332
src/layout/Navbar/NavHost.svelte
Normal file
@ -0,0 +1,332 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { horizontalSlide } from '$lib/utils';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { expoOut } from 'svelte/easing';
|
||||
|
||||
import Navigation from './NavButton.svelte';
|
||||
import Svg from '$lib/components/Svg.svelte';
|
||||
import Modal from '$lib/components/Modal.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';
|
||||
|
||||
let url = settings.api_base_url();
|
||||
|
||||
function save() {
|
||||
settings.set_api_base_url(url);
|
||||
clear_and_reload();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
url = settings.default_base_url;
|
||||
}
|
||||
|
||||
let menuOpen = false;
|
||||
let modalOpen = false;
|
||||
let y: number;
|
||||
|
||||
onMount(() => {
|
||||
return RouterEvents.subscribe((event) => {
|
||||
if (event.navigating) {
|
||||
menuOpen = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<nav class:scrolled={y > 10}>
|
||||
<button class="menu-btn mobile" on:click={() => (menuOpen = !menuOpen)} class:open={menuOpen}>
|
||||
<span class="menu-btn__burger" />
|
||||
</button>
|
||||
<a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a>
|
||||
|
||||
<div class="desktop">
|
||||
<div id="main-navigation">
|
||||
<div class="nav-buttons">
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation 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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="secondary">
|
||||
<button on:click={() => (modalOpen = !modalOpen)}>
|
||||
<Svg viewBoxHeight={24} svgHeight={20}>
|
||||
<path
|
||||
d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if menuOpen}
|
||||
<div class="mobile">
|
||||
<div
|
||||
class="nav-wrapper"
|
||||
transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
|
||||
>
|
||||
<div id="main-navigation">
|
||||
<div class="nav-buttons">
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation 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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="secondary-navigation">
|
||||
<button on:click={() => (modalOpen = !modalOpen)}>
|
||||
<Svg viewBoxHeight={24} svgHeight={20}>
|
||||
<path
|
||||
d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay" transition:fade={{ duration: 350 }} />
|
||||
</div>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<!-- settings -->
|
||||
<Modal bind:modalOpen>
|
||||
<div class="settings-menu">
|
||||
<h3>Settings</h3>
|
||||
<p>Configure the website's API. Defaults to ReVanced.</p>
|
||||
<div id="settings-content">
|
||||
<div class="input-wrapper">
|
||||
<input name="api-url" type="text" bind:value={url} />
|
||||
<button id="button-reset" on:click={reset}>
|
||||
<Svg viewBoxHeight={48} svgHeight={24}>
|
||||
<path
|
||||
d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<Button kind="tertiary" on:click={clear_and_reload}>Clear cache</Button>
|
||||
<Button kind="tertiary" on:click={save}>Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
path {
|
||||
fill: var(--grey-five);
|
||||
}
|
||||
|
||||
button:hover path {
|
||||
fill: var(--accent-color-two);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-menu h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.settings-menu p {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
#button-reset {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
z-index: 666;
|
||||
height: 70px;
|
||||
background-color: var(--grey-seven);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#main-navigation,
|
||||
#secondary-navigation {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 88;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
justify-content: normal;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
width: 20rem;
|
||||
top: 0px;
|
||||
border-radius: 0px 24px 24px 0px;
|
||||
left: 0px;
|
||||
background-color: var(--grey-seven);
|
||||
padding: 1rem;
|
||||
padding-top: 6rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#secondary-navigation {
|
||||
z-index: 100;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hamburger mmm yum */
|
||||
@media screen and (min-width: 768px) {
|
||||
.mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.menu-btn {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
z-index: 999;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-btn__burger {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.menu-btn__burger,
|
||||
.menu-btn__burger::before,
|
||||
.menu-btn__burger::after {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--grey-five);
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
}
|
||||
|
||||
.menu-btn__burger::before,
|
||||
.menu-btn__burger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
.menu-btn__burger::before {
|
||||
transform: translateY(-6.5px);
|
||||
}
|
||||
.menu-btn__burger::after {
|
||||
transform: translateY(6.5px);
|
||||
}
|
||||
/* ANIMATION */
|
||||
.menu-btn.open .menu-btn__burger {
|
||||
transform: translateX(-10px);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.menu-btn.open .menu-btn__burger::before {
|
||||
transform: rotate(45deg) translate(10px, -10px);
|
||||
}
|
||||
.menu-btn.open .menu-btn__burger::after {
|
||||
transform: rotate(-45deg) translate(10px, 10px);
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
// See: https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md#picture
|
||||
export let data;
|
||||
export let alt;
|
||||
export let alt: string;
|
||||
</script>
|
||||
|
||||
<picture>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import { slide } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
<div transition:slide>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 70px;
|
||||
z-index: 999;
|
||||
background-color: var(--grey-seven);
|
||||
}
|
||||
</style>
|
||||
@ -1,159 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '../atoms/NavButton.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import RouterEvents from '../../../data/RouterEvents';
|
||||
import Svg from '../atoms/Svg.svelte';
|
||||
import Modal from '../atoms/Modal.svelte';
|
||||
|
||||
import * as settings from '../../../data/api/settings';
|
||||
import { clear_and_reload } from '../../../data/api/cache';
|
||||
import Button from '../atoms/Button.svelte';
|
||||
|
||||
let url = settings.api_base_url();
|
||||
|
||||
function save() {
|
||||
settings.set_api_base_url(url);
|
||||
clear_and_reload();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
url = settings.default_base_url;
|
||||
}
|
||||
|
||||
let menuOpen = false;
|
||||
let modalOpen = false;
|
||||
let y: number;
|
||||
|
||||
onMount(() => {
|
||||
return RouterEvents.subscribe((event) => {
|
||||
if (event.navigating) {
|
||||
menuOpen = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- give me a bit, ill add back mobile nav -->
|
||||
<nav class:scrolled={y > 10}>
|
||||
<div id="left-side">
|
||||
<img src="/logo.svg" id="logo" alt="ReVanced Logo" />
|
||||
<div class="nav-buttons">
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation href="/patches">Patches</Navigation>
|
||||
<div hidden>
|
||||
<!-- This is just temporary so the build doesn't fail -->
|
||||
<Navigation is_selected={(target) => target.startsWith('/docs')} href="/docs"
|
||||
>Docs</Navigation
|
||||
>
|
||||
</div>
|
||||
<Navigation href="/contributors">Contributors</Navigation>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-side">
|
||||
<button on:click={() => (modalOpen = !modalOpen)}>
|
||||
<Svg viewBoxHeight={24} svgHeight={20}>
|
||||
<path
|
||||
d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- settings -->
|
||||
<Modal bind:modalOpen>
|
||||
<div class="settings-menu">
|
||||
<h3>Backend</h3>
|
||||
<h6>API URL</h6>
|
||||
<div id="content">
|
||||
<div class="input-wrapper">
|
||||
<input name="api-url" type="text" bind:value={url} />
|
||||
<button class="button-reset" on:click={reset}>
|
||||
<Svg viewBoxHeight={48} svgHeight={24}>
|
||||
<path
|
||||
d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<Button kind="primary" on:click={save}>Save</Button>
|
||||
<Button on:click={clear_and_reload}>Clear Cache</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<style>
|
||||
path {
|
||||
fill: var(--grey-five);
|
||||
}
|
||||
button:hover path {
|
||||
fill: var(--accent-color-two);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-menu h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.settings-menu h6 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
input {
|
||||
width: 90%;
|
||||
}
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
z-index: 666;
|
||||
height: 70px;
|
||||
background-color: var(--grey-seven);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#left-side,
|
||||
#right-side {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
}
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
@ -1,77 +0,0 @@
|
||||
<script>
|
||||
import Button from '$lib/components/atoms/Button.svelte';
|
||||
</script>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h5>ANDROID APP PATCHER</h5>
|
||||
<h1>
|
||||
Continuing the <br />legacy of <span>Vanced.</span>
|
||||
</h1>
|
||||
<h4>
|
||||
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
|
||||
</h4>
|
||||
|
||||
<div class="hero-buttons">
|
||||
<Button icon="download" kind="primary" capitalize href="download">Download Manager</Button>
|
||||
<Button icon="docs" href="patches" capitalize>View patches</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 9rem;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(3rem, 10vw, 3rem);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: clamp(1rem, 1.2rem, 1.5rem);
|
||||
}
|
||||
|
||||
br {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,60 @@
|
||||
import { dev } from "$app/environment";
|
||||
import { dev } from '$app/environment';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
|
||||
// console.log, but only if in dev environment.
|
||||
export function dev_log(part: string, ...args) {
|
||||
if (dev) {
|
||||
console.log(`[${part}]:`, ...args);
|
||||
}
|
||||
if (dev) {
|
||||
console.log(`[${part}]:`, ...args);
|
||||
}
|
||||
}
|
||||
|
||||
export function friendlyName(text: string): string {
|
||||
return text
|
||||
.replace(/-/g, ' ')
|
||||
.replace(/revanced\/revanced/g, '')
|
||||
.replace(/revanced/g, 'ReVanced')
|
||||
.replace(/\bcli\b/g, 'CLI')
|
||||
.replace(/api/g, 'API')
|
||||
.replace(/microg/g, 'MicroG')
|
||||
.replace(/hdr/g, 'HDR')
|
||||
.replace(/sponsorblock/g, 'SponsorBlock')
|
||||
.replace(/tiktok/g, 'TikTok')
|
||||
.replace(/vr/g, 'VR')
|
||||
.replace(/(?:^|\s)\S/g, (x: string) => x.toUpperCase());
|
||||
}
|
||||
|
||||
// stolen from https://svelte.dev/repl/6d5239f09b0b4dc6aafeb70606a0fe94?version=3.46.4
|
||||
// please add this svelte thanks ily <3
|
||||
export function horizontalSlide(
|
||||
node,
|
||||
{ delay = 0, duration = 400, easing = cubicOut, direction = 'block' } = {}
|
||||
) {
|
||||
const style = getComputedStyle(node);
|
||||
const opacity = +style.opacity;
|
||||
const capitalized_logical_property = `${direction[0].toUpperCase()}${direction.slice(1)}`;
|
||||
const size_value = parseFloat(style[`${direction}Size`]);
|
||||
const padding_start_value = parseFloat(style[`padding${capitalized_logical_property}Start`]);
|
||||
const padding_end_value = parseFloat(style[`padding${capitalized_logical_property}End`]);
|
||||
const margin_start_value = parseFloat(style[`margin${capitalized_logical_property}Start`]);
|
||||
const margin_end_value = parseFloat(style[`margin${capitalized_logical_property}End`]);
|
||||
const border_width_start_value = parseFloat(
|
||||
style[`border${capitalized_logical_property}StartWidth`]
|
||||
);
|
||||
const border_width_end_value = parseFloat(style[`border${capitalized_logical_property}EndWidth`]);
|
||||
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (t) =>
|
||||
'overflow: hidden;' +
|
||||
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
||||
`${direction}-size: ${t * size_value}px;` +
|
||||
`padding-${direction}-start: ${t * padding_start_value}px;` +
|
||||
`padding-${direction}-end: ${t * padding_end_value}px;` +
|
||||
`margin-${direction}-start: ${t * margin_start_value}px;` +
|
||||
`margin-${direction}-end: ${t * margin_end_value}px;` +
|
||||
`border-${direction}-start-width: ${t * border_width_start_value}px;` +
|
||||
`border-${direction}-start-width: ${t * border_width_end_value}px;`
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/atoms/NavButton.svelte';
|
||||
import Navigation from '$layout/Navbar/NavButton.svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
$: status = $page.status;
|
||||
|
||||
@ -1,21 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { derived } from "svelte/store";
|
||||
import { derived } from 'svelte/store';
|
||||
|
||||
import NavHost from "$lib/components/molecules/NavHost.svelte";
|
||||
import Spinner from '$lib/components/atoms/Spinner.svelte';
|
||||
import RouterEvents from '../data/RouterEvents';
|
||||
import '../app.css';
|
||||
import NavHost from '$layout/Navbar/NavHost.svelte';
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
import RouterEvents from '$data/RouterEvents';
|
||||
|
||||
// Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
|
||||
const show_loading_animation = derived(RouterEvents, ($event, set) => {
|
||||
if ($event.navigating) {
|
||||
// Wait 250 ms before showing the animation.
|
||||
const timeout = setTimeout(() => set(true), 250);
|
||||
return () => clearTimeout(timeout);
|
||||
} else {
|
||||
set(false)
|
||||
}
|
||||
}, false);
|
||||
// Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
|
||||
const show_loading_animation = derived(
|
||||
RouterEvents,
|
||||
($event, set) => {
|
||||
if ($event.navigating) {
|
||||
// Wait 250 ms before showing the animation.
|
||||
const timeout = setTimeout(() => set(true), 250);
|
||||
return () => clearTimeout(timeout);
|
||||
} else {
|
||||
set(false);
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -35,8 +38,12 @@
|
||||
{#if $show_loading_animation}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<slot />
|
||||
<slot />
|
||||
{/if}
|
||||
<!--
|
||||
afn if you are moving the footer here, please make it not use the repositories store directly and instead use component props :) -->
|
||||
<!-- <Footer repos={$repositories}> -->
|
||||
|
||||
<style lang="scss" global>
|
||||
@import '../app.scss';
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
import { repositories } from '../data/api';
|
||||
|
||||
import { repositories } from '$data/api';
|
||||
export const prerender = true;
|
||||
|
||||
const base = repositories.page_load_impl();
|
||||
|
||||
export const load: PageLoad = async ({ fetch }) => {
|
||||
// The entire site may softlock if the user sets a bad API url if we don't do this.
|
||||
try {
|
||||
return await base({ fetch });
|
||||
} catch(_) { }
|
||||
}
|
||||
// The entire site may softlock if the user sets a bad API url if we don't do this.
|
||||
try {
|
||||
return await base({ fetch });
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<script>
|
||||
import HeroImage from '$lib/components/atoms/HeroImage.svelte';
|
||||
import Home from '$lib/components/organisms/Hero.svelte';
|
||||
import SocialHost from '$lib/components/molecules/SocialHost.svelte';
|
||||
import Wave from '$lib/components/atoms/Wave.svelte';
|
||||
import HeroImage from '$layout/Hero/HeroImage.svelte';
|
||||
import Home from '$layout/Hero/HeroSection.svelte';
|
||||
import SocialHost from '$layout/Hero/SocialHost.svelte';
|
||||
import Wave from '$lib/components/Wave.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
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';
|
||||
|
||||
import { repositories } from '../../data/api';
|
||||
import ContributorHost from './ContributorSection.svelte';
|
||||
import Footer from '$layout/Footer.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -18,9 +18,15 @@
|
||||
<div class="wrapper">
|
||||
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<h2>Made possible by the community.</h2>
|
||||
<h4>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h4>
|
||||
<h4>
|
||||
Want to show up here? <span
|
||||
><a href="https://github.com/revanced" target="_blank" rel="noreferrer"
|
||||
>Become a contributor</a
|
||||
></span
|
||||
>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="contrib-grid">
|
||||
<div class="repos">
|
||||
{#each $repositories as { contributors, name: repo }}
|
||||
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<ContributorHost {contributors} {repo} />
|
||||
@ -33,11 +39,11 @@
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
.contrib-grid {
|
||||
.repos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -45,10 +51,10 @@
|
||||
color: var(--grey-four);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
|
||||
h4 {
|
||||
color: var(--grey-four);
|
||||
text-align: center;
|
||||
color: var(--grey-four);
|
||||
}
|
||||
|
||||
.text-container {
|
||||
@ -57,8 +63,8 @@
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
padding: 2.4rem;
|
||||
border-radius: 8px;
|
||||
padding: 2.5rem 1.75rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -76,10 +82,9 @@
|
||||
a:hover::after {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
.text-container {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { repositories } from '$data/api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
import { repositories } from '../../data/api';
|
||||
|
||||
export const load: PageLoad = repositories.page_load_impl();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
import { index_content } from '$lib/documentation.server';
|
||||
import { index_content } from './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.
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
|
||||
import DocsNavTree from '$lib/components/molecules/DocsNavTree.svelte';
|
||||
import DocsNavTree from './DocsNavTree.svelte';
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import Footer from '$lib/components/molecules/Footer.svelte';
|
||||
import Footer from '$layout/Footer.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { DocumentInfo } from '$lib/documentation.shared';
|
||||
import type { DocumentInfo } from './documentation.shared';
|
||||
export let info: DocumentInfo;
|
||||
import { page } from '$app/stores';
|
||||
</script>
|
||||
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { is_tree } from '$lib/documentation.shared';
|
||||
import type { DocsTree } from '$lib/documentation.shared';
|
||||
import { is_tree } from './documentation.shared';
|
||||
import type { DocsTree } from './documentation.shared';
|
||||
|
||||
import DocsNavNode from '$lib/components/atoms/DocsNavNode.svelte';
|
||||
import DocsNavNode from './DocsNavNode.svelte';
|
||||
|
||||
export let tree: DocsTree;
|
||||
// How deeply nested this is.
|
||||
@ -1,17 +1,17 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
import { get } from '$lib/documentation.server';
|
||||
import { get } from '../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);
|
||||
}
|
||||
const document = get(params.slug);
|
||||
if (document === null) {
|
||||
error;
|
||||
throw error(404);
|
||||
}
|
||||
|
||||
return document;
|
||||
}
|
||||
return document;
|
||||
};
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
import '$lib/documentation.scss';
|
||||
import '../documentation.scss';
|
||||
|
||||
|
||||
// Data here comes from a trusted source.
|
||||
// CSS comes from the layout.
|
||||
export let data: PageData;
|
||||
// Data here comes from a trusted source.
|
||||
// CSS comes from the layout.
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -16,6 +15,6 @@
|
||||
</svelte:head>
|
||||
|
||||
<div id="markup-content">
|
||||
<h1 class="title">{data.title}</h1>
|
||||
{@html data.content}
|
||||
<h1 class="title">{data.title}</h1>
|
||||
{@html data.content}
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
@ -6,7 +6,6 @@ import { browser, prerendering } from '$app/environment';
|
||||
import fs, { existsSync as exists } from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
|
||||
import { parse as parse_md } from 'marked';
|
||||
import AsciiDocProcessor from 'asciidoctor'
|
||||
|
||||
@ -1,25 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { tools } from '../../data/api';
|
||||
import { tools } from '$data/api';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import manager_screenshot from '$images/manager_two.png?format=avif;webp;png&picture';
|
||||
|
||||
import Button from '$lib/components/atoms/Button.svelte';
|
||||
import Footer from '$lib/components/molecules/Footer.svelte';
|
||||
import Picture from '$lib/components/atoms/Picture.svelte';
|
||||
|
||||
import manager_screenshot from '$images/manager_two.png?format=avif;webp;png&picture';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import Footer from '$layout/Footer.svelte';
|
||||
import Picture from '$lib/components/Picture.svelte';
|
||||
|
||||
$: manager = $tools['revanced/revanced-manager'];
|
||||
</script>
|
||||
|
||||
<div class="wrapper center">
|
||||
<h1>ReVanced <span>Manager</span></h1>
|
||||
<div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<h2>ReVanced <span>Manager</span></h2>
|
||||
<h4>Patch your favourite apps, right on your device.</h4>
|
||||
<div class="buttons">
|
||||
<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">{manager.version}</Button>
|
||||
<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">
|
||||
{manager.version}
|
||||
</Button>
|
||||
<Button 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 class="screenshot">
|
||||
<Picture data={manager_screenshot} alt="Manager Screenshot" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
@ -31,10 +35,9 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -58,8 +61,7 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
color: var(--accent-color)
|
||||
color: var(--accent-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
import { tools } from '../../data/api';
|
||||
import { tools } from '$data/api';
|
||||
|
||||
export const load: PageLoad = tools.page_load_impl();
|
||||
export const load: PageLoad = tools.page_load_impl();
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import type { Patch } from 'src/data/types';
|
||||
import { patches as api_patches } from '../../data/api';
|
||||
import type { Patch } from '$lib/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';
|
||||
import Search from '$lib/components/atoms/Search.svelte';
|
||||
import TreeMenu from '$lib/components/TreeView/TreeMenu.svelte';
|
||||
import TreeMenuButton from '$lib/components/TreeView/TreeMenuButton.svelte';
|
||||
import PatchItem from './PatchItem.svelte';
|
||||
import Footer from '$layout/Footer.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
|
||||
$: ({ patches, packages } = $api_patches);
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
|
||||
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<TreeMenu>
|
||||
<!-- Must bind both variables: we get searchTerm from the text input, -->
|
||||
<!-- and searchTermFiltered gets cleared with the clear button -->
|
||||
@ -85,8 +85,8 @@
|
||||
{#if filterByPackage(selectedPkg, patch.compatiblePackages) || !selectedPkg}
|
||||
<!-- ...same with search -->
|
||||
{#if search(patch) || !searchTermFiltered}
|
||||
<div in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
|
||||
<PatchCell {patch} />
|
||||
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<PatchItem {patch} />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { patches } from '$data/api';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
import { patches } from '../../data/api';
|
||||
|
||||
export const load: PageLoad = patches.page_load_impl();
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
import path from 'path';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
@ -11,12 +12,12 @@ const config = {
|
||||
// adapter-static has vercel detection, but that does not let you set a custom 404 page easily.
|
||||
// Instead, we have to use a wrapper that generates a vercel config if on vercel...
|
||||
adapter: adapter({
|
||||
pages: "public",
|
||||
fallback: "404.html"
|
||||
pages: 'public',
|
||||
fallback: '404.html'
|
||||
}),
|
||||
env: {
|
||||
publicPrefix: "RV"
|
||||
}
|
||||
publicPrefix: 'RV'
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -8,6 +8,13 @@
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true
|
||||
"strict": true,
|
||||
"types": ["node"],
|
||||
"paths": {
|
||||
"$data/*": ["./src/data/*"],
|
||||
"$lib/*": ["./src/lib/*"],
|
||||
"$layout/*": ["./src/layout/*"],
|
||||
"$images/*": ["./images/*"],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { imagetools } from 'vite-imagetools'
|
||||
import { imagetools } from 'vite-imagetools';
|
||||
|
||||
import path from 'path';
|
||||
|
||||
/** @type {import('vite').UserConfig} */
|
||||
const config = {
|
||||
plugins: [sveltekit(), imagetools()],
|
||||
resolve: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'$images': path.resolve('./images'),
|
||||
},
|
||||
},
|
||||
$images: path.resolve('./images'),
|
||||
$data: path.resolve('./src/data'),
|
||||
$layout: path.resolve('./src/layout')
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user