+
+
+ 
+
+
+
+
+
+
+ {user.title}
+
+
+ {user.tags.includes("favourite") && source
+
+ )}
+
+ {user.description}
+-
+
+ {
+ if (e.key === 'Enter') {
+ toggleOperator();
+ }
+ }}
+ checked={operator}
+ />
+
+
+
+
+ );
+}
diff --git a/website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css b/website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css
new file mode 100644
index 0000000..4fde44d
--- /dev/null
+++ b/website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.checkboxLabel {
+ --height: 25px;
+ --width: 80px;
+ --border: 2px;
+ display: flex;
+ width: var(--width);
+ height: var(--height);
+ position: relative;
+ border-radius: var(--height);
+ border: var(--border) solid var(--ifm-color-primary-darkest);
+ cursor: pointer;
+ justify-content: space-around;
+ opacity: 0.75;
+ transition: opacity var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+ box-shadow: var(--ifm-global-shadow-md);
+}
+
+.checkboxLabel:hover {
+ opacity: 1;
+ box-shadow: var(--ifm-global-shadow-md),
+ 0 0 2px 1px var(--ifm-color-primary-dark);
+}
+
+.checkboxLabel::after {
+ position: absolute;
+ content: '';
+ inset: 0;
+ width: calc(var(--width) / 2);
+ height: 100%;
+ border-radius: var(--height);
+ background-color: var(--ifm-color-primary-darkest);
+ transition: transform var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+ transform: translateX(calc(var(--width) / 2 - var(--border)));
+}
+
+input:focus-visible ~ .checkboxLabel::after {
+ outline: 2px solid currentColor;
+}
+
+.checkboxLabel > * {
+ font-size: 0.8rem;
+ color: inherit;
+ transition: opacity 150ms ease-in 50ms;
+}
+
+input:checked ~ .checkboxLabel::after {
+ transform: translateX(calc(-1 * var(--border)));
+}
diff --git a/website/src/pages/showcase/_components/ShowcaseTagSelect/index.tsx b/website/src/pages/showcase/_components/ShowcaseTagSelect/index.tsx
new file mode 100644
index 0000000..88101b6
--- /dev/null
+++ b/website/src/pages/showcase/_components/ShowcaseTagSelect/index.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useCallback, useState, useEffect, type ComponentProps, type ReactNode, type ReactElement } from "react";
+import { useHistory, useLocation } from "@docusaurus/router";
+import type { TagType } from "../../data";
+
+import { prepareUserState } from "../../index";
+import styles from "./styles.module.css";
+
+interface Props extends ComponentProps<"input"> {
+ icon: ReactElement
+ {text}
+
+
+ ),
+ container
+ )
+ : container}
+
+ );
+}
diff --git a/website/src/pages/showcase/_components/ShowcaseTooltip/styles.module.css b/website/src/pages/showcase/_components/ShowcaseTooltip/styles.module.css
new file mode 100644
index 0000000..5500c81
--- /dev/null
+++ b/website/src/pages/showcase/_components/ShowcaseTooltip/styles.module.css
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tooltip {
+ border-radius: 4px;
+ padding: 4px 8px;
+ color: var(--site-color-tooltip);
+ background: var(--site-color-tooltip-background);
+ font-size: 0.8rem;
+ z-index: 500;
+ line-height: 1.4;
+ font-weight: 500;
+ max-width: 300px;
+ opacity: 0.92;
+}
+
+.tooltipArrow {
+ visibility: hidden;
+}
+
+.tooltipArrow,
+.tooltipArrow::before {
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ background: inherit;
+}
+
+.tooltipArrow::before {
+ visibility: visible;
+ content: '';
+ transform: rotate(45deg);
+}
+
+.tooltip[data-popper-placement^='top'] > .tooltipArrow {
+ bottom: -4px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .tooltipArrow {
+ top: -4px;
+}
diff --git a/website/src/pages/showcase/data.tsx b/website/src/pages/showcase/data.tsx
new file mode 100644
index 0000000..e7ade27
--- /dev/null
+++ b/website/src/pages/showcase/data.tsx
@@ -0,0 +1,106 @@
+/*
+ * ADD YOUR SITE TO THE DOCUSAURUS SHOWCASE
+ *
+ * Please don't submit a PR yourself: message Clubwho
+ *
+ * Instructions for maintainers:
+ * - Add the site in the json array below
+ * - `title` is the project's name (no need for the "Docs" suffix)
+ * - Use relevant tags to categorize the site (read the tag descriptions on the
+ * https://docusaurus.io/showcase page and some further clarifications below)
+ * - Add a local image preview (decent screenshot of the Docusaurus site)
+ * - The image MUST be added to the GitHub repository, and use `require("img")`
+ * - The image has to have minimum width 640 and an aspect of no wider than 2:1
+ * - If a website is open-source, add a source link. The link should open
+ * to a directory containing the `docusaurus.config.js` file
+ * - Resize images: node admin/scripts/resizeImage.js
+ * - Run optimizt manually (see resize image script comment)
+ * - Open a PR and check for reported CI errors
+ *
+ */
+
+// LIST OF AVAILABLE TAGS
+// Available tags to assign to a showcase site
+// Please choose all tags that you think might apply.
+// We'll remove inappropriate tags, but it's less likely that we add tags.
+export type TagType =
+ | "favourite"
+ // Feel free to add the 'design' tag as long as there's _some_ level of
+ // CSS/swizzling.
+ | "design"
+ // Site must have more than one locale.
+ | "i18n"
+ // Large sites are defined as those with > 200 pages, excluding versions.
+ | "large"
+ | "personal";
+
+// Add sites to this list
+// prettier-ignore
+const Websites: Website[] = [
+ {
+ title: 'Heavenly Bodies',
+ description: 'Heavenly Bodies',
+ preview: require('./images/heavenly-bodies.png'),
+ website: 'https://ewanlyon.github.io/heavenly-bodies-speedrun-docs/',
+ source: 'https://github.com/ewanlyon/heavenly-bodies-speedrun-docs',
+ tags: ['design', 'favourite'],
+ },
+
+ /*
+ Pro Tip: add your site in alphabetical order.
+ Appending your site here (at the end) is more likely to produce Git conflicts.
+ */
+];
+
+export type Website = {
+ title: string;
+ description: string;
+ preview: string | null; // null = use our serverless screenshot service
+ website: string;
+ source: string | null;
+ tags: TagType[];
+};
+
+export type Tag = {
+ label: string;
+ description: string;
+ color: string;
+};
+
+export const Tags: { [type in TagType]: Tag } = {
+ favourite: {
+ label:"Favourite",
+ description: "Our favourite Speedrun-Docs sites that you must absolutely check out!",
+ color: '#e9669e',
+ },
+ design: {
+ label: "Design",
+ description: "Beautiful Speedrun-Docs sites, polished and standing out from the initial template!",
+ color: "#a44fb7",
+ },
+ i18n: {
+ label: "I18n",
+ description: "Translated Speedrun-Docs sites using the internationalization support with more than 1 locale.",
+ color: "#127f82",
+ },
+ large: {
+ label: "Large",
+ description: "Very large Speedrun-Docs sites, including many more pages than the average!",
+ color: "#8c2f00",
+ },
+ personal: {
+ label: "Personal",
+ description: "Personal websites, blogs and digital gardens built with Speedrun-Docs",
+ color: "#14cfc3",
+ },
+};
+
+export const TagList = Object.keys(Tags) as TagType[];
+function sortWebsites() {
+ let result = Websites;
+ // Sort by site name
+ result = result.sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()));
+ return result;
+}
+
+export const sortedWebsites = sortWebsites();
diff --git a/website/src/pages/showcase/images/heavenly-bodies.png b/website/src/pages/showcase/images/heavenly-bodies.png
new file mode 100644
index 0000000..06ff3c2
Binary files /dev/null and b/website/src/pages/showcase/images/heavenly-bodies.png differ
diff --git a/website/src/pages/showcase/index.tsx b/website/src/pages/showcase/index.tsx
new file mode 100644
index 0000000..b14a834
--- /dev/null
+++ b/website/src/pages/showcase/index.tsx
@@ -0,0 +1,291 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useMemo, useEffect } from "react";
+import clsx from "clsx";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import Translate, { translate } from "@docusaurus/Translate";
+import { useHistory, useLocation } from "@docusaurus/router";
+import { usePluralForm } from "@docusaurus/theme-common";
+
+import Layout from "@theme/Layout";
+import FavouriteIcon from "./_components/FavouriteIcon/favourite-icon";
+import { sortedWebsites, Tags, TagList, type Website, type TagType } from "./data";
+import Heading from "@theme/Heading";
+import ShowcaseTagSelect, { readSearchTags } from "./_components/ShowcaseTagSelect";
+import ShowcaseFilterToggle, { type Operator, readOperator } from "./_components/ShowcaseFilterToggle";
+import ShowcaseCard from "./_components/ShowcaseCard";
+import ShowcaseTooltip from "./_components/ShowcaseTooltip";
+
+import styles from "./styles.module.css";
+
+type UserState = {
+ scrollTopPosition: number;
+ focusedElementId: string | undefined;
+};
+
+function restoreUserState(userState: UserState | null) {
+ const { scrollTopPosition, focusedElementId } = userState ?? {
+ scrollTopPosition: 0,
+ focusedElementId: undefined,
+ };
+ // @ts-expect-error: if focusedElementId is undefined it returns null
+ document.getElementById(focusedElementId)?.focus();
+ window.scrollTo({ top: scrollTopPosition });
+}
+
+export function prepareUserState(): UserState | undefined {
+ if (ExecutionEnvironment.canUseDOM) {
+ return {
+ scrollTopPosition: window.scrollY,
+ focusedElementId: document.activeElement?.id,
+ };
+ }
+
+ return undefined;
+}
+
+const SearchNameQueryKey = "name";
+
+function readSearchName(search: string) {
+ return new URLSearchParams(search).get(SearchNameQueryKey);
+}
+
+function filterUsers(websites: Website[], selectedTags: TagType[], operator: Operator, searchName: string | null) {
+ if (searchName) {
+ // eslint-disable-next-line no-param-reassign
+ websites = websites.filter((user) => user.title.toLowerCase().includes(searchName.toLowerCase()));
+ }
+ if (selectedTags.length === 0) {
+ return websites;
+ }
+ return websites.filter((user) => {
+ if (user.tags.length === 0) {
+ return false;
+ }
+ if (operator === "AND") {
+ return selectedTags.every((tag) => user.tags.includes(tag));
+ }
+ return selectedTags.some((tag) => user.tags.includes(tag));
+ });
+}
+
+function useFilteredUsers() {
+ const location = useLocation{DESCRIPTION}
+Message Clubwho on Discord to have your site added.
+
+
+
+
+ Filters
+
+ {siteCountPlural(filteredUsers.length)}
+
+ -
+ {TagList.map((tag, i) => {
+ const { label, description, color } = Tags[tag];
+ const id = `showcase_checkbox_id_${tag}`;
+
+ return (
+
-
+
+ ++ ) : ( + + ) + } + /> +
+ );
+ })}
+
+ {
+ setValue(e.currentTarget.value);
+ const newSearch = new URLSearchParams(location.search);
+ newSearch.delete(SearchNameQueryKey);
+ if (e.currentTarget.value) {
+ newSearch.set(SearchNameQueryKey, e.currentTarget.value);
+ }
+ history.push({
+ ...location,
+ search: newSearch.toString(),
+ state: prepareUserState(),
+ });
+ setTimeout(() => {
+ document.getElementById("searchbar")?.focus();
+ }, 0);
+ }}
+ />
+
+ );
+}
+
+function ShowcaseCards() {
+ const filteredUsers = useFilteredUsers();
+
+ if (filteredUsers.length === 0) {
+ return (
+
+
+ No result
+
+
+
+
+
+
+
+
+ Our favorites
+
+
+ -
+ {favouriteWebsites.map((user) => (
+
+
+ All sites
+
+
+
+ ) : (
+ -
+ {otherUsers.map((user) => (
+
+
+
+ )}
+ -
+ {filteredUsers.map((user) => (
+