-
{title}
-
- {releases.map((release) => (
- -
- {release.version}
- ({release.publishedAt})
-
- {release.assets.map((asset, i) => {
- return (
-
- {asset.os} {asset.bit}
-
- );
- })}
-
-
- ))}
-
+
+
+
+ {open && (
+
+
+
+
+ {intl.formatMessage({ id: 'publishedOn' })} {date}
+
+
+ )}
+
+ );
+};
+
+const osAndComponents = [
+ { osName: 'Windows', logoComponent:
},
+ { osName: 'macOS', logoComponent:
},
+ { osName: 'Linux', logoComponent:
},
+ { osName: 'Raspberry Pi', logoComponent:
}
+];
+
+const OSSectionContainer = memo(({ release, onAfterDownload }) => {
+ const intl = useIntl();
+ const [selectedOs, setSelectedOs] = useState('');
+
+ return (
+
+
{intl.formatMessage({ id: 'otherVersions' })}
+
+ {osAndComponents.map((os, index) => (
+
+ setSelectedOs((s) => (s !== os.osName ? os.osName : ''))
+ }
+ onAfterDownload={onAfterDownload}
+ />
+ ))}
- )
+
);
});
+const OSSection = memo(
+ ({
+ logoComponent,
+ osName,
+ assets,
+ date,
+ isSelected,
+ onSelect,
+ onAfterDownload
+ }) => {
+ return (
+
+
+
+
+
+ );
+ }
+);
+
+const Link = memo(({ href, icon, title, description }) => (
+
+
+ {icon}
+ {title}
+
+ {description}
+
+));
+
export const query = graphql`
- query($selectedReleases: [String!]!, $selectedPreReleases: [String!]!) {
+ query($selectedReleases: [String!]!) {
releases: allFile(
filter: {
sourceInstanceName: { eq: "download" }
@@ -172,30 +359,7 @@ export const query = graphql`
node {
name
downloadUrl
- }
- }
- }
- }
- }
- }
- preReleases: allFile(
- filter: {
- sourceInstanceName: { eq: "download" }
- relativeDirectory: { eq: "releases" }
- childJson: { tagName: { in: $selectedPreReleases } }
- }
- sort: { fields: childJson___name, order: DESC }
- ) {
- nodes {
- childJson {
- name
- tagName
- publishedAt
- releaseAssets {
- edges {
- node {
- name
- downloadUrl
+ size
}
}
}
diff --git a/src/templates/releases.js b/src/templates/releases.js
new file mode 100644
index 000000000..ab5188481
--- /dev/null
+++ b/src/templates/releases.js
@@ -0,0 +1,182 @@
+import React, { memo, useState } from 'react';
+import { navigate, graphql } from 'gatsby';
+import { useIntl } from 'react-intl';
+import classnames from 'classnames';
+
+import HeadMatter from '../components/HeadMatter';
+
+import Layout from '../components/Layout';
+
+import { usePreparedReleases } from '../hooks/download';
+
+import * as css from '../styles/templates/releases.module.css';
+
+const Releases = ({ data }) => {
+ const intl = useIntl();
+ const releases = usePreparedReleases(data.releases.nodes);
+ const preReleases = usePreparedReleases(data.preReleases.nodes);
+
+ const onAfterDownload = () => {
+ const goToDonate = () => {
+ window.removeEventListener('focus', goToDonate);
+ setTimeout(() => {
+ navigate('/donate');
+ }, 3000);
+ };
+ window.addEventListener('focus', goToDonate);
+ };
+
+ return (
+
+
+
+
+
+ }
+ outro={
+
+ }
+ />
+
+
+
+ );
+};
+
+const ReleaseSection = memo(
+ ({ releases, title, onAfterDownload, intro, outro }) => {
+ return (
+ releases.length > 0 && (
+
+
{title}
+
+ {intro}
+
+ {releases.map((release, index) => (
+
+ ))}
+
+ {outro}
+
+
+ )
+ );
+ }
+);
+
+const Release = memo(({ release, onAfterDownload }) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+ setIsOpen((o) => !o)}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') setIsOpen((o) => !o);
+ }}>
+
+ Version {release.version} -
+ ({release.publishedAt})
+
+
+ {isOpen && (
+
+ )}
+
+ );
+});
+
+export const query = graphql`
+ query($selectedReleases: [String!]!, $selectedPreReleases: [String!]!) {
+ releases: allFile(
+ filter: {
+ sourceInstanceName: { eq: "download" }
+ relativeDirectory: { eq: "releases" }
+ childJson: { tagName: { in: $selectedReleases } }
+ }
+ sort: { fields: childJson___name, order: DESC }
+ ) {
+ nodes {
+ childJson {
+ name
+ tagName
+ publishedAt
+ releaseAssets {
+ edges {
+ node {
+ name
+ downloadUrl
+ size
+ }
+ }
+ }
+ }
+ }
+ }
+ preReleases: allFile(
+ filter: {
+ sourceInstanceName: { eq: "download" }
+ relativeDirectory: { eq: "releases" }
+ childJson: { tagName: { in: $selectedPreReleases } }
+ }
+ sort: { fields: childJson___name, order: DESC }
+ ) {
+ nodes {
+ childJson {
+ name
+ tagName
+ publishedAt
+ releaseAssets {
+ edges {
+ node {
+ name
+ downloadUrl
+ size
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+`;
+
+export default Releases;