Add an edit button for RTD-built pages

pradyunsg · Feb 13, 2022 · 76b7e73 · 76b7e73
1 parent 6240bb0
commit 76b7e73
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/docs/customisation/edit-button.md b/docs/customisation/edit-button.md
@@ -0,0 +1,5 @@
+# Adding an edit button
+
+Furo will automatically add a small edit button to each document, when the documentation is generated on Read the Docs.
+
+This behaviour can not be enabled outside of Read the Docs, at this time. Also, it can not be disabled, at this time.
diff --git a/docs/customisation/index.md b/docs/customisation/index.md
@@ -8,8 +8,10 @@ This section serves to guide the user with customising Furo-based documentation.
 :hidden:
 
 logo
+edit-button
 colors
 fonts
+footer
 landing-page
 sidebar
 sidebar-title
@@ -77,6 +79,10 @@ html_theme_options = {
 }
 ```
 
+### `footer_icons`
+
+Changes the icons presented in the site footer. See {doc}`./footer` for the details.
+
 ## Page specific tweaks
 
 [File-Wide metadata][sphinx-file-wide-metadata] is used for per-page customisation, primarily for controlling which UI elements are presented.

diff --git a/src/furo/assets/styles/_scaffold.sass b/src/furo/assets/styles/_scaffold.sass
@@ -224,6 +224,11 @@ article
   margin-bottom: 1rem
   gap: 0.5rem
 
+  .edit-this-page svg
+    color: inherit
+    height: 1rem
+    width: 1rem
+
 .sidebar-toggle
   position: absolute
   display: none

diff --git a/src/furo/theme/furo/page.html b/src/furo/theme/furo/page.html
@@ -61,6 +61,19 @@
     <div class="content">
       <div class="article-container">
         <div class="content-icon-container">
+          {#- Edit this page, on GitHub -#}
+          {%- if READTHEDOCS and conf_py_path and page_source_suffix and github_user != "None" and github_repo != "None" and github_version %}
+          <div class="edit-this-page">
+            <a class="muted-link" href="https://github.com/{{ github_user }}/{{ github_repo }}/edit/{{ github_version }}{{ conf_py_path }}{{ pagename }}{{ page_source_suffix }}">
+              <svg viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4" />
+                <line x1="13.5" y1="6.5" x2="17.5" y2="10.5" />
+              </svg>
+            </a>
+          </div>
+          {% endif %}
+          {#- Theme toggle -#}
           <div class="theme-toggle-container theme-toggle-content">
             <button class="theme-toggle">
               <div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>