From 06bd1e1dff49b462e5eb339ce3f43598a2a493a4 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 22 Feb 2022 17:13:34 -0800
Subject: [PATCH 1/6] config (#2): add esbuild configuration for serverless
 functions

---
 netlify.toml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/netlify.toml b/netlify.toml
index 75e97ee..781367b 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,4 +1,4 @@
-## This is the configuration file for Netlify 
+## This is the configuration file for Netlify
 ## https://docs.netlify.com/configure-builds/file-based-configuration/
 
 [build]
@@ -15,3 +15,6 @@
   to = "/.netlify/functions/:splat" # all function calls will go to this path
   status = 200 # ok code
   force = true # ensure to always redirect
+
+[functions]
+  node_bundler = "esbuild"

From 07b98614155021a85946bd13955098f4cd5c68f5 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 22 Feb 2022 17:14:07 -0800
Subject: [PATCH 2/6] feature (#2): add joke api endpoint

---
 netlify/functions/joke.js    | 15 +++++++++++++++
 netlify/functions/jokes.json |  7 +++++++
 2 files changed, 22 insertions(+)
 create mode 100644 netlify/functions/joke.js
 create mode 100644 netlify/functions/jokes.json

diff --git a/netlify/functions/joke.js b/netlify/functions/joke.js
new file mode 100644
index 0000000..5ef6d1b
--- /dev/null
+++ b/netlify/functions/joke.js
@@ -0,0 +1,15 @@
+// Jokes provided from the lovely folks at https://icanhazdadjoke.com
+import jokes from './jokes.json'
+
+export const handler = (event) => {
+  // Generates a random index based on the length of the jokes array
+  const randomIndex = Math.floor(Math.random() * jokes.length)
+  const randomJoke = jokes[randomIndex]
+
+  // Netlify Functions need to return an object with a statusCode
+  // Other properties such as headers or body can also be included.
+  return {
+    statusCode: 200,
+    body: JSON.stringify(randomJoke),
+  }
+}
diff --git a/netlify/functions/jokes.json b/netlify/functions/jokes.json
new file mode 100644
index 0000000..52f6a7f
--- /dev/null
+++ b/netlify/functions/jokes.json
@@ -0,0 +1,7 @@
+[
+  "My New Years resolution is to stop leaving things so late.",
+  "Child: Dad, make me a sandwich. Dad: Poof! You're a sandwich.",
+  "The invention of the wheel was what got things rolling",
+  "What kind of music do mummy's like? Rap",
+  "What do you get when you cross a chicken with a skunk? A fowl smell!"
+]

From 3ed9a2d57d7a47cfc81c5ae9f06db08bcbf960e9 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 22 Feb 2022 17:22:13 -0800
Subject: [PATCH 3/6] feature (#2): add joke block component to home page

---
 components/JokeBlock.vue | 25 +++++++++++++++++++++++++
 pages/index.vue          |  6 +++++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 components/JokeBlock.vue

diff --git a/components/JokeBlock.vue b/components/JokeBlock.vue
new file mode 100644
index 0000000..73ea89e
--- /dev/null
+++ b/components/JokeBlock.vue
@@ -0,0 +1,25 @@
+<script>
+export default {
+  data: () => ({
+    joke: '',
+  }),
+  async mounted() {
+    this.joke = await fetch('/api/joke').then((res) => res.json())
+  },
+}
+</script>
+
+<template>
+  <article>
+    <blockquote>
+      <p>{{ joke }}</p>
+    </blockquote>
+  </article>
+</template>
+
+<style scoped>
+blockquote {
+  border-left: 5px solid #ccc;
+  padding: 0.5rem;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index c3dd9b5..140ec6f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,10 @@
 <template>
-  <FeedbackForm />
+  <main>
+    <FeedbackForm />
+    <JokeBlock />
+  </main>
 </template>
+
 <style>
 * {
   font-family: 'Helvetica', sans-serif;

From a8bc204cf82581e5e122cf4a3cb8f5521c52ed0b Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 22 Feb 2022 17:22:42 -0800
Subject: [PATCH 4/6] config (#2): remove multi-word rule enforcement on pages

---
 pages/.eslintrc.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 pages/.eslintrc.js

diff --git a/pages/.eslintrc.js b/pages/.eslintrc.js
new file mode 100644
index 0000000..d31a937
--- /dev/null
+++ b/pages/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}

From b97970b0dc507bdc00399f7d93a257d7f22b403d Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 22 Feb 2022 17:24:18 -0800
Subject: [PATCH 5/6] refactor (#2): rename form routing page to simple name

---
 components/feedbackForm.vue          | 2 +-
 pages/{TestPage.vue => feedback.vue} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename pages/{TestPage.vue => feedback.vue} (100%)

diff --git a/components/feedbackForm.vue b/components/feedbackForm.vue
index 70deda8..16bcdb7 100644
--- a/components/feedbackForm.vue
+++ b/components/feedbackForm.vue
@@ -2,7 +2,7 @@
   <div class="feedback-form">
     <form
       netlify
-      action="/testpage"
+      action="/feedback"
       method="post"
       name="feedback"
       data-netlify-honeypot="bot-field"
diff --git a/pages/TestPage.vue b/pages/feedback.vue
similarity index 100%
rename from pages/TestPage.vue
rename to pages/feedback.vue

From a8ab5bb0bb2da572599ba8d3f35cbbe0b74ba7ef Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 22 Feb 2022 17:26:51 -0800
Subject: [PATCH 6/6] docs (#2): add Prince's documentation on forms to README

---
 README.md | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 3f0a4e1..39e7f5d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Nuxt Toolbox Template 
+# Nuxt Toolbox Template
 
 ## Build Setup
 
@@ -18,7 +18,9 @@ $ npm run generate
 ```
 
 ## Deploy to Netlify
+
 ---
+
 Want to deploy immediately? Click this button
 
 [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/nuxt-toolbox)
@@ -40,26 +42,30 @@ You can also use `netlify deploy (--prod)` to manually deploy and `netlify open`
 
 ### Running Locally
 
-You can use `netlify dev` from the command line to access project information like environment variables as well as 
+You can use `netlify dev` from the command line to access project information like environment variables as well as
+
 - test functions
 - test redirects
 - share a live session via url with `netlify dev --live`
 - [and more](https://cli.netlify.com/netlify-dev/) :)
 
 ### Deployment Resources
+
 - [CLI docs](https://docs.netlify.com/cli/get-started/)
 - [File-based Netlify Configuration](https://docs.netlify.com/configure-builds/file-based-configuration/)
 - [Netlify Dev Overview](https://www.youtube.com/watch?v=RL_gtVZ_79Q&t=812s)
 - [Netlify Edge, CDN deployment](https://www.netlify.com/products/edge/)
 
 ## Redirects
+
 ---
-In the [`netlify.toml`](./netlify.toml) configuration file there is an example of how to implement redirects. Redirects can be used to do many things from redirecting Single Page Apps more predictably, redirecting based on country/language to leveraging On-Demand Builders for [Distributed Persistant Rendering](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/). 
 
-In the example we'll be using redirects to have a shorter endpoint to Netlify functions. By default, you call a Netlify function when requesting a path like `https://yoursite.netlify.com/.netlify/functions/functionName`. Instead, we'll redirect all calls from a path including `/api` to call on the Netlify functions. So the path will be `https://yoursite.netlify.com/api/functionName`, a lot easier to remember too. 
+In the [`netlify.toml`](./netlify.toml) configuration file there is an example of how to implement redirects. Redirects can be used to do many things from redirecting Single Page Apps more predictably, redirecting based on country/language to leveraging On-Demand Builders for [Distributed Persistant Rendering](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/).
 
+In the example we'll be using redirects to have a shorter endpoint to Netlify functions. By default, you call a Netlify function when requesting a path like `https://yoursite.netlify.com/.netlify/functions/functionName`. Instead, we'll redirect all calls from a path including `/api` to call on the Netlify functions. So the path will be `https://yoursite.netlify.com/api/functionName`, a lot easier to remember too.
 
 ### Example
+
 ```toml
 [[redirects]]
 from = "/api/*"
@@ -80,4 +86,23 @@ There are many ways to use redirects. Check out the resouces below to learn more
 - [Redirect options](https://docs.netlify.com/routing/redirects/redirect-options/)
 - [Creating better, more predicatable redirect rules for SPAs](https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/)
 - [Redirect by country or language](https://docs.netlify.com/routing/redirects/redirect-options/#redirect-by-country-or-language)
-- [On-Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/)
\ No newline at end of file
+- [On-Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/)
+
+## Serverless Functions
+
+With Netlify, you can build out server-side code without having to setup and maintain a dedicated server. Inside of our default folder path, [`netlify/functions`](./netlify/functions) you can see an example of the format for JavaScript functions with the [`joke.js`](./netlify/functions/joke.js) file.
+
+The function format expects a function named `handler` to be exported. This will be the function that will be invoked whenever a client makes a request to the generated endpoints. The endpoint's format is followed as `/.netlify/functions/joke`. So whenever the site is deployed, if you go to `https://<site base url>/.netlify/functions/joke` you will see a random joke!
+
+> Side note: In our example, we're using `import` to include data from another location and `export const const handler` to let our function be consumed by Netlify. We're able to do this because of [esbuild](https://esbuild.github.io). This is a bundler configuration we set in our `netlify.toml` under `[functions]`.
+
+### Serverless Functions Resources
+
+There is quite a bit you can do with these functions, so here are some additional resources to learn more!
+
+- [Netlify Function Format](https://docs.netlify.com/functions/build-with-javascript/#synchronous-function-format)
+- [Build Netlify Functions with TypeScript](https://docs.netlify.com/functions/build-with-typescript/)
+- [Event-triggered Functions](https://docs.netlify.com/functions/trigger-on-events/)
+- [What are Background Functions](https://www.netlify.com/blog/2021/01/07/what-are-background-functions/)
+- [Netlify Functions - Examples](https://functions.netlify.com/examples/)
+- [Using esbuild as your bundler for new ECMAScript Features](https://www.netlify.com/blog/2021/04/02/modern-faster-netlify-functions/)