Add component to docs to chose version when downloading

update wordlist again
fross123 · Apr 9, 2024 · 6dc2602 · 6dc2602
1 parent 6832b36
commit 6dc2602
Show file tree

Hide file tree

Showing 9 changed files with 316 additions and 40 deletions.
diff --git a/.wordlist.txt b/.wordlist.txt
@@ -28,4 +28,13 @@ MyDisk
 mov
 wav
 numbermode
-pre
+pre
+DropdownButton
+js
+buttonClassName
+const
+dmg
+fross
+github
+macOS
+macos
diff --git a/website/docs/tutorial-basics/installation.mdx b/website/docs/tutorial-basics/installation.mdx
@@ -6,6 +6,9 @@ import Link from '@docusaurus/Link';
 import styles from '@site/src/pages/index.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
+import DropdownButton from '@site/src/components/DropdownButton.js';
+
+
 # Installation
 
 :::info
@@ -14,13 +17,15 @@ Please Note... There have been reports of the application crashing even after fo
 
 Download CSV to QLab from the [latest GitHub release](https://github.com/fross123/csv_to_qlab/releases/). Check out the [latest release notes](/releases) for the latest updates.
 
-<div className={styles.buttons}>
-    <Link
-    className="button button--primary button--lg"
-    to="https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab.dmg">
-    Download CSV to QLab
-    </Link>
-</div>
+export const options = [
+    { label: 'macOS 13 (Latest)', value: 'macos13', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab.dmg' },
+    { label: 'macOS 12', value: 'macos12', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab-macos12.dmg' },
+    { label: 'macOS 11', value: 'macos11', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab-macos11.dmg' },
+    // { label: 'macOS-13', value: 'Option3', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab-macos13.dmg' },
+];
+export const buttonClassName = "button button--primary button--lg"
+
+<DropdownButton buttonClassName={buttonClassName} options={options} />
 
 :::note
 You will eventually need QLab by Figure53. Download at [qlab.app](https://qlab.app/)

diff --git a/website/package.json b/website/package.json
@@ -24,6 +24,7 @@
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-select": "^5.8.0",
     "url-loader": "^4.1.1"
   },
   "browserslist": {

diff --git a/website/releases/2024-3-30-v2024.1.mdx b/website/releases/2024-3-30-v2024.1.mdx
@@ -7,17 +7,18 @@ tags: ["2024", "1"]
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from '@site/src/pages/index.module.css';
+import DropdownButton from '@site/src/components/DropdownButton.js';
+
+export const options = [
+    { label: 'macOS 13 (Latest)', value: 'macos13', link: 'https://github.com/fross123/csv_to_qlab/releases/download/v2024.1/CSV-To-QLab.dmg' },
+    { label: 'macOS 12', value: 'macos12', link: 'https://github.com/fross123/csv_to_qlab/releases/download/v2024.1/CSV-To-QLab-macos12.dmg' },
+    { label: 'macOS 11', value: 'macos11', link: 'https://github.com/fross123/csv_to_qlab/releases/download/v2024.1/CSV-To-QLab-macos11.dmg' },
+];
+export const buttonClassName = "button button--primary button--lg"
 
 Features Added:
 - New option to adjust video opacity of fade cues.
 
 Various other minor updates and fixes.
 
-
-<div className={styles.buttons}>
-    <Link
-    className="button button--primary button--lg"
-    to="https://github.com/fross123/csv_to_qlab/releases/download/v2024.1/CSV-To-QLab.dmg">
-    Download Release v2024.1
-    </Link>
-</div>
+<DropdownButton buttonClassName={buttonClassName} options={options} />
diff --git a/website/src/components/DropdownButton.js b/website/src/components/DropdownButton.js
@@ -0,0 +1,49 @@
+// DropdownButton.js
+
+import React, { useState } from 'react';
+import Link from '@docusaurus/Link';
+import Select from 'react-select';
+import styles from './../pages/index.module.css';
+
+
+const DropdownButton = ({buttonClassName, options }) => {
+  const [selectedOption, setSelectedOption] = useState(options[0].value);
+
+  const handleDropdownChange = (e) => {
+    setSelectedOption(e.value);
+  };
+
+  const getButtonLink = () => {
+    const selectedOptionData = options.find((opt) => opt.value === selectedOption);
+    return selectedOptionData ? selectedOptionData.link : '#';
+  };
+
+  return (
+    <div className='download-select-button'>
+      <Select 
+        theme={(theme) => ({
+          ...theme,
+          borderRadius: 0,
+          colors: {
+            ...theme.colors,
+            primary25: 'pink',
+            primary: 'black',
+          },
+        })}
+        id="dropdown" defaultValue={options[0]}
+        onChange={handleDropdownChange}
+        options={options}>
+        </Select>
+
+      <div className={styles.buttons}>
+        <Link
+          className={buttonClassName}
+          to={getButtonLink()}>
+          Download
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default DropdownButton;
diff --git a/website/src/components/StatusBadges.js b/website/src/components/StatusBadges.js
@@ -5,10 +5,14 @@ import Link from '@docusaurus/Link';
 
 const BadgeList = [
     {
-        link: 'https://img.shields.io/badge/Donate-PayPal?style=for-the-badge&logo=paypal&labelColor=lightgrey&color=blue&link=https%3A%2F%2Fwww.paypal.com%2Fpaypalme%2Ffinlayross',
-        alt: 'donate-paypal',
-        button_link: "https://www.paypal.com/paypalme/FinlayRoss"
+        link: 'https://img.shields.io/github/v/release/fross123/csv_to_qlab?style=for-the-badge',
+        alt: "version Number"
     },
+    // {
+    //     link: 'https://img.shields.io/badge/Donate-PayPal?style=for-the-badge&logo=paypal&labelColor=lightgrey&color=blue&link=https%3A%2F%2Fwww.paypal.com%2Fpaypalme%2Ffinlayross',
+    //     alt: 'donate-paypal',
+    //     button_link: "https://www.paypal.com/paypalme/FinlayRoss"
+    // },
     {
         link: 'https://img.shields.io/github/downloads/fross123/csv_to_qlab/total?style=for-the-badge&label=All%20Downloads',
         alt: 'total-downloads'
@@ -28,13 +32,14 @@ const BadgeList = [
     {
         link: 'https://img.shields.io/github/actions/workflow/status/fross123/csv_to_qlab/pytest.yml?style=for-the-badge&label=Pytest',
         alt: 'pytest-status'
-    }
+    },
+
 ]
 
 const OperatingSystemsList = [
     {
-        link: 'https://img.shields.io/badge/Works_On-MacOS_Big_Sur_or_later-blue?style=for-the-badge&logo=apple',
-        alt: 'big-sur',
+        link: 'https://img.shields.io/badge/Works_On-MacOS_11_or_later-blue?style=for-the-badge&logo=apple',
+        alt: 'works on logo',
     },
 ]
 

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -30,3 +30,13 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 .button {
   margin: 10px;
 }
+
+.download-select-button {
+  padding-left: 5em;
+  padding-right: 5em;
+  border-radius: 10px;
+  margin-left: 25%;
+  margin-right: 25%;
+  width: 50%;
+  color: black;
+ }
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -8,9 +8,20 @@ import HomepageFeatures from '../components/HomepageFeatures';
 import Badges from '../components/StatusBadges.js';
 import Logo from '@site/static/img/logo.svg';
 
+import DropdownButton from './../components/DropdownButton.js';
+
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
+  const options = [
+    { label: 'macOS 13 (Latest)', value: 'macos13', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab.dmg' },
+    { label: 'macOS 12', value: 'macos12', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab-macos12.dmg' },
+    { label: 'macOS 11', value: 'macos11', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab-macos11.dmg' },
+    // { label: 'macOS-13', value: 'Option3', link: 'https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab-macos13.dmg' },
+];
+  const buttonClassName = "button button--secondary button--lg"
+
+
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -24,13 +35,11 @@ function HomepageHeader() {
             CSV Import Tutorial
           </Link>
         </div>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="https://github.com/fross123/csv_to_qlab/releases/latest/download/CSV-To-QLab.dmg">
-            Skip Ahead and Download Now
-          </Link>
-        </div>
+        <hr></hr>
+        <p className='hero__subtitle'>Or... skip ahead and download now!</p>
+
+        <DropdownButton buttonClassName={buttonClassName} options={options} />
+
         <Badges />
       </div>
     </header>