deemix-webui/src/components/pages/About.vue

<template>
	<div id="about_tab">
		<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>

		<ul>
			<li>
				{{ $t('about.updates.currentWebuiVersion') }}:
				<span>{{ __VER__ || $t('about.updates.versionNotAvailable') }}</span>
			</li>
			<li>
				{{ $t('about.updates.currentVersion') }}:
				<span>{{ current || $t('about.updates.versionNotAvailable') }}</span>
			</li>
			<li>{{ $t('about.updates.deemixVersion') }}: {{ deemixVersion }}</li>
			<li v-if="updateAvailable && latest">{{ $t('about.updates.updateAvailable', { version: latest }) }}</li>
		</ul>

		<ul>
			<li v-html="$t('about.usesLibrary')"></li>
			<li v-html="$t('about.thanks')"></li>
			<i18n path="about.upToDate.text" tag="li">
				<a place="newsChannel" href="https://t.me/RemixDevNews" target="_blank">{{
					$t('about.upToDate.newsChannel')
				}}</a>
			</i18n>
		</ul>

		<h2>{{ $t('about.titles.usefulLinks') }}</h2>
		<ul class="no-dots">
			<!-- <li>
				<a href="https://deemix.app" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
			</li> -->
			<!-- <li>
				<a href="" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
			</li> -->
			<!-- <li>
				<a href="" target="_blank">
					💻 {{ $t('about.officialWebuiRepo') }}
				</a>
			</li> -->
			<li>
				<a href="https://www.reddit.com/r/deemix" target="_blank">🤖 {{ $t('about.officialSubreddit') }}</a>
			</li>
			<li>
				<a href="https://t.me/RemixDevNews" target="_blank">📰 {{ $t('about.newsChannel') }}</a>
			</li>
		</ul>

		<h2>
			{{ $t('about.titles.bugReports') }}
			<span class="subheading">
				{{ $t('about.subtitles.bugReports') }}
			</span>
		</h2>
		<ul>
			<i18n path="about.questions.text" tag="li">
				<a place="subreddit" href="https://www.reddit.com/r/deemix" target="_blank">{{
					$t('about.questions.subreddit')
				}}</a>
			</i18n>
			<li>
				{{ $t('about.beforeReporting') }}
			</li>
			<li v-html="$t('about.beSure')"></li>
			<li>
				{{ $t('about.duplicateReports') }}
			</li>
			<li v-html="$t('about.dontOpenIssues')"></li>
		</ul>

		<h2>
			{{ $t('about.titles.contributing') }}
			<span class="subheading">
				{{ $t('about.subtitles.contributing') }}
			</span>
		</h2>
		<ul>
			<i18n path="about.newUI.text" tag="li">
				<span place="repo">{{ $t('about.newUI.repo') }}</span>
			</i18n>
			<li>
				{{ $t('about.acceptFeatures') }}
			</li>
			<i18n path="about.contributeWebUI.text" tag="li">
				<span place="webui">{{ $t('about.contributeWebUI.webui') }}</span>
			</i18n>
			<li>
				{{ $t('about.otherLanguages') }}
			</li>
			<li>
				{{ $t('about.understandingCode') }}
			</li>
		</ul>

		<h2>
			{{ $t('about.titles.donations') }}
			<span class="subheading">
				{{ $t('about.subtitles.donations') }}
			</span>
		</h2>
		<ul>
			<li v-html="$t('about.itsFree')"></li>
			<li>
				{{ $t('about.notObligated') }}
			</li>
		</ul>
		<ul>
			<li>
				<i v-html="paypal" />
				<strong>PayPal:</strong>
				<a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a>
			</li>
			<li>
				<i class="ethereum" v-html="ethereum" />
				<strong>Ethereum:</strong> 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
			</li>
		</ul>

		<h2>{{ $t('about.titles.license') }}</h2>
		<p>
			<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
				<img
					alt="GNU General Public License"
					style="border-width: 0"
					src="https://www.gnu.org/graphics/gplv3-127x51.png"
				/>
			</a>
		</p>
		<i18n path="about.lincensedUnder.text" tag="p">
			<a place="gpl3" rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">{{
				$t('about.lincensedUnder.gpl3')
			}}</a>
		</i18n>
	</div>
</template>

<style lang="scss" scoped>
li,
p,
a {
	letter-spacing: 0.4px;
	font-size: 20px;
	line-height: 1.2;
}

i {
	vertical-align: middle;
}

i::v-deep svg {
	fill: white;
	width: 20px;
}

.ethereum::v-deep svg {
	fill: var(--foreground);
}

:link {
	text-decoration: none;
}

#about_tab {
	margin-bottom: 40px;
}

h2 {
	text-transform: capitalize;

	&:not(.page_heading) {
		font-size: 2rem;
		border-bottom: 1px solid hsla(0, 0%, 20%, 0.25);
		padding: {
			top: 2rem;
			bottom: 1rem;
		}
	}

	.subheading {
		display: block;
		font-size: 0.5em;
		margin-top: 0.5em;
		font-weight: normal;
		opacity: 0.8;
		text-transform: none;
	}
}

p {
	margin: 0 !important;
}

ul {
	li {
		margin-bottom: 7px;
	}

	h2 + & {
		margin-top: 1rem;
	}

	ul + & {
		margin-top: 1.25rem;
	}

	&.no-dots {
		list-style-type: none;
	}

	&:not(.no-dots) {
		list-style-type: none;

		li {
			position: relative;

			&::before {
				content: '—';
				position: absolute;
				left: -30px;
				opacity: 0.25;
			}
		}
	}
}
</style>

<script>
import { socket } from '@/utils/socket'
import paypal from '@/assets/paypal.svg'
import ethereum from '@/assets/ethereum.svg'
import { mapGetters } from 'vuex'

export default {
	data() {
		return {
			paypal,
			ethereum,
			current: null,
			latest: null,
			updateAvailable: false,
			deemixVersion: null
		}
	},
	computed: {
		...mapGetters(['getAboutInfo'])
	},
	methods: {
		initUpdate(data) {
			const { currentCommit, latestCommit, updateAvailable, deemixVersion } = data

			this.current = currentCommit
			this.latest = latestCommit
			this.updateAvailable = updateAvailable
			this.deemixVersion = deemixVersion
		}
	},
	mounted() {
		this.initUpdate(this.getAboutInfo)
	}
}
</script>