Dev Loggin'! (2025-04-08)Link

Displaying code on a website is finnicky.

You ever go off on a nonsensical path that leads to a dead end because you misunderstood both the problem and the solution? Only for there to be a very simple, satisfying solution to the problem? That was likely obvious to a lot of other people?

The first time I published the second part of my siteV2 designing attempts was largely about my struggles in displaying website code correctly on a website. Naturally a website wants to process code about websites instead of outputting it, so I thought I had to engineer a solution around it. What I attempted is archived here for posterity but I don't want to potentially mislead anyone but leaving it somewhere you could access intentionally looking for advice.

So, let's do that again, but less stupid.

An Intro to Static Site Generators

When building a site, every page has to be told how to look. To add a new header button, the new button has to be added on every page of this site. This is fine for a couple of pages. But for tens or hundreds of pages, you can imagine that this is A) time consuming, and B) easy to make mistakes or miss pages.

Static site generators exist because it's easier to design a template of common features across a lot of pages, and then tell your website to put pictures or words within that template.

Design a template, point your content at the templates, and then the static site generator tears apart your content and fit it into the templates. So if you add a new header button into a template, it can regenerate every single page that uses that template. You have all your usually website design tools available, and the ability to generate components procedurally (for example, the blog page at time of writing is made by running a loop on every single post tagged "Blog" and outputting its title and publication date).

I use the static site generator Eleventy. "I haven't shopped around but I'm content with it," is the closest I'll get to writing a review. Oh - and I found it was a steep learning curve.

If you are picking it up off the back of this explanation, two words of advice that won't make sense until you're staring at something confused and lost:

• .json and .js files aren't ran while eleventy is running in the background, so if you do any automated page formatting using them, kill and restart Eleventy to make things show as you're expecting them to.
• The output folder doesn't clear itself out, only writes to itself. So before uploading, it's a good idea to wipe it clean before you update your website.
• In general, to use a static site generator to publish to neocities, you need neocities' Command Line Interface. This isn't really promoted anywhere, so I'm including it here.

Presenting Code

So how do you make a website stop reading code?

In Eleventy at least, anything surrounded by `` in a markdown file gets displayed as plain text.

For example:

Subscribe to BoostandEthanol

When surrounded by `` is output as:

<b>Subscribe to BoostandEthanol</b>

Eleventy uses a language called Nunjucks to instruct the generator to look at variables or make loops or otherwise do fancy stuff.

To present this, Nunjucks has to be surrounded by raw tags like so:

{% raw %} <a href="{{ page.url }}"> Title: {{ page.data.title }}</a> {% endraw %}

This example code could be used in a for loop. On every loop, the relevant page would have its title taken, and page linked, which could be useful for listing articles on your page without having to manually set up every link.

But that doesn't read so easy. Any decent code display will highlight different elements to make them easier to parse. Fortunately, Eleventy has an official plugin to do precisely that. To be fair, the system isn't Eleventy specific. Prism is a system which, when you tell it that something is written in a programming language, adds highlights to hopefully make the code a little easier to parse. In Eleventy, all I need is the plugin and to add a stylesheet into the page for it to apply.

For example, this is an excerpt from the blog page on siteV1, which takes piece from the siteV1 blog page which, which displays every post:

{% highlight "jinja2" %}{% raw %} <a href="{{ page.url }}"> Title: {{ page.data.title }}</a> {% endraw %}{% endhighlight %}

Which, if I make display as it should:

<a href="{{ page.url }}"> Title: {{ page.data.title }}</a>

Which looks much better. Even if you're seeing this post in early days, before I've gone through and reformatted it.

You'll note that I used {% highlight "jinja2" %} to highlight the code. For some reason referencing Nunjucks itself gives me some ugly behaviour which I can't explain. And apparently Nunjucks is based on something I've never heard of called Jinja2, which when referenced displays my code properly. So this is my workaround.

Really, the main thing this has accomplished is stacked another thing for me to style. It's going to be fun trying to parse a Prism CSS file...

It's doing itself a disservice by saving space through containing everything to a single line, but still... That's the default day theme from the Prismjs site. The only change I've added is a font size adjustment. There's plenty of different themes about, but me being me, I'm going to tinker with them regardless.

Wait-This is a Devlog About Redesigning a Website

Indeed. Meta time over. How's this going? Where's my mind at?

One of the benefits of a static site generator is I can swap content between templates. So just by redirecting my homepage to an experimental template, we can see how things are looking. My main takeaway is that I loathe my homepage. Much like siteV1, I've built a grid that sections off the content centered on the screen. I've also used the grid to expand the page scroll distance to that 100% + vh100 height I mentioned in part 1. The main content area is wider, at 968px (the width of the frame in siteV1, which only left 840px to content), although I'll probably bump up the margin because the way it gets way too close to the edges for my liking.

The lorum ipsum on the right is standing in for the sidebar. Maybe this is just a me thing, but I noticed my eyes skew left when sitting on a page, so I find moving less pertinent features to the right more readable.

Functionally, I think the sidebar will take the place of the header and get additional relevant links depending on where in the site you are. I should be able to configure that just by checking how I've tagged a page within Eleventy, although all the ways of carrying out that check which spring to mind feel mildly hacky. I think I'll then "cut" the sidebar into a header and footer for mobile. Without a header on desktop, I'm not sure how my page is going to fit comfortably with the top of the browser. I want to leave the sides sort of open rather than a rigid border, but that's not set in stone. Maybe I'll apply more margin at the top to make my page seemingly hang from the top of the screen, as the moment you scroll everything's going to get pushed up there.

I'm also wondering about that space on the left. The home button/logo can probably go up there, but is there any other use for it? Check out this post on Ribo.zone. There's a neat system of putting images off to the side, which falls within the width of the text on narrower screens, which is apparently as easy as using the float variable in CSS. Sadly this doesn't work in my grid system, so I'll have to have a rethink if my heart goes this direction. Maybe I can do something with position: relative;?

Also - and I'm bothered I have to emphasise this (maybe I shouldn't bother?), but any precise aesthetic choices are purely slapdash. I don't want to put time ordering colours or selecting the right font size only to have to tear it away because I decide a method is too limiting. Prettying up comes last.

Out of curiousity, I slapped that image in and no immediate solution appeared. Using left to offset the image just leaves a void in its wake and all the text hovering around the hole, like the image has leapt over a moment before the site was rendered and caught the text off guard. Maybe I won't do this, because it seems situationally useful anyway. In my head, the image would get a coloured border to match the theme of the page, and sit offset so hopefully relevant text is "hugging" the image, perhaps with a caption attached to the border if so desired. Trouble is, width is rarely a limiting factor for images - height is usually what stops something from being comfortable on desktop. These 16:9 screenshots are limited because otherwise you've just got a screen full of screen, and if you want to look closer, you can open in a new tab in full screen.

Oh-and the gradient.

I like gradients. I think with a nicely chosen background image, it'll look okay, which with my sense of taste is about the best you can ever hope for. The blue is one of the default colours on this css gradient tool because I can never remember the formatting, but even if I did I would've just typed in the first colour that came to mind from CSS' presets because using bold and ugly highly contrasting colours that you don't care about is a good way to make progress in the experimental phase. That segment at the bottom uses an ellipse radial-gradient, and another row in the foundational grid to contain it. The gradient sits in the top left corner of that cell, stretches out the same width as the sidebar gradient above it, and then I can control the height by adjusting the row height.

My one reservation about this is that the background should probably get a blur, as it does on siteV1, to take the edge off it while you're reading. But since I want to be able to scroll to the bottom to view the background in whatever unblurred glory it deserves, that'll probably require a jarring stepchange in blur without any logical way to transition it (like a border across the bottom of the screen to separate blurred from unblurred). That is, unless I did something really stupid with layering rows of different blur intensities (which might not even work), or there's a way to apply a gradient to the blur. Oh sweet, there is!

Time Has Passed

Since I wrote that section above.

And this hacky prototype is the result. I've been using the hideous repeating logo background to test this, with a random jarring combo of colours, which might be playing into my mild feelings about it, but still, it's not fantastic. Fun fact: the background-colour variable in CSS can't take gradients, that's got to be a background image. Similarly, the gradient borders at the bottom of the screen have to be done using border-image like so:

border-left: 2px solid;
border-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0)) 1;

Which is a weird quirk.

Speaking of weird quirks.

The background blur, which then transitions into a totally clear background, required a surprising amount of work. The <div> that applies the blur is set to be positioned in absolute terms on the page, at 0 0, encompasses nothing, and is forced to match the width and height of the page.

The element that holds stuff you want to look at needs the variable isolation: isolate; or else the transparent part of the mask applies over everything on the page.

There's good news. I'm onto something. Putting it onto the page for my story Kit and the Syclone, the transition isn't jarring to me, which is usually a good sign. It seems to work better on larger images without repeating patterns, as the Xzibit page background also doesn't look particularly great. Motivation to stop being lazy with these backgrounds, at the very least...

Code

I'm undecided if I'm going to share site code in full for future dev logs. Right now it's manageable, and might be useful to have an absolute timeline of how this progresses. At the same time, with the way I write these slower than I code, it's a little bit inconvenient to have to draw a line in the sand where there's zero development because I need to demonstrate what I've done. But then, learning how to cope with those situations is why I'm doing this.

<body style="margin:0px; background-image: url( {{ background }} ); background-attachment: fixed; color:white;">
    <div class="top-collector">
      <div class="blur-test"></div>
      <div class="content-collector">
        <div class="content">
{{ content | safe }} <!-- this is where everything in a markdown file gets inserted into a template -->
</div>
<div class="bottom-filler"></div> <!-- gradient at the bottom of the screen -->
<div class="sidebar">
<!-- sidebar content goes here -->

</div>

<div class="sidebar-test"></div> <!-- corner gradient -->
</div>
</div>
</body>

.top-collector{/* sets the page height */
  display: grid;  
  grid-template-rows: 100% calc(100vh + 32px);  
  position: relative; /* Blur effect fails without this */
}
.content-collector{
display: grid;
grid-row: 1 / 2;
grid-template-columns: 1fr 968px 1fr;
grid-template-rows: minmax(calc(100vh), min-content) 32px;
isolation: isolate; /* escapes anything within this div from the blur mask. */
}
.content{ /* sits within the content-collector item and holds pretty much everything customisable /
grid-column: 2 / 3;
grid-row: 1;
margin:0px;
padding-left:8px; / padding forces the border to the edge but leaves space for the text./
padding-right:8px;
border-left: 2px solid;
font-family: 'Atkinson Hyperlegible Next-Private'; / -Private suffix so font won't display by searching for my PC's installed fonts */
background-color: rgba(165, 42, 42, 0.5);
}
.bottom-filler{/* Literally just for a bottom gradient */
grid-row: 2;
grid-column: 2;
height: 100%;
background-image: linear-gradient(rgba(165, 42, 42, 0.5), rgba(0,0,0,0));
border-left: 2px solid;
border-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0)) 1;
}
.sidebar{
grid-column: 3;
grid-row:1;
border-left: 2px solid;
padding-left: 8px;
width: 128px; /* Hacky temp solution /
background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,0) 128px); / strangely, setting the gradient end to 100% gives different behaviour */
}
.sidebar-test{
background: radial-gradient(ellipse 128px 100% at top left, rgba(34,193,195,1), rgba(253,187,45,0) 128px);
grid-column: 3;
grid-row: 2;
border-left: 2px solid;
border-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0)) 1;
padding-left: 8px;
}
.blur-test{/* One of those features that outputs as I want it to, but I can't really explain why this combo works. /
position: absolute;
width: 100%;
height: 100%;
grid-row: 1 / 2;
mask: linear-gradient(black calc(100% - 100vh - 32px), transparent calc(100% - 100vh)); / -32px is to account for section of grid containing gradient */
backdrop-filter: blur(16px);
}

Next on the Agenda

My head is thinking something like this.

That scale is massively oversized. But at the very least, I need some elements at the top of the page to make some distance between search bar and content. Starting with main content words at the top of the screen doesn't feel good.

Less Explainy More Plany:

Short Term:

• Get pictures to display how I imagine. Because this is a restructure, I want to do this first before any other visual noise comes in.
• Setup a top of the page header stuff
• Get sidebar portion sorted. Buttons should just drop straight in using exisitng code.

Long Term:

• Backgrounds with some form of aesthetic or attention to them. Might use streetview or maps of interesting places? Unsure.
• Colours, font sizes, padding/margins for content, dressing up lists and details tags, etc.
• Start to consider the rules for mobile, what screen size to break the sidebar into a header and footer, when to limit the height of the site to no longer display the background.