Birthday

components/Birthday.vue

@@ -0,0 +1,3 @@
+<template src="./Birthday.vue.html"></template>
+
+<style scoped src="./Birthday.vue.css"></style>

components/Birthday.vue.css

@@ -0,0 +1,31 @@
+.birthday-form {
+  margin: 40px 40px;
+  min-width: 250px;
+  width: 45%;
+}
+
+input,
+textarea,
+button {
+  font-size: inherit;
+  margin: 15px 0;
+  padding: 12px 20px;
+  width: 100%;
+}
+
+button {
+  background-color: blueviolet;
+  border: 1px solid black;
+  color: white;
+  width: 50%;
+}
+
+.hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

components/Birthday.vue.html

@@ -0,0 +1,15 @@
+<div class="birthday-form">
+    <form netlify netlify-honeypot name="birthday" method="POST" action="/birthday-success">
+        <p class="hidden">
+            <label>
+                Don't fill this out if you're human: <input name="bot-field" />
+            </label>
+        </p>
+        <input type="hidden" name="form-name" value="birthday" />
+        <label for="name">Name</label>
+        <input id="name" type="text" name="name" required />
+        <label for="birthday">birthday</label>
+        <input id="birthday" type="date" name="birthday" required />
+        <button type="submit">Submit</button>
+    </form>
+</div>

components/FeedbackForm.vue

@@ -1,58 +1,3 @@
-<template>
+<template src="./FeedbackForm.vue.html"></template>
-  <div class="feedback-form">
-    <form
-      netlify
-      netlify-honeypot
-      name="feedback"
-      method="POST"
-      action="/success"
-    >
-      <p class="hidden">
-        <label>
-          Don’t fill this out if you’re human: <input name="bot-field" />
-        </label>
-      </p>
-      <input type="hidden" name="form-name" value="feedback" />
-      <label for="name">Name</label>
-      <input id="name" type="text" name="name" />
-      <label for="email">Email</label>
-      <input id="email" type="email" name="email" required />
-      <label for="feedback">What is your feedback?</label>
-      <textarea id="feedback" wrap="soft" name="feedback" required></textarea>
-      <button type="submit">Submit</button>
-    </form>
-  </div>
-</template>
 
-<style scoped>
+<style scoped src="./FeedbackForm.vue.css"></style>
-.feedback-form {
-  margin: 40px 40px;
-  min-width: 250px;
-  width: 45%;
-}
-input,
-textarea,
-button {
-  font-size: inherit;
-  margin: 15px 0;
-  padding: 12px 20px;
-  width: 100%;
-}
-
-button {
-  background-color: teal;
-  border: 1px solid black;
-  color: white;
-  width: 50%;
-}
-
-.hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-</style>

components/FeedbackForm.vue.css

@@ -0,0 +1,31 @@
+.feedback-form {
+  margin: 40px 40px;
+  min-width: 250px;
+  width: 45%;
+}
+
+input,
+textarea,
+button {
+  font-size: inherit;
+  margin: 15px 0;
+  padding: 12px 20px;
+  width: 100%;
+}
+
+button {
+  background-color: teal;
+  border: 1px solid black;
+  color: white;
+  width: 50%;
+}
+
+.hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

components/FeedbackForm.vue.html

@@ -0,0 +1,17 @@
+<div class="feedback-form">
+    <form netlify netlify-honeypot name="feedback" method="POST" action="/feedback-success">
+        <p class="hidden">
+            <label>
+                Don't fill this out if you're human: <input name="bot-field" />
+            </label>
+        </p>
+        <input type="hidden" name="form-name" value="feedback" />
+        <label for="name">Name</label>
+        <input id="name" type="text" name="name" />
+        <label for="email">Email</label>
+        <input id="email" type="email" name="email" required />
+        <label for="feedback">What is your feedback?</label>
+        <textarea id="feedback" wrap="soft" name="feedback" required></textarea>
+        <button type="submit">Submit</button>
+    </form>
+</div>

components/JokeBlock.vue

@@ -9,17 +9,6 @@ export default {
 }
 </script>
 
-<template>
+<template src="./JokeBlock.vue.html"></template>
-  <article>
-    <blockquote>
-      <p>{{ joke }}</p>
-    </blockquote>
-  </article>
-</template>
 
-<style scoped>
+<style scoped src="./JokeBlock.vue.css"></style>
-blockquote {
-  border-left: 5px solid #ccc;
-  padding: 0.5rem;
-}
-</style>

components/JokeBlock.vue.css

@@ -0,0 +1,4 @@
+blockquote {
+  border-left: 5px solid #ccc;
+  padding: 0.5rem;
+}

components/JokeBlock.vue.html

@@ -0,0 +1,5 @@
+<article>
+    <blockquote>
+        <p>{{ joke }}</p>
+    </blockquote>
+</article>

cypress.config.js

@@ -1,9 +0,0 @@
-const { defineConfig } = require('cypress')
-
-module.exports = defineConfig({
-  e2e: {
-    baseUrl: "http://localhost:8888/",
-    supportFile: false,
-    chromeWebSecurity: false,
-  },
-});

netlify.toml

@@ -18,10 +18,3 @@
 
 [functions]
   node_bundler = "esbuild"
-
-[[plugins]]
-  package = "netlify-plugin-cypress"
-  [plugins.inputs]
-    enable = false
-  [plugins.inputs.postBuild]
-    enable = true

package.json

@@ -21,7 +21,8 @@
     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
     "lint:prettier": "prettier --check .",
     "lint": "npm run lint:js && npm run lint:prettier",
-    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
+    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix",
+    "dev:netlify": "netlify dev"
   },
   "dependencies": {
     "core-js": "^3.19.3",
@@ -40,6 +41,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-vue": "^9.0.0",
+    "netlify-cli": "^15.9.1",
     "prettier": "^2.5.1"
   }
 }

pages/birthday-success.vue

@@ -0,0 +1 @@
+<template src="./birthday-success.vue.html"></template>

pages/birthday-success.vue.html

@@ -0,0 +1,4 @@
+<div>
+  <h1>Thanks for your birthday!</h1>
+  <NuxtLink to="/">Home</NuxtLink>
+</div>

pages/feedback-success.vue

@@ -0,0 +1 @@
+<template src="./feedback-success.vue.html"></template>

pages/feedback-success.vue.html

@@ -0,0 +1,4 @@
+<div>
+  <h1>Thanks for your feedback!</h1>
+  <NuxtLink to="/">Home</NuxtLink>
+</div>

pages/index.vue

@@ -1,37 +1,3 @@
-<template>
+<template src="./index.vue.html"></template>
-  <main>
-    <div class="intro">
-      <h1>Nuxt Toolbox</h1>
-      <p>
-        Hi 👋! This template gives you a
-        <a href="https://nuxtjs.org/">Nuxt</a> app with the scaffolding for
-        <a href="https://www.netlify.com/products/functions/"
-          >Netlify Functions</a
-        >, <a href="https://www.netlify.com/products/forms/">Forms</a>, and
-        <a href="https://docs.netlify.com/routing/redirects/">Redirects</a>. Our
-        aim was to give you the code you would need to hit the ground running
-        with a few fun features.
-      </p>
 
-      <p>
+<style src="./index.vue.css"></style>
-        You can find the code for this project on GitHub at
-        <a href="https://github.com/netlify-templates/nuxt-toolbox"
-          >https://github.com/netlify-templates/nuxt-toolbox</a
-        >! Happy coding!
-      </p>
-    </div>
-    <FeedbackForm />
-    <JokeBlock />
-  </main>
-</template>
-
-<style>
-* {
-  font-family: 'Helvetica', sans-serif;
-}
-.intro {
-  min-width: 400px;
-  padding: 10px 40px;
-  width: 60%;
-}
-</style>

pages/index.vue.css

@@ -0,0 +1,9 @@
+* {
+  font-family: 'Helvetica', sans-serif;
+}
+
+.intro {
+  min-width: 400px;
+  padding: 10px 40px;
+  width: 60%;
+}

pages/index.vue.html

@@ -0,0 +1,11 @@
+<main>
+  <div class="intro">
+    <h1>Phares</h1>
+    <p>
+      Hi 👋!
+    </p>
+  </div>
+  <Birthday />
+  <FeedbackForm />
+  <JokeBlock />
+</main>

pages/success.vue

@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <h1>Thanks for your feedback!</h1>
-    <NuxtLink to="/">Home</NuxtLink>
-  </div>
-</template>

renovate.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "local>netlify-templates/renovate-config"
-  ]
-}