feat: 🎉 initial commit

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+public
+.DS_Store
+.cache

eleventy.config.js

@@ -0,0 +1,116 @@
+import fs from 'node:fs';
+import { env } from 'node:process';
+import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';
+import { feedPlugin } from '@11ty/eleventy-plugin-rss';
+import { IdAttributePlugin } from '@11ty/eleventy';
+import eleventyPluginCiu from '@alexcarpenter/eleventy-plugin-caniuse';
+import eleventyPluginEmbedEverything from 'eleventy-plugin-embed-everything';
+import eleventyPluginLucideIcons from '@grimlink/eleventy-plugin-lucide-icons';
+import eleventyPluginMetagen from 'eleventy-plugin-metagen';
+import eleventyPluginNavigation from '@11ty/eleventy-navigation';
+import eleventyPluginOgImage from 'eleventy-plugin-og-image';
+import eleventyPluginReadingTime from '@myxotod/eleventy-plugin-readingtime';
+import eleventyPluginRobotsTxt from 'eleventy-plugin-robotstxt';
+import eleventyPluginSitemap from '@quasibit/eleventy-plugin-sitemap';
+import eleventyPluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
+import markdownItAbbr from 'markdown-it-abbr';
+import markdownItCallouts from 'markdown-it-obsidian-callouts';
+import markdownItCollapsible from 'markdown-it-collapsible';
+import markdownItFootnote from 'markdown-it-footnote';
+
+export default async function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy('./src/css/prism.css');
+  eleventyConfig.addWatchTarget('./src/css/');
+
+  eleventyConfig.addPassthroughCopy('./src/fonts/');
+  eleventyConfig.addWatchTarget('./src/fonts/');
+
+  // eleventyConfig.addPassthroughCopy('./src/img/');
+  // eleventyConfig.addWatchTarget('./src/img/');
+
+  eleventyConfig.addCollection('posts', (collection) => {
+    return collection.getFilteredByGlob('./src/posts/*.md');
+  });
+
+  eleventyConfig.addPlugin(IdAttributePlugin);
+  eleventyConfig.addPlugin(eleventyPluginCiu);
+  eleventyConfig.addPlugin(eleventyPluginEmbedEverything);
+  eleventyConfig.addPlugin(eleventyPluginLucideIcons);
+  eleventyConfig.addPlugin(eleventyPluginMetagen);
+  eleventyConfig.addPlugin(eleventyPluginNavigation);
+  eleventyConfig.addPlugin(eleventyPluginReadingTime);
+  eleventyConfig.addPlugin(eleventyPluginRobotsTxt, {});
+  eleventyConfig.addPlugin(eleventyPluginSyntaxHighlight);
+  eleventyConfig.addPlugin(eleventyPluginOgImage, {
+    shortcodeOutput: async (ogImage) => {
+      const host = env.ELEVENTY_PRODUCTION ? 'https://blog.sebin-nyshkim.net' : 'http://localhost:8080';
+      const src = await ogImage.outputUrl();
+      return `<meta property="og:image" content="${host + src}">
+      <meta name="twitter:image" content="${host + src}">`;
+    },
+    satoriOptions: {
+      fonts: [
+        {
+          name: 'Tilt Warp',
+          data: fs.readFileSync('./src/fonts/tilt-warp/tilt-warp.ttf'),
+          weight: 400,
+          style: 'normal'
+        }
+      ]
+    }
+  });
+  eleventyConfig.addPlugin(eleventyPluginSitemap, {
+    sitemap: {
+      hostname: 'https://blog.sebin-nyshkim.net'
+    }
+  });
+  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+    extensions: 'html',
+    formats: ['avif', 'webp', 'auto'],
+    sizes: ['1280', '720', '480', 'auto'],
+    defaultAttributes: {
+      loading: 'lazy',
+      decoding: 'async'
+    }
+  });
+  eleventyConfig.addPlugin(feedPlugin, {
+    type: 'atom', // or "rss", "json"
+    outputPath: '/feed.xml',
+    collection: {
+      name: 'posts', // iterate over `collections.posts`
+      limit: 0 // 0 means no limit
+    },
+    metadata: {
+      language: 'en',
+      title: "Sebin's Blog",
+      subtitle: 'Writing about stuff I have vague interests in and commenting on stuff I read.',
+      base: 'https://blog.sebin-nyshkim.net/',
+      author: {
+        name: 'Sebin Nyshkim',
+        email: '' // Optional
+      }
+    }
+  });
+
+  eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItAbbr));
+  eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCollapsible));
+  eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCallouts));
+  eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItFootnote));
+
+  eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
+
+  eleventyConfig.addFilter('isoDate', (dateObj) => dateObj.toISOString());
+  eleventyConfig.addFilter('longDate', (dateObj) => dateObj.toString());
+  eleventyConfig.addFilter('readableDate', (dateObj) =>
+    dateObj.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+  );
+
+  return {
+    dir: {
+      input: 'src',
+      output: 'public',
+      layouts: 'layouts',
+      includes: 'includes'
+    }
+  };
+}

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "sebin-blog",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "eleventy --serve & npx tailwindcss -i ./src/css/style.css -o ./public/css/style.css --watch",
+    "build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./src/css/style.css -o ./public/css/style.css --minify"
+  },
+  "keywords": [],
+  "author": {
+    "name": "Sebin Nyshkim",
+    "email": "sebin.nyshkim@icloud.com",
+    "url": "https://sebin-nyshkim.net"
+  },
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-img": "^5.0.0",
+    "@11ty/eleventy-navigation": "^0.3.5",
+    "@11ty/eleventy-plugin-rss": "^2.0.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "@alexcarpenter/eleventy-plugin-caniuse": "^0.1.0",
+    "@grimlink/eleventy-plugin-lucide-icons": "^2.0.7",
+    "@myxotod/eleventy-plugin-readingtime": "^2.0.0",
+    "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
+    "@tailwindcss/typography": "^0.5.15",
+    "eleventy-google-fonts": "^0.1.0",
+    "eleventy-plugin-embed-everything": "^1.19.0",
+    "eleventy-plugin-metagen": "^1.8.3",
+    "eleventy-plugin-og-image": "^4.0.0",
+    "eleventy-plugin-robotstxt": "^1.0.0",
+    "markdown-it-abbr": "^2.0.0",
+    "markdown-it-collapsible": "^2.0.2",
+    "markdown-it-footnote": "^4.0.0",
+    "markdown-it-obsidian-callouts": "^0.3.0",
+    "tailwindcss": "^3.4.13",
+    "tailwindcss-safe-area": "^0.6.0"
+  }
+}

src/about.md

@@ -0,0 +1,81 @@
+---
+title: About me
+layout: page.njk
+eleventyNavigation:
+  key: about
+  order: 2
+---
+
+# {{ title }}
+
+![Sebin does a think](/img/sebin-sticker-think.png)
+
+|           |                   |
+| --------- | ----------------- |
+| Name      | Sebin             |
+| Age       | 36                |
+| Pronouns  | he/him            |
+| Languages | 🇩🇪 (1st) 🇬🇧 (2nd) |
+
+I'm a dude from the south of Germany pretending to be a dragon online.
+
+I'm a web developer at heart and love to make pretty and sleek websites (as you might have noticed). I started profesionally coding right around the time HTML5 took off and kept at it ever since. You can take a look at some of my personal projects over on my [main home page]. Besides that I also love FOSS and use Arch Linux (btw) as my daily driver! Whenever I can I try to get involved and contribute translations to various tools and apps.
+
+My code repos[^1]:
+
+- [GitHub]
+- [GitLab]
+
+I've been running Linux for the better part of the last 10 years, going from Linux Mint, to Manjaro and eventually pure Arch. It gave me a whole new appreciation for how computers work and being able to fully control my general computing experience (the privacy benefits are cool, too).
+
+When I'm not doing development work, I'm getting my hands dirty in self-hosting. Services I'm running include:
+
+- [Navidrome] (music streaming)
+- [Jellyfin] (movies & TV shows)
+- [Bookstack] (knowledge base)
+- [Owncast] (live streaming)
+- [Wallabag] (read-it-later pile of shame)
+- [Nextcloud] (cloud storage & collaboration)
+- [Immich] (Google Photos without the Google parts)
+
+As for the pretending to be a dragon online thing: Yes, I'm one of those furries. Been one for the past 20 years. Also hella gay 🏳️‍🌈
+
+I love video games since I can remember. My first console was the NES and it captivated my interest almost immediately. If I had to call my homebase, it'd be the SNES. Lots of good memories made with that one (lots of RPGs, like [Secret of Mana], [Secret of Evermore], [Illusion of Gaia], [Terranigma], [Chrono Trigger], [The Legend of Zelda: A Link to the Past]). But I'm no stranger to some absolute classics on other platforms like PlayStation and PC. I've played a fair amount of FFXIV.
+
+Video games also shaped a lot of my music tastes. I'm listening to tons of video game soundtracks, so I'm pretty flexible in terms of genres (rock, ambient, alternative, techno, city pop, classical, funk, trip hop, downtempo, synthwave, dark synth, chiptune, to name a few). Some of my favorite artists include: [Nobuo Uematsu], [Masayoshi Soken], [Yoko Shimomura], [Yasunori Mitsuda], [Toby Fox], [The Midnight], [+TEK], [Dominic Ninmark].
+
+[main home page]: https://sebin-nyshkim.net
+
+[GitHub]: https://github.com/SebinNyshkim 
+[GitLab]: https://gitlab.com/SebinNyshkim
+
+[Navidrome]: https://www.navidrome.org/
+[Jellyfin]: https://jellyfin.org/
+[Bookstack]: https://www.bookstackapp.com/
+[Owncast]: https://owncast.online/
+[Wallabag]: https://wallabag.org/
+[Nextcloud]: https://nextcloud.com/
+[Immich]: https://immich.app/
+
+[Secret of Mana]: https://www.igdb.com/games/secret-of-mana
+[Secret of Evermore]: https://www.igdb.com/games/secret-of-evermore
+[Illusion of Gaia]: https://www.igdb.com/games/illusion-of-gaia
+[Terranigma]: https://www.igdb.com/games/terranigma
+[Chrono Trigger]: https://www.igdb.com/games/chrono-trigger
+[The Legend of Zelda: A Link to the Past]: https://www.igdb.com/games/the-legend-of-zelda-a-link-to-the-past
+
+[Nobuo Uematsu]: https://en.wikipedia.org/wiki/Nobuo_Uematsu
+[Masayoshi Soken]: https://en.wikipedia.org/wiki/Masayoshi_Soken
+[Yoko Shimomura]: https://en.wikipedia.org/wiki/Yoko_Shimomura
+[Yasunori Mitsuda]: https://en.wikipedia.org/wiki/Yasunori_Mitsuda
+[Toby Fox]: https://tobyfox.bandcamp.com/music
+[The Midnight]: https://themidnight.bandcamp.com/music
+[+TEK]: https://soundcloud.com/plrusek-chan
+[Dominic Ninmark]: https://www.youtube.com/c/DominicNinmark
+
+*[FOSS]: Free & Open Source Software
+*[NES]: Nintendo Entertainment System
+*[SNES]: Super NES
+*[FFXIV]: Final Fantasy XIV
+
+[^1]: In case you're wondering: most of my repos are personal projects, just for me, and don't need to be developed out in the openIn case you're wonderin

src/contact.md

@@ -0,0 +1,28 @@
+---
+title: Contact
+layout: page.njk
+eleventyNavigation:
+  key: contact
+  order: 4
+---
+
+# {{ title }}
+
+I can be found all over the Internet!
+
+| Network      | Handle                      |
+| ------------ | --------------------------- |
+| Mastodon     | [@SebinNyshkim@meow.social] |
+| Bluesky      | [@sebin-nyshkim.net]        |
+| Twitter      | [@SebinNyshkim]             |
+| Fur Affinity | [sonofdragons]              |
+
+If you prefer a more direct line to me, there's [Telegram], [Discord] and [Signal].
+
+[@SebinNyshkim@meow.social]: https://meow.social/@SebinNyshkim
+[@sebin-nyshkim.net]: https://bsky.app/profile/sebin-nyshkim.net
+[@SebinNyshkim]: https://twitter.com/SebinNyshkim
+[sonofdragons]: https://www.furaffinity.net/user/sonofdragons
+[Telegram]: https://t.me/SebinNyshkim
+[Discord]: https://discordapp.com/users/227753049530040321
+[Signal]: https://signal.me/#eu/JW3dQILWtKeCLkbKfPfly6UlvMHjOouX2UG_2ziPMsjDWk50hx5B4L12P9JPmS_8

src/css/modules/buttons.css

@@ -0,0 +1,3 @@
+.read-more-button {
+  @apply inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 text-lg font-bold text-white no-underline hover:bg-sky-700;
+}

src/css/modules/callouts.css

@@ -0,0 +1,81 @@
+.callout {
+  @apply rounded-lg border-s-8 border-gray-700 bg-gray-200 p-4 text-gray-700 dark:border-gray-200 dark:bg-gray-900 dark:text-gray-200;
+
+  margin: 1.25em 0;
+
+  @media (min-width: 768px) {
+    margin: 1.3333333em 0;
+  }
+
+  @media (min-width: 1024px) {
+    margin: 1.2em 0;
+  }
+}
+
+.callout a {
+  color: inherit;
+}
+
+.callout-title {
+  @apply flex items-center font-bold;
+}
+
+.callout-title-icon {
+  @apply shrink-0 grow-0 basis-9;
+}
+
+.callout-content {
+  @apply ms-9;
+}
+
+.callout[data-callout='abstract'] {
+  @apply border-fuchsia-700 bg-fuchsia-200 text-fuchsia-700 dark:border-fuchsia-200 dark:bg-fuchsia-900 dark:text-fuchsia-200;
+}
+
+.callout[data-callout='bug'] {
+  @apply border-rose-700 bg-rose-200 text-rose-700 dark:border-rose-200 dark:bg-rose-900 dark:text-rose-200;
+}
+
+.callout[data-callout='danger'] {
+  @apply border-amber-700 bg-amber-200 text-amber-700 dark:border-amber-200 dark:bg-amber-900 dark:text-amber-200;
+}
+
+.callout[data-callout='example'] {
+  @apply border-stone-700 bg-stone-200 text-stone-700 dark:border-stone-200 dark:bg-stone-900 dark:text-stone-200;
+}
+
+.callout[data-callout='failure'] {
+  @apply border-red-700 bg-red-200 text-red-700 dark:border-red-200 dark:bg-red-900 dark:text-red-200;
+}
+
+.callout[data-callout='info'] {
+  @apply border-sky-700 bg-sky-200 text-sky-700 dark:border-sky-200 dark:bg-sky-900 dark:text-sky-200;
+}
+
+.callout[data-callout='note'] {
+  @apply border-cyan-700 bg-cyan-200 text-cyan-700 dark:border-cyan-200 dark:bg-cyan-900 dark:text-cyan-200;
+}
+
+.callout[data-callout='question'] {
+  @apply border-blue-700 bg-blue-200 text-blue-700 dark:border-blue-200 dark:bg-blue-900 dark:text-blue-200;
+}
+
+.callout[data-callout='quote'] {
+  @apply border-zinc-700 bg-zinc-200 text-zinc-700 dark:border-zinc-200 dark:bg-zinc-900 dark:text-zinc-200;
+}
+
+.callout[data-callout='success'] {
+  @apply border-emerald-700 bg-emerald-200 text-emerald-700 dark:border-emerald-200 dark:bg-emerald-900 dark:text-emerald-200;
+}
+
+.callout[data-callout='tip'] {
+  @apply border-indigo-700 bg-indigo-200 text-indigo-700 dark:border-indigo-200 dark:bg-indigo-900 dark:text-indigo-200;
+}
+
+.callout[data-callout='todo'] {
+  @apply border-lime-700 bg-lime-200 text-lime-700 dark:border-lime-200 dark:bg-lime-900 dark:text-lime-200;
+}
+
+.callout[data-callout='warning'] {
+  @apply border-amber-700 bg-amber-200 text-amber-700 dark:border-amber-200 dark:bg-amber-900 dark:text-amber-200;
+}

src/css/modules/details.css

@@ -0,0 +1,11 @@
+details {
+  @apply rounded-lg border border-solid border-sky-500 text-sky-500;
+}
+
+details[open] summary {
+  @apply rounded-none rounded-t-lg;
+}
+
+summary {
+  @apply rounded-lg bg-sky-200 p-4;
+}

src/css/modules/navigation.css

@@ -0,0 +1,11 @@
+.eleventy-navigation .nav-list {
+  @apply mx-3 flex gap-2 md:mx-6 md:gap-3;
+}
+
+.eleventy-navigation .nav-link {
+  @apply rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800;
+}
+
+.eleventy-navigation a.active {
+  @apply bg-sky-900 shadow-lg dark:bg-sky-800;
+}

src/css/modules/pagination.css

@@ -0,0 +1,20 @@
+.pagination {
+  @apply flex justify-center gap-2;
+}
+
+.pagination a,
+.pagination span {
+  @apply flex size-10 items-center justify-center rounded-full;
+}
+
+.pagination [aria-current] {
+  @apply text-slate-300 bg-sky-600 dark:bg-slate-700;
+}
+
+.pagination a {
+  @apply bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700;
+}
+
+.pagination span {
+  @apply cursor-not-allowed bg-slate-400 text-slate-300  dark:bg-slate-950 dark:text-slate-700;
+}

src/css/modules/postmeta.css

@@ -0,0 +1,15 @@
+.postmeta {
+  @apply flex flex-wrap items-center gap-4;
+}
+
+.postmeta > * {
+  @apply inline-flex items-center gap-1;
+}
+
+.postmeta a {
+  @apply hover:text-sky-400;
+}
+
+.postmeta svg {
+  @apply stroke-sky-600 dark:stroke-sky-600;
+}

src/css/modules/tags.css

@@ -0,0 +1,7 @@
+.tags {
+  @apply flex gap-1;
+}
+
+.tags .tag {
+  @apply inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500;
+}

src/css/prism.css

@@ -0,0 +1,284 @@
+pre[class*='language-'] {
+  --padding-y: var(--am-prism-padding-y, 1rem);
+  --padding-x: var(--am-prism-padding-x, 1rem);
+  padding: var(--padding-y) var(--padding-x);
+  overflow: auto;
+  font-size: var(--am-prism-font-size, 0.85em);
+  border-radius: var(--am-prism-border-radius, 0.4em);
+}
+pre > code[class*='language-'] {
+  --am-prism-font-family: 'M PLUS 1 Code';
+  padding: initial;
+  font-size: 1em;
+  font-weight: 400;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-family: var(--am-prism-font-family, ui-monospace), monospace;
+  line-height: var(--am-prism-line-height, 1.5);
+  background-color: initial;
+}
+code[class*='language-'],
+pre[class*='language-'] {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*='language-'] .line-numbers-rows {
+  box-sizing: content-box;
+  margin: calc(var(--padding-y) * -1) 0;
+  padding: var(--padding-y) 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+.line-numbers.line-numbers .line-numbers-rows {
+  border-right-width: var(--am-prism-border-width, 1px);
+  border-right-color: var(--am-prism-border-color);
+}
+.line-numbers .line-numbers-rows > span:before {
+  color: var(--am-prism-line-numbers-color);
+}
+div.code-toolbar > .toolbar {
+  top: 0.3rem !important;
+  right: 0.3rem !important;
+}
+div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button {
+  display: inline-flex;
+  padding: 0 0.75em;
+  font-size: var(--am-prism-font-size, 0.8em);
+  font-family: var(--am-prism-font-family, ui-monospace), monospace;
+  font-weight: 600 !important;
+  line-height: 2.25em;
+  color: var(--am-prism-copy-color);
+  background-color: var(--am-prism-copy-bg);
+  border-radius: calc(var(--am-prism-border-radius, 0.4em) - 0.1em);
+  cursor: pointer;
+  box-shadow: none;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button:hover {
+  opacity: 0.8;
+}
+div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button:focus {
+  opacity: 1;
+}
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #24292f;
+}
+code[class*='language-']::selection,
+pre[class*='language-']::selection {
+  text-shadow: none;
+  background: #9fc6e9;
+}
+pre[class*='language-'] {
+  background: #f6f8fa;
+}
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  color: #24292f;
+  background: #eff1f3;
+}
+pre[data-line] {
+  position: relative;
+}
+pre[class*='language-'] > code[class*='language-'] {
+  position: relative;
+  z-index: 1;
+}
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+  background: #fff8c5;
+  box-shadow: inset 5px 0 0 #eed888;
+  z-index: 0;
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #6e7781;
+}
+.token.punctuation {
+  color: #24292f;
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+  color: #0550ae;
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: #0a3069;
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+  color: #0550ae;
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #cf222e;
+}
+.token.function {
+  color: #8250df;
+}
+.token.important,
+.token.regex,
+.token.variable {
+  color: #0a3069;
+}
+.token.bold,
+.token.important {
+  font-weight: 700;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+:root {
+  --am-prism-line-numbers-color: #6e778177;
+  --am-prism-border-color: #6e778122;
+  --am-prism-copy-color: #24292faa;
+  --am-prism-copy-bg: #6e778122;
+}
+
+@media (prefers-color-scheme: dark) {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: #c9d1d9;
+  }
+  code[class*='language-']::selection,
+  pre[class*='language-']::selection {
+    text-shadow: none;
+    background: #234879;
+  }
+  pre[class*='language-'] {
+    background: #161b22;
+  }
+  :not(pre) > code[class*='language-'] {
+    padding: 0.1em 0.3em;
+    border-radius: 0.3em;
+    color: #c9d1d9;
+    background: #343942;
+  }
+  pre[data-line] {
+    position: relative;
+  }
+  pre[class*='language-'] > code[class*='language-'] {
+    position: relative;
+    z-index: 1;
+  }
+  .line-highlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    padding: inherit 0;
+    margin-top: 1em;
+    background: #2f2a1e;
+    box-shadow: inset 5px 0 0 #674c16;
+    z-index: 0;
+    pointer-events: none;
+    line-height: inherit;
+    white-space: pre;
+  }
+  .namespace {
+    opacity: 0.7;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #8b949e;
+  }
+  .token.punctuation,
+  .token.variable {
+    color: #c9d1d9;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.deleted,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #79c0ff;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #a5d6ff;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url {
+    color: #a5d6ff;
+    background: #161b22;
+  }
+  .token.atrule,
+  .token.keyword {
+    color: #a5d6ff;
+  }
+  .token.attr-value,
+  .token.function {
+    color: #d2a8ff;
+  }
+  .token.class-name,
+  .token.important,
+  .token.regex {
+    color: #a8daff;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  :root {
+    --am-prism-line-numbers-color: #8b949e55;
+    --am-prism-border-color: #8b949e22;
+    --am-prism-copy-color: #c9d1d9;
+    --am-prism-copy-bg: #8b949e22;
+  }
+}

src/css/style.css

@@ -0,0 +1,57 @@
+@import url(modules/buttons.css);
+@import url(modules/callouts.css);
+@import url(modules/details.css);
+@import url(modules/navigation.css);
+@import url(modules/pagination.css);
+@import url(modules/postmeta.css);
+@import url(modules/tags.css);
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: 'Encode Sans', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Tilt Warp', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings: 'XROT' 0, 'YROT' 0;
+}
+
+a {
+  @apply transition-colors duration-300;
+}
+
+.blogpost {
+  @apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-a:text-sky-600 prose-a:transition-colors prose-a:duration-300 hover:prose-a:text-sky-400 prose-strong:text-inherit prose-li:marker:!text-inherit prose-img:rounded-3xl;
+}
+
+abbr {
+  text-decoration: none;
+
+  &::after {
+    content: ' (' attr(title) ')';
+  }
+}
+
+@media (hover: hover) {
+  abbr {
+    text-decoration: underline dotted;
+
+    &::after {
+      content: '';
+    }
+  }
+}

src/fonts/encode-sans/encode-sans.css

@@ -0,0 +1,9 @@
+/* encode-sans-condensed-thin */
+@font-face {
+  font-family: 'Encode Sans';
+  font-style: normal;
+  font-weight: 75% 125%;
+  font-stretch: 100%;
+  src: url(encode-sans.woff2) format('woff2');
+  font-display: swap;
+}

src/fonts/m-plus-1-code/m-plus-1-code.css

@@ -0,0 +1,9 @@
+/* m-plus-1-code */
+@font-face {
+  font-family: 'M PLUS 1 Code';
+  font-style: normal;
+  font-weight: 100 700;
+  font-stretch: 100%;
+  src: url(m-plus-1-code.woff2) format('woff2');
+  font-display: swap;
+}

src/fonts/tilt-warp/tilt-warp.css

@@ -0,0 +1,9 @@
+/* tilt-warp */
+@font-face {
+  font-family: 'Tilt Warp';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(tilt-warp.woff2) format('woff2');
+  font-display: swap;
+}

src/index.md

@@ -0,0 +1,18 @@
+---
+title: Home
+layout: page.njk
+eleventyNavigation:
+  key: home
+---
+
+# Rawr there! 👋🏻
+
+![Sebin says hello](/img/sebin-sticker-hello.png)
+
+This is where I pour out my thoughts whenever I have them :3
+
+Don't expect too frequent posts, though, as I tend to lack inspiration for long form, in-depth content. That's only when obsession strikes x)
+
+I'll probably rather link a few articles that have inspired me and made me think, and maybe add a few supplementary comments.
+
+So if that's kind of your thing, I'd be happy to have you around! Subscribe to the RSS feed in your favorite feed reader app to get my ramblings delivered hot off the press!

src/layouts/base.njk

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% metagen
+        title=title + ' - Sebin\'s Blog',
+        desc=description,
+        url=url + page.url,
+        twitter_card_type=twitter.cardType,
+        twitter_handle=twitter.account,
+        name=author.name,
+        generator='eleventy'
+    %}
+    {% ogImage "og-image.og.njk", { title: title } %}
+    <link rel="alternate" href="/feed.xml" type="application/atom+xml">
+    <link rel="stylesheet" href="{{ '/fonts/tilt-warp/tilt-warp.css' | url }}">
+    <link rel="stylesheet" href="{{ '/fonts/encode-sans/encode-sans.css' | url }}">
+    <link rel="stylesheet" href="{{ '/fonts/m-plus-1-code/m-plus-1-code.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/prism.css' | url }}">
+    <link rel="me" href="https://meow.social/@SebinNyshkim">
+  </head>
+  <body class="h-dvh bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
+    <header>
+      <div class="mx-auto max-w-screen-xl sm:px-safe-offset-4 md:px-safe-offset-6">
+        <nav class="eleventy-navigation flex min-h-16 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">
+          <img src="/img/sebin.png" alt="it me" class="m-4 hidden max-w-14 rounded-full border-4 text-center shadow-2xl sm:block">
+          {{
+            collections.all |
+            eleventyNavigation |
+            eleventyNavigationToHtml({
+              listClass: "nav-list",
+              anchorClass: "nav-link",
+              activeAnchorClass: "active",
+              activeKey: eleventyNavigation.key
+            }) |
+            safe
+          }}
+        </nav>
+      </div>
+    </header>
+
+    <main class="mb-20 space-y-10 pt-10 *:px-safe-offset-4 sm:mb-32 sm:pt-16 md:mb-40 md:pt-20">
+      {{ content | safe }}
+    </main>
+
+    <footer class="pb-16">
+      <div class="mx-auto max-w-screen-xl divide-y divide-slate-400 px-safe-offset-4 md:px-safe-offset-6 dark:divide-slate-600">
+        <div class="flex flex-wrap gap-6 md:flex-nowrap md:gap-0"></div>
+        <div class="mt-16 flex justify-between gap-4 pt-10">
+          <div>
+            <p>&copy; {% year %} Sebin Nyshkim</p>
+            <p>Content licensed under
+              <a class="text-sky-600 transition-colors duration-300 hover:text-sky-400" href="https://creativecommons.org/licenses/by-sa/4.0/">
+                CC BY-SA 4.0
+              </a>
+            </p>
+          </div>
+          <div class="text-right">
+            <p>Made with
+              <a class="text-sky-600 transition-colors duration-300 hover:text-sky-400" href="https://11ty.dev">11ty</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>

src/layouts/page.njk

@@ -0,0 +1,7 @@
+---
+layout: base.njk
+---
+
+<section class="blogpost">
+  {{ content | safe }}
+</section>

src/layouts/post.njk

@@ -0,0 +1,41 @@
+---
+layout: base.njk
+---
+
+<article class="blogpost">
+  <h1 class="text-4xl">{{ title }}</h1>
+  <aside class="not-prose space-y-4 text-base">
+    <ul class="postmeta">
+      <li>
+        {% lucide "calendar", {"size": "20"} %}
+        <time datetime="{{ page.date | isoDate }}" title="{{ page.date | longDate }}">
+          {{ page.date | readableDate }}
+        </time>
+      </li>
+      <li>
+        {% lucide "user", {"size": "20"} %}
+        <a href="{{ author.href }}">{{ author.name }}</a>
+      </li>
+      <li>
+        {% lucide "glasses", {"size": "20"} %}
+        {{ content | readingtime }}
+      </li>
+    </ul>
+    {% if tags.length > 0 %}
+      <ul class="tags">
+        {% for tag in tags %}
+          <li class="tag">
+            {% lucide "tag", {"size": "20"} %}
+            {{ tag }}
+          </li>
+        {%- endfor %}
+      </ul>
+    {% endif %}
+  </aside>
+
+  {% if image and image.src != '' %}
+    <img src="{{ image.src }}" alt="{{ image.alt }}">
+  {% endif %}
+
+  {{ content | safe }}
+</article>

src/layouts/postlist.njk

@@ -0,0 +1,58 @@
+---
+layout: base.njk
+---
+
+<section class="blogpost">
+  <h1>{{ title }}</h1>
+
+  <p>Everything I have written, from newest to oldest.</p>
+</section>
+
+{{ content | safe }}
+
+{% if pagination.pages.length > 1 %}
+  <nav>
+    <ol class="pagination">
+      <li>
+        {% if page.url != pagination.href.first %}
+          <a href="{{ pagination.href.first }}">{% lucide "chevron-first" %}</a>
+        {% else %}
+          <span>{% lucide "chevron-first" %}</span>
+        {% endif %}
+      </li>
+      <li>
+        {% if pagination.href.previous %}
+          <a href="{{ pagination.href.previous }}">{% lucide "chevron-left" %}</a>
+        {% else %}
+          <span>{% lucide "chevron-left" %}</span>
+        {% endif %}
+      </li>
+      {%- for pageEntry in pagination.pages %}
+        <li>
+          <a
+            href="{{ pagination.hrefs[ loop.index0 ] }}"
+            {% if page.url == pagination.hrefs[ loop.index0 ] %}
+              aria-current="page"
+            {% endif %}
+          >
+            {{ loop.index }}
+          </a>
+        </li>
+      {%- endfor %}
+      <li>
+        {% if pagination.href.next %}
+          <a href="{{ pagination.href.next }}">{% lucide "chevron-right" %}</a>
+        {% else %}
+          <span>{% lucide "chevron-right" %}</span>
+        {% endif %}
+      </li>
+      <li>
+        {% if page.url != pagination.href.last %}
+          <a href="{{ pagination.href.last }}">{% lucide "chevron-last" %}</a>
+        {% else %}
+          <span>{% lucide "chevron-last" %}</span>
+        {% endif %}
+      </li>
+    </ol>
+  </nav>
+{% endif %}

src/og-image.og.njk

@@ -0,0 +1,27 @@
+<div
+  style="
+    width: 100vw;
+    height: 100vh;
+    padding: 64px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 64px;
+    background-color: #0f172a;
+    color: #e2e8f0;
+  ">
+  <div style="display: flex; flex: 0 0 256px">
+    <img
+      src="https://ref.sebin-nyshkim.net/sebin/assets/sebin-smug-icon-C3NF7g4H.png"
+      width="256"
+      height="256"
+      alt="Sebin"
+      style="border-radius: 100%; border: 8px solid currentColor" />
+  </div>
+
+  <div style="flex: 1 1 0; display: flex; flex-flow: column nowrap">
+    <h1 style="font-size: 72px">{{ title }}</h1>
+    <h2 style="margin-top: 64px; font-size: 30px; line-height: 36px">blog.sebin-nyshkim.net</h2>
+  </div>
+</div>

src/posts.njk

@@ -0,0 +1,45 @@
+---
+layout: postlist.njk
+title: Posts
+eleventyNavigation:
+  key: posts
+  order: 3
+pagination:
+  data: collections.posts
+  size: 10
+  alias: blogposts
+---
+
+{% for post in blogposts | reverse %}
+  <article class="blogpost">
+    <h1>{{ post.data.title }}</h1>
+    <aside class="not-prose space-y-4 text-base">
+      <ul class="postmeta">
+        <li>
+          {% lucide "calendar", {"size": "20"} %}
+          <time datetime="{{ post.date | isoDate }}" title="{{ post.date | longDate }}">
+            {{ post.date | readableDate }}
+          </time>
+        </li>
+        <li>
+          {% lucide "user", {"size": "20"} %}
+          <a href="{{ post.data.author.href }}">{{ post.data.author.name }}</a>
+        </li>
+        <li>
+          {% lucide "glasses", {"size": "20"} %}
+          {{ post.content | readingtime }}
+        </li>
+      </ul>
+    </aside>
+
+    {% if post.data.image and post.data.image.src != '' %}
+      <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
+    {% endif %}
+
+    <p>{{ post.data.description }}</p>
+
+    <a href="{{ post.url }}" class="not-prose read-more-button">
+      Read on {% lucide "chevron-right", {"size":"20"} %}
+    </a>
+  </article>
+{% endfor %}

src/posts/posts.json

@@ -0,0 +1,5 @@
+{
+  "layout": "post.njk",
+  "permalink": "/posts/{{ title | slugify }}/",
+  "url": "https://blog.sebin-nyshkim.net"
+}

src/sitemap.njk

@@ -0,0 +1,6 @@
+---
+permalink: /sitemap.xml
+layout: null
+eleventyExcludeFromCollections: true
+---
+{# {% sitemap collections.all %} #}

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,md,njk,ejs,pug}'],
+  theme: {
+    extend: {}
+  },
+  plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")]
+};