Use collapsibles for other downloads

Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>

src/components/Collapsibles.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export const Collapsibles = ({ children }) => {
+    return (
+        <div className="collapsible">
+            {children}
+        </div>
+    );
+};
+
+interface CollapsibleProps {
+    title: string;
+    subtitle?: string;
+    inner: React.ReactNode;
+}
+
+export const Collapsible: React.FC<CollapsibleProps> = ({ 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 (
+        <div className="collapsible">
+            <div className="collapsible-header" onClick={toggleVisibility}>
+                <p>
+                    <span className="collapsible-title">{title}</span>
+                    {subtitle && <span className="collapsible-subtitle"><br/>{subtitle}</span>}
+                </p>
+                <span className={isInnerVisible ? 'collapsible-arrow expanded' : 'collapsible-arrow'}></span>
+            </div>
+            <div className="collapsible-line"></div>
+            <div className="inner" ref={innerRef} style={{ height: `${innerHeight}px` }}>
+                <div className="inner-content">
+                    {inner}
+                </div>
+            </div>
+        </div>
+    );
+};

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!

src/components/ProjectDownload.tsx

@@ -74,7 +74,7 @@ export const ProjectDownload: React.FC<ProjectDownloadProps> = ({ projectId, des
             <p>{description}</p>
             <Columns>
                 <Column>
-                    <h2>Build #{latestBuild.build} · {new Date(latestBuild.time).toLocaleDateString()}:</h2>
+                    <h3>Build #{latestBuild.build} · {new Date(latestBuild.time).toLocaleDateString()}:</h3>
                     <Grid elementsPerRow={gridColumns || 2} gap="8px">
                         { setup &&
                             <a href={setup} className='no-underline'>
@@ -99,7 +99,7 @@ export const ProjectDownload: React.FC<ProjectDownloadProps> = ({ projectId, des
                     </Grid>
                 </Column>
                 <Column>
-                    <h2>Recent Changes:</h2>
+                    <h3>Recent Changes:</h3>
                     <ul>
                         {
                             changes.map((change, i) => {

src/components/Questions.tsx

@@ -22,16 +22,16 @@ export const Q = ({ children }) => {
     const questionText = children[0];
     const answerComponent = React.Children.toArray(children)[1];
 
-    const arrowClass = isAnswerVisible ? 'question-arrow expanded' : 'question-arrow';
+    const arrowClass = isAnswerVisible ? 'collapsible-arrow expanded' : 'collapsible-arrow';
 
     return (
-        <div className="question" onClick={() => setIsAnswerVisible(!isAnswerVisible)}>
-            <div className="question-header">
+        <div className="collapsible" onClick={() => setIsAnswerVisible(!isAnswerVisible)}>
+            <div className="collapsible-header">
                 <span className="question-text">{questionText}</span>
                 <span className={arrowClass}></span>
             </div>
-            <div className="question-line"></div>
-            <div className="answer" ref={answerRef} style={{ height: `${answerHeight}px` }}>
+            <div className="collapsible-line"></div>
+            <div className="inner" ref={answerRef} style={{ height: `${answerHeight}px` }}>
                 {answerComponent}
             </div>
         </div>

src/css/custom.css

@@ -78,9 +78,54 @@
     background-color: var(--ifm-navbar-link-hover-color);
 }
 
-.answer {
-    overflow: hidden;
-    transition: height 0.3s ease-out;
+.collapsible-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    position: relative;
+}
+
+.collapsible-header h3 {
+    margin: 0;
+}
+
+.collapsible-header p {
+    margin-right: 18px;
+}
+
+.collapsible-arrow {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid var(--ifm-color-primary);
+    border-bottom: 2px solid var(--ifm-color-primary);
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    margin-top: -20px;
+}
+
+.collapsible-arrow.expanded {
+    transform: rotate(225deg);
+}
+
+
+.collapsible-line {
+    border-bottom: 1px solid var(--ifm-horizontal-line-color);
+    margin-top: -15px;
+    margin-bottom: 10px;
+}
+
+.collapsible-subtitle {
+    font-size: 14px;
+}
+
+.collapsible-title {
+    font-size: 20px;
+    margin-right: 20px;
 }
 
 .columns {
@@ -142,51 +187,25 @@
     }
 }
 
-.question-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    position: relative; /* Needed for absolute positioning of the arrow */
+.inner {
+    overflow: hidden;
+    transition: height 0.3s ease-out;
 }
 
-.question-header h3 {
-    margin: 0;
-}
-
-.question-arrow {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-right: 2px solid var(--ifm-color-primary);
-    border-bottom: 2px solid var(--ifm-color-primary);
-    transform: rotate(45deg);
-    transition: transform 0.3s ease;
-    position: absolute;
-    right: 0;
-    top: 50%;
+.inner-content {
+    margin-bottom: 20px;
     margin-top: -20px;
 }
 
-.question-arrow.expanded {
-    transform: rotate(225deg);
-}
-
-
-.question-line {
-    border-bottom: 1px solid var(--ifm-horizontal-line-color);
-    margin-top: -15px;
-    margin-bottom: 10px;
-}
-
-.question-text {
-    font-size: 18px;
-}
-
 .no-underline {
     text-decoration: transparent !important;
 }
 
+.question-text p {
+    font-size: 18px;
+    margin-right: 18px;
+}
+
 .setup-button {
     width: 100%;
     outline: 3px solid var(--ifm-color-secondary);

src/pages/download/index.mdx

@@ -32,6 +32,7 @@ import StandaloneIcon from '@site/static/img/icons/geyser.png';
 import { Columns, Column } from '@site/src/components/Columns';
 import { ProviderSelector } from '@site/src/components/Provider';
 import { ProjectDownload } from '@site/src/components/ProjectDownload';
+import { Collapsibles, Collapsible } from '@site/src/components/Collapsibles';
 
 <HeroBanner 
     title="Download"
@@ -69,29 +70,35 @@ import { ProjectDownload } from '@site/src/components/ProjectDownload';
         />
     </TabItem>
     <TabItem value="other-projects" label="Other Projects">
-        <Tabs>
-            <TabItem value='geyserconnect' label='GeyserConnect'>
+        <Collapsibles>
+            <Collapsible
+                title='GeyserConnect'
+                subtitle='A plugin to allow for Geyser players to connect to your server without needing to use a proxy.'
+                inner={
                     <ProjectDownload
                         projectId="geyserconnect"
-                    description="An easy way for Bedrock Edition clients to connect to any Java Edition servers without having to run anything."
                         setup='/other/geyserconnect'
                         downloadsInfo={{
                             geyserconnect: <><FontAwesomeIcon icon={faTowerCell}/> GeyserConnect</>,
                         }}
                         gridColumns={1}
                     />
-            </TabItem>
-            <TabItem value='geyseroptionalpack' label='GeyserOptionalPack'>
+                }
+            />
+            <Collapsible
+                title='GeyserOptionalPack'
+                subtitle='An optional Bedrock resource pack to extend Geyser functionality.'
+                inner={
                     <ProjectDownload
                         projectId="geyseroptionalpack"
-                    description="Optional Bedrock resource pack to extend Geyser functionality."
                         setup='/other/geyseroptionalpack'
                         downloadsInfo={{
                             geyseroptionalpack: <><FontAwesomeIcon icon={faFileZipper}/> GeyserOptionalPack</>,
                         }}
                         gridColumns={1}
                     />
-            </TabItem>
-        </Tabs>
+                }
+            />
+        </Collapsibles>
     </TabItem>
 </Tabs>