And… we’re back!
Apologies for the recent drought of posts. A change of jobs has meant not much free time for blogging. But hopefully I’ll be able to blog more often going forward.
Recently, I’ve been working on creating a new bookshelf feature for this blog to show the books I’ve been reading. I did have this feature on my old blog but this implementation is no longer working, and relied on a third party dependency. I wanted to recreate the same functionality but without any dependencies.
After reading this article Vibe coding a bookshelf with Claude Code, I thought I would try using Claude to generate this feature. I used Claude.ai to generate the bookshelf feature using the prompts given below.
A few thoughts on the solution generated by Claude:
- The HTML/Javascript solution is fine, if a bit over-engineered. There was a bug around the COVER_DIR variable that is mentioned in the prompts below, due to Claude appearing to miss that the original implementation was moved from HTML to a shortcode being called from Markdown. The COVER_DIR just needs to be hardcoded to
'/covers/'as this works both in the local and live sites. This is something I see a lot with AI generated solutions - they tend to ove-engineer solutions, and it takes effort to make them deliver exactly (and only) what you ask for. - Similarly, the PowerShell script to download images from the Open Library API was over-engineered - it was checking for duplicate ISBNs, repeated titles, titles with multiple ISBNs. These are useful features but they were not asked for. I actually have a PowerShell script for downloading book covers from my previous implementation of the bookshelf, and I only requested this version to compare the two.
- Overall, the use of generated code saved me some effort in generating the HTML/JavaScript, and implementing the shortcode for the Hugo blog. However, debugging the bugs due to the over-complicated implementation and also bugs caused by my lack of precise prompting probably ate up any time actually saved.
I’m happy with the bookshelf implementation, but I’ll be refactoring the code in the future to simplify it.
The following prompts were used to generate the bookshelf:
> I wish to add a bookshelf page to my blog at https://tangiest.co.uk/. Can you design an HTML web page to display my reading list. The page will be a grid of 3 columns, with a different book in each cell. For each book we will display an image of the book's cover (taken from Amazon or Open Library), the book's title, the name of the author, and my rating for the book (1 to 5 stars). The image will be named using the ISBN number for the book. I have given my last 12 books below - note, I'm still reading 'Sherlock Holmes and the Sussex Sea-Devils', so it doesn't have a rating yet.
Sherlock Holmes and the Sussex Sea-Devils James Lovecraft 9781783295975
Notes from the Burning Age Claire North 9781783295975 4
...
Can you generate an HTML web page designed to complement the theme for my blog? Initially I want to focus on the page's visual design but eventually I want to move to an infinite scrolling page to display all my books (some 800+ since I started recording them).
> Can you update the above generated HTML to become Markdown content I can add to an existing page in my Hugo blog?
> OK. I've implemented the bookshelf shortcode, but it is not displaying the book images, etc, but is displaying the actual code in the bookshelf.html page. Can you help identify the issue?
> When I write the shortcode using `{{ < bookshelf > }}`, the code is not displayed or the book covers - instead I get the following error: Uncaught TypeError: BOOKS.slice(...).forEach is not a function
> OK. I have the bookshelf implemented and working on my local Hugo build on my PC. But when I deploy the site to GitLab, the site is not displaying the bookshelf HTML, and gives a 404 error.
> The 404 is for the entire bookshelf page. I've attached the .gitlab-ci.yml file. The end of the build job log is as follows:
Executing "step_script" stage of the job script 00:01
Using effective pull policy of [always] for container registry.gitlab.com/pages/hugo:latest
Using docker image sha256:5766d6f8f98491d68f7db6367295b6d9421737645e3f1e1a92bafb0de00509f0 for registry.gitlab.com/pages/hugo:latest with digest registry.gitlab.com/pages/hugo@sha256:14c85cbb432688be3766dcb52e2ceb177e9a7a448dd5178710b5b28570ae3ed2 ...
$ hugo
Start building sites …
hugo v0.140.2 linux/amd64 BuildDate=unknown
| EN
-------------------+------
Pages | 139
Paginator pages | 12
Non-page files | 0
Static files | 51
Processed images | 0
Aliases | 83
Cleaned | 0
Total in 162 ms
Uploading artifacts for successful job 00:02
Uploading artifacts...
public: found 523 matching artifact files and directories
Uploading artifacts as "archive" to coordinator... 201 Created correlation_id=157226dc758a4eba9efacd8995d849a1 id=17213833837 status=201 token=74_bXG_2v
Cleaning up project directory and file based variables 00:01
Job succeeded
> Can you please generate a PowerShell script to iterate over the books in the data/books.json file and to list all the books that are missing covers in the static/covers folder?
> Can you please create an updated version of the script that checks if a book title occurs more than once, the same ISBN is used for all instances of that title, and highlights if a different ISBN is used. .
> Thanks. Can you please update the script so that it attempts to download any covers that are not present from the Open Library API?
> Can you please update the script so that if it can't download a missing image, it opens the Open Library web site and searches for the missing book using the title and author name? For example, so if it can't find the cover for The Longest Day by Cornelius Ryan, it would open the URL https://openlibrary.org/search?q=The+Longest+Day+Cornelius+Ryan.
> OK. In the bookshelf.html code, there is a reference to a COVER_DIR constant. Where is this initialised - where is the directory path defined.
> OK. And how would you specify the Cover directory path when calling the bookshelf from a Markdown file as discussed earlier?
> OK. I've debugged the issue where the books cover images in the static/covers/ folder are not being loaded. The issue is due to the relative URLs being generated by the script. The page is requesting images at http://localhost:1313/page/bookshelf/covers/9780356514758.jpg instead of http://localhost:1313/covers/9780356514758.jpg. Can you suggest a fix for this?
> OK. The rendered root element is <div class="bookshelf" id="bookshelf" data-cover-dir=" /covers/"> which suggests your fix isn't working.
> OK, when I paste the data-cover-dir="{{ printf "%s/%s/" $basePath $coverDir }}" into the bookshelf.html, VS Code is highlighting the "%s/%s/" in red, and when I try and save the file, it is introducing a space so it becomes " %s/%s/" (causing the bug).