Looking for Javascript advice

[cmdonovann]

So, I'm trying to set up a little fanfiction archive for a tiny fandom that only has around 60 fics total. I would like to be able to sort these fics by a couple of categories: length (sorting shortest to longest), rating (sorting lowest to highest), ship (sorting ships alphabetically and by date within each ship category), completion (showing only completed fics in order of recency), and just a list of all the fics from oldest to newest.

Since I'm currently hosting this on Neocities, and there really aren't that many fics, my current solution is to just hard-code each category's list myself, and then have a little javascript to toggle between each list/sorting method. However, in the interest of making this project easier to maintain in the future, I am interested in eventually setting up a script that actually does this sorting for me, rather than having to hardcode each list individually myself. Is there a way to set custom parameters/tags of some kind to sort a list of items using javascript? (To be clear, I'm a total javascript noob, so if this question seems obvious or is worded badly, that's why.)

Example: for sorting fics by length, I would want to be able to give each fic a "length in words" attribute, then have a script that sorts and displays them from shortest to longest. For displaying all of the fic, I would want to be able to give each fic a "date published" attribute to sort from oldest to newest. For completion I would use the date attribute to sort them oldest to newest as well, but additionally filter out any that are marked as "unfinished" somehow? But I'm not sure how to practically do all this.

Any and all advice on javascript is welcome! Advising me to use something else will probably be ignored, because the entire purpose of doing it this way is to force myself to get better at javascript XD thanks for understanding!

Comments

Ah shit there I go being an Astro build evangelist again

[citrodorks]

Oh! This might actually be an excellent use case for Astro and its collections!!

They’ll allow you to assign that sort of metadata to each fic and then use JS to sort through the lists just like you said. ^^ I use it in my own neocities to have my fanfic sorted by publication date but the work behind it could be used to build filters and sorting by ship, fandom, word count, etc, etc. I can give you a closer look at what I have if you’d like? My code base is a bit messy but it might be illustrative enough combined with the docs above.

Re: Ah shit there I go being an Astro build evangelist again

[cmdonovann]

another tick in the box of "i should try astro eventually" lol, but i don't think this is the project for it, since i already have much of the site built and don't want to have to convert it. maybe for my next website...

Re: Ah shit there I go being an Astro build evangelist again

[citrodorks]

Ah yes!

For what it’s worth once you get the hang of Astro converting a project to it can become almost painless, but as a Very First Astro project converting a nearly complete website might not be the most fun, agreed. Perhaps a good second project tho!

[momijizukamori]

Absolutely doable in JS - I've done it before in jQuery, and will dig up the code for you (possibly tomorrow at this point, it was an internal work thing and I don't feel like logging back on), but jQuery is mostly just a helper layer on top of vanilla JS, so it shouldn't take me long to convert.

You can uses CSS classes, or data-[whatever] attributes, or if it's stuff you want to have as part of the visible HTML too, you can just yoink it out of that if it's got a handy label.

[cmdonovann]

ooh, yes, i would be interested in taking a peek at what you've got, either the jquery or vanilla js (or both; it might be interesting to compare, since i've never used jquery). whenever you've got time! (it's not a hurry btw, i'm busy as hell this month, i just posted this now so i wouldn't forget about it and planned to come back to look at comments in a week or two, haha.)

[momijizukamori]

OKAY SO. It turned out the existing JS is an ancient confusing mess (the last time I worked on it was like four years ago, and I inherited a lot of it from a previous person), so I went ahead and did some simple demos with hopefully sufficient comments to understand them. Both are pure vanilla JS - simple sort demo, and simple filter demo. These employ the same strategies the work code does, which performed fine on lists up to a couple hundred items, but above that I can't say.

A fancy addition to these would be to read and write the window url query parameters, so that you could share a specific filter configuration as a link - if you'd like, I can whip up a demo for that too.

[lieutenant_sanya]

Hello! I stumbled across your entry and thought I'd try a hand at it. Do you mean something like this? Very bare-bones example—but JS can filter and organize your works for you. In the first version I made, it needed you to edit the HTML and JS for new fics, but I rewrote it so that all you have to do is add more objects to an array; the JS will do the rest of the work in sorting and displaying it.

All of the fics' details (name, length, completion status, summary, etc.) are objects in an array I named "fics". The incomplete/complete checkboxes toggle {display: none} or {display: block} on the respective works depending on if they're checked. For the sorting functions, I made the parent main tag a flex box so JS can use the {order} property to organize the child sections according to word count/name/etc.

I can send the HTML and JS files to you if you'd like. :) Now I too want to start some sort of fannish fic archive, hahah.