chore: merge branch dev to main (#118)

.github/pr-deployment-previews.yml

@@ -0,0 +1,28 @@
+on: pull_request
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write 
+   name: Publish to Cloudflare Pages
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        id: publish
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+          directory: public
+
+      - name: Comment
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.PULL_REQUESTS_WRITE }}
+          message: ${{ steps.publish.outputs.alias }}

src/app.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 * {
 	box-sizing: inherit;
@@ -35,7 +35,7 @@ body {
 
 :root {
 	/* TODO properly name these */
-    --main-font: "Manrope", sans-serif;
+	--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: hsl(206, 100%, 81%);
@@ -54,6 +54,8 @@ body {
 	--grey-ten: hsl(230, 9.5%, 17.5%);
 	--grey-eleven: hsl(208, 10%, 40%);
 	--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	--drop-shadow-one: 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);
 }
 
 ::selection {
@@ -112,7 +114,7 @@ p {
 	line-height: 1.75rem;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 767px) {
 	h1 {
 		font-size: 2.6rem;
 		line-height: 3.75rem;

src/layout/Footer/FooterHost.svelte

@@ -4,15 +4,23 @@
 
 	import { queries } from '$data/api';
 	import { friendlyName } from '$util/friendlyName';
-
 	import { createQuery } from '@tanstack/svelte-query';
+	
 	import Query from '$lib/components/Query.svelte';
+	import FooterSection from './FooterSection.svelte';
 
 	const query = createQuery(['repositories'], queries.repositories);
 </script>
 
 <!-- squiggly divider line -->
-<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+<svg
+	aria-hidden="true"
+	width="100%"
+	height="8"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	in:fly={{ y: 10, easing: quintOut, duration: 750 }}
+>
 	<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
 		<g clip-path="url(#clip0_2426_11367)">
 			<path
@@ -39,16 +47,14 @@
 		</section>
 
 		<section class="links-container">
-			<ul>
+			<FooterSection title="Pages">
-				<li>Pages</li>
 				<li><a href="/">Home</a></li>
 				<li><a href="/download">Download</a></li>
 				<li><a href="/docs">Documentation</a></li>
 				<li><a href="/patches">Patches</a></li>
 				<li><a href="/contributors">Contributors</a></li>
-			</ul>
+			</FooterSection>
-			<ul>
+			<FooterSection title="Repositories">
-				<li>Repositories</li>
 				<Query {query} let:data>
 					{#each data as { name }}
 						<li>
@@ -58,23 +64,18 @@
 						</li>
 					{/each}
 				</Query>
-			</ul>
+			</FooterSection>
+			<FooterSection title="Socials">
 				<ul>
 					<!-- to replace -->
-				<li>Socials</li>
 					<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
 					<li><a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a></li>
-				<li>
+					<li><a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a></li>
-					<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a>
-				</li>
 					<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
-				<li>
+					<li><a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a></li>
-					<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a>
+					<li><a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a></li>
-				</li>
-				<li>
-					<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a>
-				</li>
 				</ul>
+			</FooterSection>
 		</section>
 	</div>
 	<div class="footer-bottom">
@@ -181,8 +182,17 @@
 
 		.links-container {
 			display: grid;
-			gap: 3rem;
+			gap: 2rem;
 			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
 		}
 	}
+
+	@media screen and (max-width: 768px) {
+		.links-container {
+			display: flex;
+			flex-direction: column;
+			gap: initial;
+		}
+	}
+
 </style>

src/layout/Footer/FooterSection.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
+	export let title: string;
+	let expanded: boolean = false;
+</script>
+
+<div class="desktop-only">
+	<span>{title}</span>
+	<ul>
+		<slot />
+	</ul>
+</div>
+
+<div class="mobile-only">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<button class="title" on:click={() => (expanded = !expanded)}>
+		<span>
+			{title}
+		</span>
+		<span>{expanded ? '-' : '+'}</span>
+	</button>
+	{#if expanded}
+		<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
+			<slot />
+		</ul>
+	{/if}
+</div>
+
+<style lang="scss">
+	span {
+		list-style: none;
+		color: var(--grey-five);
+		font-size: 0.9rem;
+		font-weight: 500;
+	}
+
+	ul {
+		margin: 1.25rem 0rem;
+		display: flex;
+		gap: 1rem;
+		flex-direction: column;
+		width: max-content;
+	}
+
+	.title {
+		display: flex;
+		justify-content: space-between;
+		background-color: transparent;
+		border: none;
+		width: 100%;
+		margin: 1.5rem 0;
+		cursor: pointer;
+	}
+
+	.mobile-only:not(:last-child) {
+		border-bottom: 1px solid var(--grey-three);
+	}
+
+	.mobile-only {
+		display: none;
+	}
+
+	@media screen and (max-width: 768px) {
+		.mobile-only {
+			display: block;
+		}
+		.desktop-only {
+			display: none;
+		}
+	}
+</style>

src/layout/Hero/HeroSection.svelte

@@ -43,7 +43,7 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.hero {
 			padding-bottom: 0;
 		}

src/layout/Hero/SocialHost.svelte

@@ -2,11 +2,12 @@
 	import SocialButton from './SocialButton.svelte';
 </script>
 
+<!-- TODO: Use API social links -->
 <div class="social-host">
-	<SocialButton src="github" href="https://revanced.app/github" />
+	<SocialButton src="github" href="https://github.com/revanced" />
 	<SocialButton src="discord" href="https://revanced.app/discord" />
-	<SocialButton src="reddit" href="https://revanced.app/reddit" />
+	<SocialButton src="reddit" href="https://reddit.com/r/revancedapp" />
-	<SocialButton src="telegram" href="https://revanced.app/telegram" />
+	<SocialButton src="telegram" href="https://t.me/app_revanced" />
 </div>
 
 <style>
@@ -22,7 +23,7 @@
 		left: 0;
 	}
 
-	@media screen and (max-width: 768px) {
+	@media screen and (max-width: 767px) {
 		.social-host {
 			left: 0;
 			width: 100%;

src/layout/Navbar/NavButton.svelte

@@ -72,7 +72,7 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		li {
 			padding: 0.75rem 1.25rem;
 			text-align: left;

src/layout/Navbar/NavHost.svelte

@@ -232,11 +232,11 @@
 		}
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.nav-wrapper {
 			flex-direction: column;
 			gap: 0.5rem;
-			height: 100vh;
+			height: 100%;
 			margin: 0 auto;
 			position: fixed;
 			width: 20rem;

src/lib/components/Dialogue.svelte

@@ -1,15 +1,28 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { quadInOut } from 'svelte/easing';
+	import { disableScrollHandling } from '$app/navigation';
 	export let modalOpen = false;
 	export let fullscreen = false;
+	export let notDismissible = false;
+
+	let element: HTMLDivElement;
+	let y = 0;
+
+	function parseScroll() {
+		y = element.scrollTop;
+	}
 </script>
 
 {#if modalOpen}
 	<div
 		class="overlay"
-		on:click={() => (modalOpen = !modalOpen)}
+		on:click={() => {
-		on:keypress={() => (modalOpen = !modalOpen)}
+			if (!notDismissible) modalOpen = !modalOpen;
+		}}
+		on:keypress={() => {
+			if (!notDismissible) modalOpen = !modalOpen;
+		}}
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	/>
 
@@ -17,13 +30,16 @@
 		class="modal"
 		role="dialog"
 		class:fullscreen
+		class:scrolled={y > 10}
 		aria-modal="true"
+		bind:this={element}
+		on:scroll={parseScroll}
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	>
 		<div class="top">
 			<div class="title" class:hasIcon={$$slots.icon}>
 				{#if fullscreen}
-					<button on:click={() => (modalOpen = !modalOpen)}>
+					<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
 						<img src="../icons/back.svg" id="back" alt="back" />
 					</button>
 				{/if}
@@ -51,7 +67,6 @@
 				</div>
 			{/if}
 		</div>
-		
 	</div>
 {/if}
 
@@ -74,12 +89,9 @@
 	}
 
 	.title {
-		position: sticky;
 		display: flex;
 		align-items: center;
 		gap: 1rem;
-		top: 0;
-		left: 0;
 		width: 100%;
 		background-color: var(--grey-six);
 		margin-bottom: 8px;
@@ -93,6 +105,9 @@
 		width: 100%;
 	}
 
+	#back-button {
+		cursor: pointer;
+	}
 
 	.hasIcon {
 		flex-direction: column;
@@ -135,12 +150,27 @@
 	}
 
 	.fullscreen {
+		padding: 0;
 		max-height: 100%;
 		width: 100%;
 		border-radius: 0;
 	}
+
+	.fullscreen .slot {
+		padding: 0 32px 32px;
+	}
+
 	.fullscreen .title {
 		justify-content: flex-start;
+		position: sticky;
+		padding: 32px;
+		padding-bottom: 0.75rem;
+		top: 0;
+		left: 0;
+	}
+
+	.fullscreen.scrolled .title {
+		border-bottom: 1px solid var(--grey-three);
 	}
 
 	.slot {
@@ -154,5 +184,3 @@
 		display: none;
 	}
 </style>
-
-

src/lib/components/Search.svelte

@@ -11,7 +11,10 @@
 	function clear() {
 		searchTerm = '';
 		searchTermFiltered = '';
-		goto($page.url.pathname)
+		
+		const url = new URL($page.url);
+		url.searchParams.delete('s');
+		goto(url.pathname + url.search);
 	}
 </script>
 
@@ -85,6 +88,6 @@
 
 	input:focus::placeholder {
 		outline: none;
-		color: var(--accent-color)
+		color: var(--accent-color);
 	}
 </style>

src/routes/+error.svelte

@@ -7,7 +7,7 @@
 	$: status = $page.status;
 </script>
 
-<Meta title="404" />
+<Meta title={status.toString()} />
 
 <section class="wrapper">
 	<h1>{status}</h1>

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import { writable } from 'svelte/store';
 	// There might be a better place to put this, but I am not entirely sure...
 	export const isRestoring = writable(false);
+	declare const telemetryInit: () => void;
 </script>
 
 <script lang="ts">
@@ -18,6 +19,8 @@
 
 	import NavHost from '$layout/Navbar/NavHost.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
+	import Dialogue from '$lib/components/Dialogue.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { staleTime } from '$data/api';
 	import RouterEvents from '$data/RouterEvents';
 
@@ -30,7 +33,22 @@
 		}
 	});
 
+	let askCookieConsent = false;
+
+	// store a cookie to remember the user's preference
+	function setPrivacySetting(allowTelemetry: boolean) {
+		localStorage.setItem('allowTelemetry', allowTelemetry.toString());
+		askCookieConsent = false;
+		if (typeof telemetryInit !== 'undefined') {
+			telemetryInit();
+		}
+	}
+
 	onMount(() => {
+		if (!localStorage.getItem('allowTelemetry')) {
+			askCookieConsent = true;
+		}
+
 		isRestoring.set(true);
 		const [unsubscribe, promise] = persistQueryClient({
 			queryClient,
@@ -71,25 +89,56 @@
 		})(window, document, 'script', 'dataLayer', 'GTM-MQ6K849');
 	</script>
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-PLH0N9VQL5"></script>
+	<!-- Sometimes you don't want telemetry -->
 	<script>
 		window.dataLayer = window.dataLayer || [];
+
 		function gtag() {
 			dataLayer.push(arguments);
 		}
+
+		function runClarity(c, l, a, r, i, t, y) {
+			c[a] =
+				c[a] ||
+				function () {
+					(c[a].q = c[a].q || []).push(arguments);
+				};
+			t = l.createElement(r);
+			t.async = 1;
+			t.src = 'https://www.clarity.ms/tag/' + i;
+			y = l.getElementsByTagName(r)[0];
+			y.parentNode.insertBefore(t, y);
+		}
+
+		function telemetryInit() {
+			allowTelemetry = (localStorage.getItem('allowTelemetry') === 'true');
+			if (!allowTelemetry) {
+				gtag('set', 'allow_google_signals', false);
+				return;
+			}
 			gtag('js', new Date());
 			gtag('config', 'G-PLH0N9VQL5');
-	</script>
+			runClarity(window, document, 'clarity', 'script', 'hfh8dhfgus');
-	<script type="text/javascript">
+		}
-	    (function(c,l,a,r,i,t,y){
+
-		c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+		telemetryInit();
-		t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-		y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-	    })(window, document, "clarity", "script", "hfh8dhfgus");
 	</script>
 </svelte:head>
 
 <QueryClientProvider client={queryClient}>
 	<NavHost />
+	<!-- if cookie consent hasn't been set -->
+	<Dialogue bind:modalOpen={askCookieConsent} notDismissible>
+		<svelte:fragment slot="title">It's your choice</svelte:fragment>
+		<svelte:fragment slot="description">
+			This site uses analytics to understand better how you use it. Opting in is
+			optional and won't impact your experience.
+		</svelte:fragment>
+		<svelte:fragment slot="buttons">
+			<Button type="text" on:click={() => setPrivacySetting(false)}>Disallow all</Button>
+			<Button type="text" on:click={() => setPrivacySetting(true)}>Accept</Button>
+		</svelte:fragment>
+	</Dialogue>
 
 	{#if $show_loading_animation}
 		<Spinner />

src/routes/+page.svelte

@@ -43,7 +43,7 @@
 			display: none;
 		}
 	}
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.wrappezoid {
 			display: flex;
 			justify-content: center;

src/routes/contributors/+page.svelte

@@ -3,7 +3,7 @@
 	import { quintOut } from 'svelte/easing';
 
 	import ContributorHost from './ContributorSection.svelte';
-	import Footer from '$layout/Footer.svelte';
+	import Footer from '$layout/Footer/FooterHost.svelte';
 	import Meta from '$lib/components/Meta.svelte';
 	import Query from '$lib/components/Query.svelte';
 
@@ -91,7 +91,7 @@
 	a:hover::after {
 		transform: translateX(5px);
 	}
-	@media screen and (max-width: 768px) {
+	@media screen and (max-width: 767px) {
 		.text-container {
 			padding: 2rem 1.75rem;
 			margin-bottom: 2rem;

src/routes/contributors/ContributorPerson.svelte

@@ -48,7 +48,7 @@
 		user-select: none;
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		h5 {
 			display: none;
 		}

src/routes/contributors/ContributorSection.svelte

@@ -93,7 +93,7 @@
 		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.contrib-host {
 			padding: 0.75rem;
 			gap: 0.25rem;

src/routes/docs/+layout.svelte

@@ -2,7 +2,7 @@
 	import type { LayoutData } from './$types';
 
 	import DocsNavTree from './DocsNavTree.svelte';
-	import Footer from '$layout/Footer.svelte';
+	import Footer from '$layout/Footer/FooterHost.svelte';
 
 	export let data: LayoutData;
 </script>

src/routes/download/+page.svelte

@@ -10,7 +10,7 @@
 	import Meta from '$lib/components/Meta.svelte';
 	import Query from '$lib/components/Query.svelte';
 	import Button from '$lib/components/Button.svelte';
-	import Footer from '$layout/Footer.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';

src/routes/patches/+page.svelte

@@ -3,17 +3,16 @@
 	import { quintOut } from 'svelte/easing';
 	import { page } from '$app/stores';
 
-	import type { PageData } from './$types';
 	import type { Patch } from '$lib/types';
 
 	import { createQuery } from '@tanstack/svelte-query';
 	import { queries } from '$data/api';
 
 	import Meta from '$lib/components/Meta.svelte';
-	import PackageMenu from '../PackageMenu.svelte';
+	import PackageMenu from './PackageMenu.svelte';
-	import Package from '../Package.svelte';
+	import Package from './Package.svelte';
-	import PatchItem from '../PatchItem.svelte';
+	import PatchItem from './PatchItem.svelte';
-	import Footer from '$layout/Footer.svelte';
+	import Footer from '$layout/Footer/FooterHost.svelte';
 	import Search from '$lib/components/Search.svelte';
 	import FilterChip from '$lib/components/FilterChip.svelte';
 	import Dialogue from '$lib/components/Dialogue.svelte';
@@ -21,16 +20,14 @@
 
 	const query = createQuery(['patches'], queries.patches);
 
-	export let data: PageData;
+	$: selectedPkg = $page.url.searchParams.get('pkg');
-	$: ({ selectedPkg } = data);
-
-	// Search whatever the s query is from the url
 	let searchTerm = $page.url.searchParams.get('s');
 	let searchTermFiltered = searchTerm
 		?.replace(/\./g, '')
 		.replace(/\s/g, '')
 		.replace(/-/g, '')
 		.toLowerCase();
+
 	let timeout: ReturnType<typeof setTimeout>;
 	let mobilePackages = false;
 
@@ -80,7 +77,19 @@
 				.toLowerCase();
 			// Update search URL params
 			// must use history.pushState instead of goto(), as goto() unselects the search bar
-				window.history.pushState(null, '', `${window.location.href.split('?')[0]}${searchTerm ? '?s=' + searchTerm : ''}`) 
+			const url = new URL(window.location.href);
+			url.pathname = '/patches';
+
+			const params = new URLSearchParams();
+			if (selectedPkg) {
+				params.set('pkg', selectedPkg);
+			}
+			if (searchTerm) {
+				params.set('s', searchTerm);
+			}
+
+			url.search = params.toString();
+			window.history.pushState(null, '', url.toString());
 		}, 500);
 	};
 </script>
@@ -210,7 +219,7 @@
 			display: none;
 		}
 	}
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		main {
 			grid-template-columns: none;
 			flex-direction: column;

src/routes/patches/+page.ts

@@ -0,0 +1 @@
+export const prerender = false;

src/routes/patches/Package.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 
-	export let selectedPkg: string | undefined;
+	export let selectedPkg: string | null;
 	export let name: string;
 	export let searchTerm: string | null;
 
 	function handleClick() {
 		// Assign the selected package. If it's already selected, deselect it.
-		let path = '/patches';
+		const url = new URL(window.location.href);
+		const params = new URLSearchParams();
+		url.pathname = '/patches';
+
 		if (selectedPkg !== name && name !== 'All packages') {
-			path += `/${name}`;
+			params.set('pkg', name);
 		}
 		if (searchTerm) {
-			path += `?s=${searchTerm}`
+			params.set('s', searchTerm);
-		};
+		}
-		goto(path);
+		url.search = params.toString();
+		goto(url.pathname + url.search);
+
 		window.scrollTo({ top: 0, behavior: 'smooth' });
 	}
 </script>
@@ -58,7 +63,7 @@
 		color: var(--white);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.package {
 			border-radius: 0px;
 			font-size: 0.9rem;

src/routes/patches/PackageMenu.svelte

@@ -40,13 +40,14 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.menu {
 			padding: 0.75rem;
 			height: unset;
 		}
 
-		h6, hr {
+		h6,
+		hr {
 			display: none;
 		}
 	}

src/routes/patches/[[package]]/+page.ts

@@ -1,8 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const prerender = false;
-
-export const load: PageLoad = async ({ params }) => {
-	const selectedPkg = params.package || undefined;
-	return { selectedPkg };
-};