Re-architecture

re-organised architecture as the .mdx files where not as useful
Stefterv · Sep 15, 2025 · Sep 15, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025
commit 2f759268f1cf863e4627dd18a37b2384854347d5
diff --git a/content/download/platforms/linux.json b/content/download/platforms/linux.json
@@ -0,0 +1,5 @@
+{
+    "title": "Linux",
+    "userAgent": "X11",
+    "sort": 2
+}
diff --git a/content/download/platforms/macos.json b/content/download/platforms/macos.json
@@ -0,0 +1,5 @@
+{
+    "title": "macOS",
+    "userAgent": "Mac",
+    "sort": 1
+}
diff --git a/content/download/platforms/raspberry-pi.json b/content/download/platforms/raspberry-pi.json
@@ -0,0 +1,4 @@
+{
+    "title": "Raspberry Pi",
+    "sort": 3
+}
diff --git a/content/download/platforms/windows.json b/content/download/platforms/windows.json
@@ -0,0 +1,5 @@
+{
+    "title": "Windows",
+    "userAgent": "Windows",
+    "sort": 0
+}
diff --git a/content/pages/download/linux.mdx b/content/pages/download/linux.mdx
diff --git a/content/pages/download/macos.mdx b/content/pages/download/macos.mdx
diff --git a/content/pages/download/raspi.mdx b/content/pages/download/raspi.mdx
diff --git a/content/pages/download/windows.mdx b/content/pages/download/windows.mdx
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -361,23 +361,31 @@ async function createPlatformDownloadPages(actions, graphql) {
   const { createPage } = actions;
 
   const platformQuery = await graphql(
-    `query{
-      allMdx(filter: { frontmatter: { slug: { glob: "*" } } }) {
-        nodes {
-          frontmatter {
-            slug
-            platform
+    `query FindPlatforms {
+        allFile(
+          filter: {sourceInstanceName: {eq: "download"}, relativeDirectory: {eq: "platforms"}}
+        ) {
+          edges {
+            node {
+              name
+              childJson {
+                title
+                userAgent
+                sort
+              }
+            }
           }
-          body
         }
-      }
-    }`
+      }`
   );
 
   if (platformQuery.errors) {
     throw platformQuery.errors;
   }
-  const platforms = platformQuery.data.allMdx.nodes;
+  const platforms = platformQuery.data.allFile.edges.map(e => {
+    const { childJson, ...rest } = e.node;
+    return { ...childJson, ...rest };
+  });
 
   // TODO: Move to reuseable function
   const versionsQuery = await graphql(
@@ -411,15 +419,15 @@ async function createPlatformDownloadPages(actions, graphql) {
 
   platforms.forEach((platform) => {
     createPage({
-      path: `/download/${platform.frontmatter.slug}`,
+      path: `/download/${platform.name}`,
       component: platformTemplate,
       context: {
         platform
       }
     });
     versions.forEach(version => {
       createPage({
-        path: `/download/${platform.frontmatter.slug}/${version[1]}`,
+        path: `/download/${platform.name}/${version[1]}`,
         component: platformTemplate,
         context: {
           platform,

diff --git a/src/components/Donate.js b/src/components/Donate.js
@@ -1,5 +1,11 @@
+import classNames from "classnames"
 import React from "react"
+import * as grid from 'styles/grid.module.css';
 
 export default function Donate() {
-    return <div>Donate</div>
+    return (
+        <div style={{ flexBasis: 'var(--col4)', minHeight: 400, background: "#eee" }} className={classNames(grid.col)}>
+            Donate
+        </div>
+    )
 }
diff --git a/src/components/download/Download.js b/src/components/download/Download.js
@@ -1,10 +1,10 @@
 import React from "react";
-import { useVersion } from "./Version";
+import { useVersionOrLatest } from "./Version";
 import Button from "components/Button";
 import { usePlatform } from "./Platform";
 
 export default function DownloadButton({ version: versionOverride, platform: platformOverride, arch = "x64", children }) {
-    let version = useVersion();
+    let version = useVersionOrLatest();
     if (versionOverride) {
         version = versionOverride;
     }

diff --git a/src/components/download/Platform.js b/src/components/download/Platform.js
@@ -1,8 +1,34 @@
+import { graphql, useStaticQuery } from 'gatsby';
 import React from 'react';
 
 
 export const PlatformContext = React.createContext();
 
 export const PlatformProvider = PlatformContext.Provider;
 
-export const usePlatform = () => React.useContext(PlatformContext);
+export const usePlatform = () => React.useContext(PlatformContext);
+
+export function usePlatforms() {
+    return useStaticQuery(
+        graphql`
+            query FindPlatforms {
+                allFile(filter: {sourceInstanceName: {eq: "download"}, relativeDirectory: {eq: "platforms"}}) {
+                    edges {
+                        node {
+                            name
+                            childJson {
+                                title
+                                userAgent
+                                sort
+                            }
+                        }
+                    }
+                }
+            }
+        `)
+        .allFile.edges.map(e => {
+            const { childJson, ...rest } = e.node;
+            return { ...childJson, ...rest };
+        })
+        .sort((a, b) => (a.sort || 0) - (b.sort || 0));
+}
diff --git a/src/components/download/PreviousReleases.js b/src/components/download/PreviousReleases.js
@@ -2,6 +2,8 @@ import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
 import * as semver from "semver";
 import { usePlatform } from "./Platform";
+import classNames from "classnames";
+import * as grid from 'styles/grid.module.css';
 
 
 
@@ -41,15 +43,15 @@ export default function PreviousReleases() {
 
 
     return (
-        <details>
+        <details style={{ flexBasis: 'var(--col8)' }} className={classNames(grid.col)}>
             <summary>Looking for older versions?</summary>
             {versions.map((v, i) => (
                 <details key={i}>
                     <summary>Version {v[0].split('.')[0]} (latest {v[0]})</summary>
                     <ul>
                         {v.map((ver, j) => (
                             <li key={j}>
-                                <a href={`/download/${platform.frontmatter.slug}/${ver}`}>Processing {ver}</a>
+                                <a href={`/download/${platform.name}/${ver}`}>Processing {ver}</a>
                             </li>)
                         )}
                     </ul>

diff --git a/src/components/download/Selector.js b/src/components/download/Selector.js
@@ -1,49 +1,34 @@
 import React, { useEffect, useState } from "react"
-
-import { useStaticQuery } from "gatsby"
-import { graphql } from "gatsby"
 import Button from "components/Button";
+import { usePlatforms } from "./Platform";
 
 
 export default function Selector() {
-    const data = useStaticQuery(graphql`
-        query{
-            allMdx(filter: {frontmatter: {platform: {glob: "*"}}}) {
-                nodes {
-                    frontmatter {
-                        platform
-                        slug
-                        userAgent
-                    }
-                }
-            }
-        }
-    `);
-
-    const [selected, setSelected] = useState(data.allMdx.nodes.find(node => node.frontmatter.platform === "Windows"));
+    const platforms = usePlatforms();
+    const [selected, setSelected] = useState(platforms.find(node => node.name === "windows"));
     useEffect(() => {
         const { userAgent } = navigator;
-        for (let node of data.allMdx.nodes) {
-            if (userAgent.search(node.frontmatter.userAgent) === -1) continue
+        for (let node of platforms) {
+            if (userAgent.search(node.userAgent) === -1) continue
             setSelected(node);
             break;
         }
-    }, [data])
-    const rest = data.allMdx.nodes.filter(node => node !== selected);
+    }, [platforms])
+    const rest = platforms.filter(node => node !== selected);
 
     return (
         <div>
             <details>
                 <pre>
-                    {JSON.stringify(data, null, 2)}
+                    {JSON.stringify(platforms, null, 2)}
                 </pre>
             </details>
-            <Button href={`/download/${selected.frontmatter.slug}`}>Download for {selected.frontmatter.platform}</Button>
+            <Button href={`/download/${selected.name}`}>Download for {selected.title}</Button>
             <div>Also available for</div>
             <div>
                 {rest.map(node => (
-                    <div key={node.frontmatter.platform}>
-                        <Button secondary href={`/download/${node.frontmatter.slug}`}>Download for {node.frontmatter.platform}</Button>
+                    <div key={node.name}>
+                        <Button secondary href={`/download/${node.name}`}>Download for {node.title}</Button>
                     </div>
                 ))}
             </div>

diff --git a/src/components/download/Switcher.js b/src/components/download/Switcher.js
@@ -0,0 +1,20 @@
+import React from "react"
+import { usePlatform, usePlatforms } from "./Platform";
+import classNames from "classnames";
+import * as grid from 'styles/grid.module.css';
+
+export default function Switcher() {
+    const platforms = usePlatforms();
+    const current = usePlatform();
+
+    return (
+
+        <ul style={{ flexBasis: 'var(--col8)', flexDirection: "row", display: "flex", gap: 20 }} className={classNames(grid.col)}>
+            {platforms.map(node => (
+                <li key={node.name}>
+                    <a href={`/download/${node.name}`}>{node.title}</a>
+                </li>
+            ))}
+        </ul>
+    )
+}
diff --git a/src/components/download/Version.js b/src/components/download/Version.js
@@ -1,7 +1,40 @@
+import { graphql, useStaticQuery } from 'gatsby';
 import React from 'react';
+import * as semver from 'semver';
 
 export const VersionContext = React.createContext('1.0.0');
 
 export const VersionProvider = VersionContext.Provider;
 
-export const useVersion = () => React.useContext(VersionContext);
+export const useVersion = () => React.useContext(VersionContext);
+
+export function useVersionOrLatest() {
+    const versions = useStaticQuery(graphql`
+        query {
+            allFile(filter: {sourceInstanceName: {eq: "download"}, relativeDirectory: {eq: "releases"}}) {
+                edges {
+                    node {
+                        childJson {
+                            name
+                            isPrerelease
+                            tagName
+                        }
+                    }
+                }
+            }
+        }`);
+
+    const version = useVersion();
+    if (version) {
+        return version
+    }
+
+    const releases = versions.allFile.edges
+        .map(e => e.node.childJson.tagName.replace(/^processing-(\d+-)?/, ''))
+        .map(e => [semver.coerce(e, { includePrerelease: true }), e])
+        .reverse()
+        .sort((a, b) => semver.compare(b[0], a[0]))
+        ;
+
+    return releases[0][1];
+}