feat: add links to view and edit pages in github

Author: john0isaac

src/pallets/__init__.py

@@ -20,6 +20,7 @@ def create_app() -> Flask:
         SERVER_NAME="127.0.0.1:5000",
         SQLALCHEMY_ENGINES={"default": "sqlite://"},
         FORWARDED=dict(FOR=0, PROTO=0, HOST=0, PORT=0, PREFIX=0),
+        GITHUB_REPO="https://github.com/pallets/website",
     )
     app.config.from_prefixed_env()
 

src/pallets/models.py

@@ -8,6 +8,7 @@
 import sqlalchemy as sa
 import sqlalchemy.orm as orm
 from feedgen.feed import FeedGenerator
+from flask import current_app
 from flask import url_for
 
 from . import db
@@ -17,6 +18,7 @@
 
 class BasePage(Model):
     content_prefix: str = ""
+    content_ext: str = ".md"
     __abstract__ = True
     path: orm.Mapped[str] = orm.mapped_column(primary_key=True)
     is_dir: orm.Mapped[bool] = orm.mapped_column(default=False)
@@ -31,13 +33,31 @@ def __init__(self, **kwargs: t.Any) -> None:
             path = posixpath.join(self.content_prefix, posixpath.dirname(self.path))
             self.content_html = render_content(self.content, path)
 
+    @property
+    def content_file(self) -> str:
+        prefix = posixpath.join("content", self.content_prefix, "")
+        if self.is_dir:
+            return f"{prefix}{self.path}/index{self.content_ext}"
+        return f"{prefix}{self.path}{self.content_ext}"
+
+    @property
+    def github_edit_url(self) -> str:
+        repo = current_app.config["GITHUB_REPO"]
+        return f"{repo}/edit/main/{self.content_file}"
+
+    @property
+    def github_view_url(self) -> str:
+        repo = current_app.config["GITHUB_REPO"]
+        return f"{repo}/blob/main/{self.content_file}"
+
 
 class Page(BasePage):
     __tablename__ = "page"
 
 
 class Person(BasePage):
     content_prefix = "people"
+    content_ext = ".toml"
     __tablename__ = "person"
     name: orm.Mapped[str]
     nickname: orm.Mapped[str | None]

src/pallets/static/style.css

@@ -28,6 +28,30 @@ footer {
   align-items: start;
 }
 
+.edit-this-page {
+  float: right;
+  display: inline-flex;
+  align-items: center;
+  font-size: 1rem;
+  color: var(--pico-muted-color);
+  margin-top: 0.3em;
+  padding: 0.25em 0.6em;
+  border-radius: var(--pico-border-radius);
+  transition: color 0.2s, background-color 0.2s;
+  vertical-align: middle;
+}
+
+.edit-this-page:hover {
+  color: var(--pico-primary);
+  background-color: var(--pico-muted-background);
+}
+
+.edit-this-page svg {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}
+
 footer ul {
   display: grid;
 }

src/pallets/templates/blog/post.html

@@ -1,6 +1,8 @@
 {% extends "layout.html" %}
+{% from "macros.html" import page_links %}
 
 {% block page %}
+  {{ page_links(page.github_view_url, page.github_edit_url) }}
   <h1>{{ page.title }}</h1>
   Posted by {{ page.author_name }} on {{ page.published.strftime("%Y-%m-%d") }}
   <hr>

src/pallets/templates/icons/eye.svg

@@ -0,0 +1,8 @@
+{% macro page_links(view_url, edit_url) %}
+<a href="{{ edit_url }}" class="edit-this-page" title="Edit this page on GitHub" aria-label="Edit this page on GitHub">
+    {% include "icons/pencil.svg" %}
+</a>
+<a href="{{ view_url }}" class="edit-this-page" title="View this page on GitHub" aria-label="View this page on GitHub">
+    {% include "icons/eye.svg" %}
+</a>
+{% endmacro %}

src/pallets/templates/icons/pencil.svg

@@ -1,3 +1,7 @@
 {% extends "layout.html" %}
+{% from "macros.html" import page_links %}
 
-{% block page %}{{ page.content_html | safe }}{% endblock %}
+{% block page %}
+  {{ page_links(page.github_view_url, page.github_edit_url) }}
+  {{ page.content_html | safe }}
+{% endblock %}

src/pallets/templates/macros.html

@@ -1,12 +1,13 @@
 {% extends "layout.html" %}
+{% from "macros.html" import page_links %}
 
 {% block page %}
   <hgroup>
     {% if page.name %}
-      <h1>{{ page.name }}</h1>
+      <h1>{{ page.name }} {{ page_links(page.github_view_url, page.github_edit_url) }}</h1>
       <p>{{ page.nickname }}</p>
     {% else %}
-      <h1>{{ page.nickname }}</h1>
+      <h1>{{ page.nickname }} {{ page_links(page.github_view_url, page.github_edit_url) }}</h1>
     {% endif %}
   </hgroup>
   <nav>

src/pallets/templates/page.html

@@ -1,4 +1,5 @@
 {% extends "layout.html" %}
+{% from "macros.html" import page_links %}
 
 {% block page %}
   <section style="text-align: center;">
@@ -15,6 +16,7 @@ <h1 class="title-replace">{{ page.name }}</h1>
     <span></span>
   </nav>
   <section>
+    {{ page_links(page.github_view_url, page.github_edit_url) }}
     {{ page.content_html | safe }}
   </section>
 {% endblock %}