feat: A draft for the about page in Elk [MOSOWEB-54]

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>

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

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>