Refactor: Add featured image and parse it

.gitignore

@@ -0,0 +1,70 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
+.idea

.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "semi": false
+}

gatsby-config.js

@@ -31,7 +31,6 @@ module.exports = {
             options: {
               maxWidth: 2000,
               withWebp: true,
-              formats: ['auto', 'webp'],
               showCaptions: true,
               quality: 90,
               linkImagesToOriginal: true,

package.json

@@ -28,6 +28,7 @@
     "gatsby-transformer-sharp": "^5.3.1",
     "gh-pages": "^4.0.0",
     "lodash": "^4.17.21",
+    "path": "^0.12.7",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-back-to-top": "github:lyhmyd1211/react-Back-To-Top",

src/components/layout.css

@@ -21,8 +21,8 @@
   --space-4: 24px;
   --space-5: 32px;
   --space-6: 64px;
-  --size-content: 74rem;
-  --size-gutter: var(--space-5);
+  --size-content: 84rem;
+  --size-gutter: var(--space-4);
   --size-gap: var(--space-6);
   --color-footer-bg: #2c1f6d;
 }

src/components/structure/logos.js

@@ -6,32 +6,32 @@ const Logos = () => {
   return (
     <>
       <Col md={10} className="mx-auto">
-        <Row className="justify-content-center mb-4">
-          <Col md={2} sm={2} className="col-md-2 text-center">
+        <Row className="justify-content-center mb-4 ">
+          <Col md={2} sm={2} className="col-md-2 text-center mx-2">
             <a href="https://www.ucl.ac.uk/">
               <StaticImage src={"../../images/logos/UCL-Logo.png"} alt={'UCL Logo'} className="img-fluid mx-auto "
                            width={200} placeholder={'NONE'}/>
             </a>
           </Col>
-          <Col md={2} sm={2} className="text-center">
+          <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.ed.ac.uk">
               <StaticImage src={"../../images/logos/edinburgh.png"} alt={'Edinburgh University logo'}
                            className="img-fluid mx-auto " height={100} placeholder={'NONE'}/>
             </a>
           </Col>
-          <Col md={2} sm={2} className="text-center">
+          <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.stir.ac.uk">
               <StaticImage src={"../../images/logos/university-of-stirling.png"} alt={'Stirling University logo'}
                            className="img-fluid mx-auto" height={100} placeholder={'NONE'}/>
             </a>
           </Col>
-          <Col md={2} sm={2} className="text-center">
+          <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.britishmuseum.org">
               <StaticImage src={"../../images/logos/british-museum-logo-vector.png"} alt={'British Museum  logo'}
                            className="img-fluid mx-auto" height={100} placeholder={'NONE'}/>
             </a>
           </Col>
-          <Col md={2} sm={2} className="text-center">
+          <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.st-edmunds.cam.ac.uk/">
               <StaticImage src={"../../images/logos/Gitlab-Eddies.png"} alt={'St Edmund\'s college logo'}
                            className="img-fluid mx-auto" height={100} placeholder={'NONE'}/>

src/components/structure/post-card.js

@@ -1,22 +1,36 @@
 import React from "react";
-import { Card } from "react-bootstrap";
+import { Card, Row, Col } from "react-bootstrap";
 import { Link } from "gatsby";
+import { GatsbyImage, getImage, StaticImage } from "gatsby-plugin-image";
 
 const PostCard = ({ post }) => (
 
-  <Card className="border-0">
-    <Card.Body className="bg-white border-0 rounded-0">
-      <div className="h-100">
-        <Link to={post.frontmatter.permalink} className="stretched-link stretched-link__blog_post">
-          <h1 className="lead text-black fw-bold mb-1">{post.frontmatter.title}</h1>
-          <h2 className="text-primary small">{post.frontmatter.date} Authors: {post.frontmatter.author && post.frontmatter.author.map(writer => (
-            `${writer} `
-          ))}</h2>
-          <p className={'text-dark'}>{post.excerpt}</p>
-        </Link>
-      </div>
+  <Card className="border-0 my-3">
+    <Row className="row g-0">
+      <Col md={4}>
+          {post.frontmatter.featuredImage !== null ?
+            <GatsbyImage image={getImage(post.frontmatter.featuredImage)} alt={post.frontmatter.title}
+                         className={"img-fluid rounded-start"} />
+            :
+            <StaticImage src={"../../images/img.png"} alt="A stand in image" width={400} height={250}
+                         placeholder={"BLURRED"} className={"img-fluid rounded-start"} />
+          }
+      </Col>
+      <Col md={8}>
+        <Card.Body className="bg-white border-1 border-dark">
+          <Link to={post.frontmatter.permalink} className="stretched-link stretched-link__blog_post">
+            <h1 className="lead text-black fw-bold mb-1">{post.frontmatter.title}</h1>
+            <h2
+              className="text-primary small">{post.frontmatter.date} Authors: {post.frontmatter.author && post.frontmatter.author.map(writer => (
+              `${writer} `
+            ))}</h2>
+            <p className={"text-dark"}>{post.excerpt}</p>
+          </Link>
+        </Card.Body>
+      </Col>
+    </Row>
+
 
-    </Card.Body>
   </Card>
 );
 

src/content/post/2013/10/22/crowd-sourcing-crowd-funding-and-archaeology.md

@@ -4,6 +4,7 @@ date: '2013-10-22T15:55:55+01:00'
 status: publish
 permalink: /2013/10/22/crowd-sourcing-crowd-funding-and-archaeology
 excerpt: ''
+featuredImage: ../../../../uploads/2013/10/MP_SOCIALMEDIA.jpg
 author: 
  - Chiara Bonnachi
  - Daniel Pett

src/content/post/2013/11/05/what-is-the-value-of-crowd-sourcing-archaeology.md

@@ -3,6 +3,7 @@ title: 'What value is there in crowdsourcing archaeological research?'
 date: '2013-11-05T15:28:29+00:00'
 status: publish
 permalink: /2013/11/05/what-is-the-value-of-crowd-sourcing-archaeology
+featuredImage: ../../../../uploads/2013/11/3501625083_99f1091857_c.jpg
 author:
   - Chiara Bonnachi
 excerpt: ''

src/content/post/2013/11/14/communities-engagement-experiences-and-value.md

@@ -3,6 +3,7 @@ title: 'Communities, engagement experiences and value'
 date: '2013-11-14T10:46:39+00:00'
 status: publish
 permalink: /2013/11/14/communities-engagement-experiences-and-value
+featuredImage: ../../../../uploads/2013/11/2402570561_1c452fb8b4_c.jpg
 excerpt: ''
 type: post
 id: 150

src/content/post/2013/11/22/welcoming-crowds-into-communities.md

@@ -1,9 +1,10 @@
 ---
-title: 'Welcoming ‘crowds’ into communities'
+title: 'Welcoming "crowds" into communities'
 date: '2013-11-22T13:05:44+00:00'
 status: publish
 permalink: /2013/11/22/welcoming-crowds-into-communities
 excerpt: ''
+featuredImage: ../../../../uploads/2013/11/IMG20220621042742_01.jpg
 type: post
 id: 253
 author:

src/content/post/2013/12/09/public-archaeology-in-response-to-the-crisis.md

@@ -3,6 +3,7 @@ title: 'Public Archaeology in response to the crisis'
 date: 2013-12-09T14:55:45+00:00
 status: publish
 permalink: /2013/12/09/public-archaeology-in-response-to-the-crisis
+featuredImage: ../../../../uploads/2013/12/unnamed.jpg
 author: 
     - Chiara Bonnachi
 excerpt: ''
@@ -20,8 +21,7 @@ tag:
 ---
 Hello,
 
-![Temple of Concord, Valley of the temples, Agrigento
-](../../../../uploads/2013/12/unnamed.jpg)
+![Temple of Concord, Valley of the temples, Agrigento](../../../../uploads/2013/12/unnamed.jpg)
 
 I am just back from *[Public Archaeology in a time of crisis](http://www.parcodeitempli.net/pages/giornate-gregoriane-vii-edizione "Public Archaeology in a time of crisis")* a brilliant conference organised at the Valley of the Temples, in Agrigento (Italy), where I was invited as speaker along with other Italian, Greek, Spanish and UK delegates.
 

src/content/post/2014/01/29/british-museum-presentation.md

@@ -16,6 +16,7 @@ author:
 ---
 The [MicroPasts team](https://blog.micropasts.org/people/) presented this morning on the progress of the project so far, as part of a [British Museum](http://www.britishmuseum.org) staff breakfast presentation. The presentation (without script) is shown below as an embedded pdf from Google Drive. It starts with detailing some new work on the Portable Antiquities Scheme site (visualisations by Tracemedia and mapping improvements) that BM staff may not have seen previously. Then it moves onto discuss the aims and objectives of the three strands of the MicroPasts project.
 
-[*Dan*](http://www.britishmuseum.org/about_us/departments/staff/portable_antiquities_treasure/daniel_pett.aspx)
 
-<iframe allowfullscreen="true" frameborder="0" height="389" loading="lazy" src="https://docs.google.com/presentation/d/1w0VZCQXtfYq8Bg_QzVKGbdDzVtWiAIFV1OWnc2eY6qk/embed?start=false&loop=false&delayms=3000" width="480"></iframe>
+<div class="ratio ratio-16x9 my-3">
+<iframe allowfullscreen="true" loading="lazy" src="https://docs.google.com/presentation/d/1w0VZCQXtfYq8Bg_QzVKGbdDzVtWiAIFV1OWnc2eY6qk/embed?start=false&loop=false&delayms=3000" ></iframe>
+</div>