From 8eee82779a5821ae7b15bf85d3e7a74cc4360023 Mon Sep 17 00:00:00 2001 From: Joshua Castle <26531652+Kas-tle@users.noreply.github.com> Date: Sat, 2 Mar 2024 18:25:01 -0800 Subject: [PATCH] Use collapsibles for other downloads Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com> --- docs/floodgate/faq.mdx | 2 +- src/components/Collapsibles.tsx | 49 +++++++++++ src/components/HomepageFeatures/index.tsx | 4 +- src/components/ProjectDownload.tsx | 4 +- src/components/Questions.tsx | 10 +-- src/css/custom.css | 97 +++++++++++++--------- src/pages/download/index.mdx | 57 +++++++------ static/img/site/crossplatform_2.png | Bin 0 -> 1657952 bytes 8 files changed, 150 insertions(+), 73 deletions(-) create mode 100644 src/components/Collapsibles.tsx create mode 100644 static/img/site/crossplatform_2.png diff --git a/docs/floodgate/faq.mdx b/docs/floodgate/faq.mdx index 51a0009..3b15379 100644 --- a/docs/floodgate/faq.mdx +++ b/docs/floodgate/faq.mdx @@ -37,4 +37,4 @@ Here you can find answers to frequently asked questions about Floodgate - if you If you're using the Spigot version of Floodgate, there is an unofficial plugin that adds Skript support [here](https://github.com/kejonaMC/floodgate-skript). - + \ No newline at end of file diff --git a/src/components/Collapsibles.tsx b/src/components/Collapsibles.tsx new file mode 100644 index 0000000..328eb6c --- /dev/null +++ b/src/components/Collapsibles.tsx @@ -0,0 +1,49 @@ +import React, { useEffect, useRef, useState } from 'react'; + +export const Collapsibles = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +interface CollapsibleProps { + title: string; + subtitle?: string; + inner: React.ReactNode; +} + +export const Collapsible: React.FC = ({ title, subtitle, inner }) => { + const [isInnerVisible, setIsInnerVisible] = useState(false); + const innerRef = useRef(null); + const [innerHeight, setInnerHeight] = useState(0); + + useEffect(() => { + if (innerRef.current) { + setInnerHeight(isInnerVisible ? innerRef.current.scrollHeight : 0); + } + }, [isInnerVisible]); + + const toggleVisibility = () => { + setIsInnerVisible(!isInnerVisible); + }; + + return ( +
+
+

+ {title} + {subtitle &&
{subtitle}} +

+ +
+
+
+
+ {inner} +
+
+
+ ); +}; \ No newline at end of file diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index 105148e..5f84770 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -3,6 +3,7 @@ import Heading from '@theme/Heading'; import styles from './styles.module.css'; import Crossplatform0Img from '@site/static/img/site/crossplatform_0.png'; import Crossplatform1Img from '@site/static/img/site/crossplatform_1.png'; +import Crossplatform2Img from '@site/static/img/site/crossplatform_2.png'; type FeatureItem = { title: string; @@ -14,7 +15,7 @@ type FeatureItem = { const FeatureList: FeatureItem[] = [ { title: 'What is Geyser?', - image: Crossplatform0Img, + image: Crossplatform2Img, description: ( <> Geyser is a program that allows Minecraft: Bedrock Edition clients to join Minecraft: Java Edition servers, allowing for true crossplay between both editions of the game. The ultimate goal of this project is to allow Minecraft: Bedrock Edition users to join Minecraft: Java Edition servers as seamlessly as possible. @@ -32,6 +33,7 @@ const FeatureList: FeatureItem[] = [ }, { title: 'Join from anywhere', + image: Crossplatform0Img, description: ( <> Geyser can be joined from Bedrock clients on Windows 10/11, iOS, Android, and even consoles (more info here). Geyser works with a wide array of hosting providers, but can also be used as its own standalone proxy to join any Minecraft server! diff --git a/src/components/ProjectDownload.tsx b/src/components/ProjectDownload.tsx index dee20a9..c01128d 100644 --- a/src/components/ProjectDownload.tsx +++ b/src/components/ProjectDownload.tsx @@ -74,7 +74,7 @@ export const ProjectDownload: React.FC = ({ projectId, des

{description}

-

Build #{latestBuild.build} · {new Date(latestBuild.time).toLocaleDateString()}:

+

Build #{latestBuild.build} · {new Date(latestBuild.time).toLocaleDateString()}:

{ setup && @@ -99,7 +99,7 @@ export const ProjectDownload: React.FC = ({ projectId, des -

Recent Changes:

+

Recent Changes: