feat: add github edit btn (#1822)

Co-authored-by: Sebastian Beltran <[email protected]>

Author: ShubhamOulkar

Gemfile

@@ -2,4 +2,4 @@ source 'https://rubygems.org'
 
 gem 'github-pages', group: :jekyll_plugins
 gem 'webrick'
-
+gem 'jekyll-github-metadata'

Gemfile.lock

@@ -273,6 +273,7 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
+  jekyll-github-metadata
   webrick
 
 BUNDLED WITH

_config.yml

@@ -1,6 +1,8 @@
 url: "https://expressjs.com"
 baseurl: "/"
 
+repository: expressjs/expressjs.com
+
 # Site settings
 
 defaults:
@@ -19,6 +21,7 @@ announcement: false # Enable or disable the announcements.
 
 plugins:
   - jekyll-redirect-from
+  - jekyll-github-metadata
 
 highlighter: rouge
 # library used for syntax highlighting
@@ -34,6 +37,3 @@ exclude:
   - [uk/CHANGELOG.md]
   - vendor/bundle
   - node_modules/
-
-
-github: [metadata]

_layouts/3x-api.html

@@ -16,6 +16,14 @@ <h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
       </nav>
       <main>
         {{ content }}
+        <a role="button" class="edit-github-btn" href="{{ site.github.repository_url }}/tree/gh-pages/_includes/{{page.menu}}/en/3x" aria-label="GitHub button">
+          <span class="hidden-dark">
+            {% include icons/github-light.svg %}
+          </span>
+          <span class="hidden-light">
+            {% include icons/github-dark.svg %}
+          </span>
+          Edit this page</a>
       </main>
     </div>
 

_layouts/4x-api.html

@@ -16,6 +16,14 @@ <h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
       </nav>
       <main>
         {{ content }}
+        <a role="button" class="edit-github-btn" href="{{ site.github.repository_url }}/tree/gh-pages/_includes/{{page.menu}}/en/4x" aria-label="GitHub button">
+          <span class="hidden-dark">
+            {% include icons/github-light.svg %}
+          </span>
+          <span class="hidden-light">
+            {% include icons/github-dark.svg %}
+          </span>
+          Edit this page</a>
       </main>
     </div>
 

_layouts/5x-api.html

@@ -16,6 +16,14 @@ <h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
       </nav>
       <main>
         {{ content }}
+        <a role="button" class="edit-github-btn" href="{{ site.github.repository_url }}/tree/gh-pages/_includes/{{page.menu}}/en/5x" aria-label="GitHub button">
+          <span class="hidden-dark">
+            {% include icons/github-light.svg %}
+          </span>
+          <span class="hidden-light">
+            {% include icons/github-dark.svg %}
+          </span>
+          Edit this page</a>
       </main>
     </div>
 

_layouts/page.html

@@ -28,6 +28,14 @@
     <div class="content">
       <main>
         {{ content }}
+        <a role="button" class="edit-github-btn" href="{{ site.github.repository_url }}/edit/gh-pages/{{ page.path }}" aria-label="GitHub button">
+          <span class="hidden-dark">
+            {% include icons/github-light.svg %}
+          </span>
+          <span class="hidden-light">
+            {% include icons/github-dark.svg %}
+          </span>
+          Edit this page</a>
       </main>
     </div>
   {% endif %}

css/style.css

@@ -557,6 +557,25 @@ html[xmlns] .clearfix {
   color: var(--box-fg);
 }
 
+a.edit-github-btn{
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: fit-content;
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+
+  span {
+    height: 20px;
+  }
+
+  &:is(:hover, :active, :focus) {
+    color: var(--fg);
+    background-color: var(--hover-bg);
+    outline: 1px solid var(--card-fg);
+  }
+}
+
 #mobile-menu {
   display: none;
   position: relative;
@@ -1381,6 +1400,10 @@ strong.eol {
   display: block;
 }
 
+.hidden-light {
+  display: none;
+}
+
 blockquote {
   margin-left: 0;
   font-weight: 600;