Hello 11ty

• 16 April 2023
• intro,
• update,
• furry,
• programming,
• 11ty,
• jekyll

Goodbye Jekyll, Hello 11ty.

The cute 11ty Possum.

I essentially spent the last week learning 11ty and finished upgrading my blog faster than I thought. I grabbed the eleventy-base-blog as the blog base and went from there. Customizing the theme went faster than I thought it would have. I've apparently improved my CSS writing these last few years. I'm probably going to tinker with the site headers and footers a bit more but overall I'm liking the new design. There's even a tags page!

Foxis: This is fun to customize!

Thoughts #

I'm really liking 11ty so far. I'm able to keep my blog pages permalinked to what they were before which is really nice. The RSS feed generation is really easy and relative page links get generated properly for it compared to what I had to do for Jekyll. I can probably spend another week to a month plus tinkering with it as yet another side project.

Now that tagging works, I'm going back and tagging previous articles with things like games and thoughts.

Other Customizations #

The RSS feed was moved from /feed/feed.xml to just /feed.xml.

Added a footer with social media links.

Added project pages.

Blog Excerpts #

I added blog experts that show up on the post list pages like the homepage or archive.

eleventy.config.js

eleventyConfig.setFrontMatterParsingOptions({
    excerpt: true,
    // Optional, default is "---"
    excerpt_separator: "<!-- more -->",
    excerpt_alias: 'feed_excerpt' //for the list excerpt
});

	// for except rendering on the list page
eleventyConfig.addNunjucksFilter("feedEncode", function(value) {
    return value ? md.render(value) : '';
});

postlist.njk

...
<div class="postlist-excerpt">
    {{ post.data.feed_excerpt | feedEncode | safe }}
</div>

The Post

Goodbye Jekyll, Hello 11ty.

<!-- more -->

Character Lorem Ipsum Testing #

Here are some test character dialog boxes using lorem ipsum. The CSS itself wasn't too difficult. The short code customization ended up like this.

eleventy.config.js

eleventyConfig.addShortcode("character", function charShortCode(
    characterImageUrl, 
    charName, 
    text) {
    return `
    <div class="character-box">
        <img src="${characterImageUrl}" alt="${charName}" class="image-character" >
        <p class="character-text" >
            ${charName}: ${text}
        </p>
    </div>
`;
	});

Foxis: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate condimentum magna, ac iaculis justo elementum id. Nullam tortor purus, efficitur vitae magna eu, congue efficitur ligula. Suspendisse sem nisi, sodales vel orci vel, tempus ornare erat. Nam at felis condimentum, cursus mi eu, tincidunt ligula. Nunc vitae condimentum ipsum, a aliquet erat. Integer eu eleifend purus, non pulvinar metus. Nullam sagittis cursus elit vel commodo.

Foxis: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet sit amet diam ut pharetra. Vivamus vehicula dui at lorem elementum aliquam. Cras pharetra est sed dui elementum, ac auctor purus maximus. Donec molestie leo non maximus mollis. Morbi ornare tincidunt purus scelerisque pellentesque. Nulla facilisi. Pellentesque fringilla sapien quis mi facilisis tristique. Donec vestibulum dignissim dui vehicula finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras imperdiet augue eget diam aliquet interdum.

There was already a small issue with the dark theme dialog box. I've never used CSS variables before, so it's learning experience.

Dark theme character box issues pointed out by Soatak and Volpeon.

Final Thoughts #

Foxis: This is fun to test. The background color is currently Blanched Almond.

I'm hoping to have another blog post out in the next week or so. I did enjoy writing this!

• Previous: Furry Blogging and Identity
• Next: Character Emotes Testing