mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2025-01-07 10:07:57 +01:00
Migrate About page to the composition API (#6121)
This commit is contained in:
absidue
GitHub
parent
b41d3a1cb4
commit
006ed4050f
@ -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" />
|
||||
@ -8,7 +8,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ft-logo-full {
|
||||
.logo {
|
||||
max-inline-size: 100%;
|
||||
inline-size: 500px;
|
||||
}
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import FtCard from '../../components/ft-card/ft-card.vue'
|
||||
import packageDetails from '../../../../package.json'
|
||||
import { ABOUT_BITCOIN_ADDRESS } from '../../../constants'
|
||||
import FtLogoFull from '../../components/ft-logo-full/ft-logo-full.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'About',
|
||||
components: {
|
||||
'ft-card': FtCard,
|
||||
'ft-logo-full': FtLogoFull,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
versionNumber: `v${packageDetails.version}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
chunks: function () {
|
||||
return [
|
||||
{
|
||||
icon: ['fab', 'github'],
|
||||
title: this.$t('About.Source code'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube" lang="en">GitHub: FreeTubeApp/FreeTube</a><br>${this.$t('About.Licensed under the')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${this.$t('About.AGPLv3')}</a>`
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'file-download'],
|
||||
title: this.$t('About.Downloads / Changelog'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube/releases">${this.$t('About.GitHub releases')}</a>`
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'question-circle'],
|
||||
title: this.$t('About.Help'),
|
||||
content: `<a href="https://docs.freetubeapp.io/">${this.$t('About.FreeTube Wiki')}</a> / <a href="https://docs.freetubeapp.io/faq/">${this.$t('About.FAQ')}</a> / <a href="https://github.com/FreeTubeApp/FreeTube/discussions/">${this.$t('About.Discussions')}</a>`
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'exclamation-circle'],
|
||||
title: this.$t('About.Report a problem'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube/issues">${this.$t('About.GitHub issues')}</a><br>${this.$t('About.Please check for duplicates before posting')}`
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'globe'],
|
||||
title: this.$t('About.Website'),
|
||||
content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>'
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'newspaper'],
|
||||
title: this.$t('About.Blog'),
|
||||
content: '<a href="https://blog.freetubeapp.io">https://blog.freetubeapp.io</a>'
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'envelope'],
|
||||
title: this.$t('About.Email'),
|
||||
content: '<a href="mailto:FreeTubeApp@protonmail.com">FreeTubeApp@protonmail.com</a>'
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'mastodon'],
|
||||
title: this.$t('About.Mastodon'),
|
||||
content: '<a href="https://fosstodon.org/@FreeTube">@FreeTube@fosstodon.org</a>'
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'comment-dots'],
|
||||
title: this.$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>${this.$t('About.Please read the')} <a href="https://docs.freetubeapp.io/community/matrix/">${this.$t('About.room rules')}</a>`
|
||||
},
|
||||
{
|
||||
icon: ['fas', 'language'],
|
||||
title: this.$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: this.$t('About.Credits'),
|
||||
content: `${this.$t('About.FreeTube is made possible by')} <a href="https://docs.freetubeapp.io/credits/">${this.$t('About.these people and projects')}</a>`
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'bitcoin'],
|
||||
title: `${this.$t('About.Donate')} - BTC`,
|
||||
content: `<a href="bitcoin:${ABOUT_BITCOIN_ADDRESS}">${ABOUT_BITCOIN_ADDRESS}</a>`
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -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" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user