Just copy and past the codes below. Also, I don't really care what people do with my code. Feel free to modify and claim it to be yours.
<!-- Anything with the class of 'main-content' will be placed into the main tag -->
<article class='main-content'>
<nav id='comicNavTop' class='comic-nav'></nav>
<header id='comicHeader'></header>
<article id='comicView'></article>
<nav id='comicNavBottom' class='comic-nav'></nav>
</article>
<article id='comicInfo' class='main-content'>
<h2>Author's Note</h2>
<date id='comicDate'></date>
<section id='comicDesc'></section>
<section>
<!--
This is just for demonstration.
You should move it it's own page
-->
<hr>
<h2>Default Archive</h2>
<div id="comicArchive"></div>
<!--
The script is like this
let example = writeList(first, last, reversed);
parent.append(example)
first = index of the first comic to be listed (integer)
last = index of the last comic to be listed (integer)
reversed = whether to put it in reverse chronological order (boolean)
Just leave the parameter empty if you want to use the default
Write down 'auto' if you want to skip certain parameters
-->
</section>
</article>
@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100..900;1,100..900&display=swap');
:root{
--accent-color: #d9aa35;
--display-font:grandstander;
--body-font:Arial, Helvetica, sans-serif;
--comic-width: 900px;
}
body{
padding:0;margin:0;
font-family:var(--body-font);
}
h1,h2,h3,h4,h5,h6{
margin:0;
font-family:var(--display-font);
}
ol,ul{margin-top:0;}
a{text-decoration:none;color:inherit;}
p{margin-top:0;}
p > a { text-decoration:underline; }
#mainHeader {
box-sizing: border-box;
text-align: center;
margin: auto;
padding: 1rem;
width: 100%;
background-color: black;
color: white;
}
#mainNav {
box-sizing: border-box;
border: 2px solid black;
background-color: white;
margin: auto;
width: 100%;
padding: 1rem;
text-align: center;
a:hover { color: var(--accent-color); }
a:nth-of-type(n+2)::before {
content: ' | ';
display: inline-block;
margin: 0 1rem;
color: black;
}
}
main {
position: relative;
--transparent: color-mix(in srgb, var(--accent-color), #0000);
background-color: color-mix(in srgb, var(--accent-color), #FFFFFF);
background-image: repeating-linear-gradient(45deg, var(--transparent), var(--transparent) 20px, transparent 20px, transparent 40px), repeating-linear-gradient(-45deg, var(--transparent), var(--transparent) 20px, transparent 20px, transparent 40px);
}
#comicHeader {
font-size: 1.5rem;
padding: 1rem 0;
text-align: center;
}
.comic-nav {
text-align: center;
justify-content: center;
padding: 1rem 0;
display: flex;
img {
max-width: 100px;
}
}
#comicView {
box-sizing: border-box;
border: 2px solid black;
background-color: white;
margin: auto;
max-width: var(--comic-width);
width: 95%;
img {
display: block;
width: 100%;
}
}
#comicInfo {
box-sizing: border-box;
background-color: white;
border: 2px solid black;
width: 100%;
margin: auto;
padding: 1rem;
}
#mainFooter {
box-sizing: border-box;
text-align: center;
margin: auto;
padding: 1rem;
background-color: black;
color: white;
}
.comic-list-item {
display: flex;
padding: 1rem;
position: relative;
&:hover {
background-color: color-mix(in srgb, var(--accent-color), #FFFFFF);
}
> * > span {
position: relative;
display: block;
top: 50%;
left: 0;
transform: translateY(-50%);
}
> * > span > span {
font-family: var(--display-font);
font-weight: bolder;
}
img[src="#"] {
display: none;
}
img {
max-width: 3rem;
aspect-ratio: 1/1;
margin-right: 1rem;
object-fit: cover;
}
}
.comic-list-title {
flex: 1;
margin-right: 10px;
}
.comic-list-index {
position: relative;
min-width: 30px;
}
// Komic by Stupied: https://stupied.neocities.org
//TABLE OF CONTENTS
// 1. Comic List
// 2. Settings
// 3. Da Code!
// 4. Functions
//-------------------------------------------------
// [1] COMIC LIST
const COMIC = [
// All you need is a file
{ "file": "Cover-Page.jpg" },
// You can add more than 1 files - separate with a comma
{ "file": "Dress-Up.jpg,Letters.jpg" },
// Or you can write it as an array.
{ "file": ["Penny-Glamor.jpg", "Penny-Glamor-2.jpg"] },
// You can give it a title, date, description, and thumbnail
{
"file": "Surrealism.jpg",
"title": "It's Not Surrealism!",
"date": "2025-09", // you can leave the day empty
"desc": "Also, yes I stole the buttons from <a href='https://rarebit.neocities.org/' target='blank'>Rarebit</a>",
"thumb": "Surrealism.jpg"
},
{
"file": "Weather.jpg",
"title": "Poor Weather",
"date":"2025-09-20",
"desc": "Henlooo, this is basically my attempt of making something similar to <a href='https://rarebit.neocities.org/' target='blank'>Rarebit</a>. I didn't really have a purpose for making it. I just impulsively wanted to. So there might be some stuff I overlooked.",
"thumb": "Weather.jpg"
}
];
//-------------------------------------------------
// [2] SETTINGS
const SKIP_HEADER = true; // skips to the header
const IMG_FOLDER = 'img'; // folder for all your images
// buttons for comic navigation - you can make em images
const NAV_BUTTON = {
first: `<img src='./img/button/first.png' alt='first button'>`,
prev: `<img src='./img/button/prev.png' alt='previous button'>`,
next: `<img src='./img/button/next.png' alt='next button'>`,
last: `<img src='./img/button/last.png' alt='last button'>`
}
const HEADER = `
<h1>Comic Title</h1>
`
const NAV = `
<a href="/index.html">Home</a>
<a href="#">Archive</a>
<a href="#">About</a>
`;
const FOOTER = `
<!-- Feel free to remove the credit -->
Layout by <a href="https://stupied.neocities.org" target="_blank">Stupied</a>
`;
const LAYOUT = `
<header id='mainHeader'>${HEADER}</header>
<nav id='mainNav'>${NAV}</nav>
<main></main>
<footer id='mainFooter'>${FOOTER}</footer>
`
//-------------------------------------------------
// [3] DA CODE!
const BODY = document.querySelector('body');
BODY.innerHTML += LAYOUT;
content = document.querySelectorAll('.main-content')
for (let i = 0; i < content.length; i++) {
document.querySelector('main').append(content[i])
}
var current = { index: window.location.search.replace('?', '') };
if (current.index === '') { current.index = COMIC.length - 1; }
current.index = Number(current.index);
BODY.classList.add(`part-${current.index}`)
current.files = getFiles(current.index)
current.output = writeFiles(current.files)
if (current.index >= 0) {
current.prev = current.index - 1;
}
if (current.index < COMIC.length - 1) {
current.next = current.index + 1;
}
const COMIC_VIEW = document.getElementById('comicView');
const COMIC_HEADER = document.getElementById('comicHeader');
const COMIC_DATE = document.getElementById('comicDate');
const COMIC_DESC = document.getElementById('comicDesc');
const COMIC_NAV_TOP = document.getElementById('comicNavTop');
const COMIC_NAV_BOTTOM = document.getElementById('comicNavBottom');
const COMIC_ARCHIVE = document.getElementById('comicArchive');
appendTo(COMIC_VIEW, current.output);
current.nav = writeNav(current.index);
appendTo(COMIC_NAV_TOP, current.nav.cloneNode(true));
appendTo(COMIC_NAV_BOTTOM, current.nav);
current.title = writeTitle(current.index);
appendTo(COMIC_HEADER, current.title);
appendTo(COMIC_VIEW, current.output);
current.date = writeDate(current.index)
if (current.date) {
appendTo(COMIC_DATE, current.date)
}
current.desc = writeDesc(current.index)
if (current.desc) {
appendTo(COMIC_DESC, current.desc)
}
current.archive = writeList();
appendTo(COMIC_ARCHIVE, current.archive)
//-------------------------------------------------
// [4] FUNCTION
function appendTo(parent, element) {
if (parent) {
parent.append(element);
}
return null;
}
function getFiles(index) {
let files = COMIC[index].file;
let result = files;
if (typeof (files) === 'string') {
result = result.split(',');
}
current.file = result[0];
return result;
}
function writeFiles(files) {
let result = document.createElement('section');
result.class = 'comic-page';
for (let i = 0; i < files.length; i++) {
item = document.createElement('img');
item.src = `./${IMG_FOLDER}/${files[i].trimStart()}`;
item.class = i;
result.append(item);
}
return result;
}
function writeNav() {
let result = document.createElement('div');
let jumpto;
if (SKIP_HEADER === true) { jumpto = '#comicHeader'; }
if (current.index > 0) {
let first = document.createElement('a');
first.href = `?0` + jumpto;
first.innerHTML = NAV_BUTTON.first;
result.append(first);
}
if (current.prev >= 0) {
let prev = document.createElement('a');
prev.href = '?' + current.prev + jumpto;
prev.innerHTML = NAV_BUTTON.prev;
result.append(prev);
}
if (current.next) {
let next = document.createElement('a');
next.href = '?' + current.next + jumpto;
next.innerHTML = NAV_BUTTON.next;
result.append(next);
}
if (current.index < COMIC.length - 1) {
let last = document.createElement('a');
last.href = '?' + (COMIC.length - 1) + jumpto;
last.innerHTML = NAV_BUTTON.last;
result.append(last);
}
return result;
}
function getTitle(index) {
if (COMIC[index].title) {
return COMIC[index].title;
} else {
let items = getFiles(index)
let result = items[0];
result = result.replaceAll('-', ' ');
result = result.replaceAll('_', ' ');
result = result.substring(0, result.lastIndexOf('.'))
return result;
}
}
function writeTitle(index) {
let result = document.createElement('h1');
let title = getTitle(index);
result.innerHTML = `[${index}] ${title}`;
return result;
}
function getDate(index) {
if (COMIC[index].date) {
let date = new Date(COMIC[index].date);
let result = date.toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric'
})
return result;
}
return null;
}
function writeDate(index) {
let result = document.createElement('div');
result.innerHTML = getDate(index);
return result;
}
function writeDesc(index) {
if (COMIC[index].desc) {
let result = document.createElement('div');
result.innerHTML = COMIC[index].desc
return result
}
return null;
}
function writeList(first, last, reversed) {
if (first === undefined || first === 'auto') { first = 0; }
if (last === undefined || last === 'auto') { last = COMIC.length; } else { last++ }
if (reversed === undefined || reversed === 'auto') { reversed = false; }
let result = document.createElement('article');
result.classList.add('comic-list');
for (let i = first; i < last; i++) {
let item = writePart(i)
if (reversed === true) {
result.prepend(item);
} else {
result.append(item);
}
}
return result;
}
function writePart(index) {
let link = document.createElement('a');
link.href = './?' + index;
let result = document.createElement('div');
result.className = 'comic-list-item'
let label = document.createElement('div');
label.className = 'comic-list-index';
label.innerHTML = `<span>#${index}</span>`
result.append(label)
let titleContent = getTitle(index);
let title = document.createElement('div');
title.className = 'comic-list-title';
let info = `<span>${titleContent}</span>`;
if (COMIC[index].date) {
info += `<br>${COMIC[index].date}`
}
title.innerHTML = `<span>${info}</span>`
result.append(title)
if (COMIC[index].thumb) {
let thumb = document.createElement('img');
thumb.src = `./${IMG_FOLDER}/${COMIC[index].thumb}`
result.append(thumb)
}
let thumb = document.createElement('div');
thumb.className = 'comic-list-thumb'
link.append(result)
return link;
}