📜 Docs: Update downloads page table to have less duplication (#6231)

* update downloads page table to have less duplication

* color from variable

* add component to exclude for spell check

* adding workflow to docs files for release notes exclusion

* release notes

* cli tool added to the server download list

.github/actions/docs-spelling/excludes.txt

@@ -73,3 +73,4 @@ ignore$
 (?:^|/)(?i)docusaurus.config.js
 (?:^|/)(?i)README.md
 ^\static/
+\.tsx$

.github/workflows/release-notes.yml

@@ -20,7 +20,7 @@ jobs:
         run: |
           git fetch origin ${{ github.base_ref }}
           CHANGED_FILES=$(git diff --name-only origin/${{ github.base_ref }}...HEAD)
-          NON_DOCS_FILES=$(echo "$CHANGED_FILES" | grep -v "^packages/docs/" || true)
+          NON_DOCS_FILES=$(echo "$CHANGED_FILES" | grep -v -e "^packages/docs/" -e "^\.github/actions/docs-spelling/" || true)
 
           if [ -z "$NON_DOCS_FILES" ] && [ -n "$CHANGED_FILES" ]; then
             echo "only_docs=true" >> $GITHUB_OUTPUT

packages/docs/src/components/DownloadCard.tsx

@@ -0,0 +1,47 @@
+import type { ReactElement } from 'react';
+
+type DownloadLink = {
+  label: string;
+  url: string;
+};
+
+type DownloadCardProps = {
+  icon: ReactElement;
+  platform: string;
+  links: DownloadLink[];
+};
+
+export function DownloadCard({ icon, platform, links }: DownloadCardProps) {
+  return (
+    <div
+      style={{
+        textAlign: 'center',
+        padding: '1.5rem',
+        border: '1px solid var(--ifm-color-emphasis-500)',
+        borderRadius: '8px',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100px',
+          marginBottom: '1rem',
+        }}
+      >
+        {icon}
+      </div>
+      <h3 style={{ marginTop: 0, marginBottom: '1rem' }}>{platform}</h3>
+      {links.map(link => (
+        <a
+          key={link.url}
+          href={link.url}
+          style={{ display: 'block', marginTop: '0.5rem' }}
+        >
+          {link.label}
+        </a>
+      ))}
+    </div>
+  );
+}

packages/docs/src/pages/download.md

@@ -9,6 +9,7 @@ hide_table_of_contents: true
 import Winsvg from '../../static/img/win.svg'
 import Macsvg from '../../static/img/apple.svg'
 import Linuxsvg from '../../static/img/linux.svg'
+import { DownloadCard } from '../components/DownloadCard'
 
 # Downloads
 
@@ -16,16 +17,67 @@ The simplest way to use Actual is to download the desktop application.  This wil
 
 ## Desktop Client
 
-||||||
+<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem', marginTop: '2rem', marginBottom: '2rem'}}>
-|:--:|:--:|:--:|:--:|:--:|
+<DownloadCard
-|<Winsvg width="100" height="100" fill="#6B46C1"/>|<Macsvg width="100" height="105" fill="#6B46C1"/>|<Macsvg width="100" height="105" fill="#6B46C1"/>|<Linuxsvg width="100" height="100" fill="#6B46C1" />|<Linuxsvg width="100" height="100" fill="#6B46C1"/>|
+    icon={<Winsvg width="100" height="100" fill="#6B46C1" />}
-|[Windows](https://apps.microsoft.com/detail/9p2hmlhsdbrm?cid=actualbudget.org&mode=direct)|[Intel Mac (x64)](https://github.com/actualbudget/actual/releases/latest/download/Actual-mac-x64.dmg)|[Apple Silicon Mac (arm64)](https://github.com/actualbudget/actual/releases/latest/download/Actual-mac-arm64.dmg)|[Linux (Appimage)](https://github.com/actualbudget/actual/releases/latest/download/Actual-linux-x86_64.AppImage)|[Linux (Flatpak) ](https://github.com/actualbudget/actual/releases/latest/download/Actual-linux-x86_64.flatpak)|
+    platform="Windows"
+    links={[
+      {
+        label: 'Microsoft Store',
+        url: 'https://apps.microsoft.com/detail/9p2hmlhsdbrm?cid=actualbudget.org&mode=direct'
+      },
+      {
+        label: 'Manual Download (x64)',
+        url: 'https://github.com/actualbudget/actual/releases/latest/download/Actual-windows-x64.exe'
+      },
+      {
+        label: 'Manual Download (arm64)',
+        url: 'https://github.com/actualbudget/actual/releases/latest/download/Actual-windows-arm64.exe'
+      },
+    ]}
+  />
+
+  <DownloadCard
+    icon={<Macsvg width="100" height="100" fill="#6B46C1" />}
+    platform="macOS"
+    links={[
+      {
+        label: 'Intel (x64)',
+        url: 'https://github.com/actualbudget/actual/releases/latest/download/Actual-mac-x64.dmg'
+      },
+      {
+        label: 'Apple Silicon (arm64)',
+        url: 'https://github.com/actualbudget/actual/releases/latest/download/Actual-mac-arm64.dmg'
+      }
+    ]}
+  />
+
+  <DownloadCard
+    icon={<Linuxsvg width="100" height="100" fill="#6B46C1" />}
+    platform="Linux"
+    links={[
+      {
+        label: 'AppImage (x64)',
+        url: 'https://github.com/actualbudget/actual/releases/latest/download/Actual-linux-x86_64.AppImage'
+      },
+      {
+        label: 'AppImage (arm64)',
+        url: 'https://github.com/actualbudget/actual/releases/latest/download/Actual-linux-arm64.AppImage'
+      },
+      {
+        label: 'Flatpak',
+        url: 'https://github.com/actualbudget/actual/releases/latest/download/Actual-linux-x86_64.flatpak'
+      }
+    ]}
+  />
+</div>
 
 
 ## Server Download
 Actual has two parts, the client and a sync server.  The primary task of the sync server is to sync your budget between devices, and to enable bank syncing.  We have a full write up of [if you need a server or not](/docs/install/). We also have install guides on how to set up the server in the following ways
 * [PikaPods](/docs/install/pikapods)
 * [Fly.io](/docs/install/fly)
+* [CLI Tool](/docs/install/cli-tool)
 * [Docker Install](/docs/install/docker)
 * [Build from source](/docs/install/build-from-source)
 

upcoming-release-notes/6231.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Updating the release notes workflow to not run when docs related config have changed