How it Works

This template is adapted from Coyote's Archive of Your Own build in Eleventy.

src folder structure:

• _includes
  • base.njk
  • fics.njk
  • thumbnail.njk
• assets
  • css
    • ao3.css (the stylesheet applied to the whole project)
    • style.css (a random stylesheet to play with)
  • images
• fics
  • fics.json
  • multichapter-1.md
  • multichapter-2.md
  • oneshot.md
• thumbnail
  • multichapter-thumbnail-template.md
  • oneshot-thumbnail-template.md
  • thumbnail.json
• index.html

How to add fics

1. Add a thumbnail

To be able to access your stories, you must first create a thumbnail.

1.1 Duplicate oneshot-thumnbnail-template.md or multichapter-thumnbnail-template.md depending on the type of story in the same folder and rename. 1.2 Inside the --- fill out the metadata.

Visble metadata

used in thumbnail preview

• title:
• uploaded
• Rating
• Fandom
• Pairing
• characters
• tropes
• description
• word-count
• chapters

Invisble metadata

used for filtering; input on your thumbnail and stylesheet must match for filter to work

• rating
• fandom
• pairing
• event
• words
• status

If all went well, you should see a new thumnbail on the homepage. Next, you need to add the fic itself and link it to the thumbnail.

2. Add fic

2.1 On the fics folder, duplicate same type (multichapter or oneshot) as in previous step and rename it. Back on the thumbnail you created on the previous step, in the <a> tags inside the <h2>, replace replace "multichapter" or "oneshot" with the filename created in this step. You should be able to access your fic through the thumbnail now. Filepath must match.

2.2 Back on the fic file, inside the --- fill out the metadata. - title is what shows up in the header - subtitle is what shows up on the body. - order helps organize the chapter index. If your subtitles are named alphabetically, you might not need this. - permanlink update inside '' with a pretier name for your file if you want.

Sidenote: Chapter Index (multichapter only) 2.2.1 Inside the collection, replace multichapter with the abbreviation for your story. 2.2.2. Head to .eleventy.js file. Ctrl + F "multichapter" and replace with the abbreviation you choose above. 2.2.3. When you open the dropdown, you should see the subtitle of the file you were working on. As you add more chapters, this list should populate.

Additional Features

• Built with Eleventy
• Status filters: complete and WIP.
• New Words filter: < 1k words.
• Back to top link.
• Multichapter navigation
• Series navigation