Refactor: Remove unwanted surrogate images

Refactor: Add tags functions
Refactor: Footer dims

gatsby-config.js

@@ -127,6 +127,15 @@ module.exports = {
     `gatsby-plugin-twitter`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
+    {
+      resolve: "gatsby-plugin-react-svg",
+      options: {
+        rule: {
+          include: /images\/.*\.svg/,
+          omitKeys: ['xmlnsDc', 'xmlnsCc', 'xmlnsRdf', 'xmlnsSvg', 'xmlnsSodipodi', 'xmlnsInkscape']
+        }
+      }
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

gatsby-node.js

@@ -1,5 +1,4 @@
 const _ = require("lodash")
-const fs = require("fs");
 const {paginate} = require("gatsby-awesome-pagination");
 exports.createPages = async ({ actions,graphql }) => {
   const { createPage } = actions
@@ -9,6 +8,11 @@ exports.createPages = async ({ actions,graphql }) => {
 
   return graphql(`
      {
+     tagsGroup: allMarkdownRemark(limit: 2000) {
+        group(field: {frontmatter: {tag: SELECT}}) {
+          fieldValue
+        }
+      }
   blogPosts: allMarkdownRemark(
     filter: {frontmatter: {type: {eq: "post"}}}
     sort: {frontmatter: {date: DESC}}
@@ -67,6 +71,20 @@ exports.createPages = async ({ actions,graphql }) => {
         },
       });
     });
+    const tags = result.data.tagsGroup.group
+    const tagTemplate = require.resolve("./src/templates/tags.js")
+
+    // Make tag pages
+    tags.forEach(tag => {
+      createPage({
+        path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
+        component: tagTemplate,
+        context: {
+          tag: tag.fieldValue,
+        },
+      })
+    });
+
     paginate({
       createPage: createPage,
       component: blogPostPagedTemplate,

package.json

@@ -17,6 +17,7 @@
     "gatsby-awesome-pagination": "^0.3.8",
     "gatsby-plugin-image": "^3.3.2",
     "gatsby-plugin-manifest": "^5.3.1",
+    "gatsby-plugin-react-svg": "^3.3.0",
     "gatsby-plugin-sass": "^6.3.1",
     "gatsby-plugin-scroll-indicator": "^1.0.1",
     "gatsby-plugin-sharp": "^5.3.2",

src/components/structure/footer.js

@@ -8,7 +8,7 @@ import {
   faYoutube,
 
 } from '@fortawesome/free-brands-svg-icons';
-
+import SketchfabIcon from "../../images/sketchfab-logo-white.svg";
 const Footer = () => {
   return (
     <>
@@ -31,6 +31,8 @@ const Footer = () => {
                    aria-label="Our GitHub account profile"><FontAwesomeIcon icon={faGithub} size="2x" className="m-2" /></a>
                 <a href="https://www.youtube.com/@micropasts3076/" className="text-white me-4"
                    aria-label="Our YouTube profile"><FontAwesomeIcon icon={faYoutube} size="2x" className="m-2" /></a>
+                <a href="https://sketchfab.com/micropasts" className="text-white"
+                   aria-label="My Sketchfab account profile"><SketchfabIcon className="fa-2x m-2 svg-inline--fa" style={{ height:32, width: 32 }}/></a>
               </div>
             </section>
 

src/components/structure/logos.js

@@ -5,7 +5,7 @@ import { Container, Col, Row } from "react-bootstrap";
 const Logos = () => {
   return (
     <>
-      <Col md={10} className="mx-auto">
+      <Col md={10} className="mx-auto pt-5">
         <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/">
@@ -39,7 +39,7 @@ const Logos = () => {
           </Col>
         </Row>
       </Col>
-      <Container fluid className="bg-white py-5">
+      <Container fluid className="bg-white py-3">
         <Col md={2} sm={2} className="mx-auto">
           <a href="https://ahrc.ukri.org/">
             <StaticImage src={"../../images/logos/AHRC_new.jpg"} alt={"\"AHRC logo"} className="img-fluid mx-auto"

src/components/structure/post-card.js

@@ -17,14 +17,14 @@ const PostCard = ({ post }) => (
           }
       </Col>
       <Col md={8}>
-        <Card.Body className="bg-white border-1 border-dark">
+        <Card.Body className="bg-white">
           <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>
+            <h1 className="lead text-black fw-bold mb-3 mt-0">{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>
+            <p className={"text-dark"} >{post.excerpt}</p>
           </Link>
         </Card.Body>
       </Col>