From 1e769a0330ade84d2c0579777104fae20b0aac8d Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Fri, 5 Apr 2024 15:40:14 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=91=20Downloads=20combined=20with=20pr?=
 =?UTF-8?q?oject=20(#355)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/grumpy-crews-sneeze.md             |  6 ++
 packages/frontmatter/src/downloads.tsx        | 32 ++++-----
 packages/site/src/pages/Article.tsx           | 25 ++++++-
 themes/article/app/components/ArticlePage.tsx |  4 +-
 themes/article/app/components/Downloads.tsx   | 69 +++----------------
 5 files changed, 50 insertions(+), 86 deletions(-)
 create mode 100644 .changeset/grumpy-crews-sneeze.md

diff --git a/.changeset/grumpy-crews-sneeze.md b/.changeset/grumpy-crews-sneeze.md
new file mode 100644
index 000000000..568083464
--- /dev/null
+++ b/.changeset/grumpy-crews-sneeze.md
@@ -0,0 +1,6 @@
+---
+'@myst-theme/frontmatter': patch
+'@myst-theme/site': patch
+---
+
+Improve the downloads
diff --git a/packages/frontmatter/src/downloads.tsx b/packages/frontmatter/src/downloads.tsx
index e04f75176..466d33243 100644
--- a/packages/frontmatter/src/downloads.tsx
+++ b/packages/frontmatter/src/downloads.tsx
@@ -62,6 +62,8 @@ export async function triggerBlobDownload(blob: Blob, filename: string) {
   return true;
 }
 
+const ICON_CLASS = 'self-center flex-none inline-block mr-3';
+
 export function Download({
   url,
   filename,
@@ -79,30 +81,25 @@ export function Download({
 }) {
   if (!filename) {
     const icon = internal ? (
-      <DocumentIcon
-        width="1.25rem"
-        height="1.25rem"
-        className="items-center inline-block mr-2"
-        aria-hidden="true"
-      />
+      <DocumentIcon width="1.25rem" height="1.25rem" className={ICON_CLASS} aria-hidden="true" />
     ) : (
       <ArrowTopRightOnSquareIcon
         width="1.25rem"
         height="1.25rem"
-        className="items-center inline-block mr-2"
+        className={ICON_CLASS}
         aria-hidden="true"
       />
     );
     return (
       <a
-        className={classNames(className, 'flex')}
+        className={classNames(className, 'flex no-underline')}
         href={url}
         target={!internal ? '_blank' : undefined}
         rel={!internal ? 'noreferrer noopener' : undefined}
       >
         <span className="sr-only">Visit URL {title ?? ''}</span>
         {icon}
-        {title ?? url}
+        <span className="w-max max-w-[200px] self-center">{title ?? url}</span>
       </a>
     );
   }
@@ -114,17 +111,17 @@ export function Download({
     [url, filename],
   );
   return (
-    <a className={classNames(className, 'flex')} href={url} onClick={clickDownload}>
+    <a className={classNames(className, 'flex no-underline')} href={url} onClick={clickDownload}>
       <span className="sr-only">
         Download{format ? ` as ${format}` : ''} {title ?? ''}
       </span>
       <DocumentArrowDownIcon
         width="1.25rem"
         height="1.25rem"
-        className="items-center inline-block mr-2"
+        className={ICON_CLASS}
         aria-hidden="true"
       />
-      {title ?? filename}
+      <span className="w-max max-w-[200px] self-center">{title ?? filename}</span>
     </a>
   );
 }
@@ -133,16 +130,11 @@ export function DownloadsDropdown({ exports }: HasExports) {
   if (!exports || exports.length === 0) return null;
   return (
     <Menu as="div" className="relative flex inline-block mx-1 grow-0">
-      <Menu.Button className="relative">
+      <Menu.Button className="relative ml-2 -mr-1">
         <span className="sr-only">Downloads</span>
-        <ArrowDownTrayIcon
-          width="1.25rem"
-          height="1.25rem"
-          className="ml-2 -mr-1"
-          aria-hidden="true"
-        />
+        <ArrowDownTrayIcon width="1.25rem" height="1.25rem" aria-hidden="true" />
       </Menu.Button>
-      <Menu.Items className="absolute overflow-hidden bg-white rounded-sm shadow-lg -right-1 dark:bg-slate-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
+      <Menu.Items className="absolute z-10 overflow-hidden bg-white rounded-sm shadow-lg -right-1 dark:bg-slate-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
         {exports.map((exp, index) => (
           <Menu.Item key={index}>
             <Download
diff --git a/packages/site/src/pages/Article.tsx b/packages/site/src/pages/Article.tsx
index 34a9c2898..0c3e49228 100644
--- a/packages/site/src/pages/Article.tsx
+++ b/packages/site/src/pages/Article.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReferencesProvider } from '@myst-theme/providers';
+import { ReferencesProvider, useProjectManifest } from '@myst-theme/providers';
 import {
   Bibliography,
   ContentBlocks,
@@ -22,6 +22,24 @@ import {
 } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
 import { extractKnownParts } from '../utils.js';
+import type { SiteAction } from 'myst-config';
+
+/**
+ * Combines the project downloads and the export options
+ */
+function combineDownloads(
+  siteDownloads: SiteAction[] | undefined,
+  pageFrontmatter: PageLoader['frontmatter'],
+) {
+  if (pageFrontmatter.downloads) {
+    return pageFrontmatter.downloads;
+  }
+  // No downloads on the page, combine the exports if they exist
+  if (siteDownloads) {
+    return [...(pageFrontmatter.exports ?? []), ...siteDownloads];
+  }
+  return pageFrontmatter.exports;
+}
 
 export const ArticlePage = React.memo(function ({
   article,
@@ -32,10 +50,11 @@ export const ArticlePage = React.memo(function ({
   hide_all_footer_links?: boolean;
   hideKeywords?: boolean;
 }) {
+  const manifest = useProjectManifest();
   const compute = useComputeOptions();
 
   const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.options ?? {};
-
+  const downloads = combineDownloads(manifest?.downloads, article.frontmatter);
   const tree = copyNode(article.mdast);
   const keywords = article.frontmatter?.keywords ?? [];
   const parts = extractKnownParts(tree);
@@ -50,7 +69,7 @@ export const ArticlePage = React.memo(function ({
           {!hide_title_block && (
             <FrontmatterBlock
               kind={article.kind}
-              frontmatter={article.frontmatter}
+              frontmatter={{ ...article.frontmatter, downloads }}
               className="pt-5 mb-8"
             />
           )}
diff --git a/themes/article/app/components/ArticlePage.tsx b/themes/article/app/components/ArticlePage.tsx
index 800f2219f..e147d0649 100644
--- a/themes/article/app/components/ArticlePage.tsx
+++ b/themes/article/app/components/ArticlePage.tsx
@@ -67,7 +67,7 @@ export function ArticlePage({ article }: { article: PageLoader }) {
                   <ArrowLeftIcon
                     width="1rem"
                     height="1rem"
-                    className="self-center transition-transform group-hover:-translate-x-1 shrink-0"
+                    className="self-center flex-none transition-transform group-hover:-translate-x-1"
                   />
                   <span>Back to Article</span>
                 </Link>
@@ -84,7 +84,7 @@ export function ArticlePage({ article }: { article: PageLoader }) {
                   <DocumentArrowDownIcon
                     width="1rem"
                     height="1rem"
-                    className="self-center transition-transform group-hover:-translate-x-1 shrink-0"
+                    className="self-center flex-none transition-transform group-hover:-translate-x-1"
                   />
                   <span>Download {article.kind}</span>
                 </a>
diff --git a/themes/article/app/components/Downloads.tsx b/themes/article/app/components/Downloads.tsx
index ad3c9d155..cbd663af8 100644
--- a/themes/article/app/components/Downloads.tsx
+++ b/themes/article/app/components/Downloads.tsx
@@ -1,13 +1,5 @@
-import {
-  DocumentArrowDownIcon,
-  ArrowTopRightOnSquareIcon,
-  DocumentIcon,
-} from '@heroicons/react/24/outline';
 import { useSiteManifest } from '@myst-theme/providers';
-import { triggerDirectDownload } from '@myst-theme/frontmatter';
-import { Link } from '@remix-run/react';
-import { SiteAction as DownloadsItem } from 'myst-config';
-import { useCallback, useState } from 'react';
+import { Download } from '@myst-theme/frontmatter';
 
 function formatToTitle(format?: string) {
   if (!format) return 'File';
@@ -28,65 +20,20 @@ export function DownloadLinksArea() {
   const site = useSiteManifest();
   const project = site?.projects?.[0];
   const downloads = project?.downloads ?? project?.exports ?? [];
-
-  const [downloading, setDownloading] = useState<Record<string, boolean>>({});
-
-  const handleDownload = useCallback(
-    async (e: React.MouseEvent<HTMLAnchorElement>, item: DownloadsItem & { filename: string }) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (downloading[item.url]) return;
-      setDownloading({ ...downloading, [item.url]: true });
-
-      await triggerDirectDownload(item.url, item.filename);
-
-      setDownloading({ ...downloading, [item.url]: false });
-    },
-    [downloading],
-  );
-
   if (downloads.length === 0) return null;
 
   return (
     <div className="col-margin mt-3 mx-5 lg:m-0 lg:w-[300px]">
       <div className="flex flex-wrap gap-2 lg:flex-col w-fit lg:mx-auto">
         {downloads.map((item) => {
-          if ((item as DownloadsItem).internal && !item.filename) {
-            return (
-              <Link key={item.url} to={item.url} className="no-underline">
-                <DocumentIcon width="1.5rem" height="1.5rem" className="inline h-5 pr-2" />
-                <span className="align-middle">{(item as DownloadsItem).title}</span>
-              </Link>
-            );
-          }
-
-          const externalLinkNotDownload = !item.filename;
-          const icon = externalLinkNotDownload ? (
-            <ArrowTopRightOnSquareIcon width="1.5rem" height="1.5rem" className="inline h-5 pr-2" />
-          ) : (
-            <DocumentArrowDownIcon width="1.5rem" height="1.5rem" className="inline h-5 pr-2" />
-          );
-
           return (
-            <a
-              key={item.url}
-              href={item.url}
-              className="inline-block mr-2 no-underline lg:mr-0 lg:block"
-              download={item.filename ? item.filename : undefined}
-              target={externalLinkNotDownload ? '_blank' : undefined}
-              rel={externalLinkNotDownload ? 'noreferrer noopener' : undefined}
-              onClick={
-                item.filename
-                  ? (e) => handleDownload(e, item as DownloadsItem & { filename: string })
-                  : undefined
-              }
-            >
-              {icon}
-              <span className="align-middle">
-                {(item as DownloadsItem).title ?? `Download ${formatToTitle(item.format)}`}
-              </span>
-            </a>
+            <Download
+              url={item.url}
+              format={item.format}
+              filename={item.filename}
+              title={(item as any).title ?? formatToTitle(item.format)}
+              internal={(item as any).internal}
+            />
           );
         })}
       </div>