Responsive repo-actions

Fixes #5818 When repo-actions are present, always emit them into the footer of the page (as we do), but if they also appear somewhere else, mark them responsive so they are hidden except at small sides when the other repo actions aren’t visible.
quarto-dev · Dec 12, 2023 · 53fca91 · 53fca91
1 parent 2d3a5f9
commit 53fca91
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 77 deletions.
diff --git a/news/changelog-1.4.md b/news/changelog-1.4.md
@@ -170,6 +170,7 @@
 - ([#5689](https://github.com/quarto-dev/quarto-cli/issues/5689)): Don't use a single sidebar with an id as a global sidebar (the id explicitly means that the sidbar will match pages specifying that id or pages which the sidebar contains).
 - ([#5756](https://github.com/quarto-dev/quarto-cli/issues/5756)): Add `rel="..."` resolution to navbar tools.
 - ([#5763](https://github.com/quarto-dev/quarto-cli/issues/5763)): Add support for a keyboard shortcut to launch search (defaults to `f` or `/`). Use `search` > `keyboard-shortcut` to override with your own key(s).
+- ([#5818](https://github.com/quarto-dev/quarto-cli/issues/5818)): Ensure that `repo-actions` for websites (and books) appear responsively in the footer if the TOC isn't visible.
 - ([#5932](https://github.com/quarto-dev/quarto-cli/issues/5932)): Correct Open Graph metadata key name for `og:site_name`
 - ([#5964](https://github.com/quarto-dev/quarto-cli/issues/5964)): Add support for `repo-link-target` and `repo-link-rel` to control the corresponding attributes of repo-action links.
 - ([#6432](https://github.com/quarto-dev/quarto-cli/issues/6432)): Don't decorate navigation tools with external link icon (we generally don't decorate navigation chrome in this way)

diff --git a/src/project/types/website/website-navigation.ts b/src/project/types/website/website-navigation.ts
@@ -649,57 +649,80 @@ function handleRepoLinks(
     if (repoInfo || issueUrl) {
       if (repoActions.length > 0) {
         // find the toc
-        let repoTarget = doc.querySelector(`nav[role="doc-toc"]`);
-        if (repoTarget === null && forceRepoActions) {
-          repoTarget = doc.querySelector("#quarto-margin-sidebar");
-        } else if (repoTarget === null) {
-          repoTarget = doc.querySelector(".nav-footer .nav-footer-center");
-          if (!repoTarget) {
-            const ensureEl = (
-              doc: Document,
-              tagname: string,
-              classname: string,
-              parent: Element,
-              afterEl?: Element | null,
-            ) => {
-              let el = parent.querySelector(`${tagname}.${classname}`);
-              if (!el) {
-                el = doc.createElement(tagname);
-                el.classList.add(classname);
-                if (afterEl !== null && afterEl && afterEl.nextElementSibling) {
-                  parent.insertBefore(el, afterEl.nextElementSibling);
-                } else {
-                  parent.appendChild(el);
-                }
-              }
-              return el;
-            };
-
-            const footerEl = ensureEl(
-              doc,
-              "footer",
-              "footer",
-              doc.body,
-              doc.querySelector("div#quarto-content"),
-            );
-            const footerContainer = ensureEl(
-              doc,
-              "div",
-              "nav-footer",
-              footerEl,
-            );
-            const footerCenterEl = ensureEl(
-              doc,
-              "div",
-              "nav-footer-center",
-              footerContainer,
-              footerContainer.querySelector(".nav-footer-left"),
-            );
-            repoTarget = footerCenterEl;
+
+        // Collect the places to write the repo actions
+        const repoTargets: Array<{ el: Element; clz?: string[] }> = [];
+        const tocRepoTarget = doc.querySelector(`nav[role="doc-toc"]`);
+        if (tocRepoTarget) {
+          repoTargets.push({ el: tocRepoTarget });
+        }
+        if (repoTargets.length === 0 && forceRepoActions) {
+          const sidebarRepoTarget = doc.querySelector("#quarto-margin-sidebar");
+          if (sidebarRepoTarget) {
+            repoTargets.push({ el: sidebarRepoTarget });
           }
         }
 
-        if (repoTarget) {
+        const footerRepoTarget = doc.querySelector(
+          ".nav-footer .nav-footer-center",
+        );
+        if (footerRepoTarget) {
+          repoTargets.push({
+            el: footerRepoTarget,
+            clz: repoTargets.length > 0
+              ? ["d-sm-block", "d-md-none"]
+              : undefined,
+          });
+        } else {
+          const ensureEl = (
+            doc: Document,
+            tagname: string,
+            classname: string,
+            parent: Element,
+            afterEl?: Element | null,
+          ) => {
+            let el = parent.querySelector(`${tagname}.${classname}`);
+            if (!el) {
+              el = doc.createElement(tagname);
+              el.classList.add(classname);
+              if (afterEl !== null && afterEl && afterEl.nextElementSibling) {
+                parent.insertBefore(el, afterEl.nextElementSibling);
+              } else {
+                parent.appendChild(el);
+              }
+            }
+            return el;
+          };
+
+          const footerEl = ensureEl(
+            doc,
+            "footer",
+            "footer",
+            doc.body,
+            doc.querySelector("div#quarto-content"),
+          );
+          const footerContainer = ensureEl(
+            doc,
+            "div",
+            "nav-footer",
+            footerEl,
+          );
+          const footerCenterEl = ensureEl(
+            doc,
+            "div",
+            "nav-footer-center",
+            footerContainer,
+            footerContainer.querySelector(".nav-footer-left"),
+          );
+          repoTargets.push({
+            el: footerCenterEl,
+            clz: repoTargets.length > 0
+              ? ["d-sm-block", "d-md-none"]
+              : undefined,
+          });
+        }
+
+        if (repoTargets.length > 0) {
           const linkTarget = websiteConfigString(kSiteRepoLinkTarget, config);
           const linkRel = websiteConfigString(kSiteRepoLinkRel, config);
 
@@ -718,39 +741,46 @@ function handleRepoLinks(
               url: issueUrl!,
               icon: "chat-right",
             }];
-          const actionsDiv = doc.createElement("div");
-          actionsDiv.classList.add("toc-actions");
-
-          const ulEl = doc.createElement("ul");
-          links.forEach((link) => {
-            const a = doc.createElement("a");
-            a.setAttribute("href", link.url);
-            if (linkTarget) {
-              a.setAttribute("target", linkTarget);
-            }
-            if (linkRel) {
-              a.setAttribute("rel", linkRel);
-            }
-            a.classList.add("toc-action");
-            a.innerHTML = link.text;
-
-            const i = doc.createElement("i");
-            i.classList.add("bi");
-            if (link.icon) {
-              i.classList.add(`bi-${link.icon}`);
-            } else {
-              i.classList.add(`empty`);
-            }
+          repoTargets.forEach((repoTarget) => {
+            const actionsDiv = doc.createElement("div");
+            actionsDiv.classList.add("toc-actions");
+
+            const ulEl = doc.createElement("ul");
+            links.forEach((link) => {
+              const a = doc.createElement("a");
+              a.setAttribute("href", link.url);
+              if (linkTarget) {
+                a.setAttribute("target", linkTarget);
+              }
+              if (linkRel) {
+                a.setAttribute("rel", linkRel);
+              }
+              a.classList.add("toc-action");
+              a.innerHTML = link.text;
+
+              const i = doc.createElement("i");
+              i.classList.add("bi");
+              if (link.icon) {
+                i.classList.add(`bi-${link.icon}`);
+              } else {
+                i.classList.add(`empty`);
+              }
 
-            a.prepend(i);
+              a.prepend(i);
 
-            const liEl = doc.createElement("li");
-            liEl.appendChild(a);
+              const liEl = doc.createElement("li");
+              liEl.appendChild(a);
 
-            ulEl.appendChild(liEl);
+              ulEl.appendChild(liEl);
+            });
+            actionsDiv.appendChild(ulEl);
+            repoTarget.el.appendChild(actionsDiv);
+            if (repoTarget.clz) {
+              repoTarget.clz.forEach((cls) => {
+                actionsDiv.classList.add(cls);
+              });
+            }
           });
-          actionsDiv.appendChild(ulEl);
-          repoTarget.appendChild(actionsDiv);
         }
       }
       if (elRepoSource && repoInfo) {