Merge branch '1107-html-title' into 'master'

Resolve "Inject instance name in HTML title" See merge request funkwhale/funkwhale!1113

Merge branch '1107-html-title' into 'master'
Resolve "Inject instance name in HTML title" See merge request funkwhale/funkwhale!1113
2b5a2b39 · Agate · fda56d58 · be251ac3 · 2b5a2b39 · 2b5a2b39
Commit 2b5a2b39 authored May 06, 2020 by Agate 💬
5 changed files
--- a/api/funkwhale_api/common/middleware.py
+++ b/api/funkwhale_api/common/middleware.py
@@ -39,6 +39,9 @@ def serve_spa(request):
            settings.FUNKWHALE_SPA_REWRITE_MANIFEST_URL
            or federation_utils.full_url(urls.reverse("api:v1:instance:spa-manifest"))
        )
+        title = preferences.get("instance__name")
+        if title:
+            head = replace_title(head, title)
        head = replace_manifest_url(head, new_url)

    if not preferences.get("common__api_authentication_required"):
@@ -82,6 +85,7 @@ def serve_spa(request):


 MANIFEST_LINK_REGEX = re.compile(r"<link [^>]*rel=(?:'|\")?manifest(?:'|\")?[^>]*>")
+TITLE_REGEX = re.compile(r"<title>.*</title>")


 def replace_manifest_url(head, new_url):
@@ -90,6 +94,12 @@ def replace_manifest_url(head, new_url):
    return head


+def replace_title(head, new_title):
+    replacement = "<title>{}</title>".format(html.escape(new_title))
+    head = TITLE_REGEX.sub(replacement, head)
+    return head
+
+
 def get_spa_html(spa_url):
    return get_spa_file(spa_url, "index.html")


--- a/api/tests/common/test_middleware.py
+++ b/api/tests/common/test_middleware.py
+import html
 import time
 import pytest
-
 from django.http import HttpResponse
 from django.urls import reverse

@@ -55,10 +55,12 @@ def test_should_fallback(path, expected, mocker):


 def test_serve_spa_from_cache(mocker, settings, preferences, no_api_auth):
-
+    preferences["instance__name"] = 'Best Funkwhale "pod"'
    request = mocker.Mock(path="/")
    get_spa_html = mocker.patch.object(
-        middleware, "get_spa_html", return_value="<html><head></head></html>"
+        middleware,
+        "get_spa_html",
+        return_value="<html><head><title>Funkwhale</title></head></html>",
    )
    mocker.patch.object(
        middleware,
@@ -84,7 +86,8 @@ def test_serve_spa_from_cache(mocker, settings, preferences, no_api_auth):

    assert response.status_code == 200
    expected = [
-        "<html><head>",
+        "<html><head>"
+        "<title>{}</title>".format(html.escape(preferences["instance__name"])),
        '<meta content="custom title" property="og:title" />',
        '<meta content="custom description" property="og:description" />',
        '<meta content="default site name" property="og:site_name" />',

--- a/changes/changelog.d/1107.enhancement
+++ b/changes/changelog.d/1107.enhancement
+Fix HTML <title> not including instance name in some situations (#1107)
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -66,6 +66,7 @@ export default {
      instanceUrl: null,
      showShortcutsModal: false,
      showSetInstanceModal: false,
+      initialTitle: document.title,
    }
  },
  async created () {
@@ -147,7 +148,6 @@ export default {
  },
  mounted () {
    let self = this
-
    // slight hack to allow use to have internal links in <translate> tags
    // while preserving router behaviour
    document.documentElement.addEventListener('click', function (event) {
@@ -281,7 +281,7 @@ export default {
      if (this.$store.state.ui.pageTitle) {
        parts.push(this.$store.state.ui.pageTitle)
      }
-      parts.push(this.$store.state.instance.settings.instance.name.value || 'Funkwhale')
+      parts.push(this.initialTitle || 'Funkwhale')
      document.title = parts.join(' – ')
    },


--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -4,10 +4,10 @@
      <div class="ui stackable equal height stackable grid">
        <section class="four wide column">
          <h4 v-if="podName" class="ui header ellipsis">
-            <translate translate-context="Footer/About/Title" :translate-params="{instanceName: podName}" >About %{instanceName}</translate>
+            <span v-translate="{instanceName: podName}" translate-context="Footer/About/Title">About %{instanceName}</span>
          </h4>
          <h4 v-else class="ui header ellipsis">
-            <translate translate-context="Footer/About/Title" :translate-params="{instanceUrl: instanceHostname}" >About %{instanceUrl}</translate>
+            <span v-translate="{instanceUrl: instanceHostname}" translate-context="Footer/About/Title">About %{instanceUrl}</span>
          </h4>
          <div class="ui link list">
            <router-link class="item" to="/about">