From 4e0f43aea634dd56f3bd3089cd26e72cd2ff5b82 Mon Sep 17 00:00:00 2001
From: Andrea Marchesini <amarchesini@mozilla.com>
Date: Fri, 3 Nov 2023 09:40:34 +0100
Subject: [PATCH] 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 b785274837b..f50c9fe661c 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 00000000000..6234f06d1a2
--- /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 610982e844b..91a891886c9 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 00000000000..7ea8282c74c
--- /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 1e7ccb59f6c..b050619e019 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 00000000000..f3bb2e734fa
--- /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 []
+  }
+})