tl;dr: Rik builds an online (£FREE) book store for all his publications
This is the sixth in a series of blog posts detailing my journey to rebuild my poetry website - The RikVerse - using Svelte.js, Page.js and Tailwind CSS. Other posts in this series:
- Introduction to the project
- Setting up the shiny
- The client is not the server - 404 errors
- Building the blog reader
- Fun with Cookies!
- The book store bits
- Sharing is Caring - social media share buttons
- … And finally: the poems!
The code developed in this blog post can be found in this branch on GitHub.
Where were we?
In the previous post I had some fun with cookie consents, learning about Svelte stores along the way.
Here’s a quick reminder of my goals for this site rebuild:
- [This post] Make each publication page that book’s keystone page
- [This post] Let people read the books in-site
- [Next post] Add social media share buttons to each page
- [NEW - Next post] Fix the metadata
- [Final post] Index of all the poems available to read
- [Final post] Tag filtering functionality on the poems index page
- [Final post] Easy for the user to access a poem’s associated media files (images, audio, video)
- [Final post] The landing page should display a randomly selected poem
[Done] Simpler, more minimal design; better fonts[Done] Navigation needs to be massively simplified[Done] Avoid 404 Page Not Found errors at all costs![Done] Add in poetry-and-writing-related blog posts[Done] Get rid of the database![Done] Keep the donate button; make it More Fun To Use[Done] Add in cookie consent (meeting UK ICO guidance for explicit opt-in)
Building the book store
While the RikVerse book store will look very different to the blog reader I built back in my fourth post of this series, the functionality between the two is pretty much the same:
- A page - at
/publications
- to display all of the books - Each book will have its own page at
/book/title-of-book-slug
The chief differences between the two builds are:
We won’t need to fetch any copy for the books - all the book data will be held in the
./src/data/bookData.mjs
file; andUsers will be able to read the books in-site (making use of the
.pdf
files I have for each book). This will happen at a separate end point for each book -/read/title-of-book-slug
I won’t bore people with a detailed explanation of how I built the book store pages - like I said, it’s much the same as for the blog reader build. Instead I’ll show some highlights of the code, alongside some pretty images of the final results.
Routing
Here are the changes I made to the ./src/routes.js
file
1 | ... |
While the individual blog post end points - /blog/:slug
- are in the same directory as the blog posts listings page /blog
, for the book store I’m doing things differently. This leads to a couple of dead-end end points (/book
and /read
) which, if the user navigated to them (probably out of spite), would result in those users seeing an error page.
So instead I’m telling the router to load the publications index page when a user hits those dead ends. I also added replica ‘publications’ objects for these end points to the ./src/data/pageData.mjs
file, so I can generate redirect pages for them when I run the yarn build
terminal command (thus beating the 404 Page Not Found trap when users refresh their browsers).
… Yes, it’s not very clever. But it works!
Data structure
The structure of the objects describing the books - kept in the ./src/data/bookData.mjs
file - is similar to the pageData and blogpostData objects, but holds a lot of additional information. Here’s an example:
1 | const bookData = [ |
I publish my books in several different venues - principally Smashwords, but also other places the Smashwords distribution network cannot reach. This is a good way of gathering the links together in one place.
Also, because I give away all my books for £FREE, I include links to various eBook format files so people can download them directly from the page.
Results
The /publications
end point, which uses the ./src/pages/Publications.svelte
and ./src/components/PublicationCard.svelte
Svelte files to construct its display:
The /book/:stub
end point, built entirely from the ./src/pages/Book.svelte
file:
And finally the rather less glamourous yet more useful /read/:stub
end point, generated from the ./src/pages/ReadBook.svelte
file:
To display a .pdf
file in a web page we still have to go “old-skool” - I haven’t used an <object> element in a web page for years … until now!
Here’s how to embed a pdf file into a web page (with some help from Svelte):
1 | <div> |
In the next post, I shall be working out how to let people share RikVerse pages on Twitter and Facebook.