From e8ceedd689b6a7298abe25aa613849447d7c3d28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 26 Jun 2021 15:07:45 +0200 Subject: [PATCH 1/6] Localizable about pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/actions/about.js | 10 ++-- app/soapbox/actions/soapbox.js | 1 + app/soapbox/features/about/index.js | 64 +++++++++++++++++++++-- app/soapbox/features/preferences/index.js | 2 +- app/soapbox/locales/pl.json | 1 + app/styles/about.scss | 4 ++ 6 files changed, 71 insertions(+), 11 deletions(-) diff --git a/app/soapbox/actions/about.js b/app/soapbox/actions/about.js index a515bdfbb..3752d10da 100644 --- a/app/soapbox/actions/about.js +++ b/app/soapbox/actions/about.js @@ -4,14 +4,14 @@ export const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST'; export const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS'; export const FETCH_ABOUT_PAGE_FAIL = 'FETCH_ABOUT_PAGE_FAIL'; -export function fetchAboutPage(slug = 'index') { +export function fetchAboutPage(slug = 'index', locale) { return (dispatch, getState) => { - dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug }); - return api(getState).get(`/instance/about/${slug}.html`).then(response => { - dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, html: response.data }); + dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug, locale }); + return api(getState).get(`/instance/about/${slug}${locale ? `.${locale}` : ''}.html`).then(response => { + dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, locale, html: response.data }); return response.data; }).catch(error => { - dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug, error }); + dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug, locale, error }); throw error; }); }; diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js index d7a42e19c..015ab0049 100644 --- a/app/soapbox/actions/soapbox.js +++ b/app/soapbox/actions/soapbox.js @@ -47,6 +47,7 @@ export const defaultConfig = ImmutableMap({ cryptoDonatePanel: ImmutableMap({ limit: 1, }), + aboutPages: ImmutableMap(), }); export function getSoapboxConfig(state) { diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js index df7b41aa2..0ff88bf26 100644 --- a/app/soapbox/features/about/index.js +++ b/app/soapbox/features/about/index.js @@ -1,18 +1,33 @@ import React from 'react'; import { connect } from 'react-redux'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { fetchAboutPage } from 'soapbox/actions/about'; +import { getSettings } from 'soapbox/actions/settings'; +import { getSoapboxConfig } from 'soapbox/actions/soapbox'; +import { languages } from '../preferences'; +const mapStateToProps = state => ({ + locale: getSettings(state).get('locale'), + aboutPages: getSoapboxConfig(state).get('aboutPages'), +}); + +@connect(mapStateToProps) +@injectIntl class AboutPage extends ImmutablePureComponent { state = { pageHtml: '', + locale: this.props.locale, } loadPageHtml = () => { - const { dispatch, match } = this.props; + const { dispatch, match, aboutPages } = this.props; + const { locale } = this.state; const { slug } = match.params; - dispatch(fetchAboutPage(slug)).then(html => { + const page = aboutPages.get(slug || 'about'); + const fetchLocale = page && locale !== page.get('default') && page.get('locales').includes(locale); + dispatch(fetchAboutPage(slug, fetchLocale && locale)).then(html => { this.setState({ pageHtml: html }); }).catch(error => { // TODO: Better error handling. 404 page? @@ -20,17 +35,55 @@ class AboutPage extends ImmutablePureComponent { }); } + setLocale = (locale) => () => { + this.setState({ locale }); + }; + componentDidMount() { this.loadPageHtml(); } componentDidUpdate(prevProps, prevState) { - const { slug } = this.props.match.params; + const { locale, match, aboutPages } = this.props; + const { locale: prevLocale, aboutPages: prevAboutPages } = prevProps; + const { locale: stateLocale } = this.props; + const { locale: prevStateLocale } = prevState; + const { slug } = match.params; const { slug: prevSlug } = prevProps.match.params; - if (slug !== prevSlug) this.loadPageHtml(); + if (locale !== prevLocale) this.setState({ locale }); + if (slug !== prevSlug || stateLocale !== prevStateLocale || (!prevAboutPages.get(slug || 'about') && aboutPages.get(slug || 'about'))) + this.loadPageHtml(); } render() { + const { match, aboutPages } = this.props; + const { slug } = match.params; + + const page = aboutPages.get(slug || 'about'); + const defaultLocale = page && page.get('default'); + const alsoAvailable = page && ( +
+ + {' '} + +
+ ); + return (
@@ -38,6 +91,7 @@ class AboutPage extends ImmutablePureComponent { className='rich-formatting' dangerouslySetInnerHTML={{ __html: this.state.pageHtml }} /> + {alsoAvailable}
); @@ -45,4 +99,4 @@ class AboutPage extends ImmutablePureComponent { } -export default connect()(AboutPage); +export default AboutPage; diff --git a/app/soapbox/features/preferences/index.js b/app/soapbox/features/preferences/index.js index 7d188afc6..5bed02edf 100644 --- a/app/soapbox/features/preferences/index.js +++ b/app/soapbox/features/preferences/index.js @@ -15,7 +15,7 @@ import { } from 'soapbox/features/forms'; import SettingsCheckbox from 'soapbox/components/settings_checkbox'; -const languages = { +export const languages = { en: 'English', ar: 'العربية', ast: 'Asturianu', diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json index 532770f18..9703f3dd8 100644 --- a/app/soapbox/locales/pl.json +++ b/app/soapbox/locales/pl.json @@ -1,4 +1,5 @@ { + "about.also_available": "Strona dostępna w językach:", "accordion.collapse": "Zwiń", "accordion.expand": "Rozwiń", "account.add_or_remove_from_list": "Dodaj lub usuń z list", diff --git a/app/styles/about.scss b/app/styles/about.scss index a1b20544b..39ce9cd54 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -359,6 +359,10 @@ $fluid-breakpoint: $maximum-width + 20px; } } +.also-available { + margin-top: 0; +} + .public-layout { position: relative; background-color: var(--brand-color); From 5e7ed0826e125e7002fe3db3527fa3c53e49779b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 26 Jun 2021 15:12:49 +0200 Subject: [PATCH 2/6] remove unused import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/about/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js index 0ff88bf26..fcd400d64 100644 --- a/app/soapbox/features/about/index.js +++ b/app/soapbox/features/about/index.js @@ -1,6 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { fetchAboutPage } from 'soapbox/actions/about'; import { getSettings } from 'soapbox/actions/settings'; From 330324721bce63971ca58e975d95aa19b000616e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 26 Jun 2021 15:15:31 +0200 Subject: [PATCH 3/6] cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/about/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js index fcd400d64..369872219 100644 --- a/app/soapbox/features/about/index.js +++ b/app/soapbox/features/about/index.js @@ -37,21 +37,21 @@ class AboutPage extends ImmutablePureComponent { setLocale = (locale) => () => { this.setState({ locale }); + this.loadPageHtml(); }; componentDidMount() { this.loadPageHtml(); } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate(prevProps) { const { locale, match, aboutPages } = this.props; const { locale: prevLocale, aboutPages: prevAboutPages } = prevProps; - const { locale: stateLocale } = this.props; - const { locale: prevStateLocale } = prevState; const { slug } = match.params; const { slug: prevSlug } = prevProps.match.params; + if (locale !== prevLocale) this.setState({ locale }); - if (slug !== prevSlug || stateLocale !== prevStateLocale || (!prevAboutPages.get(slug || 'about') && aboutPages.get(slug || 'about'))) + if (slug !== prevSlug || (!prevAboutPages.get(slug || 'about') && aboutPages.get(slug || 'about'))) this.loadPageHtml(); } From 656c872aada2d4077bc758d9e890f9dfe59aefb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 26 Jun 2021 15:15:31 +0200 Subject: [PATCH 4/6] cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/about/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js index fcd400d64..b6892fdfc 100644 --- a/app/soapbox/features/about/index.js +++ b/app/soapbox/features/about/index.js @@ -50,8 +50,13 @@ class AboutPage extends ImmutablePureComponent { const { locale: prevStateLocale } = prevState; const { slug } = match.params; const { slug: prevSlug } = prevProps.match.params; + if (locale !== prevLocale) this.setState({ locale }); - if (slug !== prevSlug || stateLocale !== prevStateLocale || (!prevAboutPages.get(slug || 'about') && aboutPages.get(slug || 'about'))) + if ( + slug !== prevSlug || + stateLocale !== prevStateLocale || + (!prevAboutPages.get(slug || 'about') && aboutPages.get(slug || 'about')) + ) this.loadPageHtml(); } From c8fc995ccddc48597526f0b2c27050e4c049928d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 28 Jun 2021 19:07:38 +0200 Subject: [PATCH 5/6] styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/about/index.js | 5 +++-- app/styles/about.scss | 19 ++++++++++++++++++- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js index b6892fdfc..d2abde9f4 100644 --- a/app/soapbox/features/about/index.js +++ b/app/soapbox/features/about/index.js @@ -72,14 +72,14 @@ class AboutPage extends ImmutablePureComponent { {' '} ); + console.log(slug, page); return (
diff --git a/app/styles/about.scss b/app/styles/about.scss index 39ce9cd54..09ffe78d9 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -360,7 +360,24 @@ $fluid-breakpoint: $maximum-width + 20px; } .also-available { - margin-top: 0; + padding-top: 0; + + ul { + display: inline; + padding-left: 0; + list-style: none; + + li { + display: inline; + &::after { + content: ' · '; + } + } + + li:last-child::after { + content: ''; + } + } } .public-layout { From a54f38305c5f7ae68d540a10caa3398447d3b29d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 28 Jun 2021 19:45:16 +0200 Subject: [PATCH 6/6] lint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/styles/about.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/about.scss b/app/styles/about.scss index 09ffe78d9..53a20ac9d 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -369,6 +369,7 @@ $fluid-breakpoint: $maximum-width + 20px; li { display: inline; + &::after { content: ' · '; }