build: switch from yarn to npm to manage js dependencies and move js contents to root
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
209
src/views/About/AboutInstanceView.vue
Normal file
209
src/views/About/AboutInstanceView.vue
Normal 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>
|
||||
95
src/views/About/GlossaryView.vue
Normal file
95
src/views/About/GlossaryView.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="container mx-auto px-2">
|
||||
<h1>{{ t("Glossary") }}</h1>
|
||||
<div class="prose dark:prose-invert" v-if="config">
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"Some terms, technical or otherwise, used in the text below may cover concepts that are difficult to grasp. We have provided a glossary here to help you understand them better:"
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<dl>
|
||||
<dt class="mt-3">{{ t("Instance") }}</dt>
|
||||
<i18n-t
|
||||
tag="dd"
|
||||
keypath="An instance is an installed version of the Mobilizon software running on a server. An instance can be run by anyone using the {mobilizon_software} or other federated apps, aka the “fediverse”. This instance's name is {instance_name}. Mobilizon is a federated network of multiple instances (just like email servers), users registered on different instances may communicate even though they didn't register on the same instance."
|
||||
>
|
||||
<template #mobilizon_software
|
||||
><a href="https://joinmobilizon.org">{{
|
||||
t("Mobilizon software")
|
||||
}}</a></template
|
||||
>
|
||||
|
||||
<template #instance_name>
|
||||
<b>{{ config.name }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<dt class="mt-3">{{ t("Instance administrator") }}</dt>
|
||||
<dd class="mb-2">
|
||||
{{
|
||||
t(
|
||||
"The instance administrator is the person or entity that runs this Mobilizon instance."
|
||||
)
|
||||
}}
|
||||
</dd>
|
||||
<dt class="mt-3">{{ t("Application") }}</dt>
|
||||
<dd class="mb-2">
|
||||
{{
|
||||
t(
|
||||
"In the following context, an application is a software, either provided by the Mobilizon team or by a 3rd-party, used to interact with your instance."
|
||||
)
|
||||
}}
|
||||
</dd>
|
||||
<dt class="mt-3">{{ t("API") }}</dt>
|
||||
<dd class="mb-2">
|
||||
{{
|
||||
t(
|
||||
"An “application programming interface” or “API” is a communication protocol that allows software components to communicate with each other. The Mobilizon API, for example, can allow third-party software tools to communicate with Mobilizon instances to carry out certain actions, such as posting events on your behalf, automatically and remotely."
|
||||
)
|
||||
}}
|
||||
</dd>
|
||||
<dt class="mt-3">{{ t("SSL/TLS") }}</dt>
|
||||
<i18n-t
|
||||
tag="dd"
|
||||
keypath="SSL and it's successor TLS are encryption technologies to secure data communications when using the service. You can recognize an encrypted connection in your browser's address line when the URL begins with {https} and the lock icon is displayed in your browser's address bar."
|
||||
>
|
||||
<template #https><code>https://</code></template>
|
||||
</i18n-t>
|
||||
<dt class="mt-3">{{ t("Cookies and Local storage") }}</dt>
|
||||
<dd class="mb-2">
|
||||
{{
|
||||
t(
|
||||
"A cookie is a small file containing information that is sent to your computer when you visit a website. When you visit the site again, the cookie allows that site to recognize your browser. Cookies may store user preferences and other information. You can configure your browser to refuse all cookies. However, this may result in some website features or services partially working. Local storage works the same way but allows you to store more data."
|
||||
)
|
||||
}}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useQuery } from "@vue/apollo-composable";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ABOUT } from "../../graphql/config";
|
||||
import { IConfig } from "../../types/config.model";
|
||||
|
||||
const { result: configResult } = useQuery<{ config: IConfig }>(ABOUT);
|
||||
|
||||
const config = computed(() => configResult.value?.config);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: t("Glossary"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(dt) {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
46
src/views/About/PrivacyView.vue
Normal file
46
src/views/About/PrivacyView.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="container mx-auto px-2">
|
||||
<h1>{{ t("Privacy Policy") }}</h1>
|
||||
<div
|
||||
class="prose dark:prose-invert"
|
||||
v-if="config?.privacy"
|
||||
v-html="config.privacy.bodyHtml"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PRIVACY } from "@/graphql/config";
|
||||
import { IConfig } from "@/types/config.model";
|
||||
import { InstancePrivacyType } from "@/types/enums";
|
||||
import { useQuery } from "@vue/apollo-composable";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { computed, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { locale } = useI18n({ useScope: "global" });
|
||||
|
||||
const { result: configResult } = useQuery<{ config: IConfig }>(
|
||||
PRIVACY,
|
||||
() => ({
|
||||
locale: locale,
|
||||
}),
|
||||
() => ({
|
||||
enabled: locale !== undefined,
|
||||
})
|
||||
);
|
||||
|
||||
const config = computed(() => configResult.value?.config);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: t("Privacy Policy"),
|
||||
});
|
||||
|
||||
watch(config, () => {
|
||||
if (config.value?.privacy?.type === InstancePrivacyType.URL) {
|
||||
window.location.replace(config.value?.privacy?.url);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
30
src/views/About/RulesView.vue
Normal file
30
src/views/About/RulesView.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="container mx-auto px-2" v-if="config">
|
||||
<h1>{{ t("Rules") }}</h1>
|
||||
<div
|
||||
class="prose dark:prose-invert"
|
||||
v-html="config.rules"
|
||||
v-if="config.rules"
|
||||
/>
|
||||
<p v-else>{{ t("No rules defined yet.") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { RULES } from "@/graphql/config";
|
||||
import { IConfig } from "@/types/config.model";
|
||||
import { useQuery } from "@vue/apollo-composable";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { result: configResult } = useQuery<{ config: IConfig }>(RULES);
|
||||
|
||||
const config = computed(() => configResult.value?.config);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: t("Rules"),
|
||||
});
|
||||
</script>
|
||||
53
src/views/About/TermsView.vue
Normal file
53
src/views/About/TermsView.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="container mx-auto px-2">
|
||||
<h1>{{ t("Terms") }}</h1>
|
||||
<o-loading v-model="termsLoading" />
|
||||
<div
|
||||
class="prose dark:prose-invert"
|
||||
v-if="config"
|
||||
v-html="config.terms.bodyHtml"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TERMS } from "@/graphql/config";
|
||||
import { IConfig } from "@/types/config.model";
|
||||
import { InstanceTermsType } from "@/types/enums";
|
||||
import { useQuery } from "@vue/apollo-composable";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { computed, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t, locale } = useI18n({ useScope: "global" });
|
||||
|
||||
const { result: termsResult, loading: termsLoading } = useQuery<{
|
||||
config: IConfig;
|
||||
}>(
|
||||
TERMS,
|
||||
() => ({
|
||||
locale: locale,
|
||||
}),
|
||||
() => ({
|
||||
enabled: locale !== undefined,
|
||||
})
|
||||
);
|
||||
|
||||
const config = computed(() => termsResult.value?.config);
|
||||
|
||||
watch(config, () => {
|
||||
if (config.value?.terms?.type) {
|
||||
redirectToUrl();
|
||||
}
|
||||
});
|
||||
|
||||
const redirectToUrl = (): void => {
|
||||
if (config.value?.terms?.type === InstanceTermsType.URL) {
|
||||
window.location.replace(config.value?.terms?.url);
|
||||
}
|
||||
};
|
||||
|
||||
useHead({
|
||||
title: computed(() => t("Terms")),
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user