2020-06-19 19:27:10 +02:00
|
|
|
<template>
|
|
|
|
<div v-if="config">
|
2022-07-12 10:55:28 +02:00
|
|
|
<section class="p-6 bg-primary text-white">
|
|
|
|
<h1 dir="auto">{{ config.name }}</h1>
|
|
|
|
<p dir="auto">{{ config.description }}</p>
|
2020-06-19 19:27:10 +02:00
|
|
|
</section>
|
2022-07-12 10:55:28 +02:00
|
|
|
<section
|
|
|
|
class="px-2 flex flex-wrap gap-2 contact-statistics"
|
|
|
|
v-if="statistics"
|
|
|
|
>
|
|
|
|
<div class="statistics flex-1 min-w-[20rem]">
|
|
|
|
<i18n-t tag="p" keypath="Home to {number} users">
|
2022-08-12 16:42:40 +02:00
|
|
|
<template #number>
|
2022-07-12 10:55:28 +02:00
|
|
|
<strong>{{ statistics.numberOfUsers }}</strong>
|
|
|
|
</template>
|
|
|
|
</i18n-t>
|
|
|
|
<i18n-t tag="p" keypath="and {number} groups">
|
2022-08-12 16:42:40 +02:00
|
|
|
<template #number>
|
2022-07-12 10:55:28 +02:00
|
|
|
<strong>{{ statistics.numberOfLocalGroups }}</strong>
|
|
|
|
</template>
|
|
|
|
</i18n-t>
|
|
|
|
<i18n-t tag="p" keypath="Who published {number} events">
|
2022-08-12 16:42:40 +02:00
|
|
|
<template #number>
|
2022-07-12 10:55:28 +02:00
|
|
|
<strong>{{ statistics.numberOfLocalEvents }}</strong>
|
|
|
|
</template>
|
|
|
|
</i18n-t>
|
|
|
|
<i18n-t tag="p" keypath="And {number} comments">
|
2022-08-12 16:42:40 +02:00
|
|
|
<template #number>
|
2022-07-12 10:55:28 +02:00
|
|
|
<strong>{{ statistics.numberOfLocalComments }}</strong>
|
|
|
|
</template>
|
|
|
|
</i18n-t>
|
2020-06-19 19:27:10 +02:00
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div class="">
|
|
|
|
<p class="font-bold">{{ t("Contact") }}</p>
|
2021-03-01 18:29:48 +01:00
|
|
|
<instance-contact-link
|
|
|
|
v-if="config && config.contact"
|
|
|
|
:contact="config.contact"
|
|
|
|
/>
|
2022-07-12 10:55:28 +02:00
|
|
|
<p v-else>{{ t("No information") }}</p>
|
2020-06-19 19:27:10 +02:00
|
|
|
</div>
|
|
|
|
</section>
|
2022-07-12 10:55:28 +02:00
|
|
|
<hr role="presentation" v-if="config.longDescription" />
|
2020-06-23 11:14:07 +02:00
|
|
|
<section class="long-description content">
|
2020-06-19 19:27:10 +02:00
|
|
|
<div v-html="config.longDescription" />
|
|
|
|
</section>
|
2021-10-10 16:24:12 +02:00
|
|
|
<hr role="presentation" />
|
2022-07-12 10:55:28 +02:00
|
|
|
<section class="px-3">
|
|
|
|
<h2 class="text-xl">{{ t("Instance configuration") }}</h2>
|
|
|
|
<table class="border-collapse table-auto w-full">
|
|
|
|
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
|
<td>{{ t("Instance languages") }}</td>
|
2021-04-19 12:40:51 +02:00
|
|
|
<td
|
|
|
|
v-if="config.languages.length > 0"
|
2022-07-12 10:55:28 +02:00
|
|
|
:title="config.languages.join(', ') ?? ''"
|
2021-04-19 12:40:51 +02:00
|
|
|
>
|
2020-11-30 10:24:11 +01:00
|
|
|
{{ formattedLanguageList }}
|
|
|
|
</td>
|
2022-07-12 10:55:28 +02:00
|
|
|
<td v-else>{{ t("No information") }}</td>
|
2020-10-20 10:36:43 +02:00
|
|
|
</tr>
|
2022-07-12 10:55:28 +02:00
|
|
|
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
|
<td>{{ t("Mobilizon version") }}</td>
|
2020-06-19 19:27:10 +02:00
|
|
|
<td>{{ config.version }}</td>
|
|
|
|
</tr>
|
2022-07-12 10:55:28 +02:00
|
|
|
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
|
<td>{{ t("Registrations") }}</td>
|
2020-09-29 09:53:48 +02:00
|
|
|
<td v-if="config.registrationsOpen && config.registrationsAllowlist">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Restricted") }}
|
2020-06-19 19:27:10 +02:00
|
|
|
</td>
|
2020-09-29 09:53:48 +02:00
|
|
|
<td v-if="config.registrationsOpen && !config.registrationsAllowlist">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Open") }}
|
2020-06-19 19:27:10 +02:00
|
|
|
</td>
|
2022-07-12 10:55:28 +02:00
|
|
|
<td v-else>{{ t("Closed") }}</td>
|
2020-06-19 19:27:10 +02:00
|
|
|
</tr>
|
2022-07-12 10:55:28 +02:00
|
|
|
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
|
<td>{{ t("Federation") }}</td>
|
|
|
|
<td v-if="config.federating">{{ t("Enabled") }}</td>
|
|
|
|
<td v-else>{{ t("Disabled") }}</td>
|
2020-06-19 19:27:10 +02:00
|
|
|
</tr>
|
2022-07-12 10:55:28 +02:00
|
|
|
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
|
<td>{{ t("Anonymous participations") }}</td>
|
2020-11-30 10:24:11 +01:00
|
|
|
<td v-if="config.anonymous.participation.allowed">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("If allowed by organizer") }}
|
2020-11-30 10:24:11 +01:00
|
|
|
</td>
|
2022-07-12 10:55:28 +02:00
|
|
|
<td v-else>{{ t("Disabled") }}</td>
|
2020-06-19 19:27:10 +02:00
|
|
|
</tr>
|
2022-07-12 10:55:28 +02:00
|
|
|
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
|
<td>{{ t("Instance feeds") }}</td>
|
|
|
|
<td v-if="config.instanceFeeds.enabled" class="flex gap-2">
|
|
|
|
<o-button
|
2021-04-19 12:40:51 +02:00
|
|
|
tag="a"
|
2022-07-12 10:55:28 +02:00
|
|
|
size="small"
|
2021-04-19 12:40:51 +02:00
|
|
|
icon-left="rss"
|
|
|
|
href="/feed/instance/atom"
|
|
|
|
target="_blank"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("RSS/Atom Feed") }}</o-button
|
2021-04-19 12:40:51 +02:00
|
|
|
>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
2021-04-19 12:40:51 +02:00
|
|
|
tag="a"
|
2022-07-12 10:55:28 +02:00
|
|
|
size="small"
|
2021-04-19 12:40:51 +02:00
|
|
|
icon-left="calendar-sync"
|
|
|
|
href="/feed/instance/ics"
|
|
|
|
target="_blank"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("ICS/WebCal Feed") }}</o-button
|
2021-04-19 12:40:51 +02:00
|
|
|
>
|
|
|
|
</td>
|
2022-07-12 10:55:28 +02:00
|
|
|
<td v-else>{{ t("Disabled") }}</td>
|
2021-04-19 12:40:51 +02:00
|
|
|
</tr>
|
2020-06-19 19:27:10 +02:00
|
|
|
</table>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
2020-10-20 10:36:43 +02:00
|
|
|
import { formatList } from "@/utils/i18n";
|
2021-02-03 18:00:49 +01:00
|
|
|
import InstanceContactLink from "@/components/About/InstanceContactLink.vue";
|
2020-11-02 11:22:54 +01:00
|
|
|
import { LANGUAGES_CODES } from "@/graphql/admin";
|
|
|
|
import { ILanguage } from "@/types/admin.model";
|
2020-06-19 19:27:10 +02:00
|
|
|
import { ABOUT } from "../../graphql/config";
|
|
|
|
import { STATISTICS } from "../../graphql/statistics";
|
|
|
|
import { IConfig } from "../../types/config.model";
|
|
|
|
import { IStatistics } from "../../types/statistics.model";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { useQuery } from "@vue/apollo-composable";
|
|
|
|
import { computed } from "vue";
|
|
|
|
import { useI18n } from "vue-i18n";
|
2020-06-19 19:27:10 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { result: configResult } = useQuery<{ config: IConfig }>(ABOUT);
|
|
|
|
|
|
|
|
const config = computed(() => configResult.value?.config);
|
|
|
|
|
|
|
|
const { result: statisticsResult } = useQuery<{ statistics: IStatistics }>(
|
|
|
|
STATISTICS
|
|
|
|
);
|
|
|
|
|
|
|
|
const statistics = computed(() => statisticsResult.value?.statistics);
|
|
|
|
|
|
|
|
const { result: languagesResult } = useQuery<{ languages: ILanguage[] }>(
|
|
|
|
LANGUAGES_CODES,
|
|
|
|
() => ({
|
|
|
|
codes: config.value?.languages,
|
|
|
|
}),
|
|
|
|
() => ({
|
|
|
|
enabled: config.value?.languages !== undefined,
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
const languages = computed(() => languagesResult.value?.languages);
|
|
|
|
|
|
|
|
const formattedLanguageList = computed((): string => {
|
|
|
|
if (languages.value) {
|
|
|
|
const list = languages.value?.map(({ name }) => name) ?? [];
|
|
|
|
return formatList(list);
|
2020-11-02 11:22:54 +01:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
return "";
|
|
|
|
});
|
|
|
|
|
|
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
|
|
// metaInfo() {
|
|
|
|
// return {
|
|
|
|
// title: this.t("About {instance}", {
|
|
|
|
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
// // @ts-ignore
|
|
|
|
// instance: this?.config?.name,
|
|
|
|
// }) as string,
|
|
|
|
// };
|
|
|
|
// }
|
2020-06-19 19:27:10 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
section {
|
|
|
|
&:not(:first-child) {
|
|
|
|
margin: 2rem auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.hero {
|
2021-10-10 16:24:12 +02:00
|
|
|
h1.title {
|
2020-06-19 19:27:10 +02:00
|
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.contact-statistics {
|
|
|
|
margin: 2px auto;
|
|
|
|
.statistics {
|
2020-09-30 10:42:19 +02:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(auto-fit, 150px);
|
2020-10-07 10:05:07 +02:00
|
|
|
gap: 2rem 0;
|
2020-06-19 19:27:10 +02:00
|
|
|
p {
|
|
|
|
text-align: right;
|
|
|
|
padding: 0 15px;
|
|
|
|
|
|
|
|
& > * {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
strong {
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 32px;
|
|
|
|
line-height: 48px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-04-19 12:40:51 +02:00
|
|
|
tr.instance-feeds {
|
|
|
|
height: 3rem;
|
|
|
|
td:first-child {
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
td:last-child {
|
|
|
|
height: 3rem;
|
|
|
|
}
|
|
|
|
}
|
2020-06-19 19:27:10 +02:00
|
|
|
}
|
|
|
|
</style>
|