example projects layout update & fixes

package.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
+    "react-router-hash-link": "^2.4.3",
     "react-use-measure": "^2.1.1",
     "showdown": "^2.1.0"
   },

src/assets/pages/download/Body.jsx

@@ -7,51 +7,47 @@ export default function Body() {
   return (
     <main className="release-content-container">
       <div className="release-content">
-        <div className="previous-versions">
+        <div className="previous-versions" id="previous-versions">
           <h2 className="changelog">{content["Previous Versions"]}</h2>
           <Changelog />
         </div>
         <div className="example-projects">
           <h2>{content["Example Projects"]}</h2>
           <div className="starter-project">
+            <h3>{content["Starter Project"].title}</h3>
+            <p>{parse(content["Starter Project"].description)}</p>
             <a
-              href={content["Starter Project Illumina"].link}
-              className="button"
+              href={content["Starter Project"].Illumina}
+              target="_blank"
+              className="button fill"
             >
-              {content["Starter Project Illumina"].title}
+              Illumina
             </a>
-            <p>{parse(content["Starter Project Illumina"].description)}</p>
-          </div>
-          <div className="starter-project">
             <a
-              href={content["Starter Project Affymetrix"].link}
+              href={content["Starter Project"].Affymetrix}
               target="_blank"
-              className="button"
+              className="button border"
             >
-              {content["Starter Project Affymetrix"].title}
+              Affymetrix
             </a>
-            <p>{parse(content["Starter Project Affymetrix"].description)}</p>
           </div>
           <div className="sample-project">
-            <p></p>
+            <h3>{content["Sample Project"].title}</h3>
+            <p>{parse(content["Sample Project"].description)}</p>
             <a
-              href={content["Sample Project Illumina"].link}
+              href={content["Sample Project"].Illumina}
               target="_blank"
-              className="button"
+              className="button fill"
             >
-              {content["Sample Project Illumina"].title}
+              Illumina
             </a>
-            <p>{parse(content["Sample Project Illumina"].description)}</p>
-          </div>
-           <div className="sample-project">
             <a
-              href={content["Sample Project Affymetrix"].link}
+              href={content["Sample Project"].Illumina}
               target="_blank"
-              className="button"
+              className="button border"
             >
-              {content["Sample Project Affymetrix"].title}
+              Affymetrix
             </a>
-            <p>{parse(content["Sample Project Affymetrix"].description)}</p>
           </div>
         </div>
       </div>

src/assets/pages/download/content.jsx

@@ -3,31 +3,18 @@ const content = {
   Subtitle: "Must have Java 11 or newer installed",
 
   "Example Projects": "Example Projects",
-  "Starter Project Illumina": {
-    title: "Download Starter Project - Illumina",
-    link: "http://genvisis.umn.edu/downloads/Genvisis_Starter_Project_Illumina.zip",
-    description:
-      "Contains all the files needed to start a Genvisis project.  Includes 20 samples from the 1000G project in Illumina format.",
+  "Starter Project": {
+    title: "Download Starter Project",
+    description: "Contains all the files needed to start a Genvisis project. Includes 20 samples from the 1000G project in either Illumina or Affymetrix format.",
+    Illumina: "http://genvisis.umn.edu/downloads/Genvisis_Starter_Project_Illumina.zip",
+    Affymetrix: "http://genvisis.umn.edu/downloads/Genvisis_Starter_Project_Affymetrix.zip"
   },
-  "Starter Project Affymetrix": {
-    title: "Download Starter Project - Affymetrix",
-    link: "http://genvisis.umn.edu/downloads/Genvisis_Starter_Project_Affymetrix.zip",
-    description:
-      "Contains all the files needed to start a Genvisis project.  Includes 20 samples from the 1000G project in Affymetrix format.",
+  "Sample Project": {
+    title: "Download Sample Project",
+    description: "Contains all the files of a Genvisis project that has been run through the first four steps, which are some of the most resource intensive. This project allows you to use Genvisis visualizations immediately. Includes 20 samples from the 1000G project in either Illumina or Affymetrix format.",
+    Illumina: "http://genvisis.umn.edu/downloads/Genvisis_Sample_Project_Illumina.zip",
+    Affymetrix: "http://genvisis.umn.edu/downloads/Genvisis_Sample_Project_Affymetrix.zip"
   },
-  "Sample Project Illumina": {
-    title: "Download Sample Project - Illumina",
-    link: "http://genvisis.umn.edu/downloads/Genvisis_Sample_Project_Illumina.zip",
-    description:
-      "Contains all the files of a Genvisis project that has been run through the first four steps, which are some of the most resource intensive.  This project allows you to use Genvisis visualizations immediately.  Includes 20 samples from the 1000G project in Illumina format.",
-  },
-    "Sample Project Affymetrix": {
-    title: "Download Sample Project - Affymetrix",
-    link: "http://genvisis.umn.edu/downloads/Genvisis_Sample_Project_Affymetrix.zip",
-    description:
-      "Contains all the files of a Genvisis project that has been run through the first four steps, which are some of the most resource intensive.  This project allows you to use Genvisis visualizations immediately.  Includes 20 samples from the 1000G project in Affymetrix format.",
-  },
-
   "Previous Versions": "Previous Versions",
 };
 

src/assets/pages/download/index.jsx

@@ -1,23 +1,29 @@
 import React from "react";
-import Footer from "../../../assets/components/Footer"
+import Footer from "../../../assets/components/Footer";
 import Body from "./Body";
+import content from "./content";
+import { HashLink } from "react-router-hash-link";
 
 export default function index() {
   return (
     <>
       <header className="download container">
-        <h1>Download Genvisis</h1>
+        <h1>{content.title}</h1>
         <div className="buttons">
-          <a>
-            <div className="primary button"><a href="http://genvisis.umn.edu/jar" target="_blank">Latest Version</a></div>
-          </a>
-          <a>
-            <div className="secondary button">Previous Versions</div>
-          </a>
+          <div className="primary button">
+            <a href="http://genvisis.umn.edu/jar" target="_blank">
+              Latest Version
+            </a>
+          </div>
+          <div className="secondary button">
+            <HashLink smooth to="#previous-versions">
+              Previous Versions
+            </HashLink>
+          </div>
         </div>
-        <div>Must have Java 11 or newer installed</div>
+        <div>{content.Subtitle}</div>
         <div className="gradient"></div>
-        <img src="/images/grid.png" alt="grid graphic" className="grid"/>
+        <img src="/images/grid.png" alt="grid graphic" className="grid" />
       </header>
       <div className="custom-shape-divider-bottom-1686808296">
         <svg

src/assets/pages/features/Section.jsx

@@ -68,10 +68,6 @@ export default function Section({ data }) {
     setIsFullScreen(!isFullScreen);
   };
 
-  // useEffect(() => {
-  //   console.log(containerRef.current.offsetHeight)
-  // }, [emptyContainerHeight])
-
   return (
     <>
       <div className="feature-summary">{content}</div>

src/assets/styles/download.scss

@@ -69,6 +69,10 @@ main.release-content-container {
       left: 0;
       background-color: rgb(197, 197, 197);
     }
+
+    a {
+      margin-block: 1em;
+    }
   }
 
   .button {
@@ -83,16 +87,18 @@ main.release-content-container {
 
   $button-color: #838a9c;
 
-  .starter-project > .button {
+  .fill {
     background-color: $button-color;
     color: rgb(255, 255, 255);
   }
 
+  .border {
+    border: solid $button-color 4px;
+    color: $button-color;
+  }
+
   .sample-project {
-    .button {
-      border: solid $button-color 4px;
-      color: $button-color;
-    }
+    margin-top: 6em;
   }
 }
 

src/assets/styles/features.scss

@@ -29,6 +29,10 @@ main.features {
 
   }
 
+  section {
+    position: relative;
+  }
+
   .image-container {
     @media (max-width: 600px) {
       height: 280px;
@@ -69,6 +73,7 @@ main.features {
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     position: fixed;
+    z-index: 3;
   }
 
   .carousel {