berkough.com

#webcomics #webcomic #art #comics #javascript

As the quality of televised and digital entertainment has degraded over the years, and not wanting to be bombarded by the sheer negativity of it all, I've found myself spending more time listening to music and reading comics. It's been a gradual transition for me... That isn't to say that I don't spend entirely way too much time watching garbage on YouTube or mindlessly surfing, looking at things I'll never buy, or researching video games, or learning things that have no real practical purpose in my life other than to be interesting topics for cocktail parties that I'll never attend, etc.

Something happened though... A tipping point? I did attempt doing a web comic maybe a year or so ago, but I never stuck with it. I have revisited the idea though, and this time I sat and thought about the story ahead of putting pencil to paper, I drew a few outlines and sketches first.

Just from my 9-to-5 and thinking about the type of comic that I wanted to read, I came upon the idea of an insurance company in the relatively near future. But it's going to evolve beyond that, because, fuck it, I have a story universe where people live on Europa and Titan, and giant monsters are a real thing. So I'm going to play with the surreal and the supernatural, the pragmatic and the practical, and I want to put it together to highlight the absurdity of life and the human condition.

We're really in a timeline where aliens are real and just a few years ago we globally went into lock down for a novel communicable virus which may or may not have been created in a laboratory. That's some Depression-era level shit right there. So of course there is a need for art to reflect on that stuff.

I don't really care to debate the details, I just want to examine the greater implications and the social structures behind how civilization deals with those types of situations.

Super hero-adjacent characters exist, but won't necessarily be the focus of the stories that are told. Corporate espionage and libertarian -slash- anarcho-capitalist theory will be themes explored—because I find it interesting, the actual practicalities of implementing such civic systems aside. But it's all just flavor for the world and to inform the behavior of the characters.

Switching gears a bit. One of the things that I need to do is think about how to implement a page navigation system. WriteFreely doesn't really have a “web comic” module like Wordpress does. However, Matt Baer has thought about the utility of his writing platform, and he's implemented a place where you can inject some js into every page. I like that, and it should serve this particular purpose just fine.

I've intentionally labeled each entry as the page number, so the url slug and the title as well as page number are all the same. I do not anticipate ever going beyond 999 pages.

That being said, here's how I implemented an automated page navigation:

let path = document.location.pathname;

function displayNav(){
    let page = parseInt(path.substring(1,4));
    let next = (new Array(3).join('0')+((page + 1).toString())).slice(-3);
    let prev = (new Array(3).join('0')+((page - 1).toString())).slice(-3);

    let div = `<div class="page-nav">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td id="first"><a href="/001"><i class="bx bxs-chevrons-left"></i></a></td>
                        <td id="last"><a href="/${prev}"><i class="bx bxs-chevron-left"></i></a></td>
                        <td id="next"><a href="/${next}"><i class="bx bxs-chevron-right"></i></a></td>
                        <td id="recent"><a href="/"><i class="bx bxs-chevrons-right"></i></a></td>
                    </tr>
                </table>
            </div>`;
    
    let content = document.querySelector('.e-content').children.item('p');
    content.insertAdjacentHTML('beforeend', div);
    return content
}

if (path !== '/'){
   setTimeout(() => {
    displayNav();
   }, 200);
}

Everything hinges on the url path, so that's defined at the top level scope. I figured this would be the easiest way to deal with pages. Stylistically I wanted to go with three digits, so working with that in javascript is a little clunky.

Originally I had an lpad function that was taken wholesale from stack. It seemed like the most elegant solution. But I wouldn't have used that function anywhere else, or more than twice, so I refactored what the function did right into the declaration of my next and last variables.

Once we have those variables we know what our URL is going to be for going backwards and forwards. So I defined a template literal with the HTML of our navigation block.

How do we know where to place it? Well, I want to make sure it's right after the picture and that's the only paragraph we have. Writefreely dumps your post into a div with the class “e-content”. Despite the fact that it's not an id, it does only show up once on the DOM. So, we query that class, look for the p and dump our div variable as html at the end.

Writefreely also provides user-specified CSS, so I've imported the Boxicons cdn so I can use it like FontAwesome and have some icons to represent first, last, previous and next.

Might not be the most elegant way to do what I need it to do, and might not be the most robust, but it works, and I'm happy about that. I don't have to keep writing a table/navigation element for each page.