feat(docs): use next/image for images & add flowchart to introducing-plugins page

Author: DuroCodes

apps/docs/pages/blog/_meta.json

@@ -8,6 +8,6 @@
       "typesetting": "article"
     }
   },
-  "introducing-spark": "Introducing Spark",
-  "introducing-plugins": "Introducing Spark Plugins"
+  "introducing-plugins": "Introducing Spark Plugins",
+  "introducing-spark": "Introducing Spark"
 }

apps/docs/pages/blog/introducing-plugins.mdx

@@ -4,6 +4,8 @@ date: 11/8/2022
 description: Spark now has plugins!
 ---
 
+import Image from 'next/image';
+
 # Spark Plugins
 
 Spark now has plugin support! With plugins, you can create reusable actions with ease, without copy/pasting code between files.
@@ -45,3 +47,9 @@ With plugins, you have the `controller` option in the run function. With the con
 For example, if you'd like to return an `Err`, or specify that the plugin failed, you'd return `controller.stop()`. This would make the command execution stop.
 
 If you'd like to continue with the command, you have to return `controller.next()`, this means that the controller should continue with whatever action.
+
+## Flowchart
+
+Here's a flowchart that shows the execution of commands:
+
+<Image src="/images/blog/plugin-flowchart.png" height={2304 / 3} width={2208 / 3} />

apps/docs/pages/blog/introducing-spark.mdx

@@ -4,6 +4,7 @@ date: 10/18/2022
 description: Welcome to Spark, the next generation Discord.js handler.
 ---
 
+import Image from 'next/image';
 import Callout from '../../components/Callout';
 
 # Introducing Spark
@@ -40,6 +41,6 @@ With Spark's CLI tool, `create-spark`, you can create a new Spark project in jus
 
 All you have to do is answer a few questions, and your Spark project is setup for you!
 
-![](../../public/images/blog/spark-cli.png)
+<Image src="/images/blog/spark-cli.png" height={524} width={926} />
 
 <Callout type="info">If you'd like more information on this project, join our [Discord server](/discord).</Callout>