-- Vers 1.0.0 -- The Jack O'Connell Library Website
The Library is officially open so we're going to talk about the site's features and the progress of how it was made!
Visit the site here: The Jack O'Connell Library
Visit the Tumblr blog here: @jocficlibrary
Desktop:
Mobile:
Overview:
The Jack O'Connell (JOC) Library was made as a way to help find/support/categorize fics based on Jack's characters on Tumblr. Using filters and links back to the original story, we aimed for this site to be a resource for the community, boost engagement for all authors, and help keep JOC fics accessible.
Features:
Site Functionality
Pulls fics from Tumblr API and pulls filter tags from Google Sheets (filter tags are flexible and categories/tags can be added or removed at any time)
Dropdown filters to sort by character, fic length, pairing, and rating (AND boolean logic)
Multi-select button filters to include or exclude various tags (OR boolean logic)
Local Storage--to save your preferences and tag selections if you refresh or leave/return to the site
Pagination--splits posts up into pages
Dark/Light mode
Post Features
Images--formatted similar to its Tumblr counterpart
Title, Author, and Summary pulled from the jocficlibrary's reblog
Tags pulled from the jocficlibrary's reblog
Word count--formatted in the corner of each post (wc: # tag)
Tag highlighting--highlights included tag filters
Series/Chaptered Works
Progress:
It's a bit difficult to talk about code on Tumblr due to formatting and everything. But you can check out all the code here! And yes I wrote the code all myself. It took 3 weeks where 1 of them I had spring break and no responsibilities lol. Just note that I am only a decent coder and a beginner web designer. So any super experienced full stack developers be gentle with me haha I know it's not optimized
Concept:
Prototype:
Adding Features
Tag categories and include/exclude buttons & filter and clear buttons:
Description: allows user to filter out tags from the search. One click for include, two clicks for exclude
Description: Filters won't apply until you click the 'filter' button. You can also clear your selections to default with the clear button
Save preferences on refresh and return to page
Description: If you refresh the page or close the page and return to it later (on the same phone/laptop whatever you use) It will save your filter selections
Pages (for when there's lots of results)
Description: There might be a lot of results displayed (actually most of the time) we don't want this to load all at once, it could make the website run slow. So there will only be 10 results per page and navigation buttons to control the page
Tag highlighting
Description: If a tag is selected either from the dropdowns or the multi-select buttons (so basically any selections) then it will highlight them under each post!
Titles and Summaries
Description: Displays the title and summary of a fic for each entry.
The Title should be on the first line and (if there is) a summary it should go on the next line (if there is multiple paragraphs in the summary you can include them all, that's fine as long as it's after the first line of the title)
Images
Description: Images appear above each post (as similar as possible) to their tumblr format
Series/Chaptered works
Description: Series/chaptered works will look like this! They have a button under the main post that expands/collapses all the chapters it has.
Expand/collapse buttons for tags and explicit tag hiding
Description: if there are more than 4 tags in a category then a button will expand and collapse the rest of them. Also if non explicit is selected in the 'Rating' dropdown, then the explicit tags will not show
Finally adding style and css
It's kind of short when I lay out all the main points like this. But a lot of care and time went into each feature and how it would work!! I took inspiration from a lot of sites, mainly AO3 (obviously) so thank you AO3 for being the goat yet again.
Thank you for reading!! 💕💕🥰🥰If you use the site please let me know your experience with it! I hope this will be enjoyable and useful for everyone! It truly was a labor of love.
--Librarian Domo 💞