Working with Netlify and other problems

Starting work on my website and making good progress is a good feeling. But at some point there will be a stop. For me this is when it comes to the design, but I also encountered some other problems with Netlify and in general the feel of the website.

3 min read

11/16/2024

astro

design

homepage

netlify

Adding a form and connecting it via webhook

On of the first things I saw while following the tutorial was that Netlify allows an automatic form submission and collection.

This is made pretty easy, all we need to do is to add a netlify tag to the form. Netlify will automatically

<form name="contact" method="POST" data-netlify="true" netlify >
    ...
</form>

Once this is done, we need to activate Automatic form detection (https://docs.netlify.com/forms/setup/), and now everytime someone submits the selected form/s you will get a email notification and Netlify will also store the entered data for you on their site.

Spam prevention

We can also improve our spam prevention, by adding a Honeypit field. This can be easily done by adding a netlify-honeypot attribute to the form with the name of the hidden input field. In this case we use bot-field as the hidden input:

<form name="contact" method="POST" netlify-honeypot="bot-field" data-netlify="true" >
  <div class="hidden">
    <label>
      <input name="bot-field" />
    </label>
  </div>
    ...
</form>

Otherwise we could also add a reCAPTCHA 2, which is provided automatically by Netlify. For more information I recommend to read this.

Fixing blog styling

In general I wans’t happy with the old look and feel of the website so I searched up some good resources that helped me to come to the current design:

It was a lot of work (and pain) but atleast now it works. I plan on doing another blog post on TailwindCSS solely to better explain what I did, but for now the key-points are:

I found a color palette for dark and light mode that I’m happy with
I finally added a good looking and working toggle between both modes
sites that are actually used have now a clear main design idea behind them

I still want to find a better solution for code blocks in my blog posts, but that will have to wait for now.

Filtering posts

One other thing I wanted to have fixed is, that blog posts only get shown, once I “publish” them. For this my workaround was easy, I simply added a property published to my markdown files. These attributes are now available via Astro.props, and all I have to do now is to filter them:

allPosts.filter((post) => post.frontmatter.published == true)

Implementing Astro Components

One last thing that is still a big work in progress, is to use Astro Components and to fully understand and use Astro. I now use Images from astro:assets but there is still a lot to learn and to optimize so in future I will probably also post a blog about really using Astro as it is intended.