Change landing page

This commit is contained in:
Clovis 2022-11-29 16:53:12 +01:00
parent 189d91170e
commit f0baefb66f
8 changed files with 69 additions and 21 deletions

View file

@ -42,9 +42,7 @@ export const fetchInstance = createAsyncThunk<void, void, { state: RootState }>(
async(_arg, { dispatch, getState, rejectWithValue }) => {
try {
const { data: instance } = await api(getState).get('/api/v1/instance');
if (needsNodeinfo(instance)) {
dispatch(fetchNodeinfo());
}
dispatch(fetchNodeinfo());
return instance;
} catch (e) {
return rejectWithValue(e);

View file

@ -1,12 +1,16 @@
import Immutable from 'immutable';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { fetchAccount } from 'soapbox/actions/accounts';
import { prepareRequest } from 'soapbox/actions/consumer-auth';
import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
import Account from 'soapbox/components/account';
import VerificationBadge from 'soapbox/components/verification_badge';
import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
import { useAppDispatch, useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
import { capitalize } from 'soapbox/utils/strings';
import { List as ImmutableList } from 'immutable';
const LandingPage = () => {
const dispatch = useAppDispatch();
@ -15,8 +19,28 @@ const LandingPage = () => {
const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
const instance = useAppSelector((state) => state.instance);
const accounts = useAppSelector((state) => state.accounts);
const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);
React.useEffect(() => {
const staff = (instance.pleroma.getIn(["metadata", "staff_accounts"]) as ImmutableList<string>).map((s) => s.split('/').pop());
staff.forEach((s) => dispatch(fetchAccount(s)));
}, [instance, dispatch]);
const staffAccounts = React.useMemo(() => {
if(accounts == null) return [];
const a = Object.values(accounts?.toJSON()).filter((a) => a.admin || a.moderator);
console.log(a);
return a;
}, [accounts]);
const userCount = instance.stats.get('user_count');
const homeDescription = React.useMemo(() => {
const format = new Intl.NumberFormat().format(userCount);
return soapboxConfig.homeDescription.replace('[users]', format);
}, [userCount, soapboxConfig]);
/** Registrations are closed */
const renderClosed = () => {
return (
@ -107,14 +131,30 @@ const LandingPage = () => {
<div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
<div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex'>
<div className='w-full'>
<Stack space={3}>
<Stack space={5}>
<h1 className='text-5xl font-extrabold text-transparent text-ellipsis overflow-hidden bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
{instance.title}
</h1>
<Text size='lg'>
{instance.description}
{
homeDescription ? <span dangerouslySetInnerHTML={{ __html: homeDescription }} /> : instance.description
}
</Text>
<div>
<div className='flex justify-between'>
<h2 className="text-xl text-gray-800">
<FormattedMessage id='landingPage.admins' defaultMessage='Moderators' />
</h2>
</div>
<a href={`mailto:${instance.email}`}>
{instance.email}
</a>
<Stack space={3} className="mt-4">
{
staffAccounts.map((s) => <Account key={s.id} hideActions={true} account={s} />)
}
</Stack>
</div>
</Stack>
</div>
</div>

View file

@ -76,17 +76,6 @@ const Header = () => {
<nav className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' aria-label='Header'>
<div className='w-full py-6 flex items-center justify-between border-b border-indigo-500 lg:border-none'>
<div className='flex items-center sm:justify-center relative w-36'>
<div className='hidden md:block absolute z-0 -top-24 -left-6'>
<Sonar />
</div>
<IconButton
title='Open Menu'
src={require('@tabler/icons/menu-2.svg')}
onClick={open}
className='md:hidden mr-4 bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-600'
/>
<Link to='/' className='z-10'>
<SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />
<span className='hidden'>{intl.formatMessage(messages.home)}</span>

View file

@ -51,6 +51,7 @@ const messages = defineMessages({
singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
homeDescription: { id: 'soapbox_config.home_description', defaultMessage: 'Instance\'s description shown in Home page. Supports HTML. Use [users] to insert the number of current users on the instance.' }
});
type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
@ -292,6 +293,19 @@ const SoapboxConfig: React.FC = () => {
)}
</List>
<CardHeader>
<CardTitle title={<FormattedMessage id='soapbox_config.headings.home' defaultMessage='Home' />} />
</CardHeader>
<FormGroup labelText={intl.formatMessage(messages.homeDescription)}>
<Textarea
placeholder={intl.formatMessage(messages.homeDescription)}
isCodeEditor
value={soapbox.homeDescription}
onChange={handleChange(['homeDescription'], (e) => e.target.value)}
/>
</FormGroup>
<CardHeader>
<CardTitle title={<FormattedMessage id='soapbox_config.headings.navigation' defaultMessage='Navigation' />} />
</CardHeader>

View file

@ -1052,11 +1052,14 @@
"soapbox_config.raw_json_label": "Avancé: Editer le fichier JSON",
"soapbox_config.save": "Enregistrer",
"soapbox_config.saved": "Configuration sauvegardée !",
"soapbox_config.headings.home": "Page d'accueil",
"soapbox_config.home_description": "Description de l'instance affichée sur la page d'accueil. Supporte le HTML. Vous pouvez utiliser [users] pour insérer le nombre d'utilisateurs courant dans la description.",
"soapbox_config.single_user_mode_hint": "L'index affichera le profil d'un utilisateur donné.",
"soapbox_config.single_user_mode_label": "Mode utilisateur unique",
"soapbox_config.single_user_mode_profile_hint": "@handle",
"soapbox_config.single_user_mode_profile_label": "Main user handle",
"soapbox_config.verified_can_edit_name_label": "Autoriser les utilisateurs vérifiés à modifier leur propre nom d'utilisateur",
"landingPage.admins": "Modérateurs",
"sponsored.info.message": "{siteTitle} displays ads to help fund our service.",
"sponsored.info.title": "Why am I seeing this ad?",
"sponsored.subtitle": "Sponsored post",

View file

@ -50,6 +50,7 @@ export const InstanceRecord = ImmutableRecord({
enabled: true,
exclusions: false,
}),
staff_accounts: [],
}),
stats: ImmutableMap(),
}),

View file

@ -123,6 +123,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
singleUserModeProfile: '',
linkFooterMessage: '',
links: ImmutableMap<string, string>(),
homeDescription: '',
}, 'SoapboxConfig');
type SoapboxConfigMap = ImmutableMap<string, any>;

View file

@ -17,15 +17,17 @@ import type { AnyAction } from 'redux';
const initialState = normalizeInstance(ImmutableMap());
const nodeinfoToInstance = (nodeinfo: ImmutableMap<string, any>) => {
const data = nodeinfo.get("data");
// Match Pleroma's develop branch
return normalizeInstance(ImmutableMap({
pleroma: ImmutableMap({
metadata: ImmutableMap({
account_activation_required: nodeinfo.getIn(['metadata', 'accountActivationRequired']),
features: nodeinfo.getIn(['metadata', 'features']),
federation: nodeinfo.getIn(['metadata', 'federation']),
account_activation_required: data.getIn(['metadata', 'accountActivationRequired']),
features: data.getIn(['metadata', 'features']),
staff_accounts: data.getIn(['metadata', 'staffAccounts']),
federation: data.getIn(['metadata', 'federation']),
fields_limits: ImmutableMap({
max_fields: nodeinfo.getIn(['metadata', 'fieldsLimits', 'maxFields']),
max_fields: data.getIn(['metadata', 'fieldsLimits', 'maxFields']),
}),
}),
}),