feat: summary

Author: AriPerkkio

src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/content.md

@@ -10,7 +10,7 @@ Hey there, and welcome to Vite Plugin tutorial 👋!
 
 In this tutorial we'll go through steps for creating custom Vite plugins. We'll start by creating a custom Vite plugin for loading `.yaml` files.
 
-Our goal is to be able to import `content.yaml` file in the Javascript file and use it as plain Javascript object.
+Our goal is to be able to import `content.yaml` file in a Javascript file and use it as plain Javascript object.
 
 ```js [index.js]
 import content from "./content.yaml";

src/content/tutorial/1-vite-plugin/1-yaml-plugin/2-defining-custom-plugin/content.md

@@ -11,3 +11,7 @@ Plugins can have various properties that are listed in [Plugin API | Vite](https
 Let's start by adding a custom plugin in our Vite configuration. To do this, add a new `plugins` property into the Vite configuration. The `plugins` should be an array.
 
 Inside the `plugins` array, define a new object with `name` `'yaml-plugin'`.
+
+Successfully defined plugin should be reported in the Preview tab:
+
+> Loaded Vite plugins: yaml-plugin ✅

src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/content.md

@@ -8,7 +8,7 @@ focus: /vite.config.ts
 
 Our Vite plugin can now recognize `.yaml` files that are being loaded. Next we'll need to add logic for converting the `.yaml` files into Javascript and pass the output from `load` hook.
 
-To get the content of loaded file we'll need to use [`readFileSync`](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options) method from `node:fs`.
+To get the content of requested file we'll need to use [`readFileSync`](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options) method from `node:fs`.
 We can convert the YAML content into Javascript using [`yaml`](https://www.npmjs.com/package/yaml) package. It has a `parse()` function that takes YAML content as `string`.
 
 ```ts
@@ -17,10 +17,10 @@ import { parse } from "yaml";
 
 const content = readFileSync("./content.yaml", "utf8");
 const yaml = parse(content);
-//    ^^^^ [{ employees: [{ id: 1, ...}, ...], projects: { id: 101, ...}, ... }]
+//    ^^^^ [{ employees: [{ id: 1, ...}, ...], projects: [{ id: 101, ...}] }]
 ```
 
-The `yaml` variable now holds a Javascript object that represents our `content.yaml` contents. To return this from `load` hook, we'll need to serialize it to string with `JSON.stringify`:
+The `yaml` variable now holds a Javascript object that represents our `content.yaml` contents. To return this from `load` hook, we'll need to serialize it to string with [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify):
 
 ```ts
 return {

src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/content.md

@@ -7,3 +7,38 @@ focus: /vite.config.ts
 # Summary
 
 Our custom Vite plugin can now intercept `*.yaml` file imports and convert them into Javascript.
+
+<div class="mt-6 p-3 border-1 border-current border-dashed border-rd-md">
+  <div class="mb-3">Source code loads YAML-file:</div>
+  <code>import content from "./some-file.yaml"</code>
+</div>
+
+<div class="mt-6 w-full text-center">⬇️</div>
+
+<div class="mt-6 p-3 border-1 border-current border-dashed border-rd-md">
+  Vite plugin's <code>load()</code> hook intercepts <code>.yaml</code> request
+</div>
+
+<div class="mt-6 w-full text-center">⬇️</div>
+
+<div class="mt-6 p-3 border-1 border-current border-dashed border-rd-md">
+  Contents of requested file are read from file system using <code>readFileSync()</code> from <code>node:fs</code> module
+</div>
+
+<div class="mt-6 w-full text-center">⬇️</div>
+
+<div class="mt-6 p-3 border-1 border-current border-dashed border-rd-md">
+  YAML content is converted into Javascript using <code>parse()</code> from <code>yaml</code> module
+</div>
+
+<div class="mt-6 w-full text-center">⬇️</div>
+
+<div class="mt-6 p-3 border-1 border-current border-dashed border-rd-md">
+  Javascript object is serialized into text using <code>JSON.stringify()</code> and returned as default export from <code>load()</code> hook
+</div>
+
+<div class="mt-6 w-full text-center">⬇️</div>
+
+<div class="mt-6 p-3 border-1 border-current border-dashed border-rd-md">
+  Source code successfully loads Javascript object from <code>.yaml</code> file import ✅
+</div>