build: 🔧 use externally hosted image service
Build time increases exponentially with more images pulled in by the eleventy-image plugin. This keeps build times low and shifts computational load to an external image hosting service.
This commit is contained in:
Sebin Nyshkim
parent
d87c0cbbb8
commit
21cb51f612
19 changed files with 43 additions and 39 deletions
|
|
@ -22,9 +22,24 @@ import markdownItDeflist from 'markdown-it-deflist';
|
|||
import markdownItFootnote from 'markdown-it-footnote';
|
||||
import markdownItImageFigures from 'markdown-it-image-figures';
|
||||
|
||||
const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
|
||||
Image.concurrency = 4;
|
||||
|
||||
const urlFormat = ({ src, width, format }) => {
|
||||
const baseUrl = `https://img.sebin-nyshkim.net/i`;
|
||||
const imgUuid = src.match(/\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/);
|
||||
const imgFormat = format === 'jpeg' ? 'jpg' : format;
|
||||
|
||||
return `${baseUrl}/${imgUuid[1]}.${imgFormat}?width=${width}`;
|
||||
};
|
||||
|
||||
const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
|
||||
const ELEVENTY_IMAGE_DEFAULTS = {
|
||||
formats: ['webp', 'auto'],
|
||||
urlPath: '/img/',
|
||||
outputDir: './public/img/',
|
||||
urlFormat
|
||||
};
|
||||
|
||||
export default async function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy('./src/css/prism.css');
|
||||
eleventyConfig.addWatchTarget('./src/css/');
|
||||
|
|
@ -32,9 +47,6 @@ export default async function (eleventyConfig) {
|
|||
eleventyConfig.addPassthroughCopy('./src/fonts/');
|
||||
eleventyConfig.addWatchTarget('./src/fonts/');
|
||||
|
||||
eleventyConfig.addPassthroughCopy('./src/img/sebin.png');
|
||||
eleventyConfig.addWatchTarget('./src/img/sebin.png');
|
||||
|
||||
eleventyConfig.addCollection('posts', (collection) =>
|
||||
process.env.ELEVENTY_PRODUCTION
|
||||
? collection.getFilteredByGlob('./src/posts/*.md')
|
||||
|
|
@ -90,13 +102,9 @@ export default async function (eleventyConfig) {
|
|||
}
|
||||
});
|
||||
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
|
||||
...ELEVENTY_IMAGE_DEFAULTS,
|
||||
extensions: 'html',
|
||||
formats: ['avif', 'webp', 'auto'],
|
||||
widths: [640, 800, 1280, 1920, 2560, 3840, 'auto'],
|
||||
sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
|
||||
sharpPngOptions: { compressionLevel: 9 },
|
||||
urlPath: '/img/',
|
||||
outputDir: './public/img/',
|
||||
defaultAttributes: {
|
||||
loading: 'lazy',
|
||||
decoding: 'async',
|
||||
|
|
@ -138,12 +146,8 @@ export default async function (eleventyConfig) {
|
|||
eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
|
||||
eleventyConfig.addShortcode('bgimgset', async (src) => {
|
||||
const imgset = await Image(src, {
|
||||
widths: [1920, 2560, 3840],
|
||||
sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
|
||||
sharpPngOptions: { compressionLevel: 9 },
|
||||
formats: ['avif', 'webp', 'auto'],
|
||||
urlPath: '/img/',
|
||||
outputDir: './public/img/'
|
||||
...ELEVENTY_IMAGE_DEFAULTS,
|
||||
widths: [1920, 2560, 3840]
|
||||
});
|
||||
|
||||
const getSets = ({ url, sourceType }, i) => `url(${url}) type('${sourceType}') ${i + 1}x`;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ permalink: /404.html
|
|||
|
||||
# Here be no dragons
|
||||
|
||||
|
||||
|
||||
|
||||
The page you were looking for does not exist!
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ eleventyNavigation:
|
|||
|
||||
# {{ title }}
|
||||
|
||||
|
||||
|
||||
|
||||
| Key | Value |
|
||||
| --------- | ----------------- |
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
"author": {
|
||||
"name": "Sebin Nyshkim",
|
||||
"href": "https://blog.sebin-nyshkim.net",
|
||||
"image": "https://cdn.sebin-nyshkim.net/-o3c3fVEgEx"
|
||||
"image": "https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454"
|
||||
},
|
||||
"twitter": {
|
||||
"cardType": "summary_large_image",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 752 KiB |
|
|
@ -7,7 +7,7 @@ eleventyNavigation:
|
|||
|
||||
# Rawr there! 👋🏻
|
||||
|
||||
|
||||
|
||||
|
||||
Welcome to my little corner of the internet! This is where I pour out my thoughts whenever I have them :3
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
twitter_card_type = twitter.cardType,
|
||||
name = author.name,
|
||||
generator = eleventy.generator,
|
||||
preconnect = ['https://cdn.sebin-nyshkim.net'],
|
||||
dns_prefetch = ['https://cdn.sebin-nyshkim.net'],
|
||||
preconnect = ['https://img.sebin-nyshkim.net'],
|
||||
dns_prefetch = ['https://img.sebin-nyshkim.net'],
|
||||
css = ['/fonts/tilt-warp/tilt-warp.css',
|
||||
'/fonts/encode-sans/encode-sans.css',
|
||||
'/fonts/m-plus-1-code/m-plus-1-code.css',
|
||||
|
|
@ -28,14 +28,14 @@
|
|||
<meta name="fediverse:creator" content="{{ mastodon.fediverseCreator }}" />
|
||||
{% endif %}
|
||||
<link rel="alternate" href="/feed.xml" title="Sebin's Blog" type="application/atom+xml">
|
||||
<link rel="shortcut icon" href="/img/sebin.png" type="image/png">
|
||||
<link rel="shortcut icon" href="https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454.png" type="image/png">
|
||||
<link rel="me" href="https://meow.social/@SebinNyshkim">
|
||||
</head>
|
||||
<body class="bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
||||
<header class="absolute z-10 left-0 right-0 top-0 sm:px-safe-offset-4 md:px-safe-offset-6">
|
||||
<div class="flex min-h-16 max-w-(--breakpoint-xl) items-center justify-center bg-sky-600 shadow-xl sm:m-4 sm:mx-auto sm:justify-between sm:rounded-xl dark:bg-sky-950">
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<img src="/img/sebin.png" alt="" class="m-4 max-w-12 rounded-full border-4 border-white shadow-2xl lg:m-5 lg:max-w-14">
|
||||
<img src="https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454" alt="" class="m-4 max-w-12 rounded-full border-4 border-white shadow-2xl lg:m-5 lg:max-w-14">
|
||||
<h1 class="text-2xl text-white lg:text-3xl">Sebin's Blog</h1>
|
||||
</div>
|
||||
<nav class="eleventy-navigation" aria-label="Main">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Building a Blog with Eleventy (blind, any%)
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-QMvyHZfXru
|
||||
src: https://img.sebin-nyshkim.net/i/3163c7b0-4657-40bb-b08a-462a06d1fdd5
|
||||
alt: Close-up of SVG code on a computer screen
|
||||
credit: Photo by Paico Oficial on Unsplash
|
||||
width: 1200
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Responsive, Self-hosted Images for Your Eleventy Blog
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-iTHSLFBdpY
|
||||
src: https://img.sebin-nyshkim.net/i/f33879d8-3f98-4c8e-a1b3-08edf6f174ac
|
||||
alt: Close-up of SVG code on a computer screen
|
||||
credit: Photo by Florian Olivo on Unsplash
|
||||
width: 1200
|
||||
|
|
@ -57,7 +57,7 @@ The PicoShare `README.md` doesn't use volumes in its compose file example, but i
|
|||
|
||||
So after a quick `docker compose up -d` PicoShare should be up and running in no time and visiting `http://localhost:4001` should give your its greeting page.
|
||||
|
||||
|
||||
|
||||
|
||||
From there you can log in with the passphrase you set in the `docker-compose.yml` and start uploading some files. By default, PicoShare sets an expiration period of 30 days on every upload. If you plan on using it for blog post images, that's probably not what you want, so you may want to disable that in the settings.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Apple has no idea what to do with the iPad
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-rtKd7CgZ6g
|
||||
src: https://img.sebin-nyshkim.net/i/e634e666-bdd0-4694-bd59-929ada1cd30a
|
||||
alt: iOS face with swirly eyes emoji surrounded by a word cloud of Apple marketing jargon on red background with jagged lines
|
||||
credit: Made with GIMP
|
||||
width: 1200
|
||||
|
|
@ -130,7 +130,7 @@ Apple remains the undisputed leader of the tablet market with the iPad. They don
|
|||
|
||||
But I don't think that's why they're doing it. As mentioned in the beginning, the iPad mini has been equipped with an A17 Pro, the same chip as in the iPhone 15 Pro. If you've been keeping up with news in the IT space lately, you've probably noticed a very specific trend getting mentioned quite often: "AI"
|
||||
|
||||
|
||||
|
||||
|
||||
Apple has been very hesitant to jump on this bandwagon, but in the end, they are also following Silicon Valley's Hail Mary moment and calling it "Apple Intelligence". The fact is that "AI" calculations are very computationally intensive and require special compute units (NPUs) in processors to be able to come up with results in a reasonable amount of time without draining the battery.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Open Graph Metadata and Images in Eleventy Made Easy
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-asGarKBdVZ
|
||||
src: https://img.sebin-nyshkim.net/i/28d944cf-3630-4db8-bc4e-469769c83d00
|
||||
alt: The Open Graph protocol logo sourrounded by the logos of Twitter, Mastodon, Telegram, Discord and the Fediverse
|
||||
credit: Made with GIMP, logos © their respective owners
|
||||
width: 1200
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Screw the Bird
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-6V4ELaxuR6
|
||||
src: https://img.sebin-nyshkim.net/i/b884ca38-6d3c-4ecc-940c-a4137fa79cba
|
||||
alt: Person throwing the blue Twitter logo into a trash can
|
||||
credit: Made with GIMP
|
||||
width: 1200
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Why Bluesky is running circles around Mastodon
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-ot2jxWCtxH
|
||||
src: https://img.sebin-nyshkim.net/i/4cc7b20e-6a50-4674-af98-2db254c7737e
|
||||
alt: An upset Mastodon logo next to a group of people talking, with one person jumping out from the group with a Bluesky logo on its head giving the Mastodon logo a big, indifferent thumbs up
|
||||
credit: Made with GIMP
|
||||
width: 1200
|
||||
|
|
@ -109,7 +109,7 @@ It's not that people love corporate social media so much. It is highly likely th
|
|||
|
||||
The barrier to entry for Mastodon is high, nobody they know is there and if you stay long enough the vibe is extremely off.
|
||||
|
||||
|
||||
|
||||
|
||||
The way anything remotely corporate is not only frowned upon, but actively despised. The way users of other platforms are constantly ridiculed and made the target of spite begs the question if the average user base on Mastodon has the emotional intelligence and self-awareness of a sponge[^mastodig]. I hate what the internet has become under the corporate leadership of pump & dump scheme Silicon Valley as much as the next guy, but to imply that people are "too brainwashed" to make a "better informed" decision so it gives the invested Mastodon user a reason to pout to make them feel better makes them look like an immature child that didn't get the birthday present it wanted. But point that out to the larger group and be expected to be tarred and feathered by an angry mob because you dared question the sanctity of Mastodon's noble principles.
|
||||
|
||||
|
|
@ -137,7 +137,7 @@ I need both of these parties to understand something very basic: Given the choic
|
|||
|
||||
You won't sell people on merits that aren't important in their day to day.
|
||||
|
||||
|
||||
|
||||
|
||||
For the same reason we've still not arrived at end-to-end encryption being a standard in our daily communication, Mastodon is not the standard for social media. It offers a worse experience without offering a clear and concise reason how that is better than the thing that serves people's means of self-actualization right now.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: How I stopped worrying and ended up using Linux instead
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-bCnLXhZpYp
|
||||
src: https://img.sebin-nyshkim.net/i/b9fd20eb-e4c5-4f76-ae8a-b57773c3acc9
|
||||
alt: Photo of a penguin flapping its wings
|
||||
credit: Photo by Sander Crombach on Unsplash
|
||||
width: 1200
|
||||
|
|
@ -50,7 +50,7 @@ After a few days of running [Linux Mint](https://linuxmint.com) on my machine, i
|
|||
I thought I was going crazy. How could a change in OS be the solution to this seemingly unsolvable mess?! But it was and it allowed me to use my machine again. That was all that really mattered to me and so I started to adapt to my new situation.
|
||||
|
||||
+++ Side Note
|
||||
|
||||
|
||||
|
||||
The first time I tried getting into Linux was during my teens in secondary school, starting with SuSE Linux 9.0 around 2004, included on a CD in a magazine with an installation guide. I was fascinated about the little things open source software did differently from what I was used to, e.g. tabs in the file manager, installing any software in a centralized software center, customizing the look and feel by just downloading files from the internet, copy them somewhere and BOOM new theme! I even held presentations in school showcasing how similar Linux and Windows were in terms of day to day use-cases, like listening to music, watching videos, writing documents and surfing the web.
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ I tried other Linux distributions as well, like Debian and eventually Ubuntu. Th
|
|||
I even played games on Linux back then, like Doom 3 and Neverwinter Nights (these actually had official Linux versions readily available). But the majority of games I played were exclusive to Windows and unworkable with the version of Wine that was available at the time. So I was missing a reason to stay on Linux for longer because for most of the things I did with a computer, I still needed to boot back into Windows. Alas.
|
||||
+++
|
||||
|
||||
|
||||
|
||||
|
||||
I was still very "Windows pilled", in that I avoided doing things via the terminal like the plague. Luckily, Linux Mint being very beginner focused allowed me to avoid it for most stuff. I only updated core system packages with `apt`, the rest of my apps I took from somewhere else as a `*.deb` package or I went to the software store app that came with Linux Mint.
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ Lucky for me, I noticed a certain distribution climb the ranks on [distrowatch.c
|
|||
|
||||
I looked further into it and learned it was *Arch-based*. I've never heard of any distro being based on anything else other than Debian or Ubuntu. It presented itself as both bleeding edge and user friendly and I was gonna give it a shot, if that meant I would also get to do more tinkering.
|
||||
|
||||
|
||||
|
||||
|
||||
And for the most part, I pretty much got what I expected. I was able to enjoy very recent software, on a rolling release basis, without the frills of having to manage everything myself. Also, I learned of a neat little thing called the [AUR](https://aur.archlinux.org/), with tons of more great software that was just waiting for me to install it. I was very excited of the possibilities! Also, Manjaro being a rolling-release disto, just like Arch, meant I did not have to deal with major distribution release cycles, receiving updates to the latest versions when they become available. I was always up to date, as long as I just kept installing periodic system updates. What a concept!
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Mario Kart World costing $80 is not the issue
|
||||
image:
|
||||
src: https://cdn.sebin-nyshkim.net/-uKSq8Wscus
|
||||
src: https://img.sebin-nyshkim.net/i/273d250e-177c-4054-a20b-f9f3e83bb7b2
|
||||
alt: Mario Kart World Key Art
|
||||
credit: © Nintendo
|
||||
width: 1200
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
"author": {
|
||||
"name": "Sebin Nyshkim",
|
||||
"href": "https://blog.sebin-nyshkim.net",
|
||||
"image": "https://cdn.sebin-nyshkim.net/-o3c3fVEgEx"
|
||||
"image": "https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454"
|
||||
},
|
||||
"twitter": {
|
||||
"cardType": "summary_large_image"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue