hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

build: switch from yarn to npm to manage js dependencies and move js contents to root

Browse Source 
yarn v1 is being deprecated and starts to have some issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2023-11-14 17:24:42 +01:00
parent 32055122c3
commit 2e72f6faf4
595 changed files with 12078 additions and 7843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/views/About/AboutInstanceView.vue Normal file
View File

@@ -0,0 +1,209 @@
<template>
<div v-if="config">
<section class="p-6 bg-primary text-white">
<h1 dir="auto">{{ config.name }}</h1>
<p dir="auto">{{ config.description }}</p>
</section>
<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">
<template #number>
<strong>{{ statistics.numberOfUsers }}</strong>
</template>
</i18n-t>
<i18n-t tag="p" keypath="and {number} groups">
<template #number>
<strong>{{ statistics.numberOfLocalGroups }}</strong>
</template>
</i18n-t>
<i18n-t tag="p" keypath="Who published {number} events">
<template #number>
<strong>{{ statistics.numberOfLocalEvents }}</strong>
</template>
</i18n-t>
<i18n-t tag="p" keypath="And {number} comments">
<template #number>
<strong>{{ statistics.numberOfLocalComments }}</strong>
</template>
</i18n-t>
</div>
<div class="">
<p class="font-bold">{{ t("Contact") }}</p>
<instance-contact-link
v-if="config && config.contact"
:contact="config.contact"
/>
<p v-else>{{ t("No information") }}</p>
</div>
</section>
<hr role="presentation" v-if="config.longDescription" />
<section class="long-description content">
<div v-html="config.longDescription" />
</section>
<hr role="presentation" />
<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>
<td
v-if="config.languages.length > 0"
:title="config.languages.join(', ') ?? ''"
>
{{ formattedLanguageList }}
</td>
<td v-else>{{ t("No information") }}</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td>{{ t("Mobilizon version") }}</td>
<td>{{ config.version }}</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td>{{ t("Registrations") }}</td>
<td v-if="config.registrationsOpen && config.registrationsAllowlist">
{{ t("Restricted") }}
</td>
<td v-if="config.registrationsOpen && !config.registrationsAllowlist">
{{ t("Open") }}
</td>
<td v-else>{{ t("Closed") }}</td>
</tr>
<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>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td>{{ t("Anonymous participations") }}</td>
<td v-if="config.anonymous.participation.allowed">
{{ t("If allowed by organizer") }}
</td>
<td v-else>{{ t("Disabled") }}</td>
</tr>
<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
tag="a"
size="small"
icon-left="rss"
href="/feed/instance/atom"
target="_blank"
>{{ t("RSS/Atom Feed") }}</o-button
>
<o-button
tag="a"
size="small"
icon-left="calendar-sync"
href="/feed/instance/ics"
target="_blank"
>{{ t("ICS/WebCal Feed") }}</o-button
>
</td>
<td v-else>{{ t("Disabled") }}</td>
</tr>
</table>
</section>
</div>
</template>
<script lang="ts" setup>
import { formatList } from "@/utils/i18n";
import InstanceContactLink from "@/components/About/InstanceContactLink.vue";
import { LANGUAGES_CODES } from "@/graphql/admin";
import { ILanguage } from "@/types/admin.model";
import { ABOUT } from "../../graphql/config";
import { STATISTICS } from "../../graphql/statistics";
import { IConfig } from "../../types/config.model";
import { IStatistics } from "../../types/statistics.model";
import { useQuery } from "@vue/apollo-composable";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useHead } from "@vueuse/head";
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);
}
return "";
});
const { t } = useI18n({ useScope: "global" });
useHead({
title: t("About {instance}", { instance: config.value?.name }),
});
</script>
<style lang="scss" scoped>
section {
&:not(:first-child) {
margin: 2rem auto;
}
&.hero {
h1.title {
margin: auto;
}
}
&.contact-statistics {
margin: 2px auto;
.statistics {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
gap: 2rem 0;
p {
text-align: right;
padding: 0 15px;
& > * {
display: block;
}
strong {
font-weight: 500;
font-size: 32px;
line-height: 48px;
}
}
}
}
tr.instance-feeds {
height: 3rem;
td:first-child {
vertical-align: middle;
}
td:last-child {
height: 3rem;
}
}
}
</style>