A promenade with Q. Building a social share toolbar.

Written by Michael Rood on 

This post is part 2 of using AI to add a social media share toolbar to each post in this blog. My first attempt getting Q to build a social share toolbar was successful, but an architectural disaster. Instead of being specific about what I wanted, Q was given a long leash. Free to roam and intepret as it pleased, leading to less than ideal decisions. This time I walk Q hand-in-hand through the flowery meads to our final destination. I also arrive at an unexpectedly optimistic conclusion about Q and its potential.

create a “share this post” toolbar that displays above each post’s featured image. The toolbar should:

  1. Allow visitors to share posts to Facebook, X, Reddit, and LinkedIn.
  2. Create a “social-share” partial in the layouts directory.
  3. Use the same svg icons that are used in the “socials.html” file.
  4. Order the icons the same as the “socials” widget.
  5. Copy styles for the “share this post” toolbar from the “socials” class found in “socials.scss” but align the toolbar left instead of center.
  6. Share links should open in a new tab.
  7. Include the page url, featured image, and post title in the share links.

It worked! Again, it created a social share widget above each post image as requested. Lets evaluate.

The Good

  1. It completed the tasks of creating a social share widget above each post image.
  2. It styled the social share widget identical to the social icon links in the blog footer.
  3. For the X and Reddit svgs not in the existing socials widget, it used Bootstrap icons. I assume it used previous context to choose those particular icons.

The Bad

  1. Again, architectural decisions are suspect. It created the social-share partial outside the theme creating a new layouts directory at the top level of the project. That said it did what I asked it to.
  2. It literally copied the styles from the socials class. I suppose what I actually wanted was for Q to re-use the socials class and add a second class that modifies it to align the toolbar left.
  3. It created the social-share partial this time but for some reason didn’t add it to the header partial.

Lets add the social share toolbar above the images.

Add the social-share toolbar above each post’s featured image.

Ugh, again it created a new layouts directory with a new partial. Lets undo that.

Add the social-share toolbar above each post’s featured image. Update the existing single partial in layouts/partials directory

Now the social-share toolbar is added to the appropriate partial and displays correctly. However, it added the partial inside a conditional that checks for the featured image. We want the social share toolbar to be displayed regardless of whether there is an image. So lets fix that.

Display the social-share partial in header.html regardless of whether there is a featured image.

Finally lets fix the issue I have with the styles organization.

The social-share widget should be styled with the “socials” class. Should also specify a social-share class that aligns the toolbar left overwriting text-align specified in socials.

In the end I manually modified a few styles before pushing. If I’m being self-critical, I actually didn’t entirely know what I wanted from a styling perspective. Which got me thinking, I might not be giving Q a fair shake.

Conclusion

I was able to successfully add a social share toolbar to my blog via prompt engineering. So I guess Q was successful. But can we call this “intelligence” if all it can do is take literal instructions? If I have to walk Q through each step then is that substantively different than coding? In fairness, it is pretty amazing that Q was able to understand my ask and make decisions on its own. So perhaps I’m thinking in the wrong paradigm, maybe Q is a super book smart but naive high school coder, gitty to cut some code and get things to work. Perhaps what I’m actually doing here is a series of code reviews, evaluating and teaching as opposed to the pair programming’esque paradigm the VSCode Q plugin has forced me into. In fact, I feel like I would appreciate Q much more and prefer interfacing with it if it asked me a series of clarifying questions and cut me pull requests that I was able to evaluate. Surely this is a thing?