Skip to content

Commit a632b83

Browse files
michaelwenkmichaelwenk
committed
chore: make news and funding section on homepage replaceable with free text; close #86 
1 parent e1d6c8d commit a632b83

File tree

8 files changed

+109
-52
lines changed

8 files changed

+109
-52
lines changed

‎compose/docker-compose.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,8 @@ services:
104104
DISTRIBUTOR_URL: "${DISTRIBUTOR_URL}"
105105
MB3_FRONTEND_BROWSER_TAB_TITLE: "${MB3_FRONTEND_BROWSER_TAB_TITLE}"
106106
MB3_FRONTEND_HOMEPAGE_INTRO_TEXT: "${MB3_FRONTEND_HOMEPAGE_INTRO_TEXT}"
107+
MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_NAME: "${MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_NAME}"
108+
MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_TEXT: "${MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_TEXT}"
107109
restart: always
108110
ports:
109111
- "${MB3_FRONTEND_PORT}:3000"

‎compose/env.dist

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@ MB3_FRONTEND_BROWSER_TAB_TITLE="MassBank3"
102102
# The text below the logo on the homepage. Add "\n" to use line breaks here.
103103
MB3_FRONTEND_HOMEPAGE_INTRO_TEXT="Welcome to MassBank, an open-source mass spectral library for the identification of small chemical molecules of metabolomics, exposomics and environmental relevance."
104104

105+
# The optional section name replacing the news and funding section on the homepage
106+
MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_NAME=""
107+
# The optional text replacing the news and funding section on the homepage. Add "\n" to use line breaks here.
108+
MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_TEXT=""
105109

106110
# ---------------------------
107111
# Massbank-data configuration

‎web-frontend/server.ts

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -43,21 +43,29 @@ const browserTabTitle =
4343
process.env.MB3_FRONTEND_BROWSER_TAB_TITLE ?? 'MassBank3';
4444
const homepageIntroText =
4545
process.env.MB3_FRONTEND_HOMEPAGE_INTRO_TEXT ?? 'Welcome to MassBank3!';
46+
const homepageReplacementSectionName =
47+
process.env.MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_NAME ?? '';
48+
const homepageReplacementSectionText =
49+
process.env.MB3_FRONTEND_HOMEPAGE_REPLACEMENT_SECTION_TEXT ?? '';
4650

4751
console.log('\n');
48-
console.log('isProduction', process.env.NODE_ENV === 'production');
49-
console.log('port', port);
50-
console.log('host', host);
51-
console.log('baseUrl', frontendBaseUrl);
52-
console.log('frontendUrl', frontendUrl);
53-
console.log('version', version);
54-
console.log('backendUrl', backendUrl);
55-
console.log('backendUrlInternal', backendUrlInternal);
56-
console.log('exportServiceUrl', exportServiceUrl);
57-
console.log('exportServiceUrlInternal', exportServiceUrlInternal);
58-
console.log('googleSearchConsoleKey', googleSearchConsoleKey);
59-
console.log('distributorText', distributorText);
60-
console.log('distributorUrl', distributorUrl);
52+
console.log('isProduction:', process.env.NODE_ENV === 'production');
53+
console.log('port:', port);
54+
console.log('host:', host);
55+
console.log('baseUrl:', frontendBaseUrl);
56+
console.log('frontendUrl:', frontendUrl);
57+
console.log('version:', version);
58+
console.log('backendUrl:', backendUrl);
59+
console.log('backendUrlInternal:', backendUrlInternal);
60+
console.log('exportServiceUrl:', exportServiceUrl);
61+
console.log('exportServiceUrlInternal:', exportServiceUrlInternal);
62+
console.log('googleSearchConsoleKey:', googleSearchConsoleKey);
63+
console.log('distributorText:', distributorText);
64+
console.log('distributorUrl:', distributorUrl);
65+
console.log('browserTabTitle:', browserTabTitle);
66+
console.log('homepageIntroText:', homepageIntroText);
67+
console.log('homepageReplacementSectionName:', homepageReplacementSectionName);
68+
console.log('homepageReplacementSectionText:', homepageReplacementSectionText);
6169
console.log('\n');
6270

6371
// Create http server
@@ -301,6 +309,8 @@ baseRouter.use(/(.*)/, async (req: Request, res: Response) => {
301309
distributorText,
302310
distributorUrl,
303311
homepageIntroText,
312+
homepageReplacementSectionName,
313+
homepageReplacementSectionText,
304314
} as PropertiesContextProps;
305315
const rendered = await render({
306316
path,

‎web-frontend/src/context/properties/properties.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const emptyState: PropertiesContextProps = {
1010
distributorText: '',
1111
distributorUrl: '',
1212
homepageIntroText: '',
13+
homepageReplacementSectionName: '',
14+
homepageReplacementSectionText: '',
1315
};
1416

1517
const propertiesContext = createContext<PropertiesContextProps>(emptyState);

‎web-frontend/src/elements/basic/FreeText.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { CSSProperties } from 'react';
2+
import Typography from 'antd/es/typography';
3+
const { Paragraph, Text } = Typography;
4+
5+
type InputProps = {
6+
text: string;
7+
style?: CSSProperties;
8+
};
9+
10+
function FreeText({ text, style }: InputProps) {
11+
const split = text.split('\n');
12+
13+
return (
14+
<Paragraph
15+
style={{
16+
width: '100%',
17+
textAlign: 'center',
18+
padding: 10,
19+
...style,
20+
}}
21+
>
22+
{split.length === 1 ? (
23+
<Text>
24+
{split[0]}
25+
<br />
26+
</Text>
27+
) : (
28+
split.map((subStr, i) => (
29+
<Text key={i + '_' + subStr}>
30+
{subStr}
31+
<br />
32+
</Text>
33+
))
34+
)}
35+
</Paragraph>
36+
);
37+
}
38+
39+
export default FreeText;

‎web-frontend/src/elements/routes/pages/home/HomeView.tsx

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,13 @@ import Segmented from '../../../basic/Segmented';
77
import QuickSearch from './QuickSearch';
88
import MassBankInfo from './MassBankInfo';
99
import FeaturesOverview from './FeaturesOverview';
10+
import { usePropertiesContext } from '../../../../context/properties/properties';
11+
import FreeText from '../../../basic/FreeText';
1012

1113
function HomeView() {
14+
const { homepageReplacementSectionName, homepageReplacementSectionText } =
15+
usePropertiesContext();
16+
1217
const elements: JSX.Element[] = [];
1318
elements.push(<MassBankInfo />);
1419
elements.push(
@@ -23,18 +28,36 @@ function HomeView() {
2328
<QuickSearch />
2429
</Content>,
2530
);
26-
elements.push(
27-
<Content>
28-
<SectionDivider label="Latest News" />
29-
<News />
30-
</Content>,
31-
);
32-
elements.push(
33-
<Content>
34-
<SectionDivider label="Funding" />
35-
<AcknowledgementNFDI4Chem />
36-
</Content>,
37-
);
31+
32+
if (
33+
homepageReplacementSectionName !== '' &&
34+
homepageReplacementSectionText !== ''
35+
) {
36+
elements.push(
37+
<Content>
38+
<SectionDivider label={homepageReplacementSectionName} />
39+
{
40+
<FreeText
41+
text={homepageReplacementSectionText}
42+
style={{ textAlign: 'left' }}
43+
/>
44+
}
45+
</Content>,
46+
);
47+
} else {
48+
elements.push(
49+
<Content>
50+
<SectionDivider label="Latest News" />
51+
<News />
52+
</Content>,
53+
);
54+
elements.push(
55+
<Content>
56+
<SectionDivider label="Funding" />
57+
<AcknowledgementNFDI4Chem />
58+
</Content>,
59+
);
60+
}
3861

3962
const elementLabels = [
4063
'MassBank',

‎web-frontend/src/elements/routes/pages/home/MassBankInfo.tsx

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,9 @@
11
import { memo, useMemo } from 'react';
22
import { Content } from 'antd/es/layout/layout';
3-
import Typography from 'antd/es/typography';
4-
const { Paragraph, Text } = Typography;
53
import massbankLogo from '../../../../assets/logo.svg';
64
import { usePropertiesContext } from '../../../../context/properties/properties';
5+
import FreeText from '../../../basic/FreeText';
76

8-
function splitAndAddLineBreaks(str: string) {
9-
const split = str.split('\n');
10-
11-
return split.length === 1 ? (
12-
<Text>
13-
{split[0]}
14-
<br />
15-
</Text>
16-
) : (
17-
split.map((subStr, i) => (
18-
<Text key={i + '_' + subStr}>
19-
{subStr}
20-
<br />
21-
</Text>
22-
))
23-
);
24-
}
257
function MassBankInfo() {
268
const { homepageIntroText } = usePropertiesContext();
279

@@ -47,14 +29,7 @@ function MassBankInfo() {
4729
}}
4830
key={'massbank-logo-overview'}
4931
/>
50-
<Paragraph
51-
style={{
52-
width: '100%',
53-
textAlign: 'center',
54-
}}
55-
>
56-
{splitAndAddLineBreaks(homepageIntroText)}
57-
</Paragraph>
32+
{<FreeText text={homepageIntroText} />}
5833
</Content>
5934
),
6035
[homepageIntroText],

‎web-frontend/src/types/PropertiesContextProps.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ interface PropertiesContextProps {
77
distributorText: string;
88
distributorUrl: string;
99
homepageIntroText: string;
10+
homepageReplacementSectionName: string;
11+
homepageReplacementSectionText: string;
1012
}
1113

1214
export default PropertiesContextProps;

0 commit comments

Comments
 (0)