diff --git a/eleventy.config.js b/eleventy.config.js index 41a52dc..3cb5c6b 100644 --- a/eleventy.config.js +++ b/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', @@ -21,23 +19,37 @@ const IMAGE_TRANSFORM_OPTS = { } }; -const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref.sebin-nyshkim.net' : 'http://localhost:8080'; +const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref-beta.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'], diff --git a/src/components/head/page-head-meta.webc b/src/components/head/page-head-meta.webc index f682883..b3a6861 100644 --- a/src/components/head/page-head-meta.webc +++ b/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`; + + @@ -24,13 +31,13 @@ - - - - + + + + - + diff --git a/src/components/head/page-head-style.webc b/src/components/head/page-head-style.webc index 8742b9e..33f1870 100644 --- a/src/components/head/page-head-style.webc +++ b/src/components/head/page-head-style.webc @@ -29,7 +29,21 @@ font-family: var(--font-family-headings); } - ::selection { + a:not([class]) { + color: inherit; + text-decoration: underline; + text-underline-offset: 0.1875em; + text-decoration-thickness: 0.125em; + text-decoration-skip-ink: all; + text-decoration-color: var(--clr-link-underline); + transition: color 0.2s ease; + } + + a:not([class]):hover { + color: var(--clr-link); + } + + :where(.sebin, .viktor, .jarek) ::selection { color: var(--clr-selection-text); background-color: var(--clr-selection); } diff --git a/src/components/timeline.webc b/src/components/job.webc similarity index 79% rename from src/components/timeline.webc rename to src/components/job.webc index 9f00e04..48caa70 100644 --- a/src/components/timeline.webc +++ b/src/components/job.webc @@ -1,19 +1,19 @@ - +
+
+

+

+ +

+
- diff --git a/src/components/profile.webc b/src/components/profile.webc index ef6aeab..cc3e84a 100644 --- a/src/components/profile.webc +++ b/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); diff --git a/src/img/avatar.png b/src/img/avatar.png new file mode 100644 index 0000000..f7a23bd Binary files /dev/null and b/src/img/avatar.png differ diff --git a/src/layouts/character.webc b/src/layouts/character.webc index 8a2d7db..5be8bd5 100644 --- a/src/layouts/character.webc +++ b/src/layouts/character.webc @@ -3,9 +3,7 @@ layout: base.webc --- - +