Merge branch 'main' into fix/post-creation-interactions

.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.

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">
         About
       </NuxtLink>
       &middot;

components/settings/SettingsAbout.vue

@@ -0,0 +1,84 @@
+<script setup lang="js">
+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()
+
+const subtitle = t('about.subtitle')
+const administered_by = t('about.administered_by')
+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')
+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 class="content-rich" v-html="contact" />
+    </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>

components/status/StatusLink.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { engagement } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 const props = defineProps<{
   status: mastodon.v1.Status
@@ -16,6 +18,13 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
   const text = window.getSelection()?.toString()
   if (!el && !text)
     go(evt)
+
+  const eventTarget = evt?.target as Element
+  const closestLink = eventTarget.closest('a')
+  if (closestLink) {
+    const ui_identifier = 'post.link.tap'
+    engagement.record({ ui_identifier, mastodon_status_id: props.status.id, ...engagementDetails[ui_identifier] })
+  }
 }
 
 function go(evt: MouseEvent | KeyboardEvent) {

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.",

modules/glean/runtime/glean-plugin.client.ts

@@ -33,24 +33,41 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     }
 
+    function recordEngagement(element: Element) {
+      if (!element)
+        return
+
+      if (!element.hasAttribute('data-glean'))
+        return
+
+      const data = element.getAttribute('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')
 
+      if (!closestButton)
+        return
+
       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)
-        linkClick.record({ target_url: closestLink.getAttribute('href') || '' })
+
+      if (!closestLink)
+        return
+
+      linkClick.record({ target_url: closestLink.getAttribute('href') || '' })
+
+      recordEngagement(closestLink)
     }
 
     window.addEventListener('click', eventListener)

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"

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>

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>

telemetry/engagementDetails.ts

@@ -1,3 +1,4 @@
+import { postEvents } from './engagementPostEvents'
 import { profileEvents } from './engagementProfileEvents'
 
 interface EngagementDetails {
@@ -47,5 +48,6 @@ export const engagementDetails: EngagementDetails = {
   'post.reply': {
     engagement_type: 'post',
   },
+  ...postEvents,
   ...profileEvents,
 }

telemetry/engagementPostEvents.js

@@ -0,0 +1,5 @@
+export const postEvents = {
+  'post.link.tap': {
+    engagement_type: 'general',
+  },
+}