Persist a New Blog
Explore how to implement persistent blog post creation by saving data to Cloud Firestore. Understand handling slugs for unique post URLs, display success or error messages, and recognize the importance of securing your Firestore database.
We'll cover the following...
Persist a new blog post
To start this work, open the
services/web/src/components/new-blog-post.svelte component.
We need to define the Publish button click handler within the <script> tag:
const publish = () => {
console.log(`Publishing...
Title: ${title}
Content: ${content}`);
};
Add the on:click={publish} directive to the Publish button inside the <form> tag as form’s attribute.
To make the on:click handler work, we need to expose it in our
services/web/src/components/ui-elements/button.svelte component. Simply add on:click to the HTML button element. Without defining a value, it will bubble up to the parent component.
If you fill out the new blog post form now and click “Publish”, you see a message in the browser console. This is good, but what we really want is to persist that data ...