chore: gatsby-remark-relative-images adjustments and update labs

gatsby-remark-relative-images does not support hot-reloading

content/blog/2021/04/2021-04-19-why-did-i-create-a-blog-from-scratch.md

@@ -2,7 +2,7 @@
 id: c05522a0-a107-11eb-ac99-e3c3577a000f
 title: Why did I create a blog from scratch?
 date: 2021-04-19T12:07:02.971Z
-cover: /assets/blog-1-opengraph.png
+cover: /assets/posts/blog-1-opengraph.png
 description: Reinventing the wheel, depending on the context, can be brilliant!
   Curiosity can lead us into new enchanting things.
 tags:
@@ -50,4 +50,4 @@ Just a little piece of advice here in this very first article. One thing is disc
 
 There are others of course, but the point has been made 😁.
 
-This is the first blog entry and I expect to post once per month at least. I hope I can keep with this goal! 😄
+This is the first blog entry and I expect to post once per month at least. I hope I can keep with this goal! 😄

content/pages/labs.md

@@ -4,15 +4,15 @@ path: /labs
 title: Labs
 galleryLabs:
   - date: 2021-04-27T21:52:33.835Z
-    cover: /assets/labs-django-multiple-schemas.png
+    cover: /assets/posts/labs-django-multiple-schemas.png
     title: Django Multiple Schemas
     projectLink: https://github.com/willianantunes/django-multiple-schemas
     description: Here you'll find a simple project that shows how to use schema with
       Django and why you should use. It has a script that creates all the
       scenarios the project needs in PostgreSQL. It even has tests to guarantee
       that it's created as expected.
   - date: 2021-04-27T21:38:26.635Z
-    cover: /assets/labs-transcriber-wrapper.png
+    cover: /assets/posts/labs-transcriber-wrapper.png
     projectLink: https://github.com/willianantunes/transcriber-wrapper
     title: Transcriber Wrapper
     description: It's a wrapper of back-ends that convert text to phones for
@@ -24,9 +24,9 @@ galleryLabs:
     projectLink: https://github.com/willianantunes/willianantunes.com
     description: It was built from the ground up using Gatsby. It uses Netlify CMS,
       Jest, React Testing Library, SonarCloud, styled-components, and many more!
-    cover: /assets/labs-my-own-blog.png
+    cover: /assets/posts/labs-my-own-blog.png
   - date: 2021-04-27T13:21:42.402Z
-    cover: /assets/labs-rop.png
+    cover: /assets/posts/labs-rop.png
     title: A place where you can learn Phonetics
     projectLink: https://www.raveofphonetics.com/
     description: I realized that there were many phonetic transcription sites, but
@@ -35,7 +35,7 @@ galleryLabs:
   - date: 2020-04-28T15:26:09.713Z
     projectLink: https://github.com/willianantunes/runner-said-no-one-ever/
     title: "Runner #SaidNoOneEver"
-    cover: /assets/labs-runner-saidnooneever.png
+    cover: /assets/posts/labs-runner-saidnooneever.png
     description: It can be identified as the Word Suggestion API on the image. The
       idea here is to delay 1 second or more (given your custom configuration)
       to answer a request. Thus you can use this behavior for interesting tests,
@@ -49,5 +49,14 @@ galleryLabs:
       tests with PostgreSQL. As it uses Docker, you can easily make the service
       up and play a game!
     projectLink: https://github.com/willianantunes/tic-tac-toe-csharp-playground
-    cover: /assets/labs-tic-tac-toe-c-playground.png
+    cover: /assets/posts/labs-tic-tac-toe-c-playground.png
+  - date: 2019-04-29T12:18:42.006Z
+    title: Next.JS Playground through a code challenge
+    projectLink: https://github.com/willianantunes/nextjs-playground
+    description: You'll see my solution for a code challenge which I think is not
+      used anymore as it's old; maybe if you search for this code challenge, you
+      may find it somewhere on GitHub. As I made it to do a playground on some
+      technologies, I  even used Redux to test it. Thus it's important to say
+      that I don't recommend it for simple cases.
+    cover: /assets/posts/labs-next.js-playground.png
 ---

gatsby-config.js

@@ -35,8 +35,6 @@ const siteMetadata = {
 }
 
 const plugins = [
-  `gatsby-plugin-sharp`,
-  `gatsby-transformer-sharp`,
   {
     resolve: "gatsby-source-filesystem",
     options: {
@@ -58,23 +56,18 @@ const plugins = [
       name: `pages`,
     },
   },
+  `gatsby-transformer-sharp`,
+  `gatsby-plugin-sharp`,
   {
     resolve: `gatsby-transformer-remark`,
     options: {
       plugins: [
-        {
-          // It will update the path related to images contained in a markdown file
-          resolve: "gatsby-remark-relative-images",
-          options: {
-            name: "uploads",
-          },
-        },
+        // It will update the path related to images contained in a markdown file
+        `gatsby-remark-relative-images`,
         {
           // It will create publicURL
           resolve: `gatsby-remark-images`,
-          options: {
-            maxWidth: 630,
-          },
+          options: {},
         },
       ],
     },

gatsby-node.js

@@ -1,4 +1,3 @@
-const { fmImagesToRelative } = require("gatsby-remark-relative-images")
 const { BlogNodeHandler, PageNodeHandler } = require("./src/config/gatsby-node-handlers")
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
@@ -12,7 +11,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 exports.onCreateNode = ({ node, actions, getNode }) => {
   // https://www.gatsbyjs.com/docs/reference/config-files/actions/#createNodeField
   const { createNodeField } = actions
-  fmImagesToRelative(node)
 
   BlogNodeHandler.createNodeHandler(createNodeField, getNode, node)
 }

package.json

@@ -40,7 +40,7 @@
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-plugin-styled-components": "^4.3.0",
     "gatsby-remark-images": "^5.0.0",
-    "gatsby-remark-relative-images": "^0.2.3",
+    "gatsby-remark-relative-images": "^2.0.2",
     "gatsby-source-filesystem": "^3.3.0",
     "gatsby-theme-material-ui": "^2.0.1",
     "gatsby-transformer-remark": "^4.0.0",

static/genie/config.yml

@@ -5,7 +5,7 @@
 # https://www.netlifycms.org/docs/beta-features/#folder-collections-media-and-public-folder
 # https://github.com/netlify/netlify-cms/issues/2696#issuecomment-567081038
 media_folder: "/static/assets/posts"
-public_folder: "/assets"
+public_folder: "/assets/posts"
 publish_mode: editorial_workflow
 
 collections:
@@ -58,5 +58,5 @@ collections:
               - { label: 'Cover', name: 'cover', widget: 'image' }
               - { label: "Title", name: "title", widget: "string" }
               - { label: "Project link", name: "projectLink", widget: "string" }
-              - { label: 'Description', name: 'description', widget: 'string' }
+              - { label: 'Description', name: 'description', widget: 'text' }
               - { label: 'When it was published', name: 'date', widget: 'datetime', time_format: false, date_format: "YYYY" }