Migrate About page to the composition API (#6121)

src/renderer/components/ft-logo-full/ft-logo-full.vue → src/renderer/components/FtLogoFull/FtLogoFull.vue

@@ -1,6 +1,5 @@
 <template>
   <svg
-    class="ft-logo-full"
     viewBox="0 0 640 200"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
@@ -63,4 +62,4 @@
   </svg>
 </template>
 
-<style scoped src="./ft-logo-full.css" />
+<style scoped src="./FtLogoFull.css" />

src/renderer/views/About/About.css

@@ -8,7 +8,7 @@
   text-align: center;
 }
 
-.ft-logo-full {
+.logo {
   max-inline-size: 100%;
   inline-size: 500px;
 }

src/renderer/views/About/About.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <ft-card class="card">
+    <FtCard class="card">
       <h1>
         {{ $t("About.About") }}
       </h1>
       <section class="brand">
-        <ft-logo-full />
+        <FtLogoFull class="logo" />
         <div class="version">
           {{ versionNumber }} {{ $t("About.Beta") }}
         </div>
@@ -16,7 +16,7 @@
           :key="chunk.title"
           class="chunk"
         >
-          <font-awesome-icon
+          <FontAwesomeIcon
             class="icon"
             :icon="chunk.icon"
           />
@@ -29,9 +29,87 @@
           />
         </figure>
       </section>
-    </ft-card>
+    </FtCard>
   </div>
 </template>
 
-<script src="./About.js" />
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtLogoFull from '../../components/FtLogoFull/FtLogoFull.vue'
+
+import { ABOUT_BITCOIN_ADDRESS } from '../../../constants'
+import packageDetails from '../../../../package.json'
+
+const { t } = useI18n()
+
+const versionNumber = `v${packageDetails.version}`
+
+const chunks = computed(() => [
+  {
+    icon: ['fab', 'github'],
+    title: t('About.Source code'),
+    content: `<a href="https://github.com/FreeTubeApp/FreeTube" lang="en">GitHub: FreeTubeApp/FreeTube</a><br>${t('About.Licensed under the')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${t('About.AGPLv3')}</a>`
+  },
+  {
+    icon: ['fas', 'file-download'],
+    title: t('About.Downloads / Changelog'),
+    content: `<a href="https://github.com/FreeTubeApp/FreeTube/releases">${t('About.GitHub releases')}</a>`
+  },
+  {
+    icon: ['fas', 'question-circle'],
+    title: t('About.Help'),
+    content: `<a href="https://docs.freetubeapp.io/">${t('About.FreeTube Wiki')}</a> / <a href="https://docs.freetubeapp.io/faq/">${t('About.FAQ')}</a> / <a href="https://github.com/FreeTubeApp/FreeTube/discussions/">${t('About.Discussions')}</a>`
+  },
+  {
+    icon: ['fas', 'exclamation-circle'],
+    title: t('About.Report a problem'),
+    content: `<a href="https://github.com/FreeTubeApp/FreeTube/issues">${t('About.GitHub issues')}</a><br>${t('About.Please check for duplicates before posting')}`
+  },
+  {
+    icon: ['fas', 'globe'],
+    title: t('About.Website'),
+    content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>'
+  },
+  {
+    icon: ['fas', 'newspaper'],
+    title: t('About.Blog'),
+    content: '<a href="https://blog.freetubeapp.io">https://blog.freetubeapp.io</a>'
+  },
+  {
+    icon: ['fas', 'envelope'],
+    title: t('About.Email'),
+    content: '<a href="mailto:FreeTubeApp@protonmail.com">FreeTubeApp@protonmail.com</a>'
+  },
+  {
+    icon: ['fab', 'mastodon'],
+    title: t('About.Mastodon'),
+    content: '<a href="https://fosstodon.org/@FreeTube">@FreeTube@fosstodon.org</a>'
+  },
+  {
+    icon: ['fas', 'comment-dots'],
+    title: t('About.Chat on Matrix'),
+    content: `<a href="https://matrix.to/#/#freetube:matrix.org?via=matrix.org&via=privacytools.io&via=tchncs.de">#freetube:matrix.org</a><br>${t('About.Please read the')} <a href="https://docs.freetubeapp.io/community/matrix/">${t('About.room rules')}</a>`
+  },
+  {
+    icon: ['fas', 'language'],
+    title: t('About.Translate'),
+    content: '<a href="https://hosted.weblate.org/engage/free-tube/">https://hosted.weblate.org/engage/free-tube/</a>'
+  },
+  {
+    icon: ['fas', 'users'],
+    title: t('About.Credits'),
+    content: `${t('About.FreeTube is made possible by')} <a href="https://docs.freetubeapp.io/credits/">${t('About.these people and projects')}</a>`
+  },
+  {
+    icon: ['fab', 'bitcoin'],
+    title: `${t('About.Donate')} - BTC`,
+    content: `<a href="bitcoin:${ABOUT_BITCOIN_ADDRESS}">${ABOUT_BITCOIN_ADDRESS}</a>`
+  }
+])
+</script>
+
 <style scoped src="./About.css" />