eleventy-webcomic

This is a quick overview of things if you kind of know what you're doing. More extensive instructions are coming!!

This is a template of a template of a template. Eleventy-webcomic is a template, built off of the Rashon's eleventy-rarebit, which itself is built to replicate the functionality found in geno7's Rarebit webcomic template.

Features

• Mostly Static: Built from Liquid templates, pages core functions no longer require JavaScript. (Why does this matter?). There are some "additional" features (comments, navigating with keyboard arrow keys, archive drop down selection) which require javascript, but the core reading experience functions just fine!

• Drag and Drop: No more fiddling with JavaScript to add updates; comic pages can be added with Markdown through custom front matter.

• Beginner Friendly: eleventy-rarebit-template maintains the same philosophy as Rarebit to be as beginner friendly as possible. Files are commented extensively with constant references to the Eleventy Docs and other relevant documentation. In addition, I'm working on a setup tutorial over here.

• RSS Feed: An RSS feed of your comic is automatically generated after some very slight setup. I've added this because people still frequently use them (especially for webcomics), and some webrings require you to have one in order to be listed with them.

• more “neutral” default styling (mostly done for my site, but why not 🤷‍♀️)

• revamp of the archive. It is explicitly divided by chapters, and only shows one image per chapter (and using 11ty img to output it at a smaller size). Additionally, there's a dropdown selection to go to a page for chapter

• added explicit date setting in the post, in case folks copy a file to make a new page, using the github repo as a pseudo-CMS.

• ability to add comments, leveraging google forms (big shout to the jekyll guy). We've even got emojis! 💅

• added back arrowkey navigation, because folks seem really set on it

Deployment

Netlify

1. Make sure you have a Github account setup first.

2. Click this button:

Neocities

1. Create a new GitHub repository from this template
2. From your account settings in Neocities, generate an API key for your site by clicking Manage Site Settings (of target site) > API > Generate API Key
3. Add the API key as an action secret to your repository with the name NEOCITIES_API_TOKEN
4. Download GitHub Desktop and clone the repository to your computer
5. Open the cloned repository in a terminal window and, assuming Node.JS is installed, type npm install
6. In the same terminal, start a local webserver by entering npm start

You now have a hot-reloading preview of your website! Go ahead and start tailoring the template for your comic. When you're ready to publish, just commit and push your changes in GitHub Desktop; your site should update on Neocities shortly afterwards!

Usage & Eleventy

If you're new to Eleventy, make sure you go over its Getting Started guide.

Comic pages can be stored in any subfolder within your Eleventy project's input directory. You can specify their custom data - whether that be titles, images, or thumbnails - through template and directory data files or front matter data.

// Directory Data
{
  "tags": ["comic"],
  "thumb": "/img/thumbs/default.png",
  "layout": "layouts/strip.liquid"
}

---
# Front Matter Data
title: The First Page Title
images: ['/img/comics/pg1.jpg']
alt: Here's some alt text!
thumb: '/img/thumbs/pg1.png'
tags:
  - chapter1
---

Layouts can then be applied to define how the page and its data are rendered.

<!-- `strip.liquid` (Snippet) -->
<div class="comic">
  <h1>{{ title }}</h1>
  {% render 'comic.liquid', collection: collections.comic, page: page, images: images, alt: alt %}
</div>

Still curious? Start exploring the template or see it working for yourself!