Check this out! 🔥

Here at Reywins.com we are constantly learning and adapting to Astro’s Framework. As we are learning cool new features and tricks, we thought it would be beneficial for everyone to know how to use Astro Compoments and blending it in with JavaScript. The process is easy to use and is extremely customizable. You can view a live demonstration on an Astro website template that I’ve created this past week. Click here to check out a live version of it in all its glory! Note that none of the links are functional, just the Social Media share links (for demonstration purposes).

Here is a picture of the website example:

Okay, So What Does it Do? 🧐

If you noticed, on each of our blog posts we have added a feature called Share This Post, and underneath it, it has shareable links. Now, by default we would think that this would be an easy feature to implement. Short answer is NOPE! In order to implement it correctly, we need to do some JavaScripting 🪄 and utilizing an Astro Component to make it work. Because by default Astro will only do what we tell it to do for us. If you’re a new programmer or novice web developer (like me), then you should know by now that any of our scripts that we plan on using will need to have explicit instructions on how to run them. There is no exception in that regard with some of the features in Astro or any other Static Website Generators. It’s just how the world operates (I guess).

In order to use it correctly, we need to implement an Astro Component alongside with our custom JavaScript which will allow the correct sharing syntax from our websites URLs (or blog posts) to make it into a shareable link with social media sites.

Read more on our Github page to see how to set everything up!