Merge branch 'master' into brandable

docker-compose.prod.yaml

@@ -1,7 +1,9 @@
 # overrides that make the app behave like a production build
 services:
   app:
-    command: sh -c 'yarn build; yarn start'
+    build:
+      context: .
+      target: prod
     healthcheck:
       test: ["CMD-SHELL", "sh -c 'apk add curl; curl -X POST http://app:3000/'"]
       interval: 5s

src/components/atoms/assessment/assessment.scss

@@ -3,8 +3,8 @@
 @use "../../../sass/mixins";
 
 .assessment {
-  @include mixins.margin(0 -24);
-  @include mixins.padding(24);
+  @include mixins.margin(0 -24 36);
+  @include mixins.padding(36 24);
   @include typography.assessment-body();
 
   .highlighted-term {
@@ -41,14 +41,12 @@
   }
 
   @media only all and (min-width: settings.$breakpoint-small) {
-    @include mixins.margin(0 -48);
-    @include mixins.padding(36 48);
+    @include mixins.margin(0 -48 36);
+    @include mixins.padding(48);
   }
 
   @media only all and (min-width: settings.$breakpoint-medium) {
-    @include mixins.padding(24 36);
-
-    margin: 0;
+    @include mixins.margin(0 0 36);
   }
 
   background-color: var(--color-background);
@@ -61,6 +59,10 @@
 .assessment__body {
   @include mixins.margin(12, "bottom");
 
+  p:first-of-type {
+    @include mixins.margin(0, "top");
+  }
+
   p:last-of-type {
     @include mixins.margin(0, "bottom");
   }

src/components/atoms/assessment/assessment.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, expect } from '@storybook/test';
 import { Assessment } from './assessment';
+import '../../../i18n';
 
 const meta: Meta<typeof Assessment> = {
   title: 'Atoms/Assessment',

src/components/atoms/assessment/assessment.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { significanceTerms, strengthTerms } from '../../../utils/terms';
 import { Assessment } from './assessment';
+import '../../../i18n';
 
 let mockPathName = '';
 jest.mock('next/navigation', () => ({

src/components/atoms/assessment/assessment.tsx

@@ -1,5 +1,4 @@
 import './assessment.scss';
-import '../../../i18n';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TermsList } from '../terms-list/terms-list';

src/components/atoms/review-content/review-content.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ReviewContent } from './review-content';
+import '../../../i18n';
 
 const meta: Meta<typeof ReviewContent> = {
   title: 'Atoms/Review Content',

src/components/atoms/review-content/review-content.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { ReviewContent } from './review-content';
+import '../../../i18n';
 
 describe('ReviewContent', () => {
   it('renders with a simple string content', async () => {

src/components/atoms/review-content/review-content.tsx

@@ -1,5 +1,4 @@
 import './review-content.scss';
-import '../../../i18n';
 import { Descriptors } from '../descriptors/descriptors';
 
 type Props = { content: string, id?: string, peerReviewUrl?: string, doi?: string };

src/components/atoms/review-process/review-process.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ReviewProcess } from './review-process';
+import '../../../i18n';
 
 const meta: Meta<typeof ReviewProcess> = {
   title: 'Atoms/Review Process',

src/components/atoms/review-process/review-process.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { ReviewProcess } from './review-process';
+import '../../../i18n';
 
 describe('Review Process', () => {
   it('renders review process', () => {

src/components/atoms/review-process/review-process.tsx

@@ -1,5 +1,4 @@
 import './review-process.scss';
-import '../../../i18n';
 import { useTranslation } from 'react-i18next';
 import parse from 'html-react-parser';
 

src/components/atoms/socials/socials.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Socials } from './socials';
+import '../../../i18n';
 
 const meta: Meta<typeof Socials> = {
   title: 'Atoms/Socials',

src/components/atoms/socials/socials.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 import './socials.scss';
-import '../../../i18n';
 
 type SocialsProps = {
   doi: string,

src/components/molecules/article-status/article-status.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { citation, metrics } from '../../../utils/mocks';
 import { ArticleStatus } from './article-status';
+import '../../../i18n';
 
 const meta: Meta<typeof ArticleStatus> = {
   title: 'Molecules/ArticleStatus',

src/components/molecules/article-status/article-status.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { citation } from '../../../utils/mocks';
 import { ArticleStatus } from './article-status';
+import '../../../i18n';
 
 describe('ArticleStatus', () => {
   it('renders the article status and type if passed in', () => {

src/components/molecules/article-status/article-status.tsx

@@ -5,7 +5,6 @@ import { Socials } from '../../atoms/socials/socials';
 import { Modal } from '../modal/modal';
 import './article-status.scss';
 import { Citation, CitationData } from '../../atoms/citation/citation';
-import '../../../i18n';
 import { ContextualData, ContextualDataProps } from '../../atoms/contextual-data/contextual-data';
 import { Timeline, TimelineProps } from '../timeline/timeline';
 

src/components/molecules/timeline/timeline.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import { Timeline } from './timeline';
+import '../../../i18n';
 
 const meta: Meta<typeof Timeline> = {
   title: 'Molecules/Timeline',

src/components/molecules/timeline/timeline.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Timeline } from './timeline';
+import '../../../i18n';
 
 describe('Timeline', () => {
   it('renders a single timeline item', () => {

src/components/molecules/timeline/timeline.tsx

@@ -1,5 +1,4 @@
 import { Fragment, useEffect, useState } from 'react';
-import '../../../i18n';
 import './timeline.scss';
 import { formatDate } from '../../../utils/formatters';
 import { TimelineEvent } from '../../../types';

src/components/pages/article/article-page.scss

@@ -27,7 +27,7 @@
 }
 
 .tabbed-navigation {
-  @include mixins.margin(0 -24 24);
+  @include mixins.margin(0 -24);
   @include mixins.z-index(1);
 
   background-color: #fff;
@@ -39,7 +39,7 @@
   top: 0;
 
   @media only screen and (min-width: settings.$breakpoint-small) {
-    @include mixins.margin(0 -48 36);
+    @include mixins.margin(0 -48);
   }
 
   @media only screen and (min-width: settings.$breakpoint-medium) {
@@ -127,4 +127,13 @@
   @media only all and (min-width: settings.$breakpoint-large) {
     display: flex;
   }
+
+  &.tabbed-navigation__content--reviews,
+  &.tabbed-navigation__content--figures {
+    @include mixins.margin(36, "top");
+
+    @media only all and (min-width: settings.$breakpoint-medium) {
+      @include mixins.margin(0, "top");
+    }
+  }
 }

src/components/pages/article/article-page.stories.tsx

@@ -8,6 +8,7 @@ import { ArticleFullTextTab, ArticleFiguresTab, ArticleReviewsTab } from './tabs
 import { DefaultLayout } from '../../layouts/default';
 import { ErrorMessages } from '../../atoms/error-messages/error-messages';
 import { contentToHeadings, contentToJsx } from '../../../utils/content';
+import '../../../i18n';
 
 const meta: Meta<typeof ArticlePage> = {
   title: 'Pages/Article Page',

src/components/pages/article/article-page.test.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../../utils/mocks';
 import { ArticleFiguresTab, ArticleFullTextTab, ArticleReviewsTab } from './tabs';
 import { contentToText } from '../../../utils/content';
+import '../../../i18n';
 
 jest.mock('next/navigation', () => ({
   usePathname: () => '',

src/components/pages/article/article-page.tsx

@@ -3,13 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { ArticleStatus } from '../../molecules/article-status/article-status';
 import { ContentHeader } from '../../molecules/content-header/content-header';
 import './article-page.scss';
-import { MetaData, TimelineEvent } from '../../../types';
+import { MetaData, Metrics, TimelineEvent } from '../../../types';
 import { ArticleFiguresTab, ArticleFullTextTab, ArticleReviewsTab } from './tabs';
-import { contentToText } from '../../../utils/content/content-to-text';
+import { contentToText } from '../../../utils/content';
 import { CitationData } from '../../atoms/citation/citation';
-import '../../../i18n';
 import { RelatedContentData, RelatedContent } from '../../atoms/related-content/related-content';
-import { Metrics } from '../../../types/enhanced-article';
 import { PreviousVersionWarning } from '../../atoms/previous-version-warning/previous-version-warning';
 
 export type ArticleStatusProps = {

src/components/pages/article/tabs/figures-tab.tsx

@@ -4,7 +4,7 @@ import { ArticleContent } from '../../../atoms/article-content/article-content';
 import { JSXContent } from '../../../../utils/content';
 
 export const ArticleFiguresTab = ({ content }: { content: JSXContent }) => (
-  <div className="tabbed-navigation__content">
+  <div className="tabbed-navigation__content tabbed-navigation__content--figures">
     <div className="menu-spacer"/>
     <div className="article-body-container">
       <Heading id="figures" headingLevel={2} content="Figures and data" />

src/components/pages/article/tabs/fulltext-tab.test.tsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 import { metaData, peerReview, content } from '../../../../utils/mocks';
 import { ArticleFullTextTab } from './fulltext-tab';
 import { contentToJsx } from '../../../../utils/content';
+import '../../../../i18n';
 
 jest.mock('next/navigation', () => ({
   usePathname: () => '',
@@ -98,10 +99,6 @@ describe('FulltextTab', () => {
         href: '#abstract',
         text: 'Abstract',
       },
-      {
-        href: '#assessment',
-        text: 'eLife assessment',
-      },
       {
         href: '#s1',
         text: 'Introduction',
@@ -148,7 +145,7 @@ describe('FulltextTab', () => {
   it('uses the heading ids for the hrefs in jump-to-menu', () => {
     const { container } = render(<ArticleFullTextTab metrics={null} headings={[]} content={''} metaData={metaData} peerReview={peerReview}/>);
 
-    const headings = Array.from(container.querySelectorAll('section[id], h1, .heading-1'));
+    const headings = Array.from(container.querySelectorAll('.article-body-container section[id], h1, .heading-1'));
     const ids = headings.map(({ id }) => id);
 
     const links = Array.from(container.querySelectorAll<HTMLAnchorElement>('.jump-menu-list__link'));

src/components/pages/article/tabs/fulltext-tab.tsx

@@ -1,13 +1,11 @@
 import '../article-page.scss';
-import { useTranslation } from 'react-i18next';
 import { ArticleContent } from '../../../atoms/article-content/article-content';
 import { Heading, JumpToMenu } from '../../../atoms/jump-to-menu/jump-to-menu';
 import { Abstract } from '../../../atoms/abstract/abstract';
 import { ReferenceList } from '../../../atoms/reference-list/reference-list';
 import { ArticleAndAuthorInformation } from '../../../molecules/article-and-author-information/article-and-author-information';
 import { MetaData, PeerReview } from '../../../../types';
 import { JSXContent } from '../../../../utils/content';
-import '../../../../i18n';
 import { Metrics as MetricsType } from '../../../../types/enhanced-article';
 import { Metrics } from '../../../atoms/metrics/metrics';
 import { Assessment } from '../../../atoms/assessment/assessment';
@@ -22,32 +20,30 @@ type Props = {
 };
 
 export const ArticleFullTextTab = (props: Props) => {
-  const { t } = useTranslation();
   const headings = [
     { id: 'abstract', text: 'Abstract' },
     ...props.headings,
     { id: 'references', text: 'References' },
     { id: 'article-and-author-information', text: 'Article and Author Information' },
   ];
 
-  if (props.peerReview !== undefined) {
-    headings.splice(1, 0, { id: 'assessment', text: t('heading_assessment') });
-  }
   if (props.metrics) {
     headings.push({ id: 'metrics', text: 'Metrics' });
   }
 
   return (
-    <div className="tabbed-navigation__content">
-      <JumpToMenu headings={headings} />
-      <div className="article-body-container">
-        <Abstract content={props.metaData.abstract} />
-        { props.peerReview && <Assessment content={props.peerReview.evaluationSummary.text} doi={props.peerReview.evaluationSummary.doi}/> }
-        <ArticleContent content={props.content} />
-        <ReferenceList references={props.metaData.references} />
-        <ArticleAndAuthorInformation authors={props.metaData.authors} authorNotes={props.metaData.authorNotes} versions={props.metaData.versionHistory} license={props.metaData.license} publishedYear={props.metaData.publishedYear} />
-        { props.metrics && <Metrics metrics={props.metrics} /> }
+    <>
+      { props.peerReview && <Assessment content={props.peerReview.evaluationSummary.text} doi={props.peerReview.evaluationSummary.doi}/> }
+      <div className="tabbed-navigation__content">
+        <JumpToMenu headings={headings} />
+        <div className="article-body-container">
+          <Abstract content={props.metaData.abstract} />
+          <ArticleContent content={props.content} />
+          <ReferenceList references={props.metaData.references} />
+          <ArticleAndAuthorInformation authors={props.metaData.authors} authorNotes={props.metaData.authorNotes} versions={props.metaData.versionHistory} license={props.metaData.license} publishedYear={props.metaData.publishedYear} />
+          { props.metrics && <Metrics metrics={props.metrics} /> }
+        </div>
       </div>
-    </div>
+    </>
   );
 };

src/components/pages/article/tabs/reviews-tab.tsx

@@ -16,7 +16,7 @@ export const ArticleReviewsTab = ({ peerReview, currentVersion }: { peerReview:
   ];
 
   return (
-    <div className="tabbed-navigation__content">
+    <div className="tabbed-navigation__content tabbed-navigation__content--reviews">
       <JumpToMenu headings={headings} />
       <div className="article-body-container">
         <ReviewProcess current={currentVersion} {...(peerReview.authorResponse ? { authorResponse: true } : {})} />

src/pages/_app.page.tsx

@@ -1,11 +1,13 @@
 import Head from 'next/head';
 import { Noto_Serif, Noto_Sans } from 'next/font/google';
 import { ReactNode } from 'react';
+import { I18nextProvider } from 'react-i18next';
 import { DefaultLayout } from '../components/layouts/default';
 import { config } from '../config';
 import { BiophysicsColabLayout } from '../components/layouts/biophysics-colab';
 import { SimpleSiteHeader } from '../components/molecules/site-header/simple-site-header';
 import { brands } from '../brand';
+import { i18n } from '../i18n';
 
 const LayoutSelector = ({ siteName, children }: { siteName?: string, children: ReactNode }) => {
   switch (siteName) {
@@ -120,9 +122,11 @@ export default function MyApp({ Component, pageProps }: any) {
           }}></script>
         }
       </Head>
-      <LayoutSelector siteName={pageProps.siteName}>
-        <Component {...pageProps} />
-      </LayoutSelector>
+      <I18nextProvider i18n={i18n} defaultNS={pageProps.siteName?.replace('-', '_')}>
+        <LayoutSelector siteName={pageProps.siteName}>
+          <Component {...pageProps} />
+        </LayoutSelector>
+      </I18nextProvider>
     </>
   );
 }

src/pages/reviewed-preprints/[...path].page.tsx

@@ -21,7 +21,6 @@ import {
 import { generateStatus, generateTimeline, generateVersionHistory } from '../../utils/generators';
 import { ErrorMessages } from '../../components/atoms/error-messages/error-messages';
 import { formatAuthorName } from '../../utils/formatters';
-import '../../i18n';
 import { makeNullableOptional } from '../../utils/make-nullable-optional';
 import { SerialisedTimelineEvent } from '../../types/article-timeline';
 import { Brand, brands } from '../../brand';

src/types/content.ts

@@ -49,6 +49,7 @@ export type FigureContent = DecoratedContent & {
 
 export type ImageObjectContent = {
   type: 'ImageObject',
+  id?: string,
   contentUrl?: string,
   content?: Content
   meta: {