fix: ✏️ run spellcheck

Separate functions would work almost identical, so might as well merge into single function and generalize it

eleventy.config.js

@@ -7,13 +7,11 @@ import markdownIt from 'markdown-it';
 
 const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
 const IMAGE_TRANSFORM_OPTS = {
-  // Set global default options
   formats: ['avif', 'webp', 'auto'],
   sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
   sharpPngOptions: { compressionLevel: 9 },
   urlPath: '/img/',
-  // Notably `outputDir` is resolved automatically
-  // to the project output directory
+  outputDir: './public/img/',
   defaultAttributes: {
     loading: 'lazy',
     decoding: 'async',
@@ -24,20 +22,34 @@ const IMAGE_TRANSFORM_OPTS = {
 const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref.sebin-nyshkim.net' : 'http://localhost:8080';
 
 // source: https://notes.jays.net/blog/11ty/
-async function getOgImage(src, key) {
-  const stats = await Image(src, {
-    width: [1200],
-    formats: ['webp'],
-    urlPath: '/img/',
-    outputDir: './public/img/',
-    filenameFormat: (hash, src, width, format) => `${hash}-${width}.${format}`
-  });
+async function getImage(type, src, key) {
+  let widths, formats;
 
-  if (key === 'url') {
-    return BASE + stats.webp[0][key];
+  switch (type) {
+    case 'og':
+      widths = [1200];
+      formats = ['webp'];
+      break;
+    case 'favicon':
+      widths = [200];
+      formats = ['png'];
+      break;
   }
 
-  return stats.webp[0][key];
+  const opts = {
+    ...IMAGE_TRANSFORM_OPTS,
+    widths,
+    formats
+  };
+
+  const stats = await Image(src, opts);
+  const [format] = formats;
+
+  if (key === 'url') {
+    return BASE + stats[format][0][key];
+  }
+
+  return stats[format][0][key];
 }
 
 export default async function (eleventyConfig) {
@@ -72,7 +84,7 @@ export default async function (eleventyConfig) {
     return content;
   });
 
-  eleventyConfig.addFilter('getOgImage', getOgImage);
+  eleventyConfig.addFilter('getImage', getImage);
 
   eleventyConfig.addPlugin(eleventyPluginWebc, {
     components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc'],

src/components/head/page-head-meta.webc

@@ -7,11 +7,18 @@
     return 'Choose Your Character!';
   };
 
-  const getImageUrl = (char) => (char ? `src/img/${char.toLowerCase()}/og.png` : 'src/img/og.png');
+  const getImageUrl = (char, type = 'og') =>
+    char ? `src/img/${char.toLowerCase()}/${type}.png` : `src/img/${type}.png`;
 </script>
 
 <title @text="getTitle($data.fullName)"></title>
 
+<link
+  rel="shortcut icon"
+  :href="getImage('favicon', getImageUrl($data.firstName, 'avatar'), 'url')"
+  :type="getImage('favicon', getImageUrl($data.firstName, 'avatar'), 'sourceType')"
+/>
+
 <meta webc:if="$data.description" name="description" :content="$data.description" />
 <meta name="generator" :content="$data.eleventy.generator" />
 
@@ -24,13 +31,13 @@
 <meta property="og:description" :content="$data.description" />
 <meta property="og:locale" :content="$data.language" />
 
-<meta property="og:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />
-<meta property="og:image:type" :content="getOgImage(getImageUrl($data.firstName), 'sourceType')" />
-<meta property="og:image:width" :content="getOgImage(getImageUrl($data.firstName), 'width')" />
-<meta property="og:image:height" :content="getOgImage(getImageUrl($data.firstName), 'height')" />
+<meta property="og:image" :content="getImage('og', getImageUrl($data.firstName), 'url')" />
+<meta property="og:image:type" :content="getImage('og', getImageUrl($data.firstName), 'sourceType')" />
+<meta property="og:image:width" :content="getImage('og', getImageUrl($data.firstName), 'width')" />
+<meta property="og:image:height" :content="getImage('og', getImageUrl($data.firstName), 'height')" />
 
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:url" :content="$data.base + $data.page.url" />
 <meta name="twitter:title" :content="getTitle($data.fullName)" />
 <meta name="twitter:description" :content="$data.description" />
-<meta name="twitter:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />
+<meta name="twitter:image" :content="getImage('og', getImageUrl($data.firstName), 'url')" />

src/components/head/page-head-style.webc

@@ -43,7 +43,7 @@
     color: var(--clr-link);
   }
 
-  ::selection {
+  :where(.sebin, .viktor, .jarek) ::selection {
     color: var(--clr-selection-text);
     background-color: var(--clr-selection);
   }

src/components/job.webc

@@ -1,19 +1,19 @@
-<ul webc:root="override">
-  <li class="job" webc:for="job of jobs">
-    <div class="icon"><icon :@icon="job.icon"></icon></div>
-    <p class="title" @text="job.title"></p>
-    <p class="text" @text="job.desc"></p>
-  </li>
-</ul>
+<section webc:root="override">
+  <div class="icon"><icon :@icon="icon"></icon></div>
+  <p class="title" @text="title"></p>
+  <p class="text" webc:type="11ty" @11ty:type="md" webc:keep>
+    <slot></slot>
+  </p>
+</section>
 
-<style webc:scoped="timeline">
+<style webc:scoped="job">
   :host {
     --timeline-circle-size: 3rem;
     --timeline-circle-background: var(--clr-box-background);
     --timeline-stroke-color: var(--clr-timeline-stroke);
     --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
 
-    margin-block: 1em;
+    margin: 0;
     padding: 0;
 
     @media (min-width: 32em) {
@@ -21,7 +21,7 @@
     }
   }
 
-  :host .job {
+  :host {
     display: grid;
     grid-template-areas:
       'icon title'
@@ -29,7 +29,7 @@
     column-gap: 1em;
   }
 
-  :host .job::before {
+  :host::before {
     content: '';
 
     grid-row: icon / line;
@@ -42,18 +42,18 @@
     background-color: var(--timeline-stroke-color);
   }
 
-  :host .job:first-child::before {
+  :host:first-of-type::before {
     align-self: end;
     height: calc(100% - var(--timeline-circle-size));
   }
 
-  :host .job:last-child::before {
+  :host:last-of-type::before {
     grid-row: icon;
     align-self: start;
     height: 50%;
   }
 
-  :host .job > .icon {
+  :host > .icon {
     grid-area: icon;
     align-self: center;
 

src/components/page-content.webc

@@ -6,6 +6,8 @@
 
 <style webc:scoped="page-content">
   :host {
+    grid-area: content;
+
     width: 100%;
     max-width: 65ch;
 

src/components/profile.webc

@@ -23,6 +23,8 @@
     position: var(--sidebar-position);
     top: var(--page-spacing);
 
+    grid-area: info;
+
     display: grid;
     grid-template-columns: var(--sidebar-grid-columns);
     grid-template-areas: var(--sidebar-grid-areas);

src/layouts/character.webc

@@ -80,14 +80,6 @@ layout: base.webc
     hyphens: auto;
   }
 
-  aside {
-    grid-area: info;
-  }
-
-  section {
-    grid-area: content;
-  }
-
   footer {
     --columns: 1fr;
 

src/sebin/abilities.md

@@ -8,18 +8,18 @@ As a fire dragon, Sebin possesses a myriad of abilities that he can unleash upon
 
 ## Attacks
 
-<ability :@src="`attack-fire-breath.png`" name="Fire Breath">
+<ability :@src="`attack-fire-breath.png`" @name="Fire Breath">
   The signature move of any fire dragon. Special glands in his mouth together with a deep, deliberate breath to enrich his lungs create a combustible cocktail. The resulting jet of fire upon exhaling is a torrent of several hundred degrees Celsius, scorching everything in its wake.
 </ability>
 
-<ability :@src="`attack-flame-toss.png`" name="Flame Toss">
+<ability :@src="`attack-flame-toss.png`" @name="Flame Toss">
   When there isn't a direct line of sight between Sebin and his opponent, he can spit fire into his hands and shape it into a throwable projectile. His scales are naturally fireproof, allowing him to withstand the intense heat without flinching. Even if he misses his target, the resulting blast upon impact is enough to cause considerable damage alone—especially when he combines two projectiles to increase the explosion radius.
 </ability>
 
-<ability :@src="`attack-kindled-fist.png`" name="Kindled Fist">
+<ability :@src="`attack-kindled-fist.png`" @name="Kindled Fist">
   Sebin's fists become instruments of destruction when he engulfs them in his flames. Targeted blows are capable of inflicting agonizing burns on his opponents. He can also release controlled blasts of fire from his fists, unleashing smoldering waves of heat to scorch and disorient his foes.
 </ability>
 
-<ability :@src="`attack-burning-twister.png`" name="Burning Twister">
+<ability :@src="`attack-burning-twister.png`" @name="Burning Twister">
   This aerial attack is a masterpiece of Sebin's pyromancy skills. By engulfing himself in flames while spinning at breakneck speeds in mid-air, he creates a whirling vortex of fire that can singe even the most elusive opponents. Those who dare to face him in the skies will soon find themselves caught in the maelstrom of his most fearsome attack.
 </ability>

src/sebin/overdrive.md

@@ -24,34 +24,34 @@ Direct body contact with Sebin during overdrive causes 3rd degree burns as he em
 
 ## Attacks
 
-<ability name="Fire Breath (improved)">
+<ability @name="Fire Breath (improved)">
   The reach of Sebin's Fire Breath increases as well as the frequency at which he can fire shots from his mouth.
 </ability>
 
-<ability name="Flame Toss (improved)">
-  Overdrive Form eliminates the need for Sebin to spit fire into his palms. It instead enables him to fire the shots directly from the palm palm of his hands, as the firey veins crossing his arms act as an orifice to do so. The explosion radius of the burning projectiles that explode on impact is greatly increased.
+<ability @name="Flame Toss (improved)">
+  Overdrive Form eliminates the need for Sebin to spit fire into his palms. It instead enables him to fire the shots directly from the palm palm of his hands, as the fiery veins crossing his arms act as an orifice to do so. The explosion radius of the burning projectiles that explode on impact is greatly increased.
 </ability>
 
-<ability name="Kindled Fist (improved)">
+<ability @name="Kindled Fist (improved)">
   As his arms and legs are infused with fire his punches and kicks exert trails of flames while doing so. Landing a punch or kick sears enemies.
 </ability>
 
-<ability name="Searing Discus">
+<ability @name="Searing Discus">
   Overdrive allows Sebin to form rings of fire by igniting flames from his fingertips and swirling them in a circle motion. He can use them for both close quarters or ranged combat.
 </ability>
 
-<ability name="Combustion Flare">
-  Clinking both of his wrists against each other like flints unleashes a devestating fire blast from both of his fire-infused hands. A secure foothold is needed to prevent Sebin from being thrown back by the recoil of the attack. Using this technique in the air is therefore highly risky.
+<ability @name="Combustion Flare">
+  Clinking both of his wrists against each other like flints unleashes a devastating fire blast from both of his fire-infused hands. A secure foothold is needed to prevent Sebin from being thrown back by the recoil of the attack. Using this technique in the air is therefore highly risky.
 </ability>
 
-<ability name="Blazing Pandemonium">
+<ability @name="Blazing Pandemonium">
   A heavy impact into the ground from a great height with both fists, tearing deep cracks in the ground around the impact crater. Combined with Kindled Fist the heat in Sebin's arms are forced through the newly created furrows, transforming the scene into an inferno.
 </ability>
 
-<ability name="Scorching Edge">
-  A fiery blade towering several meters into the air that Sebin sends careening towards his enemies from his fire-infused legs with a backflip kick, leaving a swath of destruction in its wake. Upon impact the force of the attack is distributed sideways.
+<ability @name="Scorching Edge">
+  A fiery blade towering several meters into the air that Sebin sends careening towards his enemies from his fire-infused legs with a back-flip kick, leaving a swath of destruction in its wake. Upon impact the force of the attack is distributed sideways.
 </ability>
 
-<ability name="Circling Fire Shield">
+<ability @name="Circling Fire Shield">
   A rather defensive technique. By spinning around with stretched out arms Sebin creates fire balls, which he usually hurls towards enemies, that circle around his body diagonally. They act as a shield while he can still move his arms relatively freely. Enemies would be well advised to keep their distance to this spinning shield, as the fire balls will still explode on contact.
 </ability>

src/viktor/career.md

@@ -4,7 +4,26 @@ eleventyNavigation:
   order: 3
 ---
 
-Viktor's had many different jobs in the past, some of which where very formative, other's just
-paid the bills.
+Viktor has taken on a variety of jobs in his life. He's not particularly picky about the type of work, but he's anything but a 9to5 paper pusher. He vastly prefers manual labor that keeps his hands busy. Some of his past jobs have been more formative than others, allowing him to develop skills that have served him well even outside of work. Others were more focused solely on simply putting food on the table.
 
-<timeline :@jobs="jobs"></timeline>
+<job @title="Bartender" @icon="fa6-solid:whiskey-glass">
+  Viktor worked his first job as a bartender, helping out his uncle at the local pub. Initially he served drinks from the tap behind the counter and cleaning dishes. A pivotal moment during his time there came when someone who had a few too many drinks climbed over the counter and threatened him with a broken bottle. In a do-or-die moment, Viktor reacted on instinct, flung the cudgel at the end of his tail and landed a decisive blow to knock them down. This harrowing experience hardened him up and landed him a double role as the bar's bouncer. He garnered a reputation as the guy you don't mess around with, lest you left with less teeth than you came with.
+</job>
+<job @title="Lumberjack" @icon="fa6-solid:tree">
+  After leaving his hometown, Viktor embarked on a new career as a lumberjack, where his unique physiology proved to be a valuable asset. The club at the tip of his tail served as a counterweight for each swing of his axe, enabling him to land precise and powerful strikes. His body's naturally tough scales also protected him from flying splinters, while the hard physical work helped to toughen his physique over time. Viktor enjoyed to take breaks in the forest's peaceful solitude before hauling the cut logs to the sawmill. He grew to enjoy the seclusion of the rural life the work brought with it, but over time he realized he missed the connectedness a city or suburb provided. This ultimately led him to seek out new ventures.
+</job>
+<job @title="Car Mechanic" @icon="fa6-solid:car">
+  Moving to a suburban town, Viktor landed a job at an auto repair shop, where he learned the ins and outs of fixing cars. He quickly became adept at breathing new life into broken-down vehicles and he enjoyed it thoroughly. However, as time went on, the shop faced significant challenges, including a dwindling supply of spare parts. Automobile manufacturers started to only distribute these parts to certified repair partners—which was a costly and time-consuming process. As the financial struggles mounted, Viktor witnessed the business gradually deteriorate. He saw skilled coworkers get laid off as the shop's revenue declined, until it ultimately had to close down for good.
+</job>
+<job @title="Construction Worker" @icon="fa6-solid:helmet-safety">
+  Realizing he quite enjoyed physically demanding work, Viktor went on to work at construction sites, where his unique skills were put to good use. With his hard hat firmly in place and belt tool at the ready, he was always prepared to lend a hand–or tail, if walls or boulders needed a good teardown. Given that previous ventures honed his body thoroughly, Viktor was often tasked with heavy lifting, clearing sites, and hauling building materials. The highlight of his day was the daily get-together with coworkers after work. One of those nights he got a little reckless, however: when Viktor and a coworker stepped out and didn't come back for quite a while, both were caught in the act of fooling around with each other on the construction site. After that, coworkers kept their distance to Viktor, and evenings spent together became increasingly brief once Viktor joined them. As ostracism continued to mount, Viktor realized it was time to explore new opportunities.
+</job>
+<job @title="Welder" @icon="fa6-solid:industry">
+  Viktor proved to have a hand as a welder and spent his days working shifts in a workshop, where he utilized his unique combination of tools and techniques to create precise, high-quality work. His powerful tail club proved particularly useful for shaping metal parts, while gaining knowledge on how to work with various alloys. However, a jealous coworker saw a rival in Viktor and began to sabotage his work, secretly tampering with the equipment or undermining his techniques. After enough jobs Viktor worked on were botched and him not able to give any explanation, he was ultimately let go after a customer sued the welding shop for damages—an event that still weighs heavily on him.
+</job>
+<job @title="Delivery Driver" @icon="fa6-solid:truck">
+  When Viktor was strapped for cash, he found himself turning to the gig economy, working as a delivery driver for a major online delivery service. It wasn't the most challenging work, but at least he had no significant trouble hauling hauling heavy packages to their destinations. If only the supervisors hadn't been constantly breathing down his neck, he might've even kept the job for longer. But after one of the shift managers tried to show him up in front of the whole team, Viktor finally snapped and shattered one of the manager's kneecaps with the club on the tip of his tail. Of course, he didn't have to report for duty the next day, or ever for that matter.
+</job>
+<job @title="Docks Werehouse Worker" @icon="fa6-solid:boxes-stacked">
+  Currently, Viktor works at the docks in the port town where he relocated. Among his responsibilities is the loading and unloading of cargo to and from ships via forklift and other transport vehicles. He's also responsible for checking that cargo arrived intact and consumables didn't spoil on the way. The hustle and bustle of the port sometimes gets on his nerves, but he manages. At least until the crew members from docking ships arrive ashore after extended periods at sea and start strutting around all high and mighty. Viktor finds himself butting heads with them a lot due to their tendency to look down on "landlubbers" and his low tolerance for their bullshit. Over time, however, he established his status somewhat and the crew members dialed back their attitude around him.
+</job>

src/viktor/viktor.11tydata.json

@@ -1,41 +1,4 @@
 {
   "layout": "character.webc",
-  "language": "en_US",
-  "jobs": [
-    {
-      "title": "Bartender",
-      "icon": "fa6-solid:whiskey-glass",
-      "desc": "Viktor's professional career began as a bartender at a pub in his hometown. There he often doubled as a bouncer when a few guests got too drunk and started making a fuss. A defining moment of that job was when someone climbed over the counter and threatened him with a broken bottle. Wrestled to the ground and with a broken bottle in front of his face, he had to make a split-second decision. With a powerful swing of his tail bone, he knocked the attacker down. This experience taught him the importance of effectively defending himself against unpleasant fellows and to eliminate threats before they get close to him ever again."
-    },
-    {
-      "title": "Lumberjack",
-      "icon": "fa6-solid:tree",
-      "desc": "After leaving his hometown, Viktor started working as a lumberjack. The club at the end of his tail came very much in handy as a counterweight for each swing of his axe, allowing him to strike efficiently and powerfully, felling even the largest trees with relative ease. His naturally tough scales protected him from splinters from the felled wood. The long-lasting hard physical work toughened his body over the years. Before taking the cut logs to the sawmill, Viktor always took a break to rest in the peace and quiet of the forest. Although he enjoyed the seclusion of the country life for a while, he was longing for the sociability of city life again."
-    },
-    {
-      "title": "Car Mechanic",
-      "icon": "fa6-solid:car",
-      "desc": "Moving into a suburban town, Viktor applied at an auto repair shop, where he learned the ins and outs of fixing cars. He became really good at it and enjoyed breathing new mechanical life into broken down vehicles. However, as time went on, the repair shop faced financial troubles, as it became increasingly difficult to come by spare parts as auto makers would only deal them to certified repair partners and certifications were prohibitively expensive. Viktor had to watch business slowly deteriorate, as skilled coworkers kept getting laid off, until the repair shop closed down for good."
-    },
-    {
-      "title": "Construction Worker",
-      "icon": "fa6-solid:helmet-safety",
-      "desc": "Having taken a liking in physically demanding work, Viktor took on a job as a construction worker. Hard hat perched atop his head and belt tool slung around his waist, he was always ready to lend a hand (or tail if walls or boulders needed a good teardown). Since he had more than enough strength training from his previous jobs, he was often assigned carrying jobs to clear the site and haul building materials. After work was done, Viktor enjoyed the company of his colleagues over an after-work beer until late in the evenings. On one of these evenings, he got a little reckless with a colleague under the veil of the night and both were caught in the act of fooling around with each other on the construction site. In the following weeks, the colleagues kept their distance from Viktor and the evenings together also dissolved very quickly when he joined them. The continued ostracization ultimately prompted him to look for something new."
-    },
-    {
-      "title": "Welder",
-      "icon": "fa6-solid:industry",
-      "desc": "In his job as a welder, Viktor spent his days working shifts in a workshop. In addition to special tools and plasma welders, he also used his powerful tail club to hammer metal parts into shape. He acquired a wide variety of welding techniques to join or repair metal structures. He worked with a wide variety of alloys such as steel, aluminum and titanium. Viktor showed extreme skill in his work with great precision and attention to detail. However, this dedication was a thorn in the side of a jealous colleague who saw Viktor as a rival and schemed against him, sabotaging his work, which ultimately ended in his termination after a customer sued the welding shop for botching the job. Viktor never found out who the culprit was, and the loss of that job still hangs over him."
-    },
-    {
-      "title": "Delivery Driver",
-      "icon": "fa6-solid:truck",
-      "desc": "When Viktor was strapped for cash, he took on a job in the gig economy as a driver delivering packages for a large online delivery service. His previous physically demanding jobs allowed him to haul even bulky deliveries to their destination with relative ease. If the shipping center managers hadn't been breathing down his neck constantly, he might have held this job even longer. But after one of the managers tried to show him up in front of the whole team, he snapped and broke their leg with his tail club. Of course, he didn't have to report for duty the next day."
-    },
-    {
-      "title": "Docks Werehouse Worker",
-      "icon": "fa6-solid:boxes-stacked",
-      "desc": "Currently Viktor works at the docks in the port town he moved to. His main responsibilities include loading and unloading cargo from ships and transporting it to and from warehousing. The hustle and bustle of the port sometimes gets on his nerves. Especially when the crew of docking ships come ashore again after a long time and make it clear that they don't have much contact with \"landlubbers\". Viktor doesn't get particularly impressed by this and foul mouths them right back if he gets the impression they're looking for trouble."
-    }
-  ]
+  "language": "en_US"
 }