From d426dafed16ddb3bf70de841eadccf84bfe3b4a7 Mon Sep 17 00:00:00 2001 From: Tim Smith Date: Sat, 11 Dec 2021 07:25:10 -0600 Subject: [PATCH] Upgraded to v4. Fixed Note error. Removed unneeded dependencies. --- gatsby-config.js | 38 +- package.json | 34 +- src/components/blog-list/blog-list.i.ts | 24 +- src/components/blog-list/blog-list.tsx | 6 +- src/components/footer/footer.tsx | 4 +- src/components/header/header.tsx | 4 +- src/components/sharing/sharing.i.ts | 5 + src/components/sharing/sharing.tsx | 30 +- src/components/socials/socials.tsx | 4 +- src/components/tags/tags.tsx | 4 +- src/pages/404.md | 1 - src/pages/uses.md | 6 - ...creating-a-basic-server-with-express-js.md | 3 +- ...0-02-13---using-mongodb-with-express-js.md | 5 +- src/templates/blog.tsx | 1 - src/templates/tag.tsx | 1 - yarn.lock | 8359 ++++++----------- 17 files changed, 2829 insertions(+), 5700 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index ee8a8b6..63c7caf 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -32,9 +32,7 @@ module.exports = { `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, - // `gatsby-plugin-gatsby-cloud`, `gatsby-plugin-sitemap`, - `gatsby-plugin-netlify`, `gatsby-plugin-catch-links`, `gatsby-plugin-styled-components`, `gatsby-plugin-react-axe`, @@ -101,7 +99,7 @@ module.exports = { }, }, { - resolve: `gatsby-plugin-feed-mdx`, + resolve: `gatsby-plugin-feed`, options: { query: ` { @@ -148,10 +146,6 @@ module.exports = { `, output: '/rss.xml', title: "Tim Smith's RSS Feed", - // optional configuration to insert feed reference in pages: - // if `string` is used, it will be used to create RegExp and then test if pathname of - // current page satisfied this regular expression; - // if not provided or `undefined`, all pages will have feed reference inserted match: '^/blog/', }, ], @@ -178,22 +172,9 @@ module.exports = { { resolve: 'gatsby-plugin-local-search', options: { - // A unique name for the search index. This should be descriptive of - // what the index contains. This is required. name: 'posts', - - // Set the search engine to create the index. This is required. - // The following engines are supported: flexsearch, lunr engine: 'flexsearch', - - // Provide options to the engine. This is optional and only recommended - // for advanced users. - // - // Note: Only the flexsearch engine supports options. engineOptions: 'speed', - - // GraphQL query used to fetch all data for the search index. This is - // required. query: `{ posts: allMdx( filter: { @@ -218,25 +199,8 @@ module.exports = { } } `, - - // Field used as the reference value for each document. - // Default: 'id'. ref: 'id', - - // List of keys to index. The values of the keys are taken from the - // normalizer function below. - // Default: all fields index: ['title', 'description', 'tags', 'slug', 'body'], - - // List of keys to store and make available in your UI. The values of - // the keys are taken from the normalizer function below. - // Default: all fields - // store: ['id', 'path', 'title'], - - // Function used to map the result from the GraphQL query. This should - // return an array of items to index in the form of flat objects - // containing properties to index. The objects must contain the `ref` - // field above (default: 'id'). This is required. normalizer: ({ data }) => data.posts.nodes.map(node => ({ ...node, diff --git a/package.json b/package.json index 3c83fbd..0aec7b1 100644 --- a/package.json +++ b/package.json @@ -16,30 +16,26 @@ "@mdx-js/react": "^1.6.22", "babel-plugin-styled-components": "^2.0.1", "dayjs": "^1.10.7", - "gatsby": "^3.6.2", + "gatsby": "^4.3.0", "gatsby-image": "^3.11.0", - "gatsby-plugin-catch-links": "^3.7.1", - "gatsby-plugin-feed": "^3.7.1", - "gatsby-plugin-feed-mdx": "^1.1.0", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-google-analytics": "^3.7.1", - "gatsby-plugin-google-gtag": "^3.7.1", - "gatsby-plugin-image": "^1.6.0", + "gatsby-plugin-catch-links": "^4.3.0", + "gatsby-plugin-feed": "^4.3.0", + "gatsby-plugin-google-analytics": "^4.3.0", + "gatsby-plugin-google-gtag": "^4.3.0", + "gatsby-plugin-image": "^2.3.0", "gatsby-plugin-local-search": "^2.0.1", "gatsby-plugin-mailchimp": "^5.2.2", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-mdx": "^2.7.1", - "gatsby-plugin-netlify": "^3.7.1", - "gatsby-plugin-offline": "^4.6.0", + "gatsby-plugin-manifest": "^4.3.0", + "gatsby-plugin-mdx": "^3.3.0", + "gatsby-plugin-offline": "^5.3.0", "gatsby-plugin-react-axe": "^0.5.0", - "gatsby-plugin-react-helmet": "^4.6.0", - "gatsby-plugin-sharp": "^3.6.0", - "gatsby-plugin-sitemap": "^4.3.1", - "gatsby-plugin-styled-components": "^4.14.0", + "gatsby-plugin-react-helmet": "^5.3.0", + "gatsby-plugin-sharp": "^4.3.0", + "gatsby-plugin-sitemap": "^5.3.0", + "gatsby-plugin-styled-components": "^5.3.0", "gatsby-remark-external-links": "^0.0.4", - "gatsby-remark-images": "^5.4.1", - "gatsby-remark-prismjs": "^5.4.1", - "gatsby-remark-twitter-cards": "^0.6.1", + "gatsby-remark-images": "^6.3.0", + "gatsby-remark-prismjs": "^6.3.0", "gatsby-remark-unwrap-images": "^1.0.2", "gatsby-source-filesystem": "^3.6.0", "gatsby-source-graphql": "^3.7.1", diff --git a/src/components/blog-list/blog-list.i.ts b/src/components/blog-list/blog-list.i.ts index b641287..87484da 100644 --- a/src/components/blog-list/blog-list.i.ts +++ b/src/components/blog-list/blog-list.i.ts @@ -1,13 +1,15 @@ +export interface PostTeaser { + id?: string; + excerpt: string; + frontmatter: { + title: string; + published?: boolean; + }; + fields: { + slug: string; + }; +} + export interface BlogListProps { - posts: { - id: string; - excerpt: string; - frontmatter: { - title: string; - published?: boolean; - }; - fields: { - slug: string; - }; - }[]; + posts: PostTeaser[]; } diff --git a/src/components/blog-list/blog-list.tsx b/src/components/blog-list/blog-list.tsx index 6e0eb39..a25311c 100644 --- a/src/components/blog-list/blog-list.tsx +++ b/src/components/blog-list/blog-list.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { Link } from 'gatsby'; import { BlogListItems, BlogPost, BlogPostTitle } from './blog-list.style'; -import { BlogListProps } from './blog-list.i'; +import { BlogListProps, PostTeaser } from './blog-list.i'; export const BlogList = ({ posts }: BlogListProps) => { return ( - {posts.map((node, id) => ( - + {posts.map((node: PostTeaser, key: number) => ( + {node.frontmatter.title}{' '} diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index a821b64..a01b3c9 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -26,13 +26,13 @@ export const Footer = () => { return (