From 9ab44fde6545b2a490f01aaf2f5301427a2ca6c1 Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Thu, 26 Oct 2023 09:23:19 -0700
Subject: [PATCH 1/7] fix(analytics): extend links listener to do engagement
 events

---
 modules/glean/runtime/glean-plugin.client.ts | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/modules/glean/runtime/glean-plugin.client.ts b/modules/glean/runtime/glean-plugin.client.ts
index 96f8e9fe06..f16b027ae4 100644
--- a/modules/glean/runtime/glean-plugin.client.ts
+++ b/modules/glean/runtime/glean-plugin.client.ts
@@ -33,6 +33,17 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     }
 
+    function recordEngagement(element: Element) {
+      if (!element)
+        return
+
+      const data = element.getAttribute('data-glean') || ''
+      if (element.hasAttribute('data-glean')) {
+        const value = element.getAttribute('data-glean-value') || ''
+        engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] })
+      }
+    }
+
     function handleButtonClick(ev: MouseEvent) {
       const eventTarget = ev?.target as Element
       const closestButton = eventTarget.closest('button')
@@ -40,17 +51,16 @@ export default defineNuxtPlugin((nuxtApp) => {
       if (closestButton?.hasAttribute('href'))
         linkClick.record({ target_url: closestButton.getAttribute('href') || '' })
 
-      const data = eventTarget?.getAttribute('data-glean') || ''
-      const value = eventTarget?.getAttribute('data-glean-value') || ''
-      if (eventTarget.hasAttribute('data-glean'))
-        engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] })
+      recordEngagement(eventTarget)
     }
 
     function handleLinkClick(ev: MouseEvent) {
       const eventTarget = ev?.target as Element
       const closestLink = eventTarget.closest('a')
-      if (closestLink)
+      if (closestLink) {
         linkClick.record({ target_url: closestLink.getAttribute('href') || '' })
+        recordEngagement(closestLink)
+      }
     }
 
     window.addEventListener('click', eventListener)

From 5586dd0b118e6a06f0111d720710ea39fa6a8a6f Mon Sep 17 00:00:00 2001
From: Joseph Perez <joperez@dons.usfca.edu>
Date: Thu, 26 Oct 2023 13:00:14 -0700
Subject: [PATCH 2/7] fix(analytics): refactor

---
 modules/glean/runtime/glean-plugin.client.ts | 23 +++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/modules/glean/runtime/glean-plugin.client.ts b/modules/glean/runtime/glean-plugin.client.ts
index f16b027ae4..55cb9bad94 100644
--- a/modules/glean/runtime/glean-plugin.client.ts
+++ b/modules/glean/runtime/glean-plugin.client.ts
@@ -37,17 +37,21 @@ export default defineNuxtPlugin((nuxtApp) => {
       if (!element)
         return
 
+      if (!element.hasAttribute('data-glean'))
+        return
+
       const data = element.getAttribute('data-glean') || ''
-      if (element.hasAttribute('data-glean')) {
-        const value = element.getAttribute('data-glean-value') || ''
-        engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] })
-      }
+      const value = element.getAttribute('data-glean-value') || ''
+      engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] })
     }
 
     function handleButtonClick(ev: MouseEvent) {
       const eventTarget = ev?.target as Element
       const closestButton = eventTarget.closest('button')
 
+      if (!closestButton)
+        return
+
       if (closestButton?.hasAttribute('href'))
         linkClick.record({ target_url: closestButton.getAttribute('href') || '' })
 
@@ -57,10 +61,13 @@ export default defineNuxtPlugin((nuxtApp) => {
     function handleLinkClick(ev: MouseEvent) {
       const eventTarget = ev?.target as Element
       const closestLink = eventTarget.closest('a')
-      if (closestLink) {
-        linkClick.record({ target_url: closestLink.getAttribute('href') || '' })
-        recordEngagement(closestLink)
-      }
+
+      if (!closestLink)
+        return
+
+      linkClick.record({ target_url: closestLink.getAttribute('href') || '' })
+
+      recordEngagement(closestLink)
     }
 
     window.addEventListener('click', eventListener)

From 913988b50fd33086dfb18cfed5fda5740717f4a8 Mon Sep 17 00:00:00 2001
From: Anthony Liddle <anthonyliddle@gmail.com>
Date: Thu, 2 Nov 2023 11:04:26 -0700
Subject: [PATCH 3/7] fix(glean): adding glean linter to pre commit hook

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 44bb881d59..02b3af2edf 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
     }
   },
   "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged"
+    "pre-commit": "pnpm lint-staged && pnpm lint:glean"
   },
   "lint-staged": {
     "*": "eslint --fix"

From f3c82d8557a64d48c4e325403f06c2b58c132505 Mon Sep 17 00:00:00 2001
From: Anthony Liddle <anthonyliddle@gmail.com>
Date: Thu, 2 Nov 2023 13:30:39 -0700
Subject: [PATCH 4/7] fix(glean): adding glean linting to the pr check

---
 .github/workflows/ci.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 00ebeaf7b8..b7b9db32a6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,6 +30,9 @@ jobs:
       - name: 🧪 Test project
         run: pnpm test tests/unit
 
+      - name: 🔎 Glean Lint
+        run: pnpm lint:glean
+
       - name: 📝 Lint
         run: pnpm lint
       # Mozilla.Social changes have errors with this check, disabling for now.

From 718a7fc8699ccaadd081aaf41a8a39e17cddd812 Mon Sep 17 00:00:00 2001
From: Andrea Marchesini <amarchesini@mozilla.com>
Date: Fri, 3 Nov 2023 09:40:34 +0100
Subject: [PATCH 5/7] feat: A draft of about page in Elk

---
 components/nav/NavFooter.vue                |  2 +-
 components/settings/SettingsAbout.vue       | 83 +++++++++++++++++++++
 locales/en.json                             | 13 ++++
 pages/about.vue                             | 19 +++++
 pages/settings.vue                          |  2 +-
 server/api/[server]/extended_description.ts | 14 ++++
 6 files changed, 131 insertions(+), 2 deletions(-)
 create mode 100644 components/settings/SettingsAbout.vue
 create mode 100644 pages/about.vue
 create mode 100644 server/api/[server]/extended_description.ts

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index b785274837..f50c9fe661 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -34,7 +34,7 @@ function toggleDark() {
       </CommonTooltip>
     </div>
     <div>
-      <NuxtLink href="https://mozilla.social/about" target="_blank" external>
+      <NuxtLink to="/about" target="_blank">
         About
       </NuxtLink>
       &middot;
diff --git a/components/settings/SettingsAbout.vue b/components/settings/SettingsAbout.vue
new file mode 100644
index 0000000000..6234f06d1a
--- /dev/null
+++ b/components/settings/SettingsAbout.vue
@@ -0,0 +1,83 @@
+<script setup lang="js">
+const content = (await $fetch(`/api/${publicServer.value}/extended_description`)).content
+const instance = await useMastoClient().v2.instance.fetch()
+
+const { t } = useI18n()
+
+const subtitle = t('about.subtitle')
+const administered_by = t('about.administered_by')
+const contact = t('about.contact', [instance.contact.email])
+const server_rules = t('about.server_rules')
+const footer_about = t('about.footer_about')
+const footer_profiles_directory = t('about.footer_privacy_notice')
+const footer_privacy_notice = t('about.footer_privacy_notice')
+const footer_terms_of_service = t('about.footer_terms_of_service')
+const footer_content_policy = t('about.footer_content_policy')
+const footer_copyright_policies = t('about.footer_copyright_policies')
+const footer_view_code = t('about.footer_view_code', [instance.version])
+</script>
+
+<template>
+  <div p-x-5 sm:p-0>
+    <div m-b-5>
+      <img rounded-4 :src="instance.thumbnail.url">
+      <h1 text-2xl p-y-2>
+        {{ instance.title }}
+      </h1>
+      <h2>{{ subtitle }}</h2>
+    </div>
+
+    <div m-b-5 b-t-1px p-t-5>
+      <div p-b-2>
+        {{ administered_by }}
+      </div>
+
+      <AccountCard :account="instance.contact.account" />
+
+      <div p-t-2>
+        {{ contact }}
+      </div>
+    </div>
+
+    <div m-b-5 b-t-1px p-t-5 class="content-rich" v-html="content" />
+
+    <div m-b-5 b-t-1px>
+      <h2 text-2xl p-t-5 p-b-5>
+        {{ server_rules }}
+      </h2>
+
+      <ul v-for="rule in instance.rules" :key="rule.id">
+        <li list-disc m-l-5>
+          {{ rule.text }}
+        </li>
+      </ul>
+    </div>
+
+    <div m-b-5 b-t-1px p-t-5>
+      <NuxtLink underline p-r-6 href="/about">
+        {{ footer_about }}
+      </NuxtLink>
+      <NuxtLink underline p-r-6 href="https://mozilla.social/directory">
+        {{ footer_profiles_directory }}
+      </NuxtLink>
+      <NuxtLink underline p-r-6 href="https://mozilla.social/privacy-policy">
+        {{ footer_privacy_notice }}
+      </NuxtLink>
+      <NuxtLink underline p-r-6 href="https://mozilla.social/terms">
+        {{ footer_terms_of_service }}
+      </NuxtLink>
+      <NuxtLink underline p-r-6 href="https://www.mozilla.org/about/governance/policies/social-content-policies/">
+        {{ footer_content_policy }}
+      </NuxtLink>
+      <NuxtLink underline p-r-6 href="https://www.mozilla.org/about/legal/report-infringement/">
+        {{ footer_copyright_policies }}
+      </NuxtLink>
+    </div>
+
+    <div flex b-t-1px>
+      <NuxtLink underline p-t-6 p-b-6 :href="instance.source_url">
+        {{ footer_view_code }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/locales/en.json b/locales/en.json
index 610982e844..91a891886c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -6,6 +6,19 @@
     "locale_changing": "Changing language, please wait",
     "route_loaded": "Page {0} loaded"
   },
+  "about": {
+    "administered_by": "Administered by",
+    "contact": "Contact: {0}",
+    "footer_about": "About",
+    "footer_content_policy": "Content Policies",
+    "footer_copyright_policies": "Copyright Policies",
+    "footer_privacy_notice": "Privacy Notice",
+    "footer_profiles_directory": "Profiles Directory",
+    "footer_terms_of_service": "Terms of Service",
+    "footer_view_code": "View Mastodon Source Code {0}",
+    "server_rules": "Server/Community Rules",
+    "subtitle": "Decentralized social media powered by Mastodon"
+  },
   "account": {
     "avatar_description": "{0}'s avatar",
     "blocked_by": "You're blocked by this user.",
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000000..7ea8282c74
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHydratedHead({
+  title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
+})
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <NuxtLink to="/about" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ t('settings.about.label') }}</span>
+      </NuxtLink>
+    </template>
+
+    <SettingsAbout v-if="isHydrated" />
+  </MainContent>
+</template>
diff --git a/pages/settings.vue b/pages/settings.vue
index 1e7ccb59f6..b050619e01 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -76,7 +76,7 @@ const devMode = useAppConfig().env === ('dev' || 'canary' || 'preview')
               command
               icon="i-ri:information-line"
               :text="isHydrated ? $t('settings.about.label') : ''"
-              to="https://mozilla.social/about"
+              to="/about"
             />
           </div>
         </MainContent>
diff --git a/server/api/[server]/extended_description.ts b/server/api/[server]/extended_description.ts
new file mode 100644
index 0000000000..f3bb2e734f
--- /dev/null
+++ b/server/api/[server]/extended_description.ts
@@ -0,0 +1,14 @@
+export default defineEventHandler(async (event) => {
+  try {
+    const { server } = getRouterParams(event)
+
+    const data = await fetch(
+      `https://${server}/api/v1/instance/extended_description`,
+    ).then(response => response.json())
+    return data
+  }
+  catch (err) {
+    console.warn(err)
+    return []
+  }
+})

From 60b3d3b0ed8ccc556fe765998591d3c49d529a67 Mon Sep 17 00:00:00 2001
From: Andrea Marchesini <amarchesini@mozilla.com>
Date: Fri, 3 Nov 2023 19:04:01 +0100
Subject: [PATCH 6/7] Comment applied

---
 components/nav/NavFooter.vue                |  2 +-
 components/settings/SettingsAbout.vue       |  8 +++-----
 server/api/[server]/extended_description.ts | 14 --------------
 3 files changed, 4 insertions(+), 20 deletions(-)
 delete mode 100644 server/api/[server]/extended_description.ts

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index f50c9fe661..5447140600 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -34,7 +34,7 @@ function toggleDark() {
       </CommonTooltip>
     </div>
     <div>
-      <NuxtLink to="/about" target="_blank">
+      <NuxtLink to="/about">
         About
       </NuxtLink>
       &middot;
diff --git a/components/settings/SettingsAbout.vue b/components/settings/SettingsAbout.vue
index 6234f06d1a..6ed58990b8 100644
--- a/components/settings/SettingsAbout.vue
+++ b/components/settings/SettingsAbout.vue
@@ -1,12 +1,12 @@
 <script setup lang="js">
-const content = (await $fetch(`/api/${publicServer.value}/extended_description`)).content
+const content = (await $fetch(`https://${publicServer.value}/api/v1/instance/extended_description`)).content
 const instance = await useMastoClient().v2.instance.fetch()
 
 const { t } = useI18n()
 
 const subtitle = t('about.subtitle')
 const administered_by = t('about.administered_by')
-const contact = t('about.contact', [instance.contact.email])
+const contact = t('about.contact', [`<a href="mailto:${instance.contact.email}">${instance.contact.email}</a>`])
 const server_rules = t('about.server_rules')
 const footer_about = t('about.footer_about')
 const footer_profiles_directory = t('about.footer_privacy_notice')
@@ -34,9 +34,7 @@ const footer_view_code = t('about.footer_view_code', [instance.version])
 
       <AccountCard :account="instance.contact.account" />
 
-      <div p-t-2>
-        {{ contact }}
-      </div>
+      <div p-t-2 class="content-rich" v-html="contact" />
     </div>
 
     <div m-b-5 b-t-1px p-t-5 class="content-rich" v-html="content" />
diff --git a/server/api/[server]/extended_description.ts b/server/api/[server]/extended_description.ts
deleted file mode 100644
index f3bb2e734f..0000000000
--- a/server/api/[server]/extended_description.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default defineEventHandler(async (event) => {
-  try {
-    const { server } = getRouterParams(event)
-
-    const data = await fetch(
-      `https://${server}/api/v1/instance/extended_description`,
-    ).then(response => response.json())
-    return data
-  }
-  catch (err) {
-    console.warn(err)
-    return []
-  }
-})

From 63bd7ae4238e81b6b9e2293e6272cbf8fcfaa700 Mon Sep 17 00:00:00 2001
From: Andrea Marchesini <amarchesini@mozilla.com>
Date: Mon, 6 Nov 2023 07:45:49 +0100
Subject: [PATCH 7/7] Pass the credentials to fetch the instance endpoint

---
 components/settings/SettingsAbout.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/settings/SettingsAbout.vue b/components/settings/SettingsAbout.vue
index 6ed58990b8..c26f0b11cd 100644
--- a/components/settings/SettingsAbout.vue
+++ b/components/settings/SettingsAbout.vue
@@ -1,5 +1,8 @@
 <script setup lang="js">
-const content = (await $fetch(`https://${publicServer.value}/api/v1/instance/extended_description`)).content
+const user = currentUser.value
+
+const content = (await $fetch(`https://${publicServer.value}/api/v1/instance/extended_description`,
+  { headers: { authorization: `Bearer ${user?.token}` } })).content
 const instance = await useMastoClient().v2.instance.fetch()
 
 const { t } = useI18n()