Archive Template

[osteophage]

Archive of Your Own is a webpage template for making a filterable index of creative works, modeled off of fanwork archives like AO3 and SqWA. Decide for yourself how your works are presented by customizing everything from the icons to the categorization scheme, all while offering your visitors a full array of filtering options. This template was created with the help of Solaria's CSS Filter Guide and is free for personal use with credit.

Comments

[oneinist]

Oooh, I came across your page on Neocities through your page here, and I was inspired to start creating my own. (I used to have Geocities back in the day, but that is now long lost.) Back to your post here; I downloaded the template and I'm looking forward to working it into my page. First though, I want to freshen up my HTML and learn CSS in a bit more structured/logical way (and not like the current copy-paste--error-tinker-test flow thing I have going on).
Thank you for sharing the template ✨

[osteophage]

Glad to hear it! Let me know if you need help with anything. For what it's worth, in case you didn't already see, I have a beginner guide called You Can Make A Website, and I've also got more coding help on my Useful Links page.

[oneinist]

Thank you! If (or rather when) I get stuck I'll pop in and ask.
Your "You Can Make A Website" page is awesome, and the "Useful Links" page is too ✨ Right now, I'm tinkering on and off with the Archive of Your Own page, just getting used to things again, as well as mulling a bit over what filters I want to be able to use.

[althea_valara]

Hey, this is cool! Someone at smallweb linked to this project, and I'll probably implement it on my site. I don't have much fanfic yet, so my current method is working fine, but I hope to increase my fanfic output so it would be good to implement this NOW before my archive gets any bigger.

I use Jekyll as my static site generator, and I'm already seeing ways I can implement your solution in Jekyll to make it easier on an end user to build a site of their own. I'm not entirely certain it is possible yet because I'm still relatively new to Jekyll, but what I'm envisioning is setting up filters in a YAML file instead of having to have end users mess about with CSS directly.

Before I do this, I wanted to ask your permission:

• to implement this on my own site for my personal use, with of COURSE giving credit to you an linking back to your tutorial;


• if I'm successful in Jekyll-izing it, possibly building a Ruby Gem for it so other Jekyll users can implement it easily. Again, would TOTALLY give credit to you and link back to your tutorial.

If you have any questions, just ask, and thanks for your consideration.

[osteophage]

Oh neat. I believe arimamary has reworked this template for 11ty, so you might try asking them for tips. Regardless, please feel free to adapt this code as you see fit!

[lb_lee]

OH MY GOSH THIS WAS EXACTLY WHAT I WAS LOOKING FOR! I write a LOT of nonfiction, my Dreamwidth TOC is getting really overgrown, and I was gnawing on my arm wanting an AO3-style index that I could make that'd cover both my fiction AND my nonfiction. THANK YOU SO MUCH!

[osteophage]

Awesome. Let me know if you have any questions about how to use it.

[lb_lee]

I have hundreds of things to put into it, so I'll be busy for a while, but I'm enjoying noodling with it so far! The mobile accessibility seems to break on the windows and phone I'm using (it keeps things in two columns, even when that squeeshes them down) but that might be due to my old tech; will test it on newer stuff as well, see if that makes a difference.

[osteophage]

Oh, that's strange. I built this template for Firefox, but that shouldn't make a significant difference I don't think. I suppose try adjusting the pixel width on the media query and see if that does anything.

[lb_lee]

Sneak: I’m also using very old weird soft/hardware so it’s possible that’s what’s causing it! When I’m on my new machine and using Firefox, I’ll see if that solves the problem.