feat(docs): init docs

.prettierignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /build
+/testing-docs
 /public
 /.svelte-kit
 /package

README.md

@@ -2,6 +2,12 @@
 
 The official ReVanced Website.
 
+## Documentation
+
+The documentation you see on the live website is generated from a collection of markup files found in [this git repository](https://github.com/revanced/revanced-documentation). The documentation "generator" currently supports asciidoc and markdown.
+
+It looks for markup files in the `testing-docs` folder by default, but you can specify a different path by changing the `REVANCED_DOCS_FOLDER` environment variable.
+
 ## Developing
 
 Install dependencies with `npm install` (or `pnpm install`).

ci-build.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+set -e
+
+# CD to the directory of this script.
+cd "$(dirname "$0")"
+
+docs_git_repo="${REVANCED_DOCS_REPO:-https://github.com/revanced/revanced-documentation.git}"
+
+git clone "$docs_git_repo" "_docs_src"
+# TODO: transform a tag links so this works properly...
+#export REVANCED_DOCS_FOLDER="_docs_src/docs"
+
+#git clone --recurse-submodules "$docs_git_repo" "_docs_src"
+
+# Copy assets from docs repo to here.
+# mkdir -p static/docs
+# cp -r "$REVANCED_DOCS_FOLDER"/assets static/docs/assets || true
+
+npm run build

src/layout/Footer/FooterHost.svelte

@@ -5,7 +5,7 @@
 	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';
 
@@ -50,6 +50,7 @@
 			<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>
 			</FooterSection>
@@ -68,11 +69,20 @@
 				<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://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>
+					<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>

src/layout/Navbar/NavHost.svelte

@@ -71,6 +71,7 @@
 					<Navigation href="/">Home</Navigation>
 					<Navigation queryKey="manager" href="/download">Download</Navigation>
 					<Navigation queryKey="patches" href="/patches">Patches</Navigation>
+					<Navigation href="/docs">Docs</Navigation>
 					<Navigation queryKey="repositories" href="/contributors">Contributors</Navigation>
 				</div>
 			</div>
@@ -107,9 +108,7 @@
 		</Svg>
 	</svelte:fragment>
 	<svelte:fragment slot="title">Settings</svelte:fragment>
-	<svelte:fragment slot="description"
-		>Configure the API for this website.</svelte:fragment
-	>
+	<svelte:fragment slot="description">Configure the API for this website.</svelte:fragment>
 	<div id="settings-content">
 		<div class="input-wrapper">
 			<input name="api-url" type="text" bind:value={url} />

src/routes/docs/+layout.server.ts

@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types';
+
+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.
+// If you can no longer prerender the docs, then you are going to have to move the load functions here to a prerendered server route like before and fetch them here.
+export const prerender = true;
+
+export const load: LayoutServerLoad = () => ({ tree: index_content() });

src/routes/docs/+layout.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { LayoutData } from './$types';
+
+	import DocsNavTree from './DocsNavTree.svelte';
+	import Footer from '$layout/Footer/FooterHost.svelte';
+
+	export let data: LayoutData;
+</script>
+
+<section id="doc-section-main">
+	<div class="menu">
+		<DocsNavTree tree={data.tree} />
+	</div>
+	<slot />
+</section>
+<Footer />
+
+<style lang="scss">
+	#doc-section-main {
+		margin-inline: auto;
+		width: min(90%, 90rem);
+		margin-top: 8rem;
+		margin-bottom: 5rem;
+	}
+
+	.menu {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	#doc-section-main {
+		display: grid;
+		grid-template-columns: 320px 3fr;
+		gap: 3rem;
+	}
+</style>

src/routes/docs/DocsNavNode.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { DocumentInfo } from './documentation.shared';
+	export let info: DocumentInfo;
+	import { page } from '$app/stores';
+</script>
+
+<!-- Always part of a list -->
+<li>
+	<a href="/docs/{info.slug}">
+		<div class="doc-section item" class:selected={$page.url.pathname === `/docs/${info.slug}`}>
+			<h5>{info.title}</h5>
+		</div>
+	</a>
+</li>
+
+<style>
+	a {
+		text-decoration: none;
+	}
+
+	li {
+		list-style: none;
+	}
+	.item {
+		padding: 0.6rem 1rem;
+		border-radius: 8px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		width: 100%;
+		user-select: none;
+		transition: background-color 0.4s var(--bezier-one);
+	}
+
+	.item h5 {
+		color: var(--grey-five);
+		transition: color 0.3s var(--bezier-one);
+	}
+
+	.selected h5 {
+		color: var(--grey-four);
+		transition: color 0.3s var(--bezier-one);
+	}
+
+	.selected {
+		background-color: var(--accent-color);
+	}
+	.item:hover:not(.selected) {
+		background-color: var(--grey-six);
+	}
+
+	.item:not(.selected):hover h5 {
+		color: var(--white);
+	}
+</style>

src/routes/docs/DocsNavTree.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { is_tree, assert_is_info_node } from './documentation.shared';
+	import type { DocsTree } from './documentation.shared';
+
+	import DocsNavNode from './DocsNavNode.svelte';
+
+	export let tree: DocsTree;
+	// How deeply nested this is.
+	export let nested = 0;
+</script>
+
+{#if nested}
+	<!-- The index should be part of the `ul` above us. -->
+	<DocsNavNode info={tree.index} />
+{/if}
+
+<ul>
+	{#if !nested}
+		<!-- There is no `ul` above us, so index should go here instead. -->
+		<DocsNavNode info={tree.index} />
+	{/if}
+
+	{#each tree.nodes as node}
+		{#if is_tree(node)}
+			<!-- Recursion here is fine. We are not dealing with a tree the size of a linux root file system. -->
+			<svelte:self tree={node} nested={nested + 1} />
+		{:else}
+			<DocsNavNode info={assert_is_info_node(node)} />
+		{/if}
+	{/each}
+</ul>
+
+<style>
+	ul {
+		padding-left: 1rem;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+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);
+	}
+
+	return document;
+};

src/routes/docs/[...slug]/+page.svelte

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

src/routes/docs/documentation.scss

@@ -0,0 +1,95 @@
+#markup-content {
+    /* Defaults for text */
+    color: var(--accent-color-two);
+    font-weight: 300;
+    font-size: 1rem;
+    line-height: 1.75rem;
+    letter-spacing: 0.03rem !important;
+
+
+
+    a {
+        text-decoration: none;
+        color: var(--accent-color);
+        border-bottom: 1.5px solid var(--accent-low-opacity);
+        padding: 0px ;
+    }
+
+
+
+    code {
+        background-color: var(--grey-one);
+        border-radius: 8px;
+        padding: 0.2rem 0.5rem;
+        font-size: 0.8rem;
+        font-family: var(--mono-font);
+        font-weight: 300;
+        flex-wrap: wrap;
+        line-height: 1.25rem;
+    }
+
+
+
+    pre code {
+        font-size: 0.75rem;
+        background-color: var(--grey-six);
+        white-space: pre;
+        display: block;
+        flex-wrap: wrap;
+        padding: 0.5rem 1rem;
+        margin: 1rem 0;
+    }
+
+    h5 {
+        margin-bottom: 0.5rem;
+    }
+
+    h5 {
+        color: var(--accent-color);
+    }
+
+    h1, h2, h3, h4, h5 {
+        margin-bottom: 1rem;
+    }
+
+    h1 {
+        font-size: 2.25rem;
+        font-weight: 600;
+        letter-spacing: -0.02rem;
+        color: var(--accent-color-two);
+        border-bottom: 1px solid var(--grey-three);
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+        letter-spacing: -0.02rem;
+        font-weight: 600;
+        color: var(--accent-color-two);
+        border-bottom: 1px solid var(--grey-three);
+        padding-bottom: 1rem;
+        margin-top: 2rem;
+    }
+
+    h3 {
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+    }
+
+    li {
+        margin-left: 1rem;
+        margin-bottom: 0.5rem;
+    }
+
+    /* Markup processors output this for bold text, but css spec is goofy aah */
+    strong {
+        font-weight: bold;
+        letter-spacing: 0.01rem;
+
+    }
+
+    ul {
+        padding-left: 2rem;
+    }
+}