style sermon meta

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package.json

@@ -20,7 +20,14 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "babel-jest": "^26.3.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.4.2",
     "ts-jest": "^26.3.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    }
   }
 }

pages/[language]/sermons/[id].js

@@ -1,14 +1,15 @@
-import { useRouter } from 'next/router'
+import {useRouter} from 'next/router'
 import ErrorPage from 'next/error'
 import React from "react";
 // import Layout from '../../../components/layout'
-import { getAllPostsWithSlug as getLatestSermons, getSermon } from '../../../lib/api'
+import {getAllPostsWithSlug as getLatestSermons, getSermon} from '../../../lib/api'
+import styles from './[id].module.scss'
 
-export default function Post({ sermon }) {
+export default function Post({sermon}) {
     const router = useRouter()
 
     if (!router.isFallback && !sermon) {
-        return <ErrorPage statusCode={404} />
+        return <ErrorPage statusCode={404}/>
     }
 
     const imageSrc = sermon.imageWithFallback.url,
@@ -19,36 +20,38 @@ export default function Post({ sermon }) {
             {router.isFallback ? (
                 <h1>Loading…</h1>
             ) : (
-                <>
-                    <div className={'template-sermon'}>
-                        <div className="template-sermon__meta">
-                            {imageSrc ? <img src={imageSrc} alt={imageAlt}/> : null}
-                            <div className="template-sermon__meta-text">
-                                <h1>{sermon.title}</h1>
-                                <ul className={'template-sermon__speakers'}>
-                                    {sermon.persons.map(speaker => {
-                                        return <li>{speaker.name}</li>
-                                    })}
-                                </ul>
-                            </div>
+                <div>
+                    <div className={styles.meta}>
+                        {imageSrc ? <img src={imageSrc} alt={imageAlt}/> : null}
+                        <div>
+                            <h1>{sermon.title}</h1>
+                            <ul className={styles.speakers}>
+                                {sermon.persons.map(speaker => {
+                                    return <li>{speaker.name}</li>
+                                })}
+                            </ul>
                         </div>
+                    </div>
 
-                        {sermon.recordingDate ? <p>{(new Date(sermon.recordingDate)).toLocaleDateString()}</p> : null}
-                        {sermon.audioFiles.map(file => {
-                            return <div><audio controls src={file.url} preload={'metadata'}>Your browser doesn't support this player.</audio></div>
-                        })}
+                    {sermon.recordingDate ? <p>{(new Date(sermon.recordingDate)).toLocaleDateString()}</p> : null}
+                    {sermon.audioFiles.map(file => {
+                        return <div>
+                            <audio controls src={file.url} preload={'metadata'}>Your browser doesn't support this
+                                player.
+                            </audio>
+                        </div>
+                    })}
 
-                        {sermon.description ? <div dangerouslySetInnerHTML={{__html: sermon.description}} /> : null}
+                    {sermon.description ? <div dangerouslySetInnerHTML={{__html: sermon.description}}/> : null}
 
-                        Other sermons: ...
-                    </div>
-                </>
+                    Other sermons: ...
+                </div>
             )}
         </div>
     )
 }
 
-export async function getStaticProps({ params }) {
+export async function getStaticProps({params}) {
     const sermon = await getSermon(params.id)
 
     return {

pages/[language]/sermons/[id].module.scss

@@ -0,0 +1,31 @@
+.meta {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  img {
+    flex: 0 0 50px;
+    margin-right: .75rem;
+    border-radius: 100%;
+  }
+  h1 {
+    margin: 0;
+  }
+}
+
+.speakers  {
+  margin: 0;
+  padding-left: 0;
+  li {
+    display: inline;
+    list-style-type: none;
+    font-style: italic;
+    opacity: .5;
+  }
+  li:after {
+    content: ", ";
+  }
+  li:last-child:after {
+    content: "";
+  }
+}
+