From 757e16a0b553508213c8707f4b6f210273dde964 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 5 Oct 2022 03:47:56 +0200
Subject: [Glitch] Add server banner to web app

Port d2528b26b6da34f34b5d7a392e263428d3c09d69 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/server_banner.js    | 91 ++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 app/javascript/flavours/glitch/components/server_banner.js

(limited to 'app/javascript/flavours/glitch/components/server_banner.js')

diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js
new file mode 100644
index 000000000..e29876d4b
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/server_banner.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { domain } from 'flavours/glitch/util/initial_state';
+import { fetchServer } from 'flavours/glitch/actions/server';
+import { connect } from 'react-redux';
+import Account from 'flavours/glitch/containers/account_container';
+import ShortNumber from 'flavours/glitch/components/short_number';
+import Skeleton from 'flavours/glitch/components/skeleton';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
+});
+
+const mapStateToProps = state => ({
+  server: state.get('server'),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class ServerBanner extends React.PureComponent {
+
+  static propTypes = {
+    server: PropTypes.object,
+    dispatch: PropTypes.func,
+    intl: PropTypes.object,
+  };
+
+  componentDidMount () {
+    const { dispatch } = this.props;
+    dispatch(fetchServer());
+  }
+
+  render () {
+    const { server, intl } = this.props;
+    const isLoading = server.get('isLoading');
+
+    return (
+      <div className='server-banner'>
+        <div className='server-banner__introduction'>
+          <FormattedMessage id='server_banner.introduction' defaultMessage='{domain} is part of the decentralized social network powered by {mastodon}.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
+        </div>
+
+        <img src={server.get('thumbnail')} alt={server.get('title')} className='server-banner__hero' />
+
+        <div className='server-banner__description'>
+          {isLoading ? (
+            <>
+              <Skeleton width='100%' />
+              <br />
+              <Skeleton width='100%' />
+              <br />
+              <Skeleton width='70%' />
+            </>
+          ) : server.get('description')}
+        </div>
+
+        <div className='server-banner__meta'>
+          <div className='server-banner__meta__column'>
+            <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
+
+            <Account id={server.getIn(['contact', 'account', 'id'])} />
+          </div>
+
+          <div className='server-banner__meta__column'>
+            <h4><FormattedMessage id='server_banner.server_stats' defaultMessage='Server stats:' /></h4>
+
+            {isLoading ? (
+              <>
+                <strong className='server-banner__number'><Skeleton width='10ch' /></strong>
+                <br />
+                <span className='server-banner__number-label'><Skeleton width='5ch' /></span>
+              </>
+            ) : (
+              <>
+                <strong className='server-banner__number'><ShortNumber value={server.getIn(['usage', 'users', 'active_month'])} /></strong>
+                <br />
+                <span className='server-banner__number-label' title={intl.formatMessage(messages.aboutActiveUsers)}><FormattedMessage id='server_banner.active_users' defaultMessage='active users' /></span>
+              </>
+            )}
+          </div>
+        </div>
+
+        <hr className='spacer' />
+
+        <a className='button button--block button-secondary' href='/about/more' target='_blank'><FormattedMessage id='server_banner.learn_more' defaultMessage='Learn more' /></a>
+      </div>
+    );
+  }
+
+}
-- 
cgit 


From 26b687160bc263f5867fd18ae60f2541138b0277 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Tue, 11 Oct 2022 10:17:04 +0200
Subject: Move flavours/glitch/util/initial_state to
 flavours/glitch/initial_state

---
 .../flavours/glitch/actions/local_settings.js      |  2 +-
 .../flavours/glitch/actions/notifications.js       |  2 +-
 .../flavours/glitch/actions/pin_statuses.js        |  2 +-
 .../flavours/glitch/actions/timelines.js           |  2 +-
 .../flavours/glitch/components/account.js          |  2 +-
 .../flavours/glitch/components/animated_number.js  |  2 +-
 .../flavours/glitch/components/avatar.js           |  2 +-
 .../flavours/glitch/components/avatar_composite.js |  2 +-
 .../flavours/glitch/components/avatar_overlay.js   |  2 +-
 .../flavours/glitch/components/display_name.js     |  2 +-
 .../flavours/glitch/components/error_boundary.js   |  2 +-
 .../flavours/glitch/components/media_gallery.js    |  2 +-
 .../flavours/glitch/components/server_banner.js    |  2 +-
 .../flavours/glitch/components/status.js           |  2 +-
 .../glitch/components/status_action_bar.js         |  2 +-
 .../flavours/glitch/components/status_content.js   |  2 +-
 .../flavours/glitch/components/status_icons.js     |  2 +-
 .../flavours/glitch/components/status_prepend.js   |  2 +-
 .../glitch/containers/account_container.js         |  2 +-
 .../glitch/containers/compose_container.js         |  2 +-
 .../flavours/glitch/containers/mastodon.js         |  2 +-
 .../flavours/glitch/containers/status_container.js |  2 +-
 .../glitch/containers/timeline_container.js        |  2 +-
 .../features/account/components/action_bar.js      |  2 +-
 .../glitch/features/account/components/header.js   |  2 +-
 .../account_gallery/components/media_item.js       |  2 +-
 .../containers/header_container.js                 |  2 +-
 .../flavours/glitch/features/audio/index.js        |  2 +-
 .../glitch/features/community_timeline/index.js    |  2 +-
 .../features/compose/components/compose_form.js    |  2 +-
 .../compose/components/language_dropdown.js        |  2 +-
 .../glitch/features/compose/components/options.js  |  2 +-
 .../features/compose/components/poll_form.js       |  2 +-
 .../features/compose/components/publisher.js       |  2 +-
 .../glitch/features/compose/components/search.js   |  2 +-
 .../features/compose/components/search_results.js  |  2 +-
 .../compose/containers/navigation_container.js     |  2 +-
 .../compose/containers/warning_container.js        |  2 +-
 .../flavours/glitch/features/compose/index.js      |  2 +-
 .../direct_timeline/components/conversation.js     |  2 +-
 .../features/directory/components/account_card.js  |  2 +-
 .../flavours/glitch/features/directory/index.js    |  2 +-
 .../flavours/glitch/features/emoji_picker/index.js |  2 +-
 .../flavours/glitch/features/explore/index.js      |  4 +-
 .../flavours/glitch/features/explore/results.js    |  2 +-
 .../glitch/features/follow_requests/index.js       |  2 +-
 .../getting_started/components/announcements.js    |  4 +-
 .../glitch/features/getting_started/index.js       |  2 +-
 .../glitch/features/hashtag_timeline/index.js      |  2 +-
 .../glitch/features/home_timeline/index.js         |  2 +-
 .../glitch/features/interaction_modal/index.js     |  2 +-
 .../glitch/features/local_settings/page/index.js   |  2 +-
 .../glitch/features/notifications/index.js         |  2 +-
 .../picture_in_picture/components/footer.js        |  2 +-
 .../glitch/features/public_timeline/index.js       |  2 +-
 .../features/status/components/action_bar.js       |  2 +-
 .../glitch/features/status/components/card.js      |  2 +-
 .../status/containers/detailed_status_container.js |  2 +-
 .../flavours/glitch/features/status/index.js       |  2 +-
 .../features/subscribed_languages_modal/index.js   |  2 +-
 .../glitch/features/ui/components/columns_area.js  |  2 +-
 .../features/ui/components/focal_point_modal.js    |  2 +-
 .../glitch/features/ui/components/link_footer.js   |  2 +-
 .../glitch/features/ui/components/media_modal.js   |  2 +-
 .../features/ui/components/navigation_panel.js     |  2 +-
 .../features/ui/components/onboarding_modal.js     |  2 +-
 .../features/ui/components/sign_in_banner.js       |  2 +-
 .../ui/containers/status_list_container.js         |  2 +-
 .../flavours/glitch/features/ui/index.js           |  2 +-
 .../flavours/glitch/features/video/index.js        |  2 +-
 app/javascript/flavours/glitch/initial_state.js    | 44 ++++++++++++++++++++++
 app/javascript/flavours/glitch/reducers/compose.js |  2 +-
 app/javascript/flavours/glitch/selectors/index.js  |  2 +-
 .../flavours/glitch/util/content_warning.js        |  2 +-
 app/javascript/flavours/glitch/util/emoji/index.js |  2 +-
 .../flavours/glitch/util/initial_state.js          | 44 ----------------------
 app/javascript/flavours/glitch/util/is_mobile.js   |  2 +-
 .../flavours/glitch/util/optional_motion.js        |  2 +-
 78 files changed, 122 insertions(+), 122 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/initial_state.js
 delete mode 100644 app/javascript/flavours/glitch/util/initial_state.js

(limited to 'app/javascript/flavours/glitch/components/server_banner.js')

diff --git a/app/javascript/flavours/glitch/actions/local_settings.js b/app/javascript/flavours/glitch/actions/local_settings.js
index 856674eb3..a4a928611 100644
--- a/app/javascript/flavours/glitch/actions/local_settings.js
+++ b/app/javascript/flavours/glitch/actions/local_settings.js
@@ -1,4 +1,4 @@
-import { expandSpoilers, disableSwiping } from 'flavours/glitch/util/initial_state';
+import { expandSpoilers, disableSwiping } from 'flavours/glitch/initial_state';
 import { openModal } from './modal';
 
 export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js
index 4581ebc36..4cabd3f4f 100644
--- a/app/javascript/flavours/glitch/actions/notifications.js
+++ b/app/javascript/flavours/glitch/actions/notifications.js
@@ -12,7 +12,7 @@ import { saveSettings } from './settings';
 import { defineMessages } from 'react-intl';
 import { List as ImmutableList } from 'immutable';
 import { unescapeHTML } from 'flavours/glitch/util/html';
-import { usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
+import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
 import compareId from 'flavours/glitch/util/compare_id';
 import { requestNotificationPermission } from 'flavours/glitch/util/notifications';
 
diff --git a/app/javascript/flavours/glitch/actions/pin_statuses.js b/app/javascript/flavours/glitch/actions/pin_statuses.js
index 77dfb9c7f..faed73686 100644
--- a/app/javascript/flavours/glitch/actions/pin_statuses.js
+++ b/app/javascript/flavours/glitch/actions/pin_statuses.js
@@ -5,7 +5,7 @@ export const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST';
 export const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS';
 export const PINNED_STATUSES_FETCH_FAIL = 'PINNED_STATUSES_FETCH_FAIL';
 
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 
 export function fetchPinnedStatuses() {
   return (dispatch, getState) => {
diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js
index 0d6f844b3..4e4adbe04 100644
--- a/app/javascript/flavours/glitch/actions/timelines.js
+++ b/app/javascript/flavours/glitch/actions/timelines.js
@@ -3,7 +3,7 @@ import { submitMarkers } from './markers';
 import api, { getLinks } from 'flavours/glitch/util/api';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import compareId from 'flavours/glitch/util/compare_id';
-import { me, usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
+import { me, usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
 import { toServerSideType } from 'flavours/glitch/util/filters';
 
 export const TIMELINE_UPDATE  = 'TIMELINE_UPDATE';
diff --git a/app/javascript/flavours/glitch/components/account.js b/app/javascript/flavours/glitch/components/account.js
index 24d3f65ef..8bfc8e9dc 100644
--- a/app/javascript/flavours/glitch/components/account.js
+++ b/app/javascript/flavours/glitch/components/account.js
@@ -7,7 +7,7 @@ import Permalink from './permalink';
 import IconButton from './icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 import RelativeTimestamp from './relative_timestamp';
 import Skeleton from 'flavours/glitch/components/skeleton';
 
diff --git a/app/javascript/flavours/glitch/components/animated_number.js b/app/javascript/flavours/glitch/components/animated_number.js
index 3cc5173dd..4619aad58 100644
--- a/app/javascript/flavours/glitch/components/animated_number.js
+++ b/app/javascript/flavours/glitch/components/animated_number.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedNumber } from 'react-intl';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
-import { reduceMotion } from 'flavours/glitch/util/initial_state';
+import { reduceMotion } from 'flavours/glitch/initial_state';
 
 const obfuscatedCount = count => {
   if (count < 0) {
diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js
index 6d53a5298..ce91d401d 100644
--- a/app/javascript/flavours/glitch/components/avatar.js
+++ b/app/javascript/flavours/glitch/components/avatar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
 import classNames from 'classnames';
 
 export default class Avatar extends React.PureComponent {
diff --git a/app/javascript/flavours/glitch/components/avatar_composite.js b/app/javascript/flavours/glitch/components/avatar_composite.js
index e30dfe68a..c0ce7761d 100644
--- a/app/javascript/flavours/glitch/components/avatar_composite.js
+++ b/app/javascript/flavours/glitch/components/avatar_composite.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
 
 export default class AvatarComposite extends React.PureComponent {
 
diff --git a/app/javascript/flavours/glitch/components/avatar_overlay.js b/app/javascript/flavours/glitch/components/avatar_overlay.js
index 23db5182b..01dec587a 100644
--- a/app/javascript/flavours/glitch/components/avatar_overlay.js
+++ b/app/javascript/flavours/glitch/components/avatar_overlay.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
 
 export default class AvatarOverlay extends React.PureComponent {
 
diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js
index 7cb0c9133..1c2297578 100644
--- a/app/javascript/flavours/glitch/components/display_name.js
+++ b/app/javascript/flavours/glitch/components/display_name.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
 import Skeleton from 'flavours/glitch/components/skeleton';
 
 export default class DisplayName extends React.PureComponent {
diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js
index 4537bde1d..e80b6f654 100644
--- a/app/javascript/flavours/glitch/components/error_boundary.js
+++ b/app/javascript/flavours/glitch/components/error_boundary.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { source_url } from 'flavours/glitch/util/initial_state';
+import { source_url } from 'flavours/glitch/initial_state';
 import { preferencesLink } from 'flavours/glitch/util/backend_links';
 import StackTrace from 'stacktrace-js';
 
diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index 68195ea80..ee05681f8 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -6,7 +6,7 @@ import IconButton from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { isIOS } from 'flavours/glitch/util/is_mobile';
 import classNames from 'classnames';
-import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 import { debounce } from 'lodash';
 import Blurhash from 'flavours/glitch/components/blurhash';
 
diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js
index e29876d4b..16360ec56 100644
--- a/app/javascript/flavours/glitch/components/server_banner.js
+++ b/app/javascript/flavours/glitch/components/server_banner.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { domain } from 'flavours/glitch/util/initial_state';
+import { domain } from 'flavours/glitch/initial_state';
 import { fetchServer } from 'flavours/glitch/actions/server';
 import { connect } from 'react-redux';
 import Account from 'flavours/glitch/containers/account_container';
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 9b656b2b3..f1bd49e15 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -16,7 +16,7 @@ import NotificationOverlayContainer from 'flavours/glitch/features/notifications
 import classNames from 'classnames';
 import { autoUnfoldCW } from 'flavours/glitch/util/content_warning';
 import PollContainer from 'flavours/glitch/containers/poll_container';
-import { displayMedia } from 'flavours/glitch/util/initial_state';
+import { displayMedia } from 'flavours/glitch/initial_state';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 
 // We use the component (and not the container) since we do not want
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 4e5e5121a..f3afc141b 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -5,7 +5,7 @@ import IconButton from './icon_button';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 import RelativeTimestamp from './relative_timestamp';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/util/backend_links';
 import classNames from 'classnames';
diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
index 39891da4f..c1d64a99c 100644
--- a/app/javascript/flavours/glitch/components/status_content.js
+++ b/app/javascript/flavours/glitch/components/status_content.js
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import Permalink from './permalink';
 import classnames from 'classnames';
 import Icon from 'flavours/glitch/components/icon';
-import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/util/idna';
 
 const textMatchesTarget = (text, origin, host) => {
diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js
index 2226aaef2..71ffb2e56 100644
--- a/app/javascript/flavours/glitch/components/status_icons.js
+++ b/app/javascript/flavours/glitch/components/status_icons.js
@@ -8,7 +8,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import IconButton from './icon_button';
 import VisibilityIcon from './status_visibility_icon';
 import Icon from 'flavours/glitch/components/icon';
-import { languages } from 'flavours/glitch/util/initial_state';
+import { languages } from 'flavours/glitch/initial_state';
 
 //  Messages for use with internationalization stuff.
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/components/status_prepend.js b/app/javascript/flavours/glitch/components/status_prepend.js
index d85009362..f82533062 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.js
+++ b/app/javascript/flavours/glitch/components/status_prepend.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import Icon from 'flavours/glitch/components/icon';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 
 export default class StatusPrepend extends React.PureComponent {
 
diff --git a/app/javascript/flavours/glitch/containers/account_container.js b/app/javascript/flavours/glitch/containers/account_container.js
index bc84d299b..5b57d730f 100644
--- a/app/javascript/flavours/glitch/containers/account_container.js
+++ b/app/javascript/flavours/glitch/containers/account_container.js
@@ -13,7 +13,7 @@ import {
 } from 'flavours/glitch/actions/accounts';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { initMuteModal } from 'flavours/glitch/actions/mutes';
-import { unfollowModal } from 'flavours/glitch/util/initial_state';
+import { unfollowModal } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
diff --git a/app/javascript/flavours/glitch/containers/compose_container.js b/app/javascript/flavours/glitch/containers/compose_container.js
index 74c411b7c..1e49b89a0 100644
--- a/app/javascript/flavours/glitch/containers/compose_container.js
+++ b/app/javascript/flavours/glitch/containers/compose_container.js
@@ -6,7 +6,7 @@ import { hydrateStore } from 'flavours/glitch/actions/store';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { getLocale } from 'mastodon/locales';
 import Compose from 'flavours/glitch/features/standalone/compose';
-import initialState from 'flavours/glitch/util/initial_state';
+import initialState from 'flavours/glitch/initial_state';
 import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
 
 const { localeData, messages } = getLocale();
diff --git a/app/javascript/flavours/glitch/containers/mastodon.js b/app/javascript/flavours/glitch/containers/mastodon.js
index a6ec5845d..bc0311293 100644
--- a/app/javascript/flavours/glitch/containers/mastodon.js
+++ b/app/javascript/flavours/glitch/containers/mastodon.js
@@ -11,7 +11,7 @@ import { connectUserStream } from 'flavours/glitch/actions/streaming';
 import { checkDeprecatedLocalSettings } from 'flavours/glitch/actions/local_settings';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { getLocale } from 'locales';
-import initialState from 'flavours/glitch/util/initial_state';
+import initialState from 'flavours/glitch/initial_state';
 import ErrorBoundary from 'flavours/glitch/components/error_boundary';
 
 const { localeData, messages } = getLocale();
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index a1b4c57c6..8c32c436e 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -36,7 +36,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { deployPictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
 import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state';
+import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
 import { filterEditLink } from 'flavours/glitch/util/backend_links';
 import { showAlertForError } from '../actions/alerts';
 import AccountContainer from 'flavours/glitch/containers/account_container';
diff --git a/app/javascript/flavours/glitch/containers/timeline_container.js b/app/javascript/flavours/glitch/containers/timeline_container.js
index b61dc8dd7..838bcd390 100644
--- a/app/javascript/flavours/glitch/containers/timeline_container.js
+++ b/app/javascript/flavours/glitch/containers/timeline_container.js
@@ -9,7 +9,7 @@ import { getLocale } from 'mastodon/locales';
 import PublicTimeline from 'flavours/glitch/features/standalone/public_timeline';
 import HashtagTimeline from 'flavours/glitch/features/standalone/hashtag_timeline';
 import ModalContainer from 'flavours/glitch/features/ui/containers/modal_container';
-import initialState from 'flavours/glitch/util/initial_state';
+import initialState from 'flavours/glitch/initial_state';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
diff --git a/app/javascript/flavours/glitch/features/account/components/action_bar.js b/app/javascript/flavours/glitch/features/account/components/action_bar.js
index 23120d57e..0f07ea2c2 100644
--- a/app/javascript/flavours/glitch/features/account/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/account/components/action_bar.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { NavLink } from 'react-router-dom';
 import { injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
-import { me, isStaff } from 'flavours/glitch/util/initial_state';
+import { me, isStaff } from 'flavours/glitch/initial_state';
 import { profileLink, accountAdminLink } from 'flavours/glitch/util/backend_links';
 import Icon from 'flavours/glitch/components/icon';
 
diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js
index fc80446b1..ffaa44ba6 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.js
+++ b/app/javascript/flavours/glitch/features/account/components/header.js
@@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { autoPlayGif, me, title, domain } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif, me, title, domain } from 'flavours/glitch/initial_state';
 import { preferencesLink, profileLink, accountAdminLink } from 'flavours/glitch/util/backend_links';
 import classNames from 'classnames';
 import Icon from 'flavours/glitch/components/icon';
diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js
index 7457980d2..e3ed47fcc 100644
--- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js
+++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js
@@ -1,7 +1,7 @@
 import Blurhash from 'flavours/glitch/components/blurhash';
 import classNames from 'classnames';
 import Icon from 'flavours/glitch/components/icon';
-import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 import { isIOS } from 'flavours/glitch/util/is_mobile';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js
index 659dbc3fa..c1577e170 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js
+++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.js
@@ -21,7 +21,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { blockDomain, unblockDomain } from 'flavours/glitch/actions/domain_blocks';
 import { initEditAccountNote } from 'flavours/glitch/actions/account_notes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { unfollowModal } from 'flavours/glitch/util/initial_state';
+import { unfollowModal } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
diff --git a/app/javascript/flavours/glitch/features/audio/index.js b/app/javascript/flavours/glitch/features/audio/index.js
index 8fa64342e..014a0a213 100644
--- a/app/javascript/flavours/glitch/features/audio/index.js
+++ b/app/javascript/flavours/glitch/features/audio/index.js
@@ -8,7 +8,7 @@ import { throttle } from 'lodash';
 import { getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video';
 import { debounce } from 'lodash';
 import Visualizer from './visualizer';
-import { displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state';
+import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 import Blurhash from 'flavours/glitch/components/blurhash';
 import { is } from 'immutable';
 
diff --git a/app/javascript/flavours/glitch/features/community_timeline/index.js b/app/javascript/flavours/glitch/features/community_timeline/index.js
index b921e22e9..5ee46ca3b 100644
--- a/app/javascript/flavours/glitch/features/community_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/community_timeline/index.js
@@ -10,7 +10,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Local timeline' },
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index b03bc34b8..76113beac 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -15,7 +15,7 @@ import { countableText } from 'flavours/glitch/util/counter';
 import OptionsContainer from '../containers/options_container';
 import Publisher from './publisher';
 import TextareaIcons from './textarea_icons';
-import { maxChars } from 'flavours/glitch/util/initial_state';
+import { maxChars } from 'flavours/glitch/initial_state';
 import CharacterCounter from './character_counter';
 import { length } from 'stringz';
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js b/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js
index 035b0c0c3..a51210108 100644
--- a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js
+++ b/app/javascript/flavours/glitch/features/compose/components/language_dropdown.js
@@ -7,7 +7,7 @@ import Motion from 'flavours/glitch/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import classNames from 'classnames';
-import { languages as preloadedLanguages } from 'flavours/glitch/util/initial_state';
+import { languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { loupeIcon, deleteIcon } from 'flavours/glitch/util/icons';
 import fuzzysort from 'fuzzysort';
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js
index f005dbdd1..0170ac49e 100644
--- a/app/javascript/flavours/glitch/features/compose/components/options.js
+++ b/app/javascript/flavours/glitch/features/compose/components/options.js
@@ -17,7 +17,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Utils.
 import Motion from 'flavours/glitch/util/optional_motion';
-import { pollLimits } from 'flavours/glitch/util/initial_state';
+import { pollLimits } from 'flavours/glitch/initial_state';
 
 //  Messages.
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/compose/components/poll_form.js b/app/javascript/flavours/glitch/features/compose/components/poll_form.js
index e4b5104f3..d5edccff3 100644
--- a/app/javascript/flavours/glitch/features/compose/components/poll_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/poll_form.js
@@ -7,7 +7,7 @@ import IconButton from 'flavours/glitch/components/icon_button';
 import Icon from 'flavours/glitch/components/icon';
 import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
 import classNames from 'classnames';
-import { pollLimits } from 'flavours/glitch/util/initial_state';
+import { pollLimits } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js
index e2498bcad..50baad065 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.js
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js
@@ -11,7 +11,7 @@ import Button from 'flavours/glitch/components/button';
 import Icon from 'flavours/glitch/components/icon';
 
 //  Utils.
-import { maxChars } from 'flavours/glitch/util/initial_state';
+import { maxChars } from 'flavours/glitch/initial_state';
 
 //  Messages.
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/compose/components/search.js
index 12d839637..827305ccd 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.js
+++ b/app/javascript/flavours/glitch/features/compose/components/search.js
@@ -16,7 +16,7 @@ import Icon from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { focusRoot } from 'flavours/glitch/util/dom_helpers';
-import { searchEnabled } from 'flavours/glitch/util/initial_state';
+import { searchEnabled } from 'flavours/glitch/initial_state';
 import Motion from 'flavours/glitch/util/optional_motion';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.js b/app/javascript/flavours/glitch/features/compose/components/search_results.js
index e82ee2ca2..c2178702c 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search_results.js
+++ b/app/javascript/flavours/glitch/features/compose/components/search_results.js
@@ -7,7 +7,7 @@ import StatusContainer from 'flavours/glitch/containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
 import Icon from 'flavours/glitch/components/icon';
-import { searchEnabled } from 'flavours/glitch/util/initial_state';
+import { searchEnabled } from 'flavours/glitch/initial_state';
 import LoadMore from 'flavours/glitch/components/load_more';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js b/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js
index eb630ffbb..0e1400261 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js
@@ -1,6 +1,6 @@
 import { connect }   from 'react-redux';
 import NavigationBar from '../components/navigation_bar';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 
 const mapStateToProps = state => {
   return {
diff --git a/app/javascript/flavours/glitch/features/compose/containers/warning_container.js b/app/javascript/flavours/glitch/features/compose/containers/warning_container.js
index 5fccaa442..d440407dc 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/warning_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/warning_container.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import Warning from '../components/warning';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 import { profileLink, termsLink } from 'flavours/glitch/util/backend_links';
 
 const buildHashtagRE = () => {
diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js
index b9a8e0245..10b66cd95 100644
--- a/app/javascript/flavours/glitch/features/compose/index.js
+++ b/app/javascript/flavours/glitch/features/compose/index.js
@@ -11,7 +11,7 @@ import SearchContainer from './containers/search_container';
 import Motion from 'flavours/glitch/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import SearchResultsContainer from './containers/search_results_container';
-import { me, mascot } from 'flavours/glitch/util/initial_state';
+import { me, mascot } from 'flavours/glitch/initial_state';
 import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
 import HeaderContainer from './containers/header_container';
 
diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js
index 7107c9db3..00d9fdcd0 100644
--- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js
+++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js
@@ -11,7 +11,7 @@ import Permalink from 'flavours/glitch/components/permalink';
 import IconButton from 'flavours/glitch/components/icon_button';
 import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
 import { HotKeys } from 'react-hotkeys';
-import { autoPlayGif } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
 import classNames from 'classnames';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.js b/app/javascript/flavours/glitch/features/directory/components/account_card.js
index 218208c10..b6785a5f9 100644
--- a/app/javascript/flavours/glitch/features/directory/components/account_card.js
+++ b/app/javascript/flavours/glitch/features/directory/components/account_card.js
@@ -10,7 +10,7 @@ import Permalink from 'flavours/glitch/components/permalink';
 import IconButton from 'flavours/glitch/components/icon_button';
 import Button from 'flavours/glitch/components/button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/initial_state';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import {
   followAccount,
diff --git a/app/javascript/flavours/glitch/features/directory/index.js b/app/javascript/flavours/glitch/features/directory/index.js
index 1aa8a330d..dce8fa4e7 100644
--- a/app/javascript/flavours/glitch/features/directory/index.js
+++ b/app/javascript/flavours/glitch/features/directory/index.js
@@ -13,7 +13,7 @@ import RadioButton from 'flavours/glitch/components/radio_button';
 import LoadMore from 'flavours/glitch/components/load_more';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js
index 5de9fe107..e54fa2007 100644
--- a/app/javascript/flavours/glitch/features/emoji_picker/index.js
+++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js
@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { buildCustomEmojis, categoriesFromEmojis } from 'flavours/glitch/util/emoji';
-import { useSystemEmojiFont } from 'flavours/glitch/util/initial_state';
+import { useSystemEmojiFont } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/util/config';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/explore/index.js b/app/javascript/flavours/glitch/features/explore/index.js
index 388123c38..f37793732 100644
--- a/app/javascript/flavours/glitch/features/explore/index.js
+++ b/app/javascript/flavours/glitch/features/explore/index.js
@@ -11,9 +11,9 @@ import Statuses from './statuses';
 import Suggestions from './suggestions';
 import Search from 'flavours/glitch/features/compose/containers/search_container';
 import SearchResults from './results';
-import { showTrends } from 'flavours/glitch/util/initial_state';
+import { showTrends } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   title: { id: 'explore.title', defaultMessage: 'Explore' },
diff --git a/app/javascript/flavours/glitch/features/explore/results.js b/app/javascript/flavours/glitch/features/explore/results.js
index 3f43b9ee1..e37379686 100644
--- a/app/javascript/flavours/glitch/features/explore/results.js
+++ b/app/javascript/flavours/glitch/features/explore/results.js
@@ -10,7 +10,7 @@ import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'
 import { List as ImmutableList } from 'immutable';
 import LoadMore from 'flavours/glitch/components/load_more';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/follow_requests/index.js b/app/javascript/flavours/glitch/features/follow_requests/index.js
index 36a57d1d6..47ca1e1bf 100644
--- a/app/javascript/flavours/glitch/features/follow_requests/index.js
+++ b/app/javascript/flavours/glitch/features/follow_requests/index.js
@@ -11,7 +11,7 @@ import { fetchFollowRequests, expandFollowRequests } from 'flavours/glitch/actio
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
index f7097e2ec..a58282dad 100644
--- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
+++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import IconButton from 'flavours/glitch/components/icon_button';
 import Icon from 'flavours/glitch/components/icon';
 import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
-import { autoPlayGif, reduceMotion, disableSwiping } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif, reduceMotion, disableSwiping } from 'flavours/glitch/initial_state';
 import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
-import { mascot } from 'flavours/glitch/util/initial_state';
+import { mascot } from 'flavours/glitch/initial_state';
 import unicodeMapping from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light';
 import classNames from 'classnames';
 import EmojiPickerDropdown from 'flavours/glitch/features/emoji_picker';
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js
index 8b6a617ff..41ba074ef 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.js
+++ b/app/javascript/flavours/glitch/features/getting_started/index.js
@@ -8,7 +8,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me, showTrends } from 'flavours/glitch/util/initial_state';
+import { me, showTrends } from 'flavours/glitch/initial_state';
 import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
 import { List as ImmutableList } from 'immutable';
 import { createSelector } from 'reselect';
diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
index 38dda85b2..5e098514a 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
@@ -14,7 +14,7 @@ import { isEqual } from 'lodash';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags';
 import Icon from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js
index 7ca28da35..86aaa0258 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/home_timeline/index.js
@@ -15,7 +15,7 @@ import classNames from 'classnames';
 import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
 import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.js b/app/javascript/flavours/glitch/features/interaction_modal/index.js
index d2260c4f0..5623f8a06 100644
--- a/app/javascript/flavours/glitch/features/interaction_modal/index.js
+++ b/app/javascript/flavours/glitch/features/interaction_modal/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { registrationsOpen } from 'flavours/glitch/util/initial_state';
+import { registrationsOpen } from 'flavours/glitch/initial_state';
 import { connect } from 'react-redux';
 import Icon from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js
index a21c90b4b..96111abe8 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js
@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 
 //  Our imports
-import { expandSpoilers, disableSwiping } from 'flavours/glitch/util/initial_state';
+import { expandSpoilers, disableSwiping } from 'flavours/glitch/initial_state';
 import { preferenceLink } from 'flavours/glitch/util/backend_links';
 import LocalSettingsPageItem from './item';
 import DeprecatedLocalSettingsPageItem from './deprecated_item';
diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js
index 6cfafb61e..76972ecea 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@@ -30,7 +30,7 @@ import compareId from 'flavours/glitch/util/compare_id';
 import NotificationsPermissionBanner from './components/notifications_permission_banner';
 import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 
 import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
 
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js
index 2a5adf71d..86e24e38f 100644
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js
@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import IconButton from 'flavours/glitch/components/icon_button';
 import classNames from 'classnames';
-import { me, boostModal } from 'flavours/glitch/util/initial_state';
+import { me, boostModal } from 'flavours/glitch/initial_state';
 import { defineMessages, injectIntl } from 'react-intl';
 import { replyCompose } from 'flavours/glitch/actions/compose';
 import { reblog, favourite, unreblog, unfavourite } from 'flavours/glitch/actions/interactions';
diff --git a/app/javascript/flavours/glitch/features/public_timeline/index.js b/app/javascript/flavours/glitch/features/public_timeline/index.js
index 6e1fb8ced..aa70acf15 100644
--- a/app/javascript/flavours/glitch/features/public_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/public_timeline/index.js
@@ -10,7 +10,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectPublicStream } from 'flavours/glitch/actions/streaming';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/util/initial_state';
+import { title } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Federated timeline' },
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index 75ad462f0..6387911e9 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -4,7 +4,7 @@ import IconButton from 'flavours/glitch/components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/util/backend_links';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS } from 'flavours/glitch/permissions';
diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js
index 0ca2508e7..0149cd21e 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.js
+++ b/app/javascript/flavours/glitch/features/status/components/card.js
@@ -7,7 +7,7 @@ import punycode from 'punycode';
 import classnames from 'classnames';
 import { decode as decodeIDNA } from 'flavours/glitch/util/idna';
 import Icon from 'flavours/glitch/components/icon';
-import { useBlurhash } from 'flavours/glitch/util/initial_state';
+import { useBlurhash } from 'flavours/glitch/initial_state';
 import Blurhash from 'flavours/glitch/components/blurhash';
 import { debounce } from 'lodash';
 
diff --git a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
index 40e186569..e5e065987 100644
--- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
+++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
@@ -27,7 +27,7 @@ import { initReport } from 'flavours/glitch/actions/reports';
 import { initBoostModal } from 'flavours/glitch/actions/boosts';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { defineMessages, injectIntl } from 'react-intl';
-import { boostModal, deleteModal } from 'flavours/glitch/util/initial_state';
+import { boostModal, deleteModal } from 'flavours/glitch/initial_state';
 import { showAlertForError } from 'flavours/glitch/actions/alerts';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index 8e783af80..4d8a8a361 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -47,7 +47,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { HotKeys } from 'react-hotkeys';
-import { boostModal, favouriteModal, deleteModal, title } from 'flavours/glitch/util/initial_state';
+import { boostModal, favouriteModal, deleteModal, title } from 'flavours/glitch/initial_state';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen';
 import { autoUnfoldCW } from 'flavours/glitch/util/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
diff --git a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.js b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.js
index 3047b434c..fa69d82a4 100644
--- a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.js
+++ b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.js
@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { is, List as ImmutableList, Set as ImmutableSet } from 'immutable';
-import { languages as preloadedLanguages } from 'flavours/glitch/util/initial_state';
+import { languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import Option from 'flavours/glitch/features/report/components/option';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import IconButton from 'flavours/glitch/components/icon_button';
diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
index 5f5018105..eccaf6f6d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js
+++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
@@ -8,7 +8,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import TabsBar, { links, getIndex, getLink } from './tabs_bar';
 import { Link } from 'react-router-dom';
 
-import { disableSwiping } from 'flavours/glitch/util/initial_state';
+import { disableSwiping } from 'flavours/glitch/initial_state';
 
 import BundleContainer from '../containers/bundle_container';
 import ColumnLoading from './column_loading';
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
index 5a4baa5a1..2e36681db 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
@@ -17,7 +17,7 @@ import CharacterCounter from 'flavours/glitch/features/compose/components/charac
 import { length } from 'stringz';
 import { Tesseract as fetchTesseract } from 'flavours/glitch/util/async-components';
 import GIFV from 'flavours/glitch/components/gifv';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js';
 // eslint-disable-next-line import/extensions
diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js
index 6f4a8c2de..a92bc8855 100644
--- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js
+++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
-import { limitedFederationMode, version, repository, source_url, profile_directory as profileDirectory } from 'flavours/glitch/util/initial_state';
+import { limitedFederationMode, version, repository, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state';
 import { signOutLink, securityLink, privacyPolicyLink } from 'flavours/glitch/util/backend_links';
 import { logOut } from 'flavours/glitch/util/log_out';
 import { openModal } from 'flavours/glitch/actions/modal';
diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
index baa5ff275..ec3af857d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
@@ -12,7 +12,7 @@ import Icon from 'flavours/glitch/components/icon';
 import GIFV from 'flavours/glitch/components/gifv';
 import Footer from 'flavours/glitch/features/picture_in_picture/components/footer';
 import { getAverageFromBlurhash } from 'flavours/glitch/blurhash';
-import { disableSwiping } from 'flavours/glitch/util/initial_state';
+import { disableSwiping } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
index 453276775..a3bcb3aac 100644
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { NavLink, Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import Icon from 'flavours/glitch/components/icon';
-import { showTrends } from 'flavours/glitch/util/initial_state';
+import { showTrends } from 'flavours/glitch/initial_state';
 import { preferencesLink, relationshipsLink } from 'flavours/glitch/util/backend_links';
 import NotificationsCounterIcon from './notifications_counter_icon';
 import FollowRequestsNavLink from './follow_requests_nav_link';
diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js
index e7be62ad8..97932ada1 100644
--- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js
@@ -10,7 +10,7 @@ import ComposeForm from 'flavours/glitch/features/compose/components/compose_for
 import DrawerAccount from 'flavours/glitch/features/compose/components/navigation_bar';
 import Search from 'flavours/glitch/features/compose/components/search';
 import ColumnHeader from './column_header';
-import { me, source_url } from 'flavours/glitch/util/initial_state';
+import { me, source_url } from 'flavours/glitch/initial_state';
 
 const noop = () => { };
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js
index e08a1ea67..a935d7422 100644
--- a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js
+++ b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { registrationsOpen } from 'flavours/glitch/util/initial_state';
+import { registrationsOpen } from 'flavours/glitch/initial_state';
 
 const SignInBanner = () => (
   <div className='sign-in-banner'>
diff --git a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js
index 53c3b8f39..3cd0707f2 100644
--- a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js
+++ b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js
@@ -4,7 +4,7 @@ import { scrollTopTimeline, loadPending } from 'flavours/glitch/actions/timeline
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { createSelector } from 'reselect';
 import { debounce } from 'lodash';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 
 const getRegex = createSelector([
   (state, { regex }) => regex,
diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index 735623e3d..7eec20178 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -54,7 +54,7 @@ import {
   FollowRecommendations,
 } from 'flavours/glitch/util/async-components';
 import { HotKeys } from 'react-hotkeys';
-import { me, title } from 'flavours/glitch/util/initial_state';
+import { me, title } from 'flavours/glitch/initial_state';
 import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index 25c94bb2c..2964580c6 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -5,7 +5,7 @@ import { is } from 'immutable';
 import { throttle, debounce } from 'lodash';
 import classNames from 'classnames';
 import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
-import { displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state';
+import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 import Icon from 'flavours/glitch/components/icon';
 import Blurhash from 'flavours/glitch/components/blurhash';
 
diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js
new file mode 100644
index 000000000..99ee6bc69
--- /dev/null
+++ b/app/javascript/flavours/glitch/initial_state.js
@@ -0,0 +1,44 @@
+const element = document.getElementById('initial-state');
+const initialState = element && function () {
+  const result = JSON.parse(element.textContent);
+  try {
+    result.local_settings = JSON.parse(localStorage.getItem('mastodon-settings'));
+  } catch (e) {
+    result.local_settings = {};
+  }
+  return result;
+}();
+
+const getMeta = (prop) => initialState && initialState.meta && initialState.meta[prop];
+
+export const domain = getMeta('domain');
+export const reduceMotion = getMeta('reduce_motion');
+export const autoPlayGif = getMeta('auto_play_gif');
+export const displayMedia = getMeta('display_media') || (getMeta('display_sensitive_media') ? 'show_all' : 'default');
+export const expandSpoilers = getMeta('expand_spoilers');
+export const unfollowModal = getMeta('unfollow_modal');
+export const boostModal = getMeta('boost_modal');
+export const favouriteModal = getMeta('favourite_modal');
+export const deleteModal = getMeta('delete_modal');
+export const me = getMeta('me');
+export const searchEnabled = getMeta('search_enabled');
+export const maxChars = (initialState && initialState.max_toot_chars) || 500;
+export const pollLimits = (initialState && initialState.poll_limits);
+export const limitedFederationMode = getMeta('limited_federation_mode');
+export const registrationsOpen = getMeta('registrations_open');
+export const repository = getMeta('repository');
+export const source_url = getMeta('source_url');
+export const version = getMeta('version');
+export const mascot = getMeta('mascot');
+export const profile_directory = getMeta('profile_directory');
+export const defaultContentType = getMeta('default_content_type');
+export const forceSingleColumn = !getMeta('advanced_layout');
+export const useBlurhash = getMeta('use_blurhash');
+export const usePendingItems = getMeta('use_pending_items');
+export const useSystemEmojiFont = getMeta('system_emoji_font');
+export const showTrends = getMeta('trends');
+export const title = getMeta('title');
+export const disableSwiping = getMeta('disable_swiping');
+export const languages = initialState && initialState.languages;
+
+export default initialState;
diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js
index 2ef08b2a6..4e8a16176 100644
--- a/app/javascript/flavours/glitch/reducers/compose.js
+++ b/app/javascript/flavours/glitch/reducers/compose.js
@@ -55,7 +55,7 @@ import { REDRAFT } from 'flavours/glitch/actions/statuses';
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
 import uuid from 'flavours/glitch/util/uuid';
 import { privacyPreference } from 'flavours/glitch/util/privacy_preference';
-import { me, defaultContentType } from 'flavours/glitch/util/initial_state';
+import { me, defaultContentType } from 'flavours/glitch/initial_state';
 import { overwrite } from 'flavours/glitch/util/js_helpers';
 import { unescapeHTML } from 'flavours/glitch/util/html';
 import { recoverHashtags } from 'flavours/glitch/util/hashtag';
diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js
index 377805f16..c960ceb71 100644
--- a/app/javascript/flavours/glitch/selectors/index.js
+++ b/app/javascript/flavours/glitch/selectors/index.js
@@ -2,7 +2,7 @@ import escapeTextContentForBrowser from 'escape-html';
 import { createSelector } from 'reselect';
 import { List as ImmutableList } from 'immutable';
 import { toServerSideType } from 'flavours/glitch/util/filters';
-import { me } from 'flavours/glitch/util/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 
 const getAccountBase         = (state, id) => state.getIn(['accounts', id], null);
 const getAccountCounters     = (state, id) => state.getIn(['accounts_counters', id], null);
diff --git a/app/javascript/flavours/glitch/util/content_warning.js b/app/javascript/flavours/glitch/util/content_warning.js
index 383a34226..91d452baa 100644
--- a/app/javascript/flavours/glitch/util/content_warning.js
+++ b/app/javascript/flavours/glitch/util/content_warning.js
@@ -1,4 +1,4 @@
-import { expandSpoilers } from 'flavours/glitch/util/initial_state';
+import { expandSpoilers } from 'flavours/glitch/initial_state';
 
 function _autoUnfoldCW(spoiler_text, skip_unfold_regex) {
   if (!expandSpoilers)
diff --git a/app/javascript/flavours/glitch/util/emoji/index.js b/app/javascript/flavours/glitch/util/emoji/index.js
index 162946bbb..be8f4d069 100644
--- a/app/javascript/flavours/glitch/util/emoji/index.js
+++ b/app/javascript/flavours/glitch/util/emoji/index.js
@@ -1,4 +1,4 @@
-import { autoPlayGif, useSystemEmojiFont } from 'flavours/glitch/util/initial_state';
+import { autoPlayGif, useSystemEmojiFont } from 'flavours/glitch/initial_state';
 import unicodeMapping from './emoji_unicode_mapping_light';
 import { assetHost } from 'flavours/glitch/util/config';
 import Trie from 'substring-trie';
diff --git a/app/javascript/flavours/glitch/util/initial_state.js b/app/javascript/flavours/glitch/util/initial_state.js
deleted file mode 100644
index 99ee6bc69..000000000
--- a/app/javascript/flavours/glitch/util/initial_state.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const element = document.getElementById('initial-state');
-const initialState = element && function () {
-  const result = JSON.parse(element.textContent);
-  try {
-    result.local_settings = JSON.parse(localStorage.getItem('mastodon-settings'));
-  } catch (e) {
-    result.local_settings = {};
-  }
-  return result;
-}();
-
-const getMeta = (prop) => initialState && initialState.meta && initialState.meta[prop];
-
-export const domain = getMeta('domain');
-export const reduceMotion = getMeta('reduce_motion');
-export const autoPlayGif = getMeta('auto_play_gif');
-export const displayMedia = getMeta('display_media') || (getMeta('display_sensitive_media') ? 'show_all' : 'default');
-export const expandSpoilers = getMeta('expand_spoilers');
-export const unfollowModal = getMeta('unfollow_modal');
-export const boostModal = getMeta('boost_modal');
-export const favouriteModal = getMeta('favourite_modal');
-export const deleteModal = getMeta('delete_modal');
-export const me = getMeta('me');
-export const searchEnabled = getMeta('search_enabled');
-export const maxChars = (initialState && initialState.max_toot_chars) || 500;
-export const pollLimits = (initialState && initialState.poll_limits);
-export const limitedFederationMode = getMeta('limited_federation_mode');
-export const registrationsOpen = getMeta('registrations_open');
-export const repository = getMeta('repository');
-export const source_url = getMeta('source_url');
-export const version = getMeta('version');
-export const mascot = getMeta('mascot');
-export const profile_directory = getMeta('profile_directory');
-export const defaultContentType = getMeta('default_content_type');
-export const forceSingleColumn = !getMeta('advanced_layout');
-export const useBlurhash = getMeta('use_blurhash');
-export const usePendingItems = getMeta('use_pending_items');
-export const useSystemEmojiFont = getMeta('system_emoji_font');
-export const showTrends = getMeta('trends');
-export const title = getMeta('title');
-export const disableSwiping = getMeta('disable_swiping');
-export const languages = initialState && initialState.languages;
-
-export default initialState;
diff --git a/app/javascript/flavours/glitch/util/is_mobile.js b/app/javascript/flavours/glitch/util/is_mobile.js
index c8517f592..0d5663098 100644
--- a/app/javascript/flavours/glitch/util/is_mobile.js
+++ b/app/javascript/flavours/glitch/util/is_mobile.js
@@ -1,5 +1,5 @@
 import { supportsPassiveEvents } from 'detect-passive-events';
-import { forceSingleColumn } from 'flavours/glitch/util/initial_state';
+import { forceSingleColumn } from 'flavours/glitch/initial_state';
 
 const LAYOUT_BREAKPOINT = 630;
 
diff --git a/app/javascript/flavours/glitch/util/optional_motion.js b/app/javascript/flavours/glitch/util/optional_motion.js
index eecb6634e..a7fbe6310 100644
--- a/app/javascript/flavours/glitch/util/optional_motion.js
+++ b/app/javascript/flavours/glitch/util/optional_motion.js
@@ -1,4 +1,4 @@
-import { reduceMotion } from 'flavours/glitch/util/initial_state';
+import { reduceMotion } from 'flavours/glitch/initial_state';
 import ReducedMotion from './reduced_motion';
 import Motion from 'react-motion/lib/Motion';
 
-- 
cgit 


From 8491a3532dba7176fbeb7b9283ca3abd07858b3a Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Sun, 9 Oct 2022 10:49:51 +0900
Subject: [Glitch] Remove timeline preview link from nav panel when not
 signed-in

Port e82467ca41f4940add32061ca70214e236cc435f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/server_banner.js    | 10 ++--
 .../features/ui/components/navigation_panel.js     | 23 +++++----
 app/javascript/flavours/glitch/initial_state.js    | 59 +++++++++++++++++++++-
 3 files changed, 75 insertions(+), 17 deletions(-)

(limited to 'app/javascript/flavours/glitch/components/server_banner.js')

diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js
index 16360ec56..2bb0381da 100644
--- a/app/javascript/flavours/glitch/components/server_banner.js
+++ b/app/javascript/flavours/glitch/components/server_banner.js
@@ -1,12 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { domain } from 'flavours/glitch/initial_state';
-import { fetchServer } from 'flavours/glitch/actions/server';
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import Account from 'flavours/glitch/containers/account_container';
+import { fetchServer } from 'flavours/glitch/actions/server';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import Account from 'flavours/glitch/containers/account_container';
+import { domain } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
index cb884ec75..754c651c2 100644
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
@@ -1,15 +1,15 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { NavLink, Link } from 'react-router-dom';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link, NavLink } from 'react-router-dom';
 import Icon from 'flavours/glitch/components/icon';
-import { showTrends } from 'flavours/glitch/initial_state';
-import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links';
-import NotificationsCounterIcon from './notifications_counter_icon';
+import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container';
+import { showTrends, timelinePreview } from 'flavours/glitch/initial_state';
 import FollowRequestsNavLink from './follow_requests_nav_link';
 import ListPanel from './list_panel';
-import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container';
+import NotificationsCounterIcon from './notifications_counter_icon';
 import SignInBanner from './sign_in_banner';
+import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links';
 
 export default class NavigationPanel extends React.Component {
 
@@ -36,10 +36,13 @@ export default class NavigationPanel extends React.Component {
           </React.Fragment>
         )}
 
-        { showTrends && <NavLink className='column-link column-link--transparent' to='/explore' data-preview-title-id='explore.title' data-preview-icon='hashtag'><Icon className='column-link__icon' id='hashtag' fixedWidth /><FormattedMessage id='explore.title' defaultMessage='Explore' /></NavLink> }
-
-        <NavLink className='column-link column-link--transparent' to='/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
-        <NavLink className='column-link column-link--transparent' exact to='/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
+        <NavLink className='column-link column-link--transparent' to='/explore' data-preview-title-id='explore.title' data-preview-icon='hashtag'><Icon className='column-link__icon' id='hashtag' fixedWidth /><FormattedMessage id='explore.title' defaultMessage='Explore' /></NavLink>
+        {signedIn || timelinePreview && (
+          <>
+            <NavLink className='column-link column-link--transparent' to='/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
+            <NavLink className='column-link column-link--transparent' exact to='/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
+          </>
+        )}
 
         {!signedIn && (
           <div className='navigation-panel__sign-in-banner'>
diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js
index 0f2484ba3..b597ab2c5 100644
--- a/app/javascript/flavours/glitch/initial_state.js
+++ b/app/javascript/flavours/glitch/initial_state.js
@@ -1,4 +1,52 @@
+// @ts-check
+
+/**
+ * @typedef {[code: string, name: string, localName: string]} InitialStateLanguage
+ */
+
+/**
+ * @typedef InitialStateMeta
+ * @property {string} access_token
+ * @property {boolean=} advanced_layout
+ * @property {boolean} auto_play_gif
+ * @property {boolean} activity_api_enabled
+ * @property {string} admin
+ * @property {boolean=} boost_modal
+ * @property {boolean} crop_images
+ * @property {boolean=} delete_modal
+ * @property {boolean=} disable_swiping
+ * @property {boolean} display_media
+ * @property {string} domain
+ * @property {boolean=} expand_spoilers
+ * @property {boolean} limited_federation_mode
+ * @property {string} locale
+ * @property {string | null} mascot
+ * @property {string=} me
+ * @property {boolean} profile_directory
+ * @property {boolean} registrations_open
+ * @property {boolean} reduce_motion
+ * @property {string} repository
+ * @property {boolean} search_enabled
+ * @property {string} source_url
+ * @property {string} streaming_api_base_url
+ * @property {boolean} timeline_preview
+ * @property {string} title
+ * @property {boolean} trends
+ * @property {boolean} unfollow_modal
+ * @property {boolean} use_blurhash
+ * @property {boolean=} use_pending_items
+ * @property {string} version
+ * @property {object} local_settings
+ */
+
+/**
+ * @typedef InitialState
+ * @property {InitialStateLanguage[]} languages
+ * @property {InitialStateMeta} meta
+ */
+
 const element = document.getElementById('initial-state');
+/** @type {InitialState | undefined} */
 const initialState = element && JSON.parse(element.textContent);
 
 // Glitch-soc-specific “local settings”
@@ -8,7 +56,12 @@ try {
   initialState.local_settings = {};
 }
 
-const getMeta = (prop) => initialState && initialState.meta && initialState.meta[prop];
+/**
+ * @template {keyof InitialStateMeta} K
+ * @param {K} prop
+ * @returns {InitialStateMeta[K] | undefined}
+ */
+const getMeta = (prop) => initialState?.meta && initialState.meta[prop];
 
 export const domain = getMeta('domain');
 export const reduceMotion = getMeta('reduce_motion');
@@ -34,7 +87,9 @@ export const usePendingItems = getMeta('use_pending_items');
 export const showTrends = getMeta('trends');
 export const title = getMeta('title');
 export const disableSwiping = getMeta('disable_swiping');
-export const languages = initialState && initialState.languages;
+export const timelinePreview = getMeta('timeline_preview');
+export const activityApiEnabled = getMeta('activity_api_enabled');
+export const languages = initialState?.languages;
 
 // Glitch-soc-specific settings
 export const favouriteModal = getMeta('favourite_modal');
-- 
cgit 


From 67b4ecdd2124cb2cf05731b26a77129bb8151236 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 13 Oct 2022 14:42:37 +0200
Subject: [Glitch] Change about page to be mounted in the web UI

Port 1bd00036c284bcafb419eaf80347ba49d1b491d9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/actions/server.js   |  61 ++
 app/javascript/flavours/glitch/components/image.js |  33 +
 .../flavours/glitch/components/server_banner.js    |   8 +-
 .../flavours/glitch/components/skeleton.js         |   4 +-
 .../flavours/glitch/features/about/index.js        | 195 ++++-
 .../glitch/features/privacy_policy/index.js        |   2 +-
 .../flavours/glitch/features/report/rules.js       |   2 +-
 .../glitch/features/ui/components/link_footer.js   |   2 +-
 app/javascript/flavours/glitch/reducers/server.js  |  46 +-
 app/javascript/flavours/glitch/styles/about.scss   | 904 +--------------------
 .../flavours/glitch/styles/compact_header.scss     |  34 -
 .../flavours/glitch/styles/components/about.scss   | 238 ++++++
 .../flavours/glitch/styles/components/index.scss   |   3 +-
 .../glitch/styles/components/privacy_policy.scss   | 235 ++++--
 .../flavours/glitch/styles/containers.scss         |   1 -
 .../flavours/glitch/styles/contrast/diff.scss      |   4 -
 .../flavours/glitch/styles/dashboard.scss          |   1 -
 app/javascript/flavours/glitch/styles/forms.scss   |  63 +-
 app/javascript/flavours/glitch/styles/index.scss   |   2 -
 .../glitch/styles/mastodon-light/diff.scss         |   3 -
 app/javascript/flavours/glitch/styles/widgets.scss | 229 +-----
 21 files changed, 782 insertions(+), 1288 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/image.js
 delete mode 100644 app/javascript/flavours/glitch/styles/compact_header.scss
 create mode 100644 app/javascript/flavours/glitch/styles/components/about.scss

(limited to 'app/javascript/flavours/glitch/components/server_banner.js')

diff --git a/app/javascript/flavours/glitch/actions/server.js b/app/javascript/flavours/glitch/actions/server.js
index af8fef780..31d4aea10 100644
--- a/app/javascript/flavours/glitch/actions/server.js
+++ b/app/javascript/flavours/glitch/actions/server.js
@@ -5,6 +5,14 @@ export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST';
 export const SERVER_FETCH_SUCCESS = 'Server_FETCH_SUCCESS';
 export const SERVER_FETCH_FAIL    = 'Server_FETCH_FAIL';
 
+export const EXTENDED_DESCRIPTION_REQUEST = 'EXTENDED_DESCRIPTION_REQUEST';
+export const EXTENDED_DESCRIPTION_SUCCESS = 'EXTENDED_DESCRIPTION_SUCCESS';
+export const EXTENDED_DESCRIPTION_FAIL    = 'EXTENDED_DESCRIPTION_FAIL';
+
+export const SERVER_DOMAIN_BLOCKS_FETCH_REQUEST = 'SERVER_DOMAIN_BLOCKS_FETCH_REQUEST';
+export const SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS = 'SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS';
+export const SERVER_DOMAIN_BLOCKS_FETCH_FAIL    = 'SERVER_DOMAIN_BLOCKS_FETCH_FAIL';
+
 export const fetchServer = () => (dispatch, getState) => {
   dispatch(fetchServerRequest());
 
@@ -28,3 +36,56 @@ const fetchServerFail = error => ({
   type: SERVER_FETCH_FAIL,
   error,
 });
+
+export const fetchExtendedDescription = () => (dispatch, getState) => {
+  dispatch(fetchExtendedDescriptionRequest());
+
+  api(getState)
+    .get('/api/v1/instance/extended_description')
+    .then(({ data }) => dispatch(fetchExtendedDescriptionSuccess(data)))
+    .catch(err => dispatch(fetchExtendedDescriptionFail(err)));
+};
+
+const fetchExtendedDescriptionRequest = () => ({
+  type: EXTENDED_DESCRIPTION_REQUEST,
+});
+
+const fetchExtendedDescriptionSuccess = description => ({
+  type: EXTENDED_DESCRIPTION_SUCCESS,
+  description,
+});
+
+const fetchExtendedDescriptionFail = error => ({
+  type: EXTENDED_DESCRIPTION_FAIL,
+  error,
+});
+
+export const fetchDomainBlocks = () => (dispatch, getState) => {
+  dispatch(fetchDomainBlocksRequest());
+
+  api(getState)
+    .get('/api/v1/instance/domain_blocks')
+    .then(({ data }) => dispatch(fetchDomainBlocksSuccess(true, data)))
+    .catch(err => {
+      if (err.response.status === 404) {
+        dispatch(fetchDomainBlocksSuccess(false, []));
+      } else {
+        dispatch(fetchDomainBlocksFail(err));
+      }
+    });
+};
+
+const fetchDomainBlocksRequest = () => ({
+  type: SERVER_DOMAIN_BLOCKS_FETCH_REQUEST,
+});
+
+const fetchDomainBlocksSuccess = (isAvailable, blocks) => ({
+  type: SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS,
+  isAvailable,
+  blocks,
+});
+
+const fetchDomainBlocksFail = error => ({
+  type: SERVER_DOMAIN_BLOCKS_FETCH_FAIL,
+  error,
+});
diff --git a/app/javascript/flavours/glitch/components/image.js b/app/javascript/flavours/glitch/components/image.js
new file mode 100644
index 000000000..6e81ddf08
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/image.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Blurhash from './blurhash';
+import classNames from 'classnames';
+
+export default class Image extends React.PureComponent {
+
+  static propTypes = {
+    src: PropTypes.string,
+    srcSet: PropTypes.string,
+    blurhash: PropTypes.string,
+    className: PropTypes.string,
+  };
+
+  state = {
+    loaded: false,
+  };
+
+  handleLoad = () => this.setState({ loaded: true });
+
+  render () {
+    const { src, srcSet, blurhash, className } = this.props;
+    const { loaded } = this.state;
+
+    return (
+      <div className={classNames('image', { loaded }, className)} role='presentation'>
+        {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
+        <img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} />
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js
index 2bb0381da..9cb0ef13c 100644
--- a/app/javascript/flavours/glitch/components/server_banner.js
+++ b/app/javascript/flavours/glitch/components/server_banner.js
@@ -7,13 +7,15 @@ import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';
 import Account from 'flavours/glitch/containers/account_container';
 import { domain } from 'flavours/glitch/initial_state';
+import Image from 'flavours/glitch/components/image';
+import { Link } from 'react-router-dom';
 
 const messages = defineMessages({
   aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
 });
 
 const mapStateToProps = state => ({
-  server: state.get('server'),
+  server: state.getIn(['server', 'server']),
 });
 
 export default @connect(mapStateToProps)
@@ -41,7 +43,7 @@ class ServerBanner extends React.PureComponent {
           <FormattedMessage id='server_banner.introduction' defaultMessage='{domain} is part of the decentralized social network powered by {mastodon}.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
         </div>
 
-        <img src={server.get('thumbnail')} alt={server.get('title')} className='server-banner__hero' />
+        <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' />
 
         <div className='server-banner__description'>
           {isLoading ? (
@@ -83,7 +85,7 @@ class ServerBanner extends React.PureComponent {
 
         <hr className='spacer' />
 
-        <a className='button button--block button-secondary' href='/about/more' target='_blank'><FormattedMessage id='server_banner.learn_more' defaultMessage='Learn more' /></a>
+        <Link className='button button--block button-secondary' to='/about'><FormattedMessage id='server_banner.learn_more' defaultMessage='Learn more' /></Link>
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/components/skeleton.js b/app/javascript/flavours/glitch/components/skeleton.js
index 09093e99c..6a17ffb26 100644
--- a/app/javascript/flavours/glitch/components/skeleton.js
+++ b/app/javascript/flavours/glitch/components/skeleton.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 const Skeleton = ({ width, height }) => <span className='skeleton' style={{ width, height }}>&zwnj;</span>;
 
 Skeleton.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 export default Skeleton;
diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js
index 4500480f5..8d7f9c108 100644
--- a/app/javascript/flavours/glitch/features/about/index.js
+++ b/app/javascript/flavours/glitch/features/about/index.js
@@ -1,27 +1,214 @@
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Column from 'flavours/glitch/components/column';
 import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
 import { Helmet } from 'react-helmet';
+import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server';
+import Account from 'flavours/glitch/containers/account_container';
+import Skeleton from 'flavours/glitch/components/skeleton';
+import Icon from 'flavours/glitch/components/icon';
+import classNames from 'classnames';
+import Image from 'flavours/glitch/components/image';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
+  rules: { id: 'about.rules', defaultMessage: 'Server rules' },
+  blocks: { id: 'about.blocks', defaultMessage: 'Moderated servers' },
+  silenced: { id: 'about.domain_blocks.silenced.title', defaultMessage: 'Limited' },
+  silencedExplanation: { id: 'about.domain_blocks.silenced.explanation', defaultMessage: 'You will generally not see profiles and content from this server, unless you explicitly look it up or opt into it by following.' },
+  suspended: { id: 'about.domain_blocks.suspended.title', defaultMessage: 'Suspended' },
+  suspendedExplanation: { id: 'about.domain_blocks.suspended.explanation', defaultMessage: 'No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.' },
 });
 
-export default @injectIntl
+const severityMessages = {
+  silence: {
+    title: messages.silenced,
+    explanation: messages.silencedExplanation,
+  },
+
+  suspend: {
+    title: messages.suspended,
+    explanation: messages.suspendedExplanation,
+  },
+};
+
+const mapStateToProps = state => ({
+  server: state.getIn(['server', 'server']),
+  extendedDescription: state.getIn(['server', 'extendedDescription']),
+  domainBlocks: state.getIn(['server', 'domainBlocks']),
+});
+
+class Section extends React.PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string,
+    children: PropTypes.node,
+    open: PropTypes.bool,
+    onOpen: PropTypes.func,
+  };
+
+  state = {
+    collapsed: !this.props.open,
+  };
+
+  handleClick = () => {
+    const { onOpen } = this.props;
+    const { collapsed } = this.state;
+
+    this.setState({ collapsed: !collapsed }, () => onOpen && onOpen());
+  }
+
+  render () {
+    const { title, children } = this.props;
+    const { collapsed } = this.state;
+
+    return (
+      <div className={classNames('about__section', { active: !collapsed })}>
+        <div className='about__section__title' role='button' tabIndex='0' onClick={this.handleClick}>
+          <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} fixedWidth /> {title}
+        </div>
+
+        {!collapsed && (
+          <div className='about__section__body'>{children}</div>
+        )}
+      </div>
+    );
+  }
+
+}
+
+export default @connect(mapStateToProps)
+@injectIntl
 class About extends React.PureComponent {
 
   static propTypes = {
+    server: ImmutablePropTypes.map,
+    extendedDescription: ImmutablePropTypes.map,
+    domainBlocks: ImmutablePropTypes.contains({
+      isLoading: PropTypes.bool,
+      isAvailable: PropTypes.bool,
+      items: ImmutablePropTypes.list,
+    }),
+    dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
+  componentDidMount () {
+    const { dispatch } = this.props;
+    dispatch(fetchServer());
+    dispatch(fetchExtendedDescription());
+  }
+
+  handleDomainBlocksOpen = () => {
+    const { dispatch } = this.props;
+    dispatch(fetchDomainBlocks());
+  }
+
   render () {
-    const { intl } = this.props;
+    const { intl, server, extendedDescription, domainBlocks } = this.props;
+    const isLoading = server.get('isLoading');
 
     return (
       <Column>
-        <LinkFooter />
+        <div className='scrollable about'>
+          <div className='about__header'>
+            <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
+            <h1>{isLoading ? <Skeleton width='10ch' /> : server.get('domain')}</h1>
+            <p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank'>Mastodon</a> }} /></p>
+          </div>
+
+          <div className='about__meta'>
+            <div className='about__meta__column'>
+              <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
+
+              <Account id={server.getIn(['contact', 'account', 'id'])} />
+            </div>
+
+            <hr className='about__meta__divider' />
+
+            <div className='about__meta__column'>
+              <h4><FormattedMessage id='about.contact' defaultMessage='Contact:' /></h4>
+
+              {isLoading ? <Skeleton width='10ch' /> : <a className='about__mail' href={`mailto:${server.getIn(['contact', 'email'])}`}>{server.getIn(['contact', 'email'])}</a>}
+            </div>
+          </div>
+
+          <Section open title={intl.formatMessage(messages.title)}>
+            {extendedDescription.get('isLoading') ? (
+              <>
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='70%' />
+              </>
+            ) : (extendedDescription.get('content')?.length > 0 ? (
+              <div
+                className='prose'
+                dangerouslySetInnerHTML={{ __html: extendedDescription.get('content') }}
+              />
+            ) : (
+              <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
+            ))}
+          </Section>
+
+          <Section title={intl.formatMessage(messages.rules)}>
+            {!isLoading && (server.get('rules').isEmpty() ? (
+              <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
+            ) : (
+              <ol className='rules-list'>
+                {server.get('rules').map(rule => (
+                  <li key={rule.get('id')}>
+                    <span className='rules-list__text'>{rule.get('text')}</span>
+                  </li>
+                ))}
+              </ol>
+            ))}
+          </Section>
+
+          <Section title={intl.formatMessage(messages.blocks)} onOpen={this.handleDomainBlocksOpen}>
+            {domainBlocks.get('isLoading') ? (
+              <>
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='70%' />
+              </>
+            ) : (domainBlocks.get('isAvailable') ? (
+              <>
+                <p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p>
+
+                <table className='about__domain-blocks'>
+                  <thead>
+                    <tr>
+                      <th><FormattedMessage id='about.domain_blocks.domain' defaultMessage='Domain' /></th>
+                      <th><FormattedMessage id='about.domain_blocks.severity' defaultMessage='Severity' /></th>
+                      <th><FormattedMessage id='about.domain_blocks.comment' defaultMessage='Reason' /></th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {domainBlocks.get('items').map(block => (
+                      <tr key={block.get('domain')}>
+                        <td><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></td>
+                        <td><span title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span></td>
+                        <td>{block.get('comment')}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </>
+            ) : (
+              <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
+            ))}
+          </Section>
+
+          <LinkFooter />
+        </div>
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
diff --git a/app/javascript/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js
index c1f7c4f1e..47ee80038 100644
--- a/app/javascript/flavours/glitch/features/privacy_policy/index.js
+++ b/app/javascript/flavours/glitch/features/privacy_policy/index.js
@@ -44,7 +44,7 @@ class PrivacyPolicy extends React.PureComponent {
           </div>
 
           <div
-            className='privacy-policy__body'
+            className='privacy-policy__body prose'
             dangerouslySetInnerHTML={{ __html: content }}
           />
         </div>
diff --git a/app/javascript/flavours/glitch/features/report/rules.js b/app/javascript/flavours/glitch/features/report/rules.js
index 599c04dbd..efcdf1fcf 100644
--- a/app/javascript/flavours/glitch/features/report/rules.js
+++ b/app/javascript/flavours/glitch/features/report/rules.js
@@ -7,7 +7,7 @@ import Button from 'flavours/glitch/components/button';
 import Option from './components/option';
 
 const mapStateToProps = state => ({
-  rules: state.getIn(['server', 'rules']),
+  rules: state.getIn(['server', 'server', 'rules']),
 });
 
 export default @connect(mapStateToProps)
diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js
index 8c55a7337..2e061f760 100644
--- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js
+++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js
@@ -51,7 +51,7 @@ class LinkFooter extends React.PureComponent {
     const items = [];
 
     items.push(<a key='apps' href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Get the app' /></a>);
-    items.push(<a key='about' href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About' /></a>);
+    items.push(<Link key='about' to='/about'><FormattedMessage id='navigation_bar.info' defaultMessage='About' /></Link>);
     items.push(<a key='mastodon' href='https://joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.what_is_mastodon' defaultMessage='About Mastodon' /></a>);
     items.push(<a key='docs' href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a>);
     items.push(<Link key='privacy-policy' to='/privacy-policy'><FormattedMessage id='getting_started.privacy_policy' defaultMessage='Privacy Policy' /></Link>);
diff --git a/app/javascript/flavours/glitch/reducers/server.js b/app/javascript/flavours/glitch/reducers/server.js
index 977574148..cc5798fb3 100644
--- a/app/javascript/flavours/glitch/reducers/server.js
+++ b/app/javascript/flavours/glitch/reducers/server.js
@@ -1,18 +1,52 @@
-import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'flavours/glitch/actions/server';
-import { Map as ImmutableMap, fromJS } from 'immutable';
+import {
+  SERVER_FETCH_REQUEST,
+  SERVER_FETCH_SUCCESS,
+  SERVER_FETCH_FAIL,
+  EXTENDED_DESCRIPTION_REQUEST,
+  EXTENDED_DESCRIPTION_SUCCESS,
+  EXTENDED_DESCRIPTION_FAIL,
+  SERVER_DOMAIN_BLOCKS_FETCH_REQUEST,
+  SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS,
+  SERVER_DOMAIN_BLOCKS_FETCH_FAIL,
+} from 'flavours/glitch/actions/server';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
 const initialState = ImmutableMap({
-  isLoading: true,
+  server: ImmutableMap({
+    isLoading: true,
+  }),
+
+  extendedDescription: ImmutableMap({
+    isLoading: true,
+  }),
+
+  domainBlocks: ImmutableMap({
+    isLoading: true,
+    isAvailable: true,
+    items: ImmutableList(),
+  }),
 });
 
 export default function server(state = initialState, action) {
   switch (action.type) {
   case SERVER_FETCH_REQUEST:
-    return state.set('isLoading', true);
+    return state.setIn(['server', 'isLoading'], true);
   case SERVER_FETCH_SUCCESS:
-    return fromJS(action.server).set('isLoading', false);
+    return state.set('server', fromJS(action.server)).setIn(['server', 'isLoading'], false);
   case SERVER_FETCH_FAIL:
-    return state.set('isLoading', false);
+    return state.setIn(['server', 'isLoading'], false);
+  case EXTENDED_DESCRIPTION_REQUEST:
+    return state.setIn(['extendedDescription', 'isLoading'], true);
+  case EXTENDED_DESCRIPTION_SUCCESS:
+    return state.set('extendedDescription', fromJS(action.description)).setIn(['extendedDescription', 'isLoading'], false);
+  case EXTENDED_DESCRIPTION_FAIL:
+    return state.setIn(['extendedDescription', 'isLoading'], false);
+  case SERVER_DOMAIN_BLOCKS_FETCH_REQUEST:
+    return state.setIn(['domainBlocks', 'isLoading'], true);
+  case SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS:
+    return state.setIn(['domainBlocks', 'items'], fromJS(action.blocks)).setIn(['domainBlocks', 'isLoading'], false).setIn(['domainBlocks', 'isAvailable'], action.isAvailable);
+  case SERVER_DOMAIN_BLOCKS_FETCH_FAIL:
+    return state.setIn(['domainBlocks', 'isLoading'], false);
   default:
     return state;
   }
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 28761796b..0183c43d5 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -1,7 +1,5 @@
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
-$column-breakpoint: 700px;
-$small-breakpoint: 960px;
 
 .container {
   box-sizing: border-box;
@@ -15,894 +13,44 @@ $small-breakpoint: 960px;
   }
 }
 
-.rich-formatting {
-  font-family: $font-sans-serif, sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.7;
-  word-wrap: break-word;
-  color: $darker-text-color;
-
-  a {
-    color: $highlight-text-color;
-    text-decoration: underline;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: none;
-    }
-  }
-
-  p,
-  li {
-    color: $darker-text-color;
-  }
-
-  p {
-    margin-top: 0;
-    margin-bottom: .85em;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  strong {
-    font-weight: 700;
-    color: $secondary-text-color;
-  }
-
-  em {
-    font-style: italic;
-    color: $secondary-text-color;
-  }
-
-  code {
-    font-size: 0.85em;
-    background: darken($ui-base-color, 8%);
-    border-radius: 4px;
-    padding: 0.2em 0.3em;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: $font-display, sans-serif;
-    margin-top: 1.275em;
-    margin-bottom: .85em;
-    font-weight: 500;
-    color: $secondary-text-color;
-  }
-
-  h1 {
-    font-size: 2em;
-  }
-
-  h2 {
-    font-size: 1.75em;
-  }
-
-  h3 {
-    font-size: 1.5em;
-  }
-
-  h4 {
-    font-size: 1.25em;
-  }
-
-  h5,
-  h6 {
-    font-size: 1em;
-  }
-
-  ul {
-    list-style: disc;
-  }
-
-  ol {
-    list-style: decimal;
-  }
-
-  ul,
-  ol {
-    margin: 0;
-    padding: 0;
-    padding-left: 2em;
-    margin-bottom: 0.85em;
-
-    &[type='a'] {
-      list-style-type: lower-alpha;
-    }
-
-    &[type='i'] {
-      list-style-type: lower-roman;
-    }
-  }
-
-  hr {
-    width: 100%;
-    height: 0;
-    border: 0;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-    margin: 1.7em 0;
-
-    &.spacer {
-      height: 1px;
-      border: 0;
-    }
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    break-inside: auto;
-    margin-top: 24px;
-    margin-bottom: 32px;
-
-    thead tr,
-    tbody tr {
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
-      font-size: 1em;
-      line-height: 1.625;
-      font-weight: 400;
-      text-align: left;
-      color: $darker-text-color;
-    }
-
-    thead tr {
-      border-bottom-width: 2px;
-      line-height: 1.5;
-      font-weight: 500;
-      color: $dark-text-color;
-    }
-
-    th,
-    td {
-      padding: 8px;
-      align-self: flex-start;
-      align-items: flex-start;
-      word-break: break-all;
-
-      &.nowrap {
-        width: 25%;
-        position: relative;
-
-        &::before {
-          content: '&nbsp;';
-          visibility: hidden;
-        }
-
-        span {
-          position: absolute;
-          left: 8px;
-          right: 8px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-
-  & > :first-child {
-    margin-top: 0;
-  }
+.brand {
+  position: relative;
+  text-decoration: none;
 }
 
-.information-board {
-  background: darken($ui-base-color, 4%);
-  padding: 20px 0;
-
-  .container-alt {
-    position: relative;
-    padding-right: 280px + 15px;
-  }
-
-  &__sections {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-
-  &__section {
-    flex: 1 0 0;
-    font-family: $font-sans-serif, sans-serif;
-    font-size: 16px;
-    line-height: 28px;
-    color: $primary-text-color;
-    text-align: right;
-    padding: 10px 15px;
-
-    span,
-    strong {
-      display: block;
-    }
-
-    span {
-      &:last-child {
-        color: $secondary-text-color;
-      }
-    }
-
-    strong {
-      font-family: $font-display, sans-serif;
-      font-weight: 500;
-      font-size: 32px;
-      line-height: 48px;
-    }
-
-    @media screen and (max-width: $column-breakpoint) {
-      text-align: center;
-    }
-  }
-
-  .panel {
-    position: absolute;
-    width: 280px;
-    box-sizing: border-box;
-    background: darken($ui-base-color, 8%);
-    padding: 20px;
-    padding-top: 10px;
-    border-radius: 4px 4px 0 0;
-    right: 0;
-    bottom: -40px;
-
-    .panel-header {
-      font-family: $font-display, sans-serif;
-      font-size: 14px;
-      line-height: 24px;
-      font-weight: 500;
-      color: $darker-text-color;
-      padding-bottom: 5px;
-      margin-bottom: 15px;
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-
-      a,
-      span {
-        font-weight: 400;
-        color: darken($darker-text-color, 10%);
-      }
-
-      a {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .owner {
-    text-align: center;
-
-    .avatar {
-      width: 80px;
-      height: 80px;
-      @include avatar-size(80px);
-      margin: 0 auto;
-      margin-bottom: 15px;
-
-      img {
-        display: block;
-        width: 80px;
-        height: 80px;
-        border-radius: 48px;
-        @include avatar-radius();
-      }
-    }
-
-    .name {
-      font-size: 14px;
-
-      a {
-        display: block;
-        color: $primary-text-color;
-        text-decoration: none;
-
-        &:hover {
-          .display_name {
-            text-decoration: underline;
-          }
-        }
-      }
-
-      .username {
-        display: block;
-        color: $darker-text-color;
-      }
-    }
-  }
-}
+.rules-list {
+  font-size: 15px;
+  line-height: 22px;
+  color: $primary-text-color;
+  counter-reset: list-counter;
 
-.landing-page {
-  p,
   li {
-    font-family: $font-sans-serif, sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 30px;
-    margin-bottom: 12px;
-    color: $darker-text-color;
-
-    a {
-      color: $highlight-text-color;
-      text-decoration: underline;
-    }
-  }
-
-  em {
-    display: inline;
-    margin: 0;
-    padding: 0;
-    font-weight: 700;
-    background: transparent;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: lighten($darker-text-color, 10%);
-  }
-
-  h1 {
-    font-family: $font-display, sans-serif;
-    font-size: 26px;
-    line-height: 30px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-
-    small {
-      font-family: $font-sans-serif, sans-serif;
-      display: block;
-      font-size: 18px;
-      font-weight: 400;
-      color: lighten($darker-text-color, 10%);
-    }
-  }
-
-  h2 {
-    font-family: $font-display, sans-serif;
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h3 {
-    font-family: $font-display, sans-serif;
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h4 {
-    font-family: $font-display, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h5 {
-    font-family: $font-display, sans-serif;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h6 {
-    font-family: $font-display, sans-serif;
-    font-size: 12px;
-    line-height: 24px;
+    position: relative;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    padding: 1em 1.75em;
+    padding-left: 3em;
     font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  ul,
-  ol {
-    margin-left: 20px;
-
-    &[type='a'] {
-      list-style-type: lower-alpha;
-    }
-
-    &[type='i'] {
-      list-style-type: lower-roman;
-    }
-  }
-
-  ul {
-    list-style: disc;
-  }
-
-  ol {
-    list-style: decimal;
-  }
-
-  li > ol,
-  li > ul {
-    margin-top: 6px;
-  }
-
-  hr {
-    width: 100%;
-    height: 0;
-    border: 0;
-    border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
-    margin: 20px 0;
-
-    &.spacer {
-      height: 1px;
-      border: 0;
-    }
-  }
-
-  &__information,
-  &__forms {
-    padding: 20px;
-  }
-
-  &__call-to-action {
-    background: $ui-base-color;
-    border-radius: 4px;
-    padding: 25px 40px;
-    overflow: hidden;
-    box-sizing: border-box;
-
-    .row {
-      width: 100%;
-      display: flex;
-      flex-direction: row-reverse;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .row__information-board {
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
-
-      .information-board__section {
-        flex: 1 0 auto;
-        padding: 0 10px;
-      }
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        width: 100%;
-        justify-content: space-between;
-      }
-    }
-
-    .row__mascot {
-      flex: 1;
-      margin: 10px -50px 0 0;
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        display: none;
-      }
-    }
-  }
-
-  &__logo {
-    margin-right: 20px;
-
-    img {
-      height: 50px;
-      width: auto;
-      mix-blend-mode: lighten;
-    }
-  }
-
-  &__information {
-    padding: 45px 40px;
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    strong {
+    counter-increment: list-counter;
+
+    &::before {
+      content: counter(list-counter);
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      background: $highlight-text-color;
+      color: $ui-base-color;
+      border-radius: 50%;
+      width: 4ch;
+      height: 4ch;
       font-weight: 500;
-      color: lighten($darker-text-color, 10%);
-    }
-
-    .account {
-      border-bottom: 0;
-      padding: 0;
-
-      &__display-name {
-        align-items: center;
-        display: flex;
-        margin-right: 5px;
-      }
-
-      div.account__display-name {
-        &:hover {
-          .display-name strong {
-            text-decoration: none;
-          }
-        }
-
-        .account__avatar {
-          cursor: default;
-        }
-      }
-
-      &__avatar-wrapper {
-        margin-left: 0;
-        flex: 0 0 auto;
-      }
-
-      .display-name {
-        font-size: 15px;
-
-        &__account {
-          font-size: 14px;
-        }
-      }
-    }
-
-    @media screen and (max-width: $small-breakpoint) {
-      .contact {
-        margin-top: 30px;
-      }
-    }
-
-    @media screen and (max-width: $column-breakpoint) {
-      padding: 25px 20px;
-    }
-  }
-
-  &__information,
-  &__forms,
-  #mastodon-timeline {
-    box-sizing: border-box;
-    background: $ui-base-color;
-    border-radius: 4px;
-    box-shadow: 0 0 6px rgba($black, 0.1);
-  }
-
-  &__mascot {
-    height: 104px;
-    position: relative;
-    left: -40px;
-    bottom: 25px;
-
-    img {
-      height: 190px;
-      width: auto;
-    }
-  }
-
-  &__short-description {
-    .row {
       display: flex;
-      flex-wrap: wrap;
+      justify-content: center;
       align-items: center;
-      margin-bottom: 40px;
-    }
-
-    @media screen and (max-width: $column-breakpoint) {
-      .row {
-        margin-bottom: 20px;
-      }
-    }
-
-    p a {
-      color: $secondary-text-color;
-    }
-
-    h1 {
-      font-weight: 500;
-      color: $primary-text-color;
-      margin-bottom: 0;
-
-      small {
-        color: $darker-text-color;
-
-        span {
-          color: $secondary-text-color;
-        }
-      }
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__hero {
-    margin-bottom: 10px;
-
-    img {
-      display: block;
-      margin: 0;
-      max-width: 100%;
-      height: auto;
-      border-radius: 4px;
-    }
-  }
-
-  @media screen and (max-width: 840px) {
-    .information-board {
-      .container-alt {
-        padding-right: 20px;
-      }
-
-      .panel {
-        position: static;
-        margin-top: 20px;
-        width: 100%;
-        border-radius: 4px;
-
-        .panel-header {
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 675px) {
-    .header-wrapper {
-      padding-top: 0;
-
-      &.compact {
-        padding-bottom: 0;
-      }
-
-      &.compact .hero .heading {
-        text-align: initial;
-      }
     }
 
-    .header .container-alt,
-    .features .container-alt {
-      display: block;
-    }
-  }
-
-  .cta {
-    margin: 20px;
-  }
-}
-
-.landing {
-  margin-bottom: 100px;
-
-  @media screen and (max-width: 738px) {
-    margin-bottom: 0;
-  }
-
-  &__brand {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 50px;
-
-    .logo {
-      fill: $primary-text-color;
-      height: 52px;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding: 0;
-      margin-bottom: 30px;
-    }
-  }
-
-  .directory {
-    margin-top: 30px;
-    background: transparent;
-    box-shadow: none;
-    border-radius: 0;
-  }
-
-  .hero-widget {
-    margin-top: 30px;
-    margin-bottom: 0;
-
-    h4 {
-      padding: 10px;
-      text-transform: uppercase;
-      font-weight: 700;
-      font-size: 13px;
-      color: $darker-text-color;
-    }
-
-    &__text {
-      border-radius: 0;
-      padding-bottom: 0;
-    }
-
-    &__footer {
-      background: $ui-base-color;
-      padding: 10px;
-      border-radius: 0 0 4px 4px;
-      display: flex;
-
-      &__column {
-        flex: 1 1 50%;
-        overflow-x: hidden;
-      }
-    }
-
-    .account {
-      padding: 10px 0;
-      border-bottom: 0;
-
-      .account__display-name {
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    &__counters__wrapper {
-      display: flex;
-    }
-
-    &__counter {
-      padding: 10px;
-      width: 50%;
-
-      strong {
-        font-family: $font-display, sans-serif;
-        font-size: 15px;
-        font-weight: 700;
-        display: block;
-      }
-
-      span {
-        font-size: 14px;
-        color: $darker-text-color;
-      }
-    }
-  }
-
-  .simple_form .user_agreement .label_input > label {
-    font-weight: 400;
-    color: $darker-text-color;
-  }
-
-  .simple_form p.lead {
-    color: $darker-text-color;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    margin-bottom: 25px;
-  }
-
-  &__grid {
-    max-width: 960px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-    grid-gap: 30px;
-
-    @media screen and (max-width: 738px) {
-      grid-template-columns: minmax(0, 100%);
-      grid-gap: 10px;
-
-      &__column-login {
-        grid-row: 1;
-        display: flex;
-        flex-direction: column;
-
-        .box-widget {
-          order: 2;
-          flex: 0 0 auto;
-        }
-
-        .hero-widget {
-          margin-top: 0;
-          margin-bottom: 10px;
-          order: 1;
-          flex: 0 0 auto;
-        }
-      }
-
-      &__column-registration {
-        grid-row: 2;
-      }
-
-      .directory {
-        margin-top: 10px;
-      }
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      grid-gap: 0;
-
-      .hero-widget {
-        display: block;
-        margin-bottom: 0;
-        box-shadow: none;
-
-        &__img,
-        &__img img,
-        &__footer {
-          border-radius: 0;
-        }
-      }
-
-      .hero-widget,
-      .box-widget,
-      .directory__tag {
-        border-bottom: 1px solid lighten($ui-base-color, 8%);
-      }
-
-      .directory {
-        margin-top: 0;
-
-        &__tag {
-          margin-bottom: 0;
-
-          & > a,
-          & > div {
-            border-radius: 0;
-            box-shadow: none;
-          }
-
-          &:last-child {
-            border-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-.brand {
-  position: relative;
-  text-decoration: none;
-}
-
-.brand__tagline {
-  display: block;
-  position: absolute;
-  bottom: -10px;
-  left: 50px;
-  width: 300px;
-  color: $ui-primary-color;
-  text-decoration: none;
-  font-size: 14px;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    position: static;
-    width: auto;
-    margin-top: 20px;
-    color: $dark-text-color;
-  }
-}
-
-.rules-list {
-  background: darken($ui-base-color, 2%);
-  border: 1px solid darken($ui-base-color, 8%);
-  border-radius: 4px;
-  padding: 0.5em 2.5em !important;
-  margin-top: 1.85em !important;
-
-  li {
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-    color: $dark-text-color;
-    padding: 1em;
-
     &:last-child {
       border-bottom: 0;
     }
   }
-
-  &__text {
-    color: $primary-text-color;
-  }
 }
diff --git a/app/javascript/flavours/glitch/styles/compact_header.scss b/app/javascript/flavours/glitch/styles/compact_header.scss
deleted file mode 100644
index 4980ab5f1..000000000
--- a/app/javascript/flavours/glitch/styles/compact_header.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.compact-header {
-  h1 {
-    font-size: 24px;
-    line-height: 28px;
-    color: $darker-text-color;
-    font-weight: 500;
-    margin-bottom: 20px;
-    padding: 0 10px;
-    word-wrap: break-word;
-
-    @media screen and (max-width: 740px) {
-      text-align: center;
-      padding: 20px 10px 0;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    small {
-      font-weight: 400;
-      color: $secondary-text-color;
-    }
-
-    img {
-      display: inline-block;
-      margin-bottom: -5px;
-      margin-right: 15px;
-      width: 36px;
-      height: 36px;
-    }
-  }
-}
diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss
new file mode 100644
index 000000000..ca9ba3ebf
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/about.scss
@@ -0,0 +1,238 @@
+.image {
+  position: relative;
+  overflow: hidden;
+
+  &__preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.loaded &__preview {
+    display: none;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border: 0;
+    background: transparent;
+    opacity: 0;
+  }
+
+  &.loaded img {
+    opacity: 1;
+  }
+}
+
+.about {
+  padding: 20px;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-radius: 4px;
+  }
+
+  &__header {
+    margin-bottom: 30px;
+
+    &__hero {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1.9;
+      background: lighten($ui-base-color, 4%);
+      border-radius: 8px;
+      margin-bottom: 30px;
+    }
+
+    h1,
+    p {
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      line-height: 1.5;
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $darker-text-color;
+    }
+  }
+
+  &__meta {
+    background: lighten($ui-base-color, 4%);
+    border-radius: 4px;
+    display: flex;
+    margin-bottom: 30px;
+    font-size: 15px;
+
+    &__column {
+      box-sizing: border-box;
+      width: 50%;
+      padding: 20px;
+    }
+
+    &__divider {
+      width: 0;
+      border: 0;
+      border-style: solid;
+      border-color: lighten($ui-base-color, 8%);
+      border-left-width: 1px;
+      min-height: calc(100% - 60px);
+      flex: 0 0 auto;
+    }
+
+    h4 {
+      font-size: 15px;
+      text-transform: uppercase;
+      color: $darker-text-color;
+      font-weight: 500;
+      margin-bottom: 20px;
+    }
+
+    @media screen and (max-width: 600px) {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+
+    .layout-multiple-columns & {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+  }
+
+  &__mail {
+    color: $primary-text-color;
+    text-decoration: none;
+    font-weight: 500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .getting-started__footer {
+    padding: 0;
+    margin-top: 60px;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+
+    @media screen and (min-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  .account__avatar-wrapper {
+    margin-left: 0;
+  }
+
+  .account__relationship {
+    display: none;
+  }
+
+  &__section {
+    margin-bottom: 10px;
+
+    &__title {
+      font-size: 17px;
+      font-weight: 600;
+      line-height: 22px;
+      padding: 20px;
+      border-radius: 4px;
+      background: lighten($ui-base-color, 4%);
+      color: $highlight-text-color;
+      cursor: pointer;
+    }
+
+    &.active &__title {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &__body {
+      border: 1px solid lighten($ui-base-color, 4%);
+      border-top: 0;
+      padding: 20px;
+      font-size: 15px;
+      line-height: 22px;
+    }
+  }
+
+  &__domain-blocks {
+    margin-top: 30px;
+    width: 100%;
+    border-collapse: collapse;
+    break-inside: auto;
+
+    th {
+      text-align: left;
+      font-weight: 500;
+      color: $darker-text-color;
+    }
+
+    thead tr,
+    tbody tr {
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    tbody tr:last-child {
+      border-bottom: 0;
+    }
+
+    th,
+    td {
+      padding: 8px;
+    }
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index a04482a79..81d90f442 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1034,6 +1034,7 @@
     padding: 10px;
     padding-top: 20px;
     z-index: 1;
+    font-size: 13px;
 
     ul {
       margin-bottom: 10px;
@@ -1045,7 +1046,6 @@
 
     p {
       color: $dark-text-color;
-      font-size: 13px;
       margin-bottom: 20px;
 
       a {
@@ -1779,3 +1779,4 @@ noscript {
 @import 'explore';
 @import 'signed_out';
 @import 'privacy_policy';
+@import 'about';
diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
index f69bf1a07..96cf06742 100644
--- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
+++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
@@ -8,77 +8,200 @@
 
   &__body {
     margin-top: 20px;
-    color: $secondary-text-color;
-    font-size: 15px;
-    line-height: 22px;
-
-    h1,
-    p,
-    ul,
-    ol {
-      margin-bottom: 20px;
-    }
+  }
+}
 
-    ul {
-      list-style: disc;
-    }
+.prose {
+  color: $secondary-text-color;
+  font-size: 15px;
+  line-height: 22px;
 
-    ol {
-      list-style: decimal;
-    }
+  p,
+  ul,
+  ol {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
 
-    ul,
-    ol {
-      padding-left: 1em;
-    }
+  img {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
 
-    li {
-      margin-bottom: 10px;
+  video {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
 
-      &::marker {
-        color: $darker-text-color;
-      }
+  figure {
+    margin-top: 2em;
+    margin-bottom: 2em;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+    figcaption {
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
     }
+  }
 
-    h1 {
-      color: $primary-text-color;
-      font-size: 19px;
-      line-height: 24px;
-      font-weight: 700;
-      margin-top: 30px;
+  figure > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 
-      &:first-child {
-        margin-top: 0;
-      }
-    }
+  h1 {
+    font-size: 1.5em;
+    margin-top: 0;
+    margin-bottom: 1em;
+    line-height: 1.33;
+  }
 
-    strong {
-      font-weight: 700;
-      color: $primary-text-color;
-    }
+  h2 {
+    font-size: 1.25em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+  }
 
-    em {
-      font-style: italic;
-    }
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+  }
+
+  ol {
+    counter-reset: list-counter;
+  }
 
-    a {
-      color: $highlight-text-color;
-      text-decoration: underline;
+  li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  ol > li {
+    counter-increment: list-counter;
 
-      &:focus,
-      &:hover,
-      &:active {
-        text-decoration: none;
-      }
+    &::before {
+      content: counter(list-counter) ".";
+      position: absolute;
+      left: 0;
     }
+  }
+
+  ul > li::before {
+    content: "";
+    position: absolute;
+    background-color: $darker-text-color;
+    border-radius: 50%;
+    width: 0.375em;
+    height: 0.375em;
+    top: 0.5em;
+    left: 0.25em;
+  }
+
+  ul > li,
+  ol > li {
+    position: relative;
+    padding-left: 1.75em;
+  }
+
+  & > ul > li p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  & > ul > li > *:first-child {
+    margin-top: 1.25em;
+  }
 
-    hr {
-      border: 1px solid lighten($ui-base-color, 4%);
-      margin: 30px 0;
+  & > ul > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  & > ol > li > *:first-child {
+    margin-top: 1.25em;
+  }
+
+  & > ol > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  b {
+    color: $primary-text-color;
+    font-weight: 700;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: underline;
+
+    &:focus,
+    &:hover,
+    &:active {
+      text-decoration: none;
     }
   }
+
+  code {
+    font-size: 0.875em;
+    background: darken($ui-base-color, 8%);
+    border-radius: 4px;
+    padding: 0.2em 0.3em;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid lighten($ui-base-color, 4%);
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  hr + * {
+    margin-top: 0;
+  }
+
+  h2 + * {
+    margin-top: 0;
+  }
+
+  h3 + * {
+    margin-top: 0;
+  }
+
+  h4 + *,
+  h5 + *,
+  h6 + * {
+    margin-top: 0;
+  }
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
 }
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index f0caeb4c5..3f8165370 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -30,7 +30,6 @@
       outline: 0;
       padding: 12px 16px;
       line-height: 32px;
-      font-family: $font-display, sans-serif;
       font-weight: 500;
       font-size: 14px;
     }
diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss
index 9bd31cd7e..a9a203960 100644
--- a/app/javascript/flavours/glitch/styles/contrast/diff.scss
+++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss
@@ -1,9 +1,5 @@
 // components.scss
 
-.rich-formatting a,
-.rich-formatting p a,
-.rich-formatting li a,
-.landing-page__short-description p a,
 .status__content a,
 .reply-indicator__content a {
   color: lighten($ui-highlight-color, 12%);
diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss
index 9b06b44d6..bb103e9ce 100644
--- a/app/javascript/flavours/glitch/styles/dashboard.scss
+++ b/app/javascript/flavours/glitch/styles/dashboard.scss
@@ -39,7 +39,6 @@
     font-size: 24px;
     line-height: 21px;
     color: $primary-text-color;
-    font-family: $font-display, sans-serif;
     margin-bottom: 20px;
     line-height: 30px;
   }
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 6ab1189da..57075a75f 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -138,18 +138,9 @@ code {
   }
 
   .rules-list {
-    list-style: decimal;
     font-size: 17px;
     line-height: 22px;
-    font-weight: 500;
-    background: transparent;
-    border: 0;
-    padding: 0.5em 1em !important;
     margin-bottom: 30px;
-
-    li {
-      border-color: lighten($ui-base-color, 8%);
-    }
   }
 
   .hint {
@@ -593,41 +584,6 @@ code {
       }
     }
   }
-
-  &__overlay-area {
-    position: relative;
-
-    &__blurred form {
-      filter: blur(2px);
-    }
-
-    &__overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: rgba($ui-base-color, 0.65);
-      border-radius: 4px;
-      margin-left: -4px;
-      margin-top: -4px;
-      padding: 4px;
-
-      &__content {
-        text-align: center;
-
-        &.rich-formatting {
-          &,
-          p {
-            color: $primary-text-color;
-          }
-        }
-      }
-    }
-  }
 }
 
 .block-icon {
@@ -898,24 +854,7 @@ code {
   }
 }
 
-.table-form {
-  p {
-    margin-bottom: 15px;
-
-    strong {
-      font-weight: 500;
-
-      @each $lang in $cjk-langs {
-        &:lang(#{$lang}) {
-          font-weight: 700;
-        }
-      }
-    }
-  }
-}
-
-.simple_form,
-.table-form {
+.simple_form {
   .warning {
     box-sizing: border-box;
     background: rgba($error-value-color, 0.5);
diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss
index f808773f3..5c2532758 100644
--- a/app/javascript/flavours/glitch/styles/index.scss
+++ b/app/javascript/flavours/glitch/styles/index.scss
@@ -2,7 +2,6 @@
 @import 'variables';
 @import 'styles/fonts/roboto';
 @import 'styles/fonts/roboto-mono';
-@import 'styles/fonts/montserrat';
 
 @import 'reset';
 @import 'basics';
@@ -11,7 +10,6 @@
 @import 'lists';
 @import 'modal';
 @import 'footer';
-@import 'compact_header';
 @import 'widgets';
 @import 'forms';
 @import 'accounts';
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index d16f23aed..64b86ffc1 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -390,9 +390,6 @@
 }
 
 .hero-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
 .moved-account-widget,
 .memoriam-widget,
 .activity-stream,
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index a88f3b2c7..fd091ee89 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -108,13 +108,6 @@
   }
 }
 
-.box-widget {
-  padding: 20px;
-  border-radius: 4px;
-  background: $ui-base-color;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-}
-
 .placeholder-widget {
   padding: 16px;
   border-radius: 4px;
@@ -124,47 +117,6 @@
   margin-bottom: 10px;
 }
 
-.contact-widget {
-  min-height: 100%;
-  font-size: 15px;
-  color: $darker-text-color;
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-  padding: 0;
-
-  h4 {
-    padding: 10px;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 13px;
-    color: $darker-text-color;
-  }
-
-  .account {
-    border-bottom: 0;
-    padding: 10px 0;
-    padding-top: 5px;
-  }
-
-  & > a {
-    display: inline-block;
-    padding: 10px;
-    padding-top: 0;
-    color: $darker-text-color;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-}
-
 .moved-account-widget {
   padding: 15px;
   padding-bottom: 20px;
@@ -245,37 +197,6 @@
   margin-bottom: 10px;
 }
 
-.page-header {
-  background: lighten($ui-base-color, 8%);
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  border-radius: 4px;
-  padding: 60px 15px;
-  text-align: center;
-  margin: 10px 0;
-
-  h1 {
-    color: $primary-text-color;
-    font-size: 36px;
-    line-height: 1.1;
-    font-weight: 700;
-    margin-bottom: 10px;
-  }
-
-  p {
-    font-size: 15px;
-    color: $darker-text-color;
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    margin-top: 0;
-    background: lighten($ui-base-color, 4%);
-
-    h1 {
-      font-size: 24px;
-    }
-  }
-}
-
 .directory {
   background: $ui-base-color;
   border-radius: 4px;
@@ -357,34 +278,6 @@
   }
 }
 
-.avatar-stack {
-  display: flex;
-  justify-content: flex-end;
-
-  .account__avatar {
-    flex: 0 0 auto;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    position: relative;
-    margin-left: -10px;
-    background: darken($ui-base-color, 8%);
-    border: 2px solid $ui-base-color;
-
-    &:nth-child(1) {
-      z-index: 1;
-    }
-
-    &:nth-child(2) {
-      z-index: 2;
-    }
-
-    &:nth-child(3) {
-      z-index: 3;
-    }
-  }
-}
-
 .accounts-table {
   width: 100%;
 
@@ -486,11 +379,7 @@
 
 .moved-account-widget,
 .memoriam-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
-.directory,
-.page-header {
+.directory {
   @media screen and (max-width: $no-gap-breakpoint) {
     margin-bottom: 0;
     box-shadow: none;
@@ -498,88 +387,6 @@
   }
 }
 
-$maximum-width: 1235px;
-$fluid-breakpoint: $maximum-width + 20px;
-
-.statuses-grid {
-  min-height: 600px;
-
-  @media screen and (max-width: 640px) {
-    width: 100% !important; // Masonry layout is unnecessary at this width
-  }
-
-  &__item {
-    width: math.div(960px - 20px, 3);
-
-    @media screen and (max-width: $fluid-breakpoint) {
-      width: math.div(940px - 20px, 3);
-    }
-
-    @media screen and (max-width: 640px) {
-      width: 100%;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      width: 100vw;
-    }
-  }
-
-  .detailed-status {
-    border-radius: 4px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid lighten($ui-base-color, 16%);
-    }
-
-    &.compact {
-      .detailed-status__meta {
-        margin-top: 15px;
-      }
-
-      .status__content {
-        font-size: 15px;
-        line-height: 20px;
-
-        .emojione {
-          width: 20px;
-          height: 20px;
-          margin: -3px 0 0;
-        }
-
-        .status__content__spoiler-link {
-          line-height: 20px;
-          margin: 0;
-        }
-      }
-
-      .media-gallery,
-      .status-card,
-      .video-player {
-        margin-top: 15px;
-      }
-    }
-  }
-}
-
-.notice-widget {
-  margin-bottom: 10px;
-  color: $darker-text-color;
-
-  p {
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-
-.notice-widget,
 .placeholder-widget {
   a {
     text-decoration: none;
@@ -593,37 +400,3 @@ $fluid-breakpoint: $maximum-width + 20px;
     }
   }
 }
-
-.table-of-contents {
-  background: darken($ui-base-color, 4%);
-  min-height: 100%;
-  font-size: 14px;
-  border-radius: 4px;
-
-  li a {
-    display: block;
-    font-weight: 500;
-    padding: 15px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: none;
-    color: $primary-text-color;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-
-  li:last-child a {
-    border-bottom: 0;
-  }
-
-  li ul {
-    padding-left: 20px;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-  }
-}
-- 
cgit 


From c883799a1ff37c7c004b8dc5fedc0fe14232400d Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 31 Oct 2022 13:06:17 +0100
Subject: [Glitch] Change design of link footer

Port 2d9a85db6efe0c9ccfda1420551ce3d6025bc27e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.js          |  8 ++-
 .../flavours/glitch/components/server_banner.js    |  2 +-
 .../flavours/glitch/features/about/index.js        |  7 ++-
 .../glitch/features/ui/components/link_footer.js   | 68 +++++++++++-----------
 .../flavours/glitch/styles/components/about.scss   | 38 +++++++++++-
 .../flavours/glitch/styles/components/index.scss   | 37 ------------
 6 files changed, 85 insertions(+), 75 deletions(-)

(limited to 'app/javascript/flavours/glitch/components/server_banner.js')

diff --git a/app/javascript/flavours/glitch/components/account.js b/app/javascript/flavours/glitch/components/account.js
index 8bfc8e9dc..8e810ce5f 100644
--- a/app/javascript/flavours/glitch/components/account.js
+++ b/app/javascript/flavours/glitch/components/account.js
@@ -27,6 +27,7 @@ export default @injectIntl
 class Account extends ImmutablePureComponent {
 
   static propTypes = {
+    size: PropTypes.number,
     account: ImmutablePropTypes.map,
     onFollow: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
@@ -41,6 +42,10 @@ class Account extends ImmutablePureComponent {
     onActionClick: PropTypes.func,
   };
 
+  static defaultProps = {
+    size: 36,
+  };
+
   handleFollow = () => {
     this.props.onFollow(this.props.account);
   }
@@ -75,6 +80,7 @@ class Account extends ImmutablePureComponent {
       actionIcon,
       actionTitle,
       defaultAction,
+      size,
     } = this.props;
 
     if (!account) {
@@ -163,7 +169,7 @@ class Account extends ImmutablePureComponent {
       <div className='account'>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            <div className='account__avatar-wrapper'><Avatar account={account} size={size} /></div>
             {mute_expires_at}
             <DisplayName account={account} />
           </Permalink>
diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js
index 9cb0ef13c..36e0ff238 100644
--- a/app/javascript/flavours/glitch/components/server_banner.js
+++ b/app/javascript/flavours/glitch/components/server_banner.js
@@ -61,7 +61,7 @@ class ServerBanner extends React.PureComponent {
           <div className='server-banner__meta__column'>
             <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-            <Account id={server.getIn(['contact', 'account', 'id'])} />
+            <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
           </div>
 
           <div className='server-banner__meta__column'>
diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js
index 3d26c59bc..4129c8236 100644
--- a/app/javascript/flavours/glitch/features/about/index.js
+++ b/app/javascript/flavours/glitch/features/about/index.js
@@ -125,7 +125,7 @@ class About extends React.PureComponent {
             <div className='about__meta__column'>
               <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-              <Account id={server.getIn(['contact', 'account', 'id'])} />
+              <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
             </div>
 
             <hr className='about__meta__divider' />
@@ -209,6 +209,11 @@ class About extends React.PureComponent {
           </Section>
 
           <LinkFooter />
+
+          <div className='about__footer'>
+            <p><FormattedMessage id='about.fork_disclaimer' defaultMessage='Glitch-soc is free open source software forked from Mastodon.' /></p>
+            <p><FormattedMessage id='about.disclaimer' defaultMessage='Mastodon is free, open-source software, and a trademark of Mastodon gGmbH.' /></p>
+          </div>
         </div>
 
         <Helmet>
diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js
index 3f74c908a..d7a4cf130 100644
--- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js
+++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
-import { version, repository, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state';
+import { domain, version, source_url, profile_directory as profileDirectory } from 'flavours/glitch/initial_state';
 import { logOut } from 'flavours/glitch/utils/log_out';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { PERMISSION_INVITE_USERS } from 'flavours/glitch/permissions';
@@ -48,44 +48,44 @@ class LinkFooter extends React.PureComponent {
 
   render () {
     const { signedIn, permissions } = this.context.identity;
-    const items = [];
 
-    items.push(<a key='apps' href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Get the app' /></a>);
-    items.push(<Link key='about' to='/about'><FormattedMessage id='navigation_bar.info' defaultMessage='About' /></Link>);
-    items.push(<a key='mastodon' href='https://joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.what_is_mastodon' defaultMessage='About Mastodon' /></a>);
-    items.push(<a key='docs' href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a>);
-    items.push(<Link key='privacy-policy' to='/privacy-policy'><FormattedMessage id='getting_started.privacy_policy' defaultMessage='Privacy Policy' /></Link>);
-    items.push(<Link key='hotkeys' to='/keyboard-shortcuts'><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></Link>);
-
-    if (profileDirectory) {
-      items.push(<Link key='directory' to='/directory'><FormattedMessage id='getting_started.directory' defaultMessage='Directory' /></Link>);
-    }
-
-    if (signedIn) {
-      if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) {
-        items.push(<a key='invites' href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a>);
-      }
-
-      items.push(<a key='security' href='/auth/edit'><FormattedMessage id='getting_started.security' defaultMessage='Security' /></a>);
-      items.push(<a key='logout' href='/auth/sign_out' onClick={this.handleLogoutClick}><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a>);
-    }
+    const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS);
+    const canProfileDirectory = profileDirectory;
 
     return (
-      <div className='getting-started__footer'>
-        <ul>
-          {items.map((item, index, array) => (
-            <li>{item} { index === array.length - 1 ? null : ' · ' }</li>
-          ))}
-        </ul>
+      <div className='link-footer'>
+        <p>
+          <strong>{domain}</strong>:
+          {' '}
+          <Link key='about' to='/about'><FormattedMessage id='footer.about' defaultMessage='About' /></Link>
+          {canInvite && (
+            <>
+              {' · '}
+              <a key='invites' href='/invites' target='_blank'><FormattedMessage id='footer.invite' defaultMessage='Invite people' /></a>
+            </>
+          )}
+          {canProfileDirectory && (
+            <>
+              {' · '}
+              <Link key='directory' to='/directory'><FormattedMessage id='footer.directory' defaultMessage='Profiles directory' /></Link>
+            </>
+          )}
+          {' · '}
+          <Link key='privacy-policy' to='/privacy-policy'><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link>
+        </p>
 
         <p>
-          <FormattedMessage
-            id='getting_started.open_source_notice'
-            defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
-            values={{
-              github: <span><a href={source_url} rel='noopener noreferrer' target='_blank'>{repository}</a> (v{version})</span>,
-              Mastodon: <a href='https://github.com/mastodon/mastodon' rel='noopener noreferrer' target='_blank'>Mastodon</a> }}
-          />
+          <strong>Mastodon</strong>:
+          {' '}
+          <a href='https://joinmastodon.org' target='_blank'><FormattedMessage id='footer.about' defaultMessage='About' /></a>
+          {' · '}
+          <a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='footer.get_app' defaultMessage='Get the app' /></a>
+          {' · '}
+          <Link to='/keyboard-shortcuts'><FormattedMessage id='footer.keyboard_shortcuts' defaultMessage='Keyboard shortcuts' /></Link>
+          {' · '}
+          <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='footer.source_code' defaultMessage='View source code' /></a>
+          {' · '}
+          v{version}
         </p>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss
index ca9ba3ebf..c6cc6c615 100644
--- a/app/javascript/flavours/glitch/styles/components/about.scss
+++ b/app/javascript/flavours/glitch/styles/components/about.scss
@@ -30,6 +30,34 @@
   }
 }
 
+.link-footer {
+  flex: 0 0 auto;
+  padding: 10px;
+  padding-top: 20px;
+  z-index: 1;
+  font-size: 13px;
+
+  p {
+    color: $dark-text-color;
+    margin-bottom: 20px;
+
+    strong {
+      font-weight: 500;
+    }
+
+    a {
+      color: $dark-text-color;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
 .about {
   padding: 20px;
 
@@ -37,6 +65,14 @@
     border-radius: 4px;
   }
 
+  &__footer {
+    color: $dark-text-color;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+    margin-top: 20px;
+  }
+
   &__header {
     margin-bottom: 30px;
 
@@ -157,7 +193,7 @@
     }
   }
 
-  .getting-started__footer {
+  .link-footer {
     padding: 0;
     margin-top: 60px;
     text-align: center;
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 28f93018d..c3276b035 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1044,43 +1044,6 @@
     color: $dark-text-color;
   }
 
-  &__footer {
-    flex: 0 0 auto;
-    padding: 10px;
-    padding-top: 20px;
-    z-index: 1;
-    font-size: 13px;
-
-    ul {
-      margin-bottom: 10px;
-    }
-
-    ul li {
-      display: inline;
-    }
-
-    p {
-      color: $dark-text-color;
-      margin-bottom: 20px;
-
-      a {
-        color: $dark-text-color;
-        text-decoration: underline;
-      }
-    }
-
-    a {
-      text-decoration: none;
-      color: $darker-text-color;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-      }
-    }
-  }
-
   &__trends {
     flex: 0 1 auto;
     opacity: 1;
-- 
cgit