mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
chore: merge branch dev to main (#118)
This commit is contained in:
afn
GitHub
commit
4d08ca4ae8
28
.github/pr-deployment-previews.yml
vendored
Normal file
28
.github/pr-deployment-previews.yml
vendored
Normal file
@ -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 }}
|
||||
739
package-lock.json
generated
739
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
186
src/app.scss
186
src/app.scss
@ -1,160 +1,162 @@
|
||||
@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;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--main-font);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--main-font);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-inline: auto;
|
||||
width: min(90%, 80rem);
|
||||
margin-top: 7rem;
|
||||
margin-inline: auto;
|
||||
width: min(90%, 80rem);
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* TODO properly name these */
|
||||
--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%);
|
||||
--accent-color-two: hsl(208, 75%, 82%);
|
||||
--accent-low-opacity: hsla(205, 91%, 69%, 0.15);
|
||||
--bg-color: hsl(252, 10%, 11%);
|
||||
--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: hsl(230, 9%, 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.5%);
|
||||
--grey-eleven: hsl(208, 10%, 40%);
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
/* TODO properly name these */
|
||||
--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%);
|
||||
--accent-color-two: hsl(208, 75%, 82%);
|
||||
--accent-low-opacity: hsla(205, 91%, 69%, 0.15);
|
||||
--bg-color: hsl(252, 10%, 11%);
|
||||
--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: hsl(230, 9%, 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.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 {
|
||||
background-color: var(--accent-low-opacity);
|
||||
background-color: var(--accent-low-opacity);
|
||||
}
|
||||
|
||||
/*-----headings-----*/
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--white);
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.04rem;
|
||||
font-weight: 600;
|
||||
color: var(--grey-five);
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.04rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 2rem;
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 1.75rem;
|
||||
color: var(--grey-five);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
line-height: 3.75rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------*/
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
background-color: transparent;
|
||||
width: 5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--accent-color);
|
||||
background-clip: content-box;
|
||||
border-radius: 100px;
|
||||
background-color: var(--accent-color);
|
||||
background-clip: content-box;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--grey-three);
|
||||
background-color: var(--grey-three);
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
background-color: transparent;
|
||||
color: var(--accent-color-two);
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
background-color: transparent;
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--accent-color);
|
||||
outline: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<li>Pages</li>
|
||||
<FooterSection title="Pages">
|
||||
<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>
|
||||
<ul>
|
||||
<li>Repositories</li>
|
||||
</FooterSection>
|
||||
<FooterSection title="Repositories">
|
||||
<Query {query} let:data>
|
||||
{#each data as { name }}
|
||||
<li>
|
||||
@ -58,23 +64,18 @@
|
||||
</li>
|
||||
{/each}
|
||||
</Query>
|
||||
</ul>
|
||||
<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>
|
||||
<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>
|
||||
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a>
|
||||
</li>
|
||||
</ul>
|
||||
</FooterSection>
|
||||
<FooterSection title="Socials">
|
||||
<ul>
|
||||
<!-- to replace -->
|
||||
<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><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><a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a></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>
|
||||
73
src/layout/Footer/FooterSection.svelte
Normal file
73
src/layout/Footer/FooterSection.svelte
Normal file
@ -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>
|
||||
@ -43,7 +43,7 @@
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.hero {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@ -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="telegram" href="https://revanced.app/telegram" />
|
||||
<SocialButton src="reddit" href="https://reddit.com/r/revancedapp" />
|
||||
<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%;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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:keypress={() => (modalOpen = !modalOpen)}
|
||||
on:click={() => {
|
||||
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,9 +105,12 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#back-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hasIcon {
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
$: status = $page.status;
|
||||
</script>
|
||||
|
||||
<Meta title="404" />
|
||||
<Meta title={status.toString()} />
|
||||
|
||||
<section class="wrapper">
|
||||
<h1>{status}</h1>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-PLH0N9VQL5');
|
||||
</script>
|
||||
<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)};
|
||||
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");
|
||||
|
||||
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');
|
||||
runClarity(window, document, 'clarity', 'script', 'hfh8dhfgus');
|
||||
}
|
||||
|
||||
telemetryInit();
|
||||
</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 />
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.wrappezoid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
h5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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 Package from '../Package.svelte';
|
||||
import PatchItem from '../PatchItem.svelte';
|
||||
import Footer from '$layout/Footer.svelte';
|
||||
import PackageMenu from './PackageMenu.svelte';
|
||||
import Package from './Package.svelte';
|
||||
import PatchItem from './PatchItem.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 } = data);
|
||||
|
||||
// Search whatever the s query is from the url
|
||||
$: selectedPkg = $page.url.searchParams.get('pkg');
|
||||
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;
|
||||
|
||||
@ -78,9 +75,21 @@
|
||||
.replace(/\s/g, '')
|
||||
.replace(/-/g, '')
|
||||
.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 : ''}`)
|
||||
// Update search URL params
|
||||
// must use history.pushState instead of goto(), as goto() unselects the search bar
|
||||
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>
|
||||
@ -121,14 +130,14 @@
|
||||
on:click={() => (mobilePackages = !mobilePackages)}
|
||||
on:keypress={() => (mobilePackages = !mobilePackages)}
|
||||
>
|
||||
<Package {selectedPkg} name="All packages" bind:searchTerm/>
|
||||
<Package {selectedPkg} name="All packages" bind:searchTerm />
|
||||
</span>
|
||||
{#each data.packages as pkg}
|
||||
<span
|
||||
on:click={() => (mobilePackages = !mobilePackages)}
|
||||
on:keypress={() => (mobilePackages = !mobilePackages)}
|
||||
>
|
||||
<Package {selectedPkg} name={pkg} bind:searchTerm/>
|
||||
<Package {selectedPkg} name={pkg} bind:searchTerm />
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
@ -138,7 +147,7 @@
|
||||
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<PackageMenu>
|
||||
<span class="packages">
|
||||
<Package {selectedPkg} name="All packages" bind:searchTerm/>
|
||||
<Package {selectedPkg} name="All packages" bind:searchTerm />
|
||||
{#each data.packages as pkg}
|
||||
<Package {selectedPkg} name={pkg} bind:searchTerm />
|
||||
{/each}
|
||||
@ -210,7 +219,7 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
main {
|
||||
grid-template-columns: none;
|
||||
flex-direction: column;
|
||||
1
src/routes/patches/+page.ts
Normal file
1
src/routes/patches/+page.ts
Normal file
@ -0,0 +1 @@
|
||||
export const prerender = false;
|
||||
@ -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}`
|
||||
};
|
||||
goto(path);
|
||||
params.set('s', searchTerm);
|
||||
}
|
||||
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;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="menu">
|
||||
<h6>Packages</h6>
|
||||
<hr/>
|
||||
<hr />
|
||||
<div class="slot">
|
||||
<slot />
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 };
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user