Merge pull request #15 from AnnaZiegler/fix-issue#14

Fixed download link to point to GitHub Releases page.

Author: shroffk

src/pages/download.js

@@ -1,16 +1,14 @@
-import React, { useState, useEffect } from "react"
+import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import styled from "styled-components"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faDownload } from "@fortawesome/free-solid-svg-icons"
 import { faLinux, faApple, faWindows } from "@fortawesome/free-brands-svg-icons"
-
 import Layout from "../components/layout"
-import SEO from "../components/seo"
+import Seo from "../components/seo"
 import Container from "../components/container"
 import Banner from "../components/banner"
 import SiteSpecificVersions from "../components/SiteSpecificVersions"
-
 import { dlInfo } from "../utils/downloadinfo"
 
 const Flex = styled.div`
@@ -25,43 +23,6 @@ const Flex = styled.div`
   }
 `
 
-const OSButtons = styled.div`
-  margin: 0 0 1rem;
-  button {
-    background-color: #ffffff;
-    border: none;
-    cursor: pointer;
-    margin: 0 1rem 1rem;
-  }
-
-  button:hover {
-    color: #00293f;
-  }
-
-  .osLinux {
-    color: ${props =>
-      props.OSName === "Linux" || props.OSName === "Other"
-        ? "#004160"
-        : "#000000"};
-    border-bottom: ${props =>
-      props.OSName === "Linux" || props.OSName === "Other"
-        ? "2px solid #004160"
-        : "none"};
-  }
-
-  .osMac {
-    color: ${props => (props.OSName === "Mac" ? "#004160" : "#000000")};
-    border-bottom: ${props =>
-      props.OSName === "Mac" ? "2px solid #004160" : "none"};
-  }
-
-  .osWindows {
-    color: ${props => (props.OSName === "Windows" ? "#004160" : "#000000")};
-    border-bottom: ${props =>
-      props.OSName === "Windows" ? "2px solid #004160" : "none"};
-  }
-`
-
 const StyledDownloadButton = styled.a`
   text-decoration: none;
   background-color: #004160;
@@ -84,51 +45,32 @@ const StyledDownloadButton = styled.a`
   }
 `
 
-const StyledDownloadButtonDev = styled(StyledDownloadButton)`
-  background-color: #ffffff;
-  color: #004160;
-
-  &:hover {
-    color: #ffffff;
-    background-color: #004160;
-    border: 2px solid #004160;
-  }
+const DownloadSubtext = styled.p`
+  text-align: center;
+  font-size: 0.95rem;
+  padding: 0.835rem 0.935rem;
 `
 
-const DownloadSubtext = styled.p`
+const DownloadText = styled.p`
   text-align: center;
-  font-size: 0.85rem;
+  font-size: 1.1rem;
   padding: 0.835rem 0.935rem;
+    margin-top: 0.5rem;
+    margin-bottom: 2rem;
 `
 
-const DownloadButton = ({ link, os }) => (
+const DownloadButtonPhoebus = () => (
   <div>
-    <StyledDownloadButton href={link}>
-      <FontAwesomeIcon icon={faDownload} /> Download Control System Studio
+    <StyledDownloadButton href={dlInfo.downloadGitRelease} target={"_blank"}>
+      <FontAwesomeIcon icon={faDownload} /> Download Phoebus Control System Studio
     </StyledDownloadButton>
     <DownloadSubtext>
-      Version {dlInfo.downloadVersion} for {os} |{" "}
-      <a href={dlInfo.allDownloads}>Other Versions</a>
+      Releases available for <FontAwesomeIcon icon={faLinux} /> Linux, <FontAwesomeIcon icon={faApple} /> Mac and <FontAwesomeIcon icon={faWindows} /> Windows.
     </DownloadSubtext>
   </div>
 )
 
-const DevDownloadButton = () => (
-  <div>
-    <StyledDownloadButtonDev href={dlInfo.downloadDev}>
-      <FontAwesomeIcon icon={faDownload} /> Download Development Build
-    </StyledDownloadButtonDev>
-    <DownloadSubtext>Version {dlInfo.downloadDevVersion}</DownloadSubtext>
-  </div>
-)
-
 const Download = () => {
-  const [OSName, setOSName] = useState("Other")
-
-  useEffect(() => {
-    setOSName(detectOS())
-  }, [])
-
   const images = useStaticQuery(graphql`{
   banner: file(
     relativePath: {eq: "banners/CS-Studio-Keyvisual_banner_3_darker.png"}
@@ -141,42 +83,22 @@ const Download = () => {
 
   return (
     <Layout>
-      <SEO title="Download" />
+      <Seo title="Download" />
       <Banner
         imageFluid={images.banner.childImageSharp.gatsbyImageData}
         text="Download"
       />
       <Container>
+        <DownloadText>
+          <p>
+            Get the latest Releases on GitHub
+          </p>
+        </DownloadText>
+
         <Flex>
-          <OSButtons OSName={OSName}>
-            <button onClick={() => setOSName("Linux")} className="osLinux">
-              <FontAwesomeIcon icon={faLinux} /> Linux
-            </button>
-            <button onClick={() => setOSName("Mac")} className="osMac">
-              <FontAwesomeIcon icon={faApple} /> Mac
-            </button>
-            <button onClick={() => setOSName("Windows")} className="osWindows">
-              <FontAwesomeIcon icon={faWindows} /> Windows
-            </button>
-          </OSButtons>
+          <DownloadButtonPhoebus />
         </Flex>
-        <Flex>
-          {(OSName === "Linux" || OSName === "Other") && (
-            <DownloadButton link={dlInfo.downloadStableLinux} os={"Linux"} />
-          )}
-
-          {OSName === "Mac" && (
-            <DownloadButton link={dlInfo.downloadStableMac} os={"Mac"} />
-          )}
 
-          {OSName === "Windows" && (
-            <DownloadButton
-              link={dlInfo.downloadStableWindows}
-              os={"Windows"}
-            />
-          )}
-          <DevDownloadButton />
-        </Flex>
         <h2>Site Specific Versions</h2>
         <SiteSpecificVersions />
         <div style={{ marginBottom: `1rem` }}></div>
@@ -185,13 +107,4 @@ const Download = () => {
   );
 }
 
-const detectOS = () => {
-  let OSName = "Other"
-  if (window.navigator.userAgent.indexOf("Windows") !== -1) OSName = "Windows"
-  if (window.navigator.userAgent.indexOf("Mac") !== -1) OSName = "Mac"
-  if (window.navigator.userAgent.indexOf("Linux") !== -1) OSName = "Linux"
-
-  return OSName
-}
-
 export default Download

src/utils/downloadinfo.js

@@ -1,9 +1,3 @@
 export const dlInfo = {
-    downloadVersion: "4.5.9",
-    downloadStableLinux: "http://download.controlsystemstudio.org/release/4.5/cs-studio-4.5.9-linux.gtk.x86_64.tar.gz",
-    downloadStableWindows: "http://download.controlsystemstudio.org/release/4.5/cs-studio-4.5.9-win32.win32.x86_64.zip",
-    downloadStableMac: "http://download.controlsystemstudio.org/release/4.5/cs-studio-4.5.9-macosx.cocoa.x86_64.zip",
-    allDownloads: "http://download.controlsystemstudio.org/release/4.5/",
-    downloadDevVersion: "4.6.0",
-    downloadDev: "https://openepics.ci.cloudbees.com/view/CS-Studio%204.6/",
+    downloadGitRelease: "https://github.com/ControlSystemStudio/phoebus/releases/",
 }