feat: add new docs

not finished, must to document experiments
This commit is contained in:
xHyroM 2023-06-02 23:41:53 +02:00
parent c4b15d1fad
commit e42963a2fd
No known key found for this signature in database
GPG key ID: BE0423F386C436AA
14 changed files with 2112 additions and 4505 deletions

View file

@ -11,17 +11,17 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/image": "^0.16.8",
"@astrojs/prefetch": "^0.2.1",
"@astrojs/sitemap": "^1.3.1",
"@astrojs/tailwind": "^3.1.2",
"@astrojs/image": "^0.16.9",
"@astrojs/prefetch": "^0.2.3",
"@astrojs/sitemap": "^1.3.3",
"@astrojs/tailwind": "^3.1.3",
"@tailwindcss/typography": "^0.5.9",
"astro": "^2.4.5",
"astro-compress": "^1.1.42",
"astro": "^2.5.7",
"astro-compress": "^1.1.46",
"astro-icon": "^0.8.0",
"astro-robots-txt": "^0.5.0",
"astro-tooltips": "^0.6.2",
"fireworks-js": "^2.10.4",
"fireworks-js": "^2.10.5",
"html-minifier": "^4.0.0",
"tailwind": "^4.0.0",
"tailwindcss": "^3.3.2"

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,66 @@
---
import { docs, type Sidebar } from "@pages/docs/config";
const { currentPage } = Astro.props;
const currentPageMatch = currentPage.slice(1);
const isCurrentPage = (item: Sidebar) => {
if (item.link) {
return item.link.includes(currentPageMatch);
}
return false;
};
const getLinkClasses = (link: Sidebar) => {
const baseClasses =
"block py-2 px-6 my-1 transition-colors border-l hover:border-slate-300 hover:text-slate-300";
if (isCurrentPage(link)) {
return baseClasses + " border-slate-300 text-slate-100";
} else {
return baseClasses + " text-slate-400";
}
};
---
<aside title="Site Navigation">
<div class="absolute z-10 text-white md:hidden">
<button id="sidebar-show" class="p-4 pl-2">
<span class="sr-only">sidebar menu</span>
<img
src={"/icons/chevrons-right.svg"}
alt="sidebar hamburger menu icon"
id="open-arrow"
class="h-6 w-6 duration-200"
/>
</button>
</div>
<!--<nav aria-labelledby="grid-left" class="w-64 border-r p-4">-->
<nav
id="sidebar"
aria-labelledby="grid-left"
class="bg-dark-r w-64 -translate-x-full p-4 transition-transform duration-200 md:visible md:translate-x-0 md:bg-transparent"
>
<ul>
{
docs.sidebar.map((item) =>
item.header ? (
<h2 class="mt-4 font-semibold text-white">{item.text}</h2>
) : (
<li class={getLinkClasses(item)}>
<a href={item.link}>{item.text}</a>
</li>
)
)
}
</ul>
</nav>
</aside>
<script is:inline>
window.addEventListener("DOMContentLoaded", (event) => {
var target = document.querySelector('[aria-current="page"]');
if (target && target.offsetTop > window.innerHeight - 100) {
document.querySelector(".nav-groups").scrollTop = target.offsetTop;
}
});
</script>

View file

@ -0,0 +1,14 @@
---
import TableOfContents from "./TableOfContents.astro";
const { item } = Astro.props;
---
{
item.headings.length > 1 && (
<nav aria-labelledby="grid-right" class="invisible md:visible">
<div class="px-8">
<TableOfContents headings={item.headings} />
</div>
</nav>
)
}

View file

@ -1,60 +0,0 @@
---
import type { MarkdownInstance } from "astro";
import rightArrow from "../../../../public/icons/chevrons-right.svg";
const files = await Astro.glob("@pages/docs/items/**/*.md");
const sections = files.reduce((acc, file) => {
const category: string = file.url!.split("/")[3];
if (!acc[category]) acc[category] = [];
acc[category].push(file);
return acc;
}, {} as Record<string, MarkdownInstance<Record<string, any>>[]>);
const categories = Object.keys(sections);
---
<aside aria-label="Sidebar">
<div class="absolute z-10 text-white md:hidden">
<button id="sidebar-show" class="p-4 pl-2">
<span class="sr-only">sidebar menu</span>
<img
src={rightArrow}
alt="sidebar hamburger menu icon"
id="open-arrow"
class="h-6 w-6 duration-200"
/>
</button>
</div>
<nav
id="sidebar"
class="invisible absolute mr-16 mt-6 w-full -translate-x-full bg-dark py-4 transition-transform duration-200 md:visible md:relative md:mt-0 md:inline md:translate-x-0 md:bg-transparent"
>
<ul class="overflow-y-auto overflow-x-visible">
{
categories.map((category) => (
<li>
<div class="pt-5">
<h1 class="w-full text-2xl font-extrabold text-white ">
{category}
</h1>
<ul>
{sections[category].map((section) => (
<li class="my-2 rounded-sm p-2 text-white transition-colors duration-150 hover:bg-white/20">
<a href={section.url} class="px-4">
{section.frontmatter.title}
</a>
</li>
))}
</ul>
</div>
</li>
))
}
</ul>
</nav>
</aside>

View file

@ -0,0 +1,38 @@
---
const { headings } = Astro.props;
const parseDepth = (depth: number) => {
switch (depth) {
case 1:
return "ml-0";
case 2:
return "ml-4";
case 3:
return "ml-8";
case 4:
return "ml-12";
case 5:
return "ml-16";
case 6:
return "ml-20";
default:
return "ml-0";
}
};
---
<ul class="mt-24 flex flex-col gap-4">
{
headings.map(({ slug, text, depth }: {
slug: string;
text: string;
depth: number;
}) => {
return (
<li class={`text-slate-100 hover:text-slate-700 ${parseDepth(depth)}`}>
<a href={`#${slug}`}>{text}</a>
</li>
);
})
}
</ul>

View file

@ -1,36 +1,40 @@
---
import Container from "@components/atoms/Container.astro";
import Sidebar from "@components/widgets/docs/Sidebar.astro";
import LeftSidebar from "@components/widgets/docs/LeftSidebar.astro";
import RightSidebar from "@components/widgets/docs/RightSidebar.astro";
import Navbar from "@components/widgets/Navbar.astro";
import Layout from "@layouts/Layout.astro";
export interface Props {
content: {
title: string;
};
}
const {
content: { title },
} = Astro.props;
const item = Astro.props;
const currentPage = new URL(Astro.request.url).pathname;
---
<Layout>
<Layout title={`Docs - ${item.content.title}`} description={item.content.description} url={`https://xhyrom.dev${item.url}`}>
<Navbar />
<Container class="flex flex-row">
<Sidebar />
<div class="w-full p-8">
<h1 class="py-10 text-5xl font-extrabold text-white">
{title}
</h1>
<main class="prose text-2xl text-white">
<slot />
</main>
<div class="grid grid-cols-12">
<div
class="col-span-3 flex flex-row md:sticky md:top-0 md:h-screen md:pt-12"
>
<div class="ml-auto">
<LeftSidebar currentPage={currentPage} />
</div>
</div>
</Container>
<main class="col-span-6 overflow-auto py-4 pb-32 md:px-8">
<div>
<article id="article" class="content">
<section class="main-section prose prose-invert max-w-none">
<nav class="block sm:hidden"></nav>
<slot />
</section>
</article>
</div>
</main>
<div
class="col-span-3 flex flex-row md:sticky md:top-0 md:block md:h-screen"
>
<RightSidebar item={item} />
</div>
</div>
</Layout>
<script>

27
src/pages/docs/config.ts Normal file
View file

@ -0,0 +1,27 @@
export interface Docs {
sidebar: Sidebar[];
}
export interface Sidebar {
text: string;
header?: boolean;
link?: string;
}
export const docs: Docs = {
sidebar: [
{ text: "Discord Experiments API", header: true },
{
text: "Introduction",
link: "/docs/discord-experiments-api/introduction",
},
{
text: "Experiments",
link: "/docs/discord-experiments-api/experiments",
},
{
text: "Eligible",
link: "/docs/discord-experiments-api/eligible",
},
],
};

View file

@ -0,0 +1,162 @@
---
title: Experiments
description: How to fetch experiments from the API
layout: ../../../layouts/docs/ItemLayout.astro
---
# Experiments
This section of the documentation will cover how to fetch experiments from the API.
Accessible on [https://api.discord-experiments.xhyrom.dev/v2/experiments](https://api.discord-experiments.xhyrom.dev/v2/experiments)
## Experiment Object
Represents an experiment
**Experiment Structure:**
| field | type | description |
| ------- | ------------------------------------------------ | ----------------------------- |
| data | [experiment data structure](#data-object) | The data of the experiment |
| rollout | ?[experiment rollout structure](#rollout-object) | The rollout of the experiment |
## Data Object
Represents the data of an experiment
**Experiment Data Structure:**
| field | type | description |
| ----------- | ------------------ | ------------------------------------------------------------------------- |
| hash | string | Hash of the experiment (if the experiment has no id, this will be a hash) |
| id * | ?string | Id of the experiment |
| label * | ?string | Human-readable label of the experiment |
| kind ** | string | Kind of the experiment |
| description | ?array of string | Names of buckets |
| buckets | ?array of integers | Ids of available buckets |
| config_keys | ?array of string | Keys of the config |
\* Also included if you're using `?only_keys=true` query parameter.
\** Can be `guild` if the experiment is guild-specific, `user` if the experiment is user-specific.
\*** Everything is included in the `data` field, if you're not using `?also_with_unknown_ids=true` query parameter.
## Rollout Object
Represents the rollout of an experiment
**Rollout Structure:**
| field | type | description |
| ------------------- | --------------------------------------------------------- | ------------------------------------------- |
| revision | integer | Current version fo the rollout |
| populations | array of [rollout population](#rollout-population-object) | The experiment rollout's populations |
| overrides | array of [rollout override](#rollout-override-object) | The experiment rollout's overrides |
| overrides_formatted | array of [rollout population](#rollout-population-object) | Additional experiment rollout's populations |
## Rollout Population Object
Represents a population of an experiment rollout. The population object specifies a set of filters and ranges of positions needed to fit into particular buckets.
**Rollout Population Structure:**
| field | type | description |
| ------- | --------------------------------------------------------------- | ----------- |
| buckets | map\[string\]\[[population bucket](#population-bucket-object)\] | |
| filters | array of [population filter](#population-filter-object) | |
## Population Bucket Object
Represents a bucket of a population of an experiment rollout.
**Population Bucket Structure:**
| field | type | description |
| ------- | ----------------------------------------------------------------------- | ----------- |
| rollout | array of [population bucket rollout](#population-bucket-rollout-object) | |
### Population Bucket Rollout Object
Represents a rollout of a bucket of a population of an experiment rollout.
**Population Bucket Rollout Structure:**
| field | type | description |
| ----- | ------- | ----------- |
| start | integer | |
| end | integer | |
## Population Filter Object
Represents a filter of a population of an experiment rollout.
**Population Filter Structure:**
| field | type | description |
| ----- | ------ | ----------- |
| type | string | |
type is **guild_has_feature**
| field | type | description |
| -------- | ---------------- | ----------- |
| features | ?array of string | |
type is **guild_id_range**
| field | type | description |
| ------ | -------- | ----------- |
| min_id | ?integer | |
| max_id | integer | |
type is **guild_member_count_range**
| field | type | description |
| --------- | -------- | ----------- |
| min_count | ?integer | |
| max_count | integer | |
type is **guild_ids**
| field | type | description |
| ----- | ---------------- | ----------- |
| ids | ?array of string | |
type is **guild_hub_types**
| field | type | description |
| --------- | ----------------- | ----------- |
| hub_types | ?array of integer | |
type is **guild_has_vanity_url**
| field | type | description |
| ---------- | -------- | ----------- |
| has_vanity | ?boolean | |
type is **guild_in_range_by_hash**
| field | type | description |
| -------- | ------- | ----------- |
| hash_key | ?number | |
| target | ?number | |
## Fetching all experiments
You can fetch experiments from the API by sending a GET request to [https://api.discord-experiments.xhyrom.dev/v2/experiments](https://api.discord-experiments.xhyrom.dev/v2/experiments).
**Query parameters:**
| Name | Type | Description |
| --------------------- | --------------- | ------------------------------------------------------------- |
| also_with_unknown_ids | boolean | This will include also experiments without id, just hash |
| only_keys | boolean | This will only return the keys of the experiments (label, id) |
| has_rollout | boolean | This will only return experiments with rollout |
| kind * | array of string | This will only return experiments with the specified kind |
\* If you want multiple kinds, you can separate them with a comma (,)
```
GET https://api.discord-experiments.xhyrom.dev/v2/experiments
```
## Fetching experiment
You can fetch a specific experiment from the API by sending a GET request to [https://api.discord-experiments.xhyrom.dev/v2/experiments/:experimentId](https://api.discord-experiments.xhyrom.dev/v2/experiments/:experimentId).
You can use same query parameters as in [Fetching all experiments](#fetching-all-experiments)
```
GET https://api.discord-experiments.xhyrom.dev/v2/experiments/:experimentId
```

View file

@ -0,0 +1,26 @@
---
title: Introduction
description: Introduction to the Discord Experiments API
layout: ../../../layouts/docs/ItemLayout.astro
---
# Introduction
This section of the documentation will cover the basics of the Discord Experiments API, and how to use it.
Accessible on [https://api.discord-experiments.xhyrom.dev/v2](https://api.discord-experiments.xhyrom.dev/v2)
## What is the Discord Experiments API?
It's about the Discord Experiments API, which allows you to get information about Discord's experiments. It's a public API, so you don't need any token to use it.
## How it works?
It scrapes everything from client, and also from [https://discord.com/api/v10/experiments?with_guild_experiments=true](https://discord.com/api/v10/experiments?with_guild_experiments=true) for **some** guild rollouts.
This api **contains** all known experiments and their rollouts (if available).
## Source code
This api is currently closed source, but we will do our best to make it open source in the future.
If you don't trust us, you can scrape everything from our [Discord-Datamining](https://github.com/xHyroM/discord-datamining) repository, which is open source. There's file inside [data/experiments.json](https://github.com/xHyroM/discord-datamining/blob/master/data/experiments.json) which contains all experiments and their rollouts from our API (updates every 5 minutes).

View file

@ -1,14 +0,0 @@
---
title: Introduction
layout: ../../../../layouts/docs/ItemLayout.astro
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin fringilla odio tincidunt dictum. Ut facilisis pretium magna eu tristique. Donec nisl dui, accumsan vel blandit ut, rutrum at nisl. In hac habitasse platea dictumst. Phasellus suscipit feugiat orci, rhoncus varius leo tincidunt in. Phasellus at quam ornare, interdum enim et, tempor enim. Suspendisse condimentum, odio id placerat vestibulum, ante metus sodales quam, tincidunt suscipit sem augue et leo. Nullam turpis lacus, fringilla ut quam quis, cursus cursus risus.
Etiam aliquet dolor eu sapien lobortis, dignissim hendrerit felis luctus. In ac mauris velit. Duis posuere vitae leo lobortis vehicula. Vestibulum cursus arcu et aliquet porttitor. Suspendisse lobortis, massa non faucibus pretium, sapien urna commodo erat, sit amet cursus nunc massa et lacus. Donec semper tellus ac sapien porta laoreet. Nulla facilisi. Pellentesque nec euismod est. Vivamus a varius quam, dapibus dictum dui. Vivamus suscipit libero sem, quis eleifend tortor dapibus a. Nulla pretium massa in libero ornare posuere. Nulla lacinia odio eget varius mollis. Maecenas porta, nibh eu placerat ullamcorper, quam velit iaculis felis, non eleifend purus nisi sit amet neque. Morbi urna leo, convallis non accumsan in, malesuada nec quam. Aliquam erat volutpat. Pellentesque condimentum nisi vitae dictum porta.
Aliquam sollicitudin dolor et faucibus lobortis. Nullam et nisi mi. Nunc congue molestie justo, vel feugiat diam vulputate nec. Aliquam viverra sit amet lacus vitae fermentum. Phasellus convallis aliquet sem ac posuere. Curabitur blandit massa purus, vitae placerat urna blandit at. Praesent laoreet id dui laoreet porttitor. Suspendisse ac augue id risus suscipit rutrum. Morbi eget semper lectus. Aliquam fringilla ex sed felis imperdiet porta. Pellentesque dignissim orci eget justo ultricies, ut dapibus neque tempor. Suspendisse ac nibh faucibus, tempor libero ac, euismod purus. Donec rhoncus id ante vitae semper. Vestibulum tempus pretium nisi at fermentum. Cras tincidunt lectus leo, sit amet volutpat metus varius sit amet.
Proin placerat nisi ac nibh aliquet pellentesque. Fusce efficitur, arcu aliquet faucibus fringilla, arcu nisi vestibulum nunc, at porttitor massa erat vel nisi. Duis in ornare risus, blandit lobortis magna. Donec convallis sem a metus luctus porttitor. Quisque interdum faucibus nunc nec tincidunt. Nunc ut ullamcorper libero, in ornare risus. Fusce at vestibulum mauris. Proin euismod lectus et facilisis eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. In lobortis gravida augue at tincidunt. Fusce volutpat nisi id tempor luctus. Aenean ac hendrerit nisl. Donec ut venenatis ligula. Donec purus nibh, maximus id diam sit amet, viverra congue mi.
Quisque consectetur porttitor diam nec porta. Donec ut tortor in dui ultrices vestibulum ut quis tellus. Morbi dignissim quis enim volutpat sagittis. Pellentesque iaculis mattis varius. Nam non laoreet ex. Etiam vestibulum leo augue, ut auctor lacus feugiat vitae. Maecenas vitae ante non nisl vestibulum luctus eu et tortor. Proin velit nisl, dapibus pellentesque interdum non, efficitur in orci.

View file

@ -1,4 +0,0 @@
---
title: Test
layout: ../../../../layouts/docs/ItemLayout.astro
---

View file

@ -1,3 +0,0 @@
---
title: Introduction
---

View file

@ -1,3 +0,0 @@
---
title: Test
---