Upgrade to Nuxt 4 folder structure

Add nuxt-image and remove old image directory
Optimize images (PNG → AVIF)
2025-01-27 00:04:14 +03:00 · 2024-10-14 13:17:44 +03:00 · 2024-10-14 12:37:16 +03:00 · 2024-06-20 00:33:16 +03:00 · 2024-06-19 19:21:55 +03:00 · 2024-06-19 19:05:58 +03:00
157 changed files with 3654 additions and 36446 deletions
@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11
@@ -0,0 +1,10 @@
+# .dockerignore
+/.git
+/.nuxt
+/.output
+/node_modules
+
+.gitignore
+README.md
+
+.stylelintcache
@@ -1,23 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
-  },
-  extends: [
-    '@nuxtjs/eslint-config-typescript',
-    'plugin:nuxt/recommended',
-    'prettier',
-  ],
-  plugins: [],
-  rules: {
-    indent: ['error', 2],
-    quotes: [2, 'single', { avoidEscape: true }],
-    'no-console': 'off',
-    'vue/no-multiple-template-root': 'off',
-    'vue/multi-word-component-names': 'off',
-  },
-  settings: {
-    'import/ignore': ['vue-fontawesome'],
-  },
-}
@@ -9,6 +9,9 @@ dist
 # Node dependencies
 node_modules

+# Cache
+.stylelintcache
+
 # Logs
 logs
 *.log
@@ -1,96 +0,0 @@
-###
-# Place your Prettier ignore content here
-
-###
-# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
-
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# Nuxt generate
-dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-
-# Service worker
-sw.*
-
-# macOS
-.DS_Store
-
-# Vim swap files
-*.swp
@@ -1,6 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all"
-}
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-useHead({
-  titleTemplate: (chunk) => {
-    return !chunk || chunk === 'Enderman' ? 'Enderman' : `${chunk} – Enderman`
-  },
-})
-</script>
-
-<template>
-  <div
-    id="ender-layout"
-    class="d-flex flex-column align-items-center pt-sm-5 h-100"
-  >
-    <Transition name="page">
-      <Card />
-    </Transition>
-  </div>
-
-  <Portal
-    layout="#ender-layout"
-    directory="/images/portal"
-    animate
-    randomize
-    fade
-  />
-  <Footer />
-</template>
-
-<style></style>
@@ -1,22 +0,0 @@
-@charset "UTF-8";
-@counter-style do {
-  system: cyclic;
-  symbols: "💻" "📌" "👻" "📷";
-  suffix: " ";
-}
-@counter-style enjoy {
-  system: cyclic;
-  symbols: "💻" "📌" "👻" "📷" "♟" "⛄";
-  suffix: " ";
-}
-.list-style-type-none {
-  list-style-type: none;
-}
-.list-style-type-do {
-  list-style-type: do;
-}
-.list-style-type-enjoy {
-  list-style-type: enjoy;
-}
-
-/*# sourceMappingURL=list-types.css.map */
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["list-types.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE","file":"list-types.css"}
@@ -1,25 +0,0 @@
-@counter-style do {
-  system: fixed;
-  symbols: "\1F4BB" "\1F4CC" "\1F47B" "\1F4F7";
-  suffix: " ";
-}
-
-@counter-style enjoy {
-  system: fixed;
-  symbols: "\2728" "\1F4A1" "\1F4D5" "\1F30D" "\2615" "\26C4";
-  suffix: " ";
-}
-
-.list-style-type {
-  &-none {
-    list-style-type: none;
-  }
-
-  &-do {
-    list-style-type: do;
-  }
-
-  &-enjoy {
-    list-style-type: enjoy;
-  }
-}
@@ -1,269 +0,0 @@
-// Fonts.
-@import '@fontsource/Lato/index.css';
-@import '@fontsource/Alexandria/700.css';
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 601px,
-  md: 996px,
-  lg: 1281px,
-  xl: 1921px,
-  xxl: 2561px
-);
-
-// Bootstrap & animations.
-@import '../../node_modules/bootstrap/scss/bootstrap';
-@import '../../node_modules/animate.css/animate';
-@import 'transitions';
-@import 'list-types';
-
-// CSS Variables.
-:root {
-  --animate-duration: 1s;
-  --animate-delay: 0.75s;
-  --animate-repeat: 1;
-}
-
-// The HTML page.
-html {
-  height: 100%;
-}
-
-// The body element.
-body {
-  display: flex;
-  flex-direction: column;
-
-  background-color: rgb(6, 25, 28);
-  background-image: url('~/assets/images/sky.png');
-
-  background-attachment: fixed;
-  background-blend-mode: multiply;
-  background-size: cover;
-  background-repeat: no-repeat;
-
-  image-rendering: pixelated;
-
-  color: white;
-  font-family: 'Lato', sans-serif;
-  font-size: 18px;
-
-  height: 100%;
-}
-
-// Entry point (Vue mount).
-#ender-app {
-  flex: 1;
-  image-rendering: auto;
-}
-
-// Helper classes that don't exist in Bootstrap.
-.no-decoration {
-  text-decoration: none;
-  color: inherit;
-}
-
-.text-align-center {
-  text-align: center;
-}
-
-.font-small {
-  font-size: 14px;
-}
-
-.grid-cols-3 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.display-xs-none {
-  display: none;
-}
-
-.alex {
-  font-family: 'Alexandria', sans-serif;
-}
-
-// Query-overridable classes.
-.background {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.dimensions {
-  width: 100%;
-  min-height: 100%;
-}
-
-.link {
-  color: inherit;
-  text-decoration: none;
-  transition: 0.3s ease;
-
-  &:hover {
-    color: cornflowerblue;
-  }
-
-  &-hi {
-    @extend .link;
-    color: cornflowerblue;
-
-    &:hover {
-      color: royalblue;
-    }
-  }
-}
-
-.radial-gradient {
-  background: radial-gradient(
-    circle at left,
-    rgba(255, 255, 255, 0.8),
-    rgba(255, 255, 255, 0.75),
-    rgba(255, 255, 255, 0)
-  );
-}
-
-@property --scrollbar {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: rgba(255, 255, 255, 0.15);
-}
-
-.scrollbar {
-  min-height: 128px;
-
-  transition: --scrollbar 0.15s ease;
-
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
-
-  &:hover {
-    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
-    --scrollbar: rgba(255, 255, 255, 0.3);
-  }
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    border-radius: 8px;
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    background-color: var(--scrollbar);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    color: black;
-  }
-
-  .scrollbar {
-    scrollbar-color: rgba(0, 0, 0, 0.15) rgba(255, 255, 255, 0.3);
-
-    &:hover {
-      scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
-      --scrollbar: rgba(0, 0, 0, 0.3);
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: rgba(255, 255, 255, 0.3);
-    }
-  }
-
-  .background {
-    background-color: rgba(255, 255, 255, 0.8);
-  }
-
-  .link {
-    &:hover {
-      color: royalblue;
-    }
-
-    &-hi {
-      color: royalblue;
-
-      &:hover {
-        color: darkblue;
-      }
-    }
-  }
-
-  .radial-gradient {
-    background: radial-gradient(
-      circle at left,
-      rgba(0, 0, 0, 0.95),
-      rgba(0, 0, 0, 0.8),
-      rgba(0, 0, 0, 0)
-    );
-  }
-}
-
-// Dynamic classes.
-@include media-breakpoint-up(sm) {
-  #ender-app {
-    height: 100%;
-  }
-
-  .scrollbar {
-    scrollbar-gutter: stable;
-  }
-
-  .dimensions {
-    width: 80%;
-    min-height: auto;
-
-    max-height: 90%;
-  }
-
-  .fade-mask {
-    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
-  }
-
-  .rounded-card {
-    border-radius: 1em;
-  }
-
-  .display-xs-none {
-    display: block;
-  }
-
-  .animate__animated-sm {
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-duration: var(--animate-duration);
-    animation-duration: var(--animate-duration);
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-  }
-
-  .animate__delay-1-5s {
-    -webkit-animation-delay: 1s;
-    animation-delay: 1s;
-    -webkit-animation-delay: calc(var(--animate-delay) * 1.5);
-    animation-delay: calc(var(--animate-delay) * 1.5);
-  }
-}
-
-@include media-breakpoint-up(md) {
-}
-
-@include media-breakpoint-up(lg) {
-  .dimensions {
-    width: 60%;
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .dimensions {
-    width: 40%;
-  }
-}
-
-@include media-breakpoint-up(xxl) {
-  .dimensions {
-    width: 30%;
-  }
-}
@@ -1,14 +0,0 @@
-body::-webkit-scrollbar {
-  width: 1em;
-}
-
-body::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-}
-
-body::-webkit-scrollbar-thumb {
-  background-color: darkgrey;
-  outline: 1px solid slategrey;
-}
-
-/*# sourceMappingURL=scrollbar.css.map */
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["scrollbar.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;;;AAGJ;EACE;EACA","file":"scrollbar.css"}
@@ -1,9 +0,0 @@
-.page-enter-active, .page-leave-active {
-  transition: all 0.4s;
-}
-.page-enter-from, .page-leave-to {
-  opacity: 0;
-  filter: blur(1rem);
-}
-
-/*# sourceMappingURL=transitions.css.map */
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["transitions.scss"],"names":[],"mappings":"AACE;EAEE;;AAGF;EAEE;EACA","file":"transitions.css"}
@@ -1,12 +0,0 @@
-.page {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.4s;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    filter: blur(1em);
-  }
-}
@@ -1,14 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <main
-    class="dimensions background overflow-auto d-flex flex-column rounded-card gap-4 gap-sm-2 px-4 pt-4 pb-3 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
-  >
-    <Navigation />
-    <NuxtPage
-      class="scrollbar overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3 fade-mask"
-    />
-  </main>
-</template>
-
-<style scoped lang="scss"></style>
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-const currentYear = new Date().getFullYear()
-</script>
-
-<template>
-  <footer
-    class="float user-select-none mb-2 animate__animated animate__delay-1s animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
-  >
-    <span class="transpaque font-small text-shadow">
-      © 2018-{{ currentYear }}, <a href="https://enderman.ch">Enderman</a>. All
-      rights reserved. • v1.1
-    </span>
-  </footer>
-</template>
-
-<style scoped lang="scss">
-.float {
-  position: fixed;
-
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  width: fit-content;
-  height: fit-content;
-
-  margin: auto;
-}
-
-.transpaque {
-  color: white;
-
-  opacity: 0.25;
-  transition: ease 0.3s;
-}
-
-.transpaque:hover {
-  opacity: 1;
-}
-
-.line-height-1-5 {
-  line-height: 14px * 1.5;
-}
-
-.text-shadow {
-  text-shadow: black 0 2px 5px;
-}
-</style>
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  alt: {
-    type: String,
-    default: 'Logo',
-  },
-  width: {
-    type: Number,
-    default: 100,
-  },
-  height: {
-    type: Number,
-    default: 100,
-  },
-  title: {
-    type: String,
-    default: 'Title',
-  },
-  description: {
-    type: String,
-    default: 'Description',
-  },
-})
-</script>
-
-<template>
-  <NuxtLink class="no-decoration user-select-none" to="/">
-    <div
-      class="logo d-flex flex-row align-items-center justify-content-sm-center"
-    >
-      <img
-        class="logo-image"
-        draggable="false"
-        :width="props.width"
-        :height="props.height"
-        :src="props.src"
-        :alt="props.alt"
-      />
-      <div>
-        <h1 class="alex mb-0">{{ props.title }}</h1>
-        <Separator />
-        <p class="mb-0">{{ props.description }}</p>
-      </div>
-    </div>
-  </NuxtLink>
-</template>
-
-<style scoped lang="scss">
-.logo {
-  > img.logo-image {
-    transition: ease 0.3s;
-  }
-
-  &:hover {
-    > img.logo-image {
-      transform: scale(105%);
-    }
-  }
-}
-</style>
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { usePageStore } from '~/stores/pages'
-
-import logo from '~/assets/images/logo.gif'
-import aboutIcon from '~/assets/images/icons/info.png'
-import projectIcon from '~/assets/images/icons/defrag.png'
-import socialIcon from '~/assets/images/icons/user.png'
-
-const pageStore = usePageStore()
-const { pages } = storeToRefs(pageStore)
-
-const icons = [aboutIcon, projectIcon, socialIcon]
-</script>
-
-<template>
-  <nav
-    class="d-flex flex-row flex-wrap flex-sm-column flex-lg-row justify-content-around justify-content-sm-start justify-content-lg-between gap-2 gap-lg-3"
-  >
-    <Logo
-      :src="logo"
-      alt="Endermanch"
-      title="Enderman"
-      description="official website"
-    />
-    <ul
-      class="navbar-nav flex-row align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
-    >
-      <li v-for="(page, index) in pages" :key="index" class="nav-item">
-        <LinkButton
-          :path="page.path"
-          :name="page.name"
-          :icon="icons[index]"
-          alt="Info"
-        />
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<style scoped lang="scss"></style>
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'white',
-  },
-  height: {
-    type: Number,
-    default: 1,
-  },
-})
-</script>
-
-<template>
-  <hr
-    class="radial-gradient m-0 border-0 w-100"
-    :style="{ height: props.height + 'px' }"
-  />
-</template>
-
-<style scoped lang="scss"></style>
@@ -0,0 +1,13 @@
+services:
+  index:
+    container_name: frontend-index
+    image: endermanch/index:latest
+    environment:
+        - NODE_ENV=production
+        - PORT=3000
+        - HOST=0.0.0.0
+    build:
+      context: ./src
+    ports:
+      - "127.0.0.1:3670:3000"
+    restart: unless-stopped
@@ -1,66 +0,0 @@
-import packageJSON from './package.json'
-
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  app: {
-    head: {
-      htmlAttrs: {
-        lang: 'en',
-      },
-      link: [
-        {
-          rel: 'icon',
-          type: 'image/x-icon',
-          href: '/favicon.ico',
-        },
-      ],
-      meta: [
-        {
-          charset: 'utf-8',
-        },
-        {
-          name: 'viewport',
-          content: 'width=device-width, initial-scale=1',
-        },
-        {
-          'http-equiv': 'X-UA-Compatible',
-          content: 'ie=edge',
-        },
-      ],
-    },
-    pageTransition: { name: 'page', mode: 'out-in' },
-    rootId: 'ender-app',
-  },
-  components: {
-    dirs: [
-      {
-        path: '~/components',
-        pathPrefix: false,
-        extensions: ['.vue'],
-      },
-    ],
-  },
-  css: [
-    '~/assets/styles/main.css',
-    '@fortawesome/fontawesome-svg-core/styles.css',
-  ],
-  plugins: [],
-  modules: [
-    'nuxt-font-loader',
-    '@nuxt/content',
-    '@nuxtjs/eslint-module',
-    '@pinia/nuxt',
-    'nuxt-quasar-ui',
-  ],
-  quasar: {
-    lang: 'en-US',
-  },
-  typescript: {
-    typeCheck: true,
-  },
-  vite: {
-    define: {
-      'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJSON.version),
-    },
-  },
-})
@@ -1,57 +0,0 @@
-{
-  "name": "index",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
-    "lint:prettier": "prettier --check .",
-    "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
-    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
-  },
-  "devDependencies": {
-    "@nuxt/content": "^2.9.0",
-    "@nuxt/devtools": "latest",
-    "@nuxt/types": "^2.17.2",
-    "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/eslint-module": "^4.1.0",
-    "@pinia/nuxt": "^0.5.1",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "nuxt": "^3.8.1",
-    "nuxt-font-loader": "^2.3.4",
-    "nuxt-quasar-ui": "^2.0.6",
-    "prettier": "^3.0.3",
-    "sass": "^1.69.5",
-    "typescript": "^5.2.2",
-    "vite-plugin-require": "^0.0.3",
-    "vue": "^3.3.8",
-    "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.22"
-  },
-  "dependencies": {
-    "@fontsource/alexandria": "^5.0.8",
-    "@fontsource/jetbrains-mono": "^5.0.17",
-    "@fontsource/lato": "^5.0.17",
-    "@fortawesome/fontawesome": "^1.1.8",
-    "@fortawesome/fontawesome-free": "^6.4.2",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/vue-fontawesome": "^3.0.5",
-    "@quasar/extras": "^1.16.8",
-    "animate.css": "^4.1.1",
-    "bootstrap": "^5.3.2",
-    "humps": "^2.0.1",
-    "pinia": "^2.1.7",
-    "quasar": "^2.14.0"
-  }
-}
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-const age =
-  new Date(Number(new Date()) - Number(new Date('2003-09-18'))).getFullYear() -
-  1970
-
-const meta = {
-  title: 'About Me',
-  description: `Nice to meet you!~ I'm Andrew, a ${age}-year-old developer from Kaluga, Russia.`,
-  image: 'https://enderman.ch/images/logo.png',
-  url: 'https://enderman.ch/about',
-}
-
-useSeoMeta({
-  title: meta.title,
-  description: meta.description,
-  ogTitle: meta.title,
-  ogDescription: meta.description,
-  ogImage: meta.image,
-  ogUrl: meta.url,
-  ogType: 'website',
-  twitterTitle: meta.title,
-  twitterDescription: meta.description,
-  twitterImage: meta.image,
-  twitterCard: 'summary',
-})
-
-useHead({
-  title: 'About',
-  htmlAttrs: {
-    lang: 'en',
-  },
-  link: [
-    {
-      rel: 'icon',
-      type: 'image/x-icon',
-      href: '/favicon.ico',
-    },
-  ],
-})
-</script>
-
-<template>
-  <section>
-    <p>This page shall be added in a future release.</p>
-  </section>
-</template>
-
-<style scoped lang="scss"></style>
@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-const socials = [
-  {
-    name: 'YouTube',
-    url: 'https://go.enderman.ch/youtube',
-    icon: 'youtube',
-  },
-  {
-    name: 'Andrew',
-    url: 'https://go.enderman.ch/andrew',
-    icon: 'youtube',
-  },
-  {
-    name: 'Twitch',
-    url: 'https://go.enderman.ch/twitch',
-    icon: 'twitch',
-  },
-  {
-    name: 'TikTok',
-    url: 'https://go.enderman.ch/tiktok',
-    icon: 'tiktok',
-  },
-  {
-    name: 'Twitter',
-    url: 'https://go.enderman.ch/twitter',
-    icon: 'twitter',
-  },
-  {
-    name: 'Telegram',
-    url: 'https://go.enderman.ch/telegram',
-    icon: 'telegram',
-  },
-  {
-    name: 'Discord',
-    url: 'https://go.enderman.ch/discord',
-    icon: 'discord',
-  },
-  {
-    name: 'GitHub',
-    url: 'https://go.enderman.ch/github',
-    icon: 'github',
-  },
-  {
-    name: 'Steam',
-    url: 'https://go.enderman.ch/steam',
-    icon: 'steam',
-  },
-]
-
-const meta = {
-  title: 'Enderman Online',
-  description:
-    'Discover me on your favorite social media and find ways to contact me here.',
-  image: 'https://enderman.ch/images/logo.png',
-  url: 'https://enderman.ch/projects',
-}
-
-useSeoMeta({
-  title: meta.title,
-  description: meta.description,
-  ogTitle: meta.title,
-  ogDescription: meta.description,
-  ogImage: meta.image,
-  ogUrl: meta.url,
-  ogType: 'website',
-  twitterTitle: meta.title,
-  twitterDescription: meta.description,
-  twitterImage: meta.image,
-  twitterCard: 'summary',
-})
-
-useHead({
-  title: 'Socials',
-  htmlAttrs: {
-    lang: 'en',
-  },
-  link: [
-    {
-      rel: 'icon',
-      type: 'image/x-icon',
-      href: '/favicon.ico',
-    },
-  ],
-})
-</script>
-
-<template>
-  <div>
-    <h3 class="alex">Social media</h3>
-    <ul class="list-style-type-none p-0">
-      <li v-for="(page, index) in socials" :key="index">
-        <FontAwesomeIcon :icon="`fa-brands fa-${page.icon}`" />
-        <a class="link-hi" target="_blank" rel="noopener" :href="page.url">{{
-          page.name
-        }}</a>
-      </li>
-    </ul>
-    <h3 class="alex">Contact me</h3>
-    <p>
-      Fanmail:
-      <EMail address="[email protected]" subject="Hey Enderman!" /><br />
-      Manager: <EMail address="[email protected]" /><br />
-      Abuse: <EMail address="[email protected]" />
-    </p>
-  </div>
-</template>
-
-<style scoped lang="scss"></style>
@@ -1,17 +0,0 @@
-import { library, config } from '@fortawesome/fontawesome-svg-core'
-
-import { far } from '@fortawesome/free-regular-svg-icons'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { fas } from '@fortawesome/free-solid-svg-icons'
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-// Add icon packs.
-library.add(far, fab, fas)
-
-// Let Nuxt manage CSS.
-config.autoAddCss = false
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component('FontAwesomeIcon', FontAwesomeIcon)
-})
@@ -0,0 +1,31 @@
+FROM oven/bun:alpine AS base
+WORKDIR /usr/src/app
+
+# install dependencies into temp directory
+# this will cache them and speed up future builds
+FROM base AS install
+RUN mkdir -p /temp
+
+COPY package.json bun.lockb /temp/
+RUN cd /temp && bun install --production
+
+# copy node_modules from temp directory
+# then copy all (non-ignored) project files into the image
+FROM base AS prerelease
+COPY --from=install /temp/node_modules node_modules
+COPY . .
+
+ENV NODE_ENV=production
+RUN bun test
+RUN bun --bun run build
+
+# copy production dependencies and source code into final image
+FROM base AS release
+COPY --from=install /temp/node_modules node_modules
+COPY --from=prerelease /usr/src/app/.output .
+COPY --from=prerelease /usr/src/app/package.json .
+
+ENV HOST=0.0.0.0
+USER bun
+
+ENTRYPOINT [ "bun", "run", "server/index.mjs" ]
@@ -0,0 +1,5 @@
+import config from '../config'
+
+export default defineAppConfig({
+  ...config,
+})
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import 'iconify-icon'
+
+const config = useAppConfig()
+const route = useRoute()
+
+const { reader, animate } = storeToRefs(usePageStore())
+
+useHead({
+  titleTemplate: (chunk?) => {
+    if (route.fullPath === '/') return config.title.full
+    if (route.fullPath.split('/').length === 2)
+      switch (route.fullPath.split('/')[1]) {
+        case 'blog':
+          return 'The Ender Chest'
+        default:
+          return `${chunk} – ${config.title.short}`
+      }
+
+    return chunk!
+  },
+})
+</script>
+
+<template>
+  <div
+    id="ender-layout"
+    class="flex flex-col lm:justify-center lt:justify-center items-center h-full"
+  >
+    <ClientOnly>
+      <LazySwipeControls v-if="!reader" class="block sm:hidden" />
+    </ClientOnly>
+
+    <NuxtLoadingIndicator />
+    <NuxtLayout name="card">
+      <template #footer>
+        <footer
+          v-if="!reader"
+          class="lm:static sm:fixed sm:bottom-0 sm:left-0 sm:right-0 mx-auto w-auto lm:mb-0 sm:mb-2 pass-through text-center"
+        >
+          <small
+            class="lm:text-inherit sm:accent-text sm:drop-shadow-lg sm:transition-all lm:opacity-100 sm:opacity-25 sm:hover:opacity-100"
+          >
+            © 2018-{{ new Date().getFullYear() }},
+            <a class="sm:link-dark" :href="config.url">Enderman</a>. All rights
+            reserved.
+            <wbr />
+            <sub class="whitespace-nowrap">
+              β{{ config.build.version ? config.build.version : '?.?.?' }} ({{
+                config.build.date ? config.build.date : '1970-01-01'
+              }})
+            </sub>
+          </small>
+        </footer>
+      </template>
+    </NuxtLayout>
+  </div>
+
+  <ClientOnly>
+    <Portal v-model="animate" layout="#ender-layout" randomize fade />
+  </ClientOnly>
+</template>
@@ -0,0 +1,39 @@
+@counter-style do {
+  system: fixed;
+  symbols: "\1F4BB" "\1F4CC" "\1F47B" "\1F4F7";
+  suffix: " ";
+}
+
+@counter-style enjoy {
+  system: fixed;
+  symbols: "\2728" "\1F4A1" "\1F4BE" "\1F3A5" "\1F4D5" "\1F30D" "\2615" "\26C4";
+  suffix: " ";
+}
+
+@counter-style faq {
+  system: cyclic;
+  symbols: "\2753" "\1F4A1";
+  suffix: " ";
+}
+
+.list-style-type {
+  &-none {
+    list-style-type: none !important;
+  }
+
+  &-do {
+    list-style-type: do !important;
+  }
+
+  &-enjoy {
+    list-style-type: enjoy !important;
+  }
+
+  &-faq {
+    list-style-type: faq !important;
+
+    > li:nth-child(2n):not(:last-child) {
+      @apply mb-2;
+    }
+  }
+}
@@ -0,0 +1,598 @@
+@use 'animate.css';
+
+// Modules.
+@use 'transitions';
+@use 'lists';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+    font-family: Enchant;
+    src:
+      url("~/assets/fonts/enchant/enchant.woff") format('woff'),
+      url("~/assets/fonts/enchant/enchant.woff2") format('woff2')
+}
+
+// CSS Variables.
+:root {
+  --animate-duration: 1s;
+  --animate-delay: 0.75s;
+  --animate-repeat: 1;
+}
+
+@-moz-document url-prefix() {
+  html {
+    min-height: 128px;
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 15%) rgb(0 0 0 / 20%);
+    
+    &.light {
+      scrollbar-color: rgb(0 0 0 / 15%) rgb(255 255 255 / 20%);
+    }
+  }
+}
+
+// The HTML page.
+html {
+  height: 100dvh;
+  font-size: 14px;
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: rgb(0 0 0 / 20%);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: rgb(255 255 255 / 15%);
+  }
+
+  ::-webkit-scrollbar-corner {
+    border-radius: 3px;
+    background-color: rgb(255 255 255 / 15%);
+  }
+
+  &.light {
+    ::-webkit-scrollbar-track {
+      background-color: rgb(255 255 255 / 15%);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: rgb(0 0 0 / 30%);
+    }
+    
+    ::-webkit-scrollbar-corner {
+      background-color: rgb(0 0 0 / 30%);
+    }
+  }
+}
+
+// The body element.
+body {
+  display: flex;
+  flex-direction: column;
+
+  position: sticky;
+
+  background-color: rgb(6 25 28);
+  background-image: url('~/assets/images/textures/sky.png');
+  background-attachment: fixed;
+  background-blend-mode: multiply;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  image-rendering: pixelated;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  color: white;
+
+  height: 100%;
+}
+
+@layer base {
+  h1, h2, h3, h4, h5, h6,
+  .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
+    @apply font-serif;
+    font-weight: bold;
+  }
+
+  h1, .text-h1 {
+    font-size: 2.5rem;
+  }
+
+  h2, .text-h2 {
+    font-size: 2rem;
+  }
+
+  h3, .text-h3 {
+    font-size: 1.75rem;
+  }
+
+  h4, .text-h4 {
+    font-size: 1.5rem;
+  }
+
+  h5, .text-h5 {
+    font-size: 1.25rem;
+  }
+
+  h6, .text-h6 {
+    font-size: 1rem;
+  }
+
+  small {
+    font-size: 0.75rem;
+  }
+
+  a {
+    @apply no-underline transition-all;
+
+    color: cornflowerblue;
+
+    &:hover {
+      color: royalblue;
+    }
+  }
+
+  center {
+    text-align: center;
+    margin: auto;
+  }
+
+  :not(nav) {
+    > ul {
+      @apply ps-6;
+      list-style-type: disc;
+    }
+
+    > ol {
+      @apply ps-6;
+      list-style-type: decimal;
+    }
+  }
+
+  :where(section, article, aside).page {
+    :is(div, p):not(:last-child) {
+      @apply mb-4;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      a {
+        @apply text-inherit no-underline transition-all;
+
+        &:hover {
+          color: indianred;
+        }
+      }
+
+      &:not(:last-child) {
+        @apply mb-2;
+      }
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    :where(ul, ol) {
+      &:not(:last-child) {
+        @apply mb-4;
+      }
+      
+      li:not(:last-child) {
+        @apply mb-1;
+      }
+    }
+
+    code:not(pre *) {
+      @apply px-1 py-0.5 break-words cursor-pointer rounded-lg transition-ease;
+
+      background-color: rgb(83 35 162 / 10%);
+
+      &:hover {
+        background-color: rgb(138 71 245 / 20%);
+      }
+    }
+
+    img {
+      @apply max-w-full max-h-[400px];
+    }
+
+    blockquote {
+      @apply px-4 py-3 mb-4 border-l-4 rounded-r-xl transition-ease;
+
+      border-left-color: rgb(153 153 255 / 60%);
+      background-color: rgb(153 153 255 / 10%);
+
+      &:hover {
+        border-left-color: rgb(153 153 255 / 100%);
+        background-color: rgb(153 153 255 / 15%);
+      }
+    }
+
+    pre {
+      @apply relative font-small overflow-auto min-h-14 max-h-[80rem] rounded-xl p-2 mb-4;
+
+      background-color: rgb(83 35 162 / 5%);
+
+      &:hover > .absolute {
+        @apply opacity-100;
+      }
+      
+      > code {
+        @apply scroll-p-2;
+        
+        counter-reset: step;
+        counter-increment: step 0;
+
+        .line::before {
+          @apply inline-block w-4 mr-6 text-right;
+
+          content: counter(step);
+          counter-increment: step;
+
+          color: rgb(238 246 250 / 40%);
+        }
+
+        > span span:last-child {
+          @apply me-4;
+        }
+      }
+
+      .overlay-action {
+        background-color: rgb(153 153 255 / 10%);
+        border-color: rgb(153 153 255 / 60%);
+      }
+    }
+  }
+}
+
+// Entry point (Vue mount).
+#ender-app {
+  flex: 1 0 auto;
+  image-rendering: auto;
+}
+
+// Helper classes that don't exist in Bootstrap.
+.overlay {
+  grid-area: 1 / 1;
+}
+
+.pass-through {
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+ruby {
+  ruby-position: under;
+
+  ruby {
+    ruby-position: over;
+  }
+}
+
+rt {
+  ruby-align: space-around;
+}
+
+.font-small {
+  font-size: 14px;
+}
+
+// Query-overridable classes.
+.dimensions {
+  width: 100%;
+  min-height: 100%;
+}
+
+@layer utilities {
+  .accent-background {
+    background-color: rgb(0 0 0 / 50%);
+  }
+
+  .accent-overlay-background {
+    background-color: rgb(0 0 0 / 90%);
+  }
+
+  .accent-text {
+    color: white;
+  }
+
+  .accent-text-shadow {
+    text-shadow: black 2px 3px 4px;
+  }
+
+  .drop-shadow,
+  .accent-drop-shadow {
+    filter: drop-shadow(1px 2px 3px black);
+  }
+
+  .link-dark {
+    @apply text-inherit no-underline transition-all;
+
+    color: cornflowerblue;
+
+    &:hover {
+      color: royalblue;
+    }
+  }
+
+  .accent-fade {
+    background: linear-gradient(
+      to top,
+      black,
+      rgb(0 0 0 / 50%) 75%,
+      transparent
+    );
+  }
+
+  .fade-mask {
+    mask-image: linear-gradient(to bottom, transparent, black 3%, black 97%, transparent);
+  }
+}
+
+.dialog {
+  display: grid;
+
+  min-width: 240px;
+  max-width: 640px;
+
+  background-color: rgb(25 20 40 / 95%);
+  box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
+  border-radius: 16px !important;
+
+  > div.background {
+    background-image: url('~/assets/images/textures/aero.png');
+    background-attachment: scroll;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-blend-mode: lighten;
+
+    width: 100%;
+    height: 100%;
+
+    opacity: 0.2;
+
+    box-shadow: azure 0 0 20rem;
+    filter: blur(5px);
+  }
+
+  > div.content > img.icon-badge {
+    position: fixed;
+    margin-top: -20px;
+    margin-left: -20px;
+    transform: rotate(-25deg);
+    width: 60px;
+    height: 60px;
+  }
+}
+
+.accent-gradient {
+  background: radial-gradient(
+    circle at left,
+    rgb(255 255 255 / 80%),
+    rgb(255 255 255 / 75%),
+    rgb(255 255 255 / 0%)
+  );
+}
+
+.post {
+  scroll-snap-type: y mandatory;
+  scroll-snap-stop: normal;
+
+  &::after {
+    content: '';
+    scroll-snap-align: start;
+  }
+
+  &-box {
+    border-color: rgb(153 153 255 / 60%);
+    background-color: rgb(45 7 110 / 10%);
+
+    &:hover {
+      border-color: rgb(153 153 255 / 100%);
+      background-color: rgb(45 7 110 / 30%);
+    }
+  }
+
+  &-pocket {
+    background-color: rgb(153 153 255 / 10%);
+    border-left-color: rgb(153 153 255 / 60%);
+    border-top-color: rgb(153 153 255 / 60%);
+  }
+
+  &-tag {
+    background-color: rgb(153 153 255 / 10%);
+    border-color: rgb(153 153 255 / 60%);
+  }
+}
+
+:where(html.light) {
+  body {
+    color: black;
+  }
+
+  .accent-background {
+    background-color: rgb(255 255 255 / 90%);
+  }
+
+  .accent-overlay-background {
+    background-color: rgb(255 255 255 / 90%);
+  }
+
+  .accent-drop-shadow {
+    filter: drop-shadow(1px 2px 3px white);
+  }
+
+  a {
+    @apply no-underline transition-all;
+
+    color: royalblue;
+
+    &:hover {
+      color: darkblue;
+    }
+  }
+
+  .accent-text {
+    color: black;
+  }
+
+  .accent-gradient {
+    background: radial-gradient(
+      circle at left,
+      rgb(0 0 0 / 95%),
+      rgb(0 0 0 / 80%),
+      transparent
+    );
+  }
+
+  .accent-text-shadow {
+    text-shadow: white 1px 2px 3px;
+  }
+
+  .accent-fade {
+    background: linear-gradient(
+      to top,
+      white,
+      rgb(255 255 255 / 50%) 75%,
+      transparent
+    );
+  }
+
+  .post {
+    &-box {
+      border-color: rgb(123 123 255 / 1000%);
+      background-color: rgb(45 7 110 / 20%);
+
+      &:hover {
+        border-color: rgb(123 123 255 / 80%);
+        background-color: rgb(45 7 110 / 10%);
+      }
+    }
+
+    &-pocket {
+      background-color: rgb(123 123 255 / 10%);
+      border-left-color: rgb(123 123 255 / 80%);
+      border-top-color: rgb(123 123 255 / 80%);
+    }
+
+    &-tag {
+      background-color: rgb(123 123 255 / 10%);
+      border-color: rgb(123 123 255 / 80%);
+    }
+  }
+
+  :is(section, article, aside).page {
+    code:not(pre *) {
+      background-color: rgb(138 71 245 / 20%);
+
+      &:hover {
+        background-color: rgb(83 35 162 / 20%);
+      }
+    }
+
+    blockquote {
+      border-left-color: rgb(153 153 255 / 60%);
+      background-color: rgb(153 153 255 / 10%);
+
+      &:hover {
+        border-left-color: rgb(153 153 255 / 100%);
+        background-color: rgb(153 153 255 / 15%);
+      }
+    }
+
+    pre {
+      background-color: rgb(83 35 162 / 10%);
+
+      code {
+        .line::before {
+          color: rgb(83 85 89 / 40%);
+        }
+      }
+
+      .overlay-action {
+        background-color: rgb(153 153 255 / 30%);
+        border-color: rgb(153 153 255 / 80%);
+      }
+    }
+  }
+}
+
+// Dynamic classes.
+@screen lm {
+  .dimensions {
+    width: 100% !important;
+    min-height: 100% !important;
+  }
+}
+
+@screen sm {
+  html {
+    font-size: 16px;
+  }
+
+  #ender-app {
+    height: 100dvh;
+
+    scrollbar-gutter: stable;
+  }
+
+  .dimensions {
+    width: 90%;
+
+    min-height: fit-content;
+    max-height: 90%;
+  }
+
+  .animate__animated-sm {
+    animation-duration: var(--animate-duration);
+    animation-fill-mode: both;
+  }
+
+  .animate__delay-1-5s {
+    animation-delay: calc(var(--animate-delay) * 1.5);
+  }
+}
+
+@screen md {
+  html {
+    font-size: 18px;
+  }
+}
+
+@screen lg {
+  html {
+    font-size: 20px;
+  }
+
+  .dimensions {
+    width: 75%;
+  }
+}
+
+@screen xl {
+  .dimensions {
+    width: 60%;
+  }
+}
+
+@screen 2xl {
+  .dimensions {
+    width: 50%;
+  }
+}
@@ -0,0 +1,44 @@
+.page {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.15s;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    filter: blur(1em);
+  }
+}
+
+.switch {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.15s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+.transition {
+  &-ease {
+    transition: all 0.3s ease;
+  }
+  
+  &-portal {
+    transition: all 0.6942s ease-in;
+  }
+}
+
+.button {
+  &-twitter:hover {
+    transform: translateZ(0) scale(1.1) rotate(-10deg);
+  }
+
+  &-back:hover {
+    transform: translateZ(0) scale(0.9);
+  }
+}
@@ -24,7 +24,7 @@ const props = defineProps({

 const href =
  `mailto:${props.address}` +
-  (props.body ? `&body=${props.body}` : '') +
+  (props.body ? `?body=${props.body}` : '') +
  (props.subject ? `${props.body ? '&' : '?'}subject=${props.subject}` : '') +
  (props.cc ? `${props.body || props.subject ? '&' : '?'}cc=${props.cc}` : '') +
  (props.bcc
@@ -33,11 +33,9 @@ const href =
 </script>

 <template>
-  <a class="link-hi" target="_blank" rel="noopener" :href="href">
+  <a target="_blank" rel="noopener" :href="href">
    <slot>
      {{ props.address }}
    </slot>
  </a>
 </template>
-
-<style scoped lang="scss"></style>
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  logo: {
+    type: String,
+    required: true,
+  },
+  sectionLogo: {
+    type: null as unknown as PropType<string | null>,
+    default: null,
+    required: false,
+  },
+  thumbnail: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    required: true,
+  },
+})
+
+const sentence = computed(() => {
+  return props.description.split('.').at(0) + '...'
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-end text-white relative">
+    <img
+      :src="thumbnail"
+      :alt="alt"
+      class="w-full h-full object-cover absolute top-0 left-0"
+    />
+    <div class="absolute top-0 left-0 p-5">
+      <img :src="logo" alt="Logo" class="w-[100] h-[100]" />
+    </div>
+    <div v-if="sectionLogo" class="absolute top-0 right-0 p-5">
+      <img :src="sectionLogo" alt="Logo" class="w-[100] h-[100]" />
+    </div>
+
+    <div class="mb-5 px-5" style="text-shadow: black 1px 1px 10px">
+      <h1 class="m-0 text-[60px]">{{ title }}</h1>
+      <strong class="min-h-[90px] m-0 text-[24px]" style="font-family: Lato">
+        {{ sentence }}
+      </strong>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <button type="button" data-theme-toggle aria-label="Change to light theme">
+    Change to light theme
+  </button>
+</template>
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const config = useAppConfig()
+const meta = {
+  title: 'Page not found',
+  description:
+    'The page you are looking for does not exist. It might have been removed, had its name changed, or is temporarily unavailable.',
+  image: `${config.url}/images/logo.png`,
+  url: config.url,
+}
+
+let slug = useRoute().params.slug
+
+if (Array.isArray(slug)) slug = slug.join('/')
+
+const error = {
+  http_code: 200,
+  title: config.title,
+  url: config.url + '/' + slug,
+  locale: config.locale || 'en',
+  data: {
+    path: '/error.vue',
+    content: {
+      title: 'Page not found!',
+      description:
+        "The page you are looking for does not exist. However, no 404 error has occurred, as you're browsing through a web application loaded into memory and HTTP error codes make no sense here.",
+    },
+  },
+  slug: useRoute().params.slug,
+  build: config.build,
+  hint: 'Use the navigation bar to get back to the main page.',
+}
+const errorString = JSON.stringify(error, null, 2)
+const buffer = ref('')
+
+const startTime = Date.now()
+const dt = 20
+
+let i = 0
+
+function type() {
+  if (Date.now() > startTime + dt * i) buffer.value += errorString[i++]
+  if (i < errorString.length) requestAnimationFrame(type)
+}
+
+onMounted(() => setTimeout(type, 1500))
+</script>
+
+<template>
+  <section>
+    <h3>Page not found!</h3>
+    <pre class="whitespace-pre-wrap break-keep font-small">{{
+        buffer
+      }}<span class="blinker">&#9610;</span></pre>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.blinker {
+  animation: blinker 1s steps(2, start) infinite;
+}
+
+@keyframes blinker {
+  from {
+    visibility: visible;
+  }
+
+  to {
+    visibility: hidden;
+  }
+}
+</style>
@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import sky from '~/assets/images/portal/sky.png'
-import particles from '~/assets/images/portal/particles.png'
+import sky from 'assets/images/textures/sky.png'
+import particles from 'assets/images/textures/particles.png'
+
+const { $local } = useNuxtApp()
+const config = useAppConfig()
+const fqdn = config.url.split('//').at(1)

 const resources: string[] = [sky, particles]
+const animated = defineModel<boolean>({
+  required: true,
+})

 const props = defineProps({
  layout: {
@@ -62,7 +69,7 @@ class Canvas {
  compatible(
    obj: HTMLCanvasElement | HTMLElement | Element,
  ): obj is HTMLCanvasElement {
-    return obj.tagName === 'CANVAS'
+    return obj.tagName.toLowerCase() === 'canvas'
  }

  query(): HTMLCanvasElement {
@@ -133,7 +140,7 @@ class Portal {
  constructor(
    directory: string = '/',
    create: boolean = true,
-    animate: boolean = true,
+    animate: boolean = false,
    randomize: boolean = false,
    fade: boolean = false,
    speed: number = 1,
@@ -249,7 +256,7 @@ class Portal {
    this.animate = animate
    this.randomize = randomize

-    // Set default speed.
+    // Set the default speed.
    this.speed = speed
    this.initialSpeed = this.speed
    this.dv = 20
@@ -316,7 +323,7 @@ class Portal {

  notice() {
    console.log(
-      `%c \u2587%c\u2587%c\u2587  %c\u2587%c\u2587%c\u2587 %c // ECMAPortal v${this.version} by Endermanch & WiPet\n\n\thttps://enderman.ch\n\thttps://go.enderman.ch/wipet`,
+      `%c \u2587%c\u2587%c\u2587  %c\u2587%c\u2587%c\u2587 %c // ECMAPortal v${this.version} by Endermanch & WiPet\n\n\t${config.url}\n\t${config.shortener}/wipet`,
      'color: #E58EFF',
      'color: #D52DFF',
      'color: #E58EFF',
@@ -327,7 +334,7 @@ class Portal {
    )

    console.log(
-      'If any errors occur below, please send a screenshot of them my way!\n\t%ccontact@enderman.ch',
+      `If any errors occur below, please send a screenshot of them my way!\n\t%ccontact@${fqdn}`,
      'color: #87CEFA',
    )
  }
@@ -573,8 +580,8 @@ class Portal {
    this.clickTime = Date.now()
  }

-  continue() {
-    if (this.pauseTime === 0) return
+  play() {
+    if (this.pauseTime === 0) this.pauseTime = this.currentTime

    // Add the time that has passed since the pause to the current time.
    this.currentTime += Date.now() - this.pauseTime
@@ -607,47 +614,53 @@ class Portal {
 }

 onMounted(() => {
+  // If the localStorage value is null, trigger the setup.
+  // If the viewport is too small, disable by default.
+  const ecmaportal: string | null | undefined = $local.getItem('ecmaportal')
+
+  if (ecmaportal === null) {
+    const notMobile = window.innerWidth > 600
+
+    $local.setItem('ecmaportal', notMobile)
+    animated.value = notMobile
+  } else animated.value = ecmaportal === 'true'
+
  const layout = document.querySelector(props.layout)
  const portal = new Portal(
    props.directory,
    props.create,
-    props.animate,
+    animated.value,
    props.randomize,
    props.fade,
    props.speed,
  )

-  layout!.addEventListener('mousedown', ((e: UIEvent) => {
-    if (e.target === e.currentTarget && e.detail >= 2) {
+  const click: EventListener = (e: Event) => {
+    if (e.target === e.currentTarget) {
      e.preventDefault()
      portal.click()
    }
-  }) as EventListener)
+  }
+
+  for (const event of ['dblclick', 'touchstart'])
+    layout?.addEventListener(event, click)
+
+  // Save the new value to local storage.
+  watch(animated, (newAnimate) => {
+    $local.setItem('ecmaportal', newAnimate)
+    newAnimate ? portal.play() : portal.pause()
+  })
 })
 </script>

 <template>
-  <canvas id="ecmaportal" class="parallax">
+  <canvas
+    id="ecmaportal"
+    class="fixed top-0 left-0 opacity-0 transition-portal -z-10"
+  >
    <span>
      Your browser does not support the &lt;canvas /&gt; element, which is
      required for parallax animation.
    </span>
  </canvas>
 </template>
-
-<style scoped>
-.parallax {
-  position: fixed;
-
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: 0;
-  transition: all 0.6942s ease-in;
-
-  z-index: -1;
-}
-</style>
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <hr class="accent-text accent-gradient border-0 h-px my-4" />
+    <p>
+      <strong>🚧 This page is currently under construction.</strong> Expect a
+      lot more content to be added as time passes.
+      <em>Please report all bugs you encounter via the link in the footer</em>,
+      I will make sure to sand them down.
+    </p>
+    <hr class="accent-text accent-gradient border-0 h-px my-4" />
+  </div>
+</template>
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    default: 'Logo',
+  },
+  width: {
+    type: Number,
+    default: 100,
+  },
+  height: {
+    type: Number,
+    default: 100,
+  },
+  title: {
+    type: String,
+    default: 'Title',
+  },
+  description: {
+    type: String,
+    default: 'Description',
+  },
+})
+</script>
+
+<template>
+  <NuxtLink
+    class="flex flex-row items-center text-inherit hover:text-inherit select-none sm:m-auto lm:m-0 lt:m-0 lg:m-0"
+    to="/"
+  >
+    <img
+      class="transition-all"
+      draggable="false"
+      :width="props.width"
+      :height="props.height"
+      :src="props.src"
+      :alt="props.alt"
+    />
+    <div>
+      <h2>{{ props.title }}</h2>
+      <hr class="accent-text accent-gradient border-0 h-px" />
+      <p>{{ props.description }}</p>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped lang="scss">
+a:hover > img {
+  transform: scale(105%);
+}
+</style>
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '~/stores/pages'
+
+import logo from 'assets/images/logo.avif'
+
+const pageStore = usePageStore()
+const { pages } = storeToRefs(pageStore)
+
+const links = toRaw(pages.value).filter((page) => page.path !== '/')
+</script>
+
+<template>
+  <nav
+    class="flex flex-row flex-wrap lm:flex-row lt:flex-row sm:flex-col lg:flex-row justify-around sm:justify-start lm:justify-between lt:justify-between lg:justify-between gap-2 lg:gap-4"
+  >
+    <Logo
+      :src="logo"
+      alt="Endermanch"
+      title="Enderman"
+      description="official website"
+    />
+    <ul
+      class="flex flex-row flex-wrap items-center sm:items-start lm:items-center lt:items-center lg:items-center justify-center gap-4 m-2 sm:m-0 lm:mx-2 lt:mx-2 lg:mx-2 sm:my-2 lg:my-0"
+    >
+      <li v-for="(page, index) in links" :key="index" class="nav-item">
+        <Route
+          :path="page.path"
+          :name="page.name"
+          :icon="page.icon!.src"
+          :alt="page.icon!.alt"
+        />
+      </li>
+    </ul>
+  </nav>
+</template>
@@ -17,23 +17,32 @@ const props = defineProps({
    type: String,
    default: 'Link',
  },
+  width: {
+    type: Number,
+    default: 32,
+  },
+  height: {
+    type: Number,
+    default: 32,
+  },
 })
 </script>

 <template>
  <NuxtLink
-    class="link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
-    active-class="icon-active px-sm-3"
+    class="flex flex-row items-center gap-2 select-none text-inherit no-underline"
+    active-class="active"
    :to="!props.external ? props.path : undefined"
    :href="props.external ? props.path : undefined"
  >
    <img
-      class="icon-image"
      draggable="false"
      :src="props.icon"
      :alt="props.alt"
+      :width="props.width"
+      :height="props.height"
    />
-    <span class="display-xs-none">
+    <span class="hidden lm:hidden lt:hidden sm:block">
      <strong>
        {{ props.name }}
      </strong>
@@ -42,14 +51,8 @@ const props = defineProps({
 </template>

 <style scoped lang="scss">
-.icon {
-  &-active {
+.active {
+  @apply px-4;
  transform: translate(2px, 2px) rotate3d(1, 1, 1, 5deg) scale(1.25);
 }
-
-  &-image {
-    width: 1.5em;
-    height: 1.5em;
-  }
-}
 </style>
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import cogIcon from 'assets/images/icons/cog.avif'
+import pearlIcon from 'assets/images/icons/pearl.avif'
+
+const config = useAppConfig()
+const { animate } = storeToRefs(usePageStore())
+
+const fqdn = config.url.split('//').at(1)
+const mailTemplate = `I've just found a bug on ${config.url} and would like to report it.%0D%0A%0D%0AWebsite version: ${
+  config.build.version
+}%0D%0ABuild date: ${
+  config.build.date
+}%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`
+
+const active = ref(false)
+</script>
+
+<template>
+  <div
+    class="absolute top-0 right-0 flex flex-col cursor-pointer select-none p-2"
+    @click="active = true"
+  >
+    <img
+      draggable="false"
+      :src="cogIcon"
+      alt="Options"
+      width="16"
+      height="16"
+    />
+  </div>
+  <Transition
+    enter-active-class="animate__animated animate__fadeIn"
+    leave-active-class="animate__animated animate__fadeOut"
+  >
+    <div
+      v-if="active"
+      class="fixed top-0 left-0 flex flex-row justify-center items-center w-full h-full z-20"
+    >
+      <div
+        class="relative flex flex-col gap-4 accent-overlay-background rounded-xl max-w-[800px] mx-4 p-4"
+      >
+        <img
+          draggable="false"
+          :src="pearlIcon"
+          alt="Pearl"
+          class="absolute -top-8 -left-6 badge select-none w-16 lg:w-auto"
+        />
+
+        <h3 class="text-center">Site settings</h3>
+
+        <div class="overlay accent-overlay-background" />
+        <div class="overlay">
+          <p class="mb-3">
+            The site settings are experimental. Suggest what you want to see
+            here next!
+            <strong>Please report any bugs that may occur.</strong>
+          </p>
+
+          <div class="flex flex-col md:flex-row gap-4">
+            <div class="md:basis-0 flex-grow">
+              <strong>Theme</strong>
+              <p>Available in vanilla and chocolate flavors.</p>
+
+              <select
+                v-model="$colorMode.preference"
+                class="accent accent-overlay-background"
+              >
+                <option value="system">System</option>
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+                <option value="sepia">Sepia</option>
+              </select>
+            </div>
+            <div class="md:basis-0 flex-grow">
+              <strong>Animation</strong>
+              <p>
+                Some computers may have issues rendering that gorgeous
+                background animation. Disabling it substantially decreases power
+                consumption, but also makes the website less cool.
+              </p>
+              <input v-model="animate" type="checkbox" color="primary" />
+            </div>
+          </div>
+          <span class="mt-3">
+            <EMail
+              :address="`contact@${fqdn}`"
+              :cc="`admin@${fqdn}`"
+              :subject="`Bug report: ${fqdn}`"
+              :body="mailTemplate"
+            >
+              <strong>Report a bug</strong>
+            </EMail>
+          </span>
+        </div>
+
+        <button @click="active = false">Close</button>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped lang="scss">
+.badge {
+  transform: rotate(-15deg);
+}
+</style>
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const { pages } = storeToRefs(usePageStore())
+
+const route = useRoute()
+const state = computed(() => {
+  const i = pages.value.indexOf(
+    pages.value.find(
+      (page) => page.path === '/' + route.fullPath.split('/')[1],
+    )!,
+  )
+
+  return {
+    current: route.fullPath,
+    index: i,
+    next: toRaw(pages.value)[(i + 1) % pages.value.length].path,
+    prev: toRaw(pages.value)[i - 1 < 0 ? pages.value.length - (i + 1) : i - 1]
+      .path,
+  }
+})
+</script>
+
+<template>
+  <div
+    class="flex fixed flex-row justify-between items-center w-full h-full pass-through"
+  >
+    <NuxtLink
+      class="opacity-25 hover:opacity-100 text-inherit no-underline transition-all"
+      :to="state.prev"
+    >
+      <iconify-icon icon="iconoir:nav-arrow-left" inline />
+    </NuxtLink>
+
+    <NuxtLink class="control-icon text-inherit no-underline" :to="state.next">
+      <iconify-icon icon="iconoir:nav-arrow-right" inline />
+    </NuxtLink>
+  </div>
+</template>
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+import warningIcon from 'assets/images/icons/accent/warning.avif'
+import errorIcon from 'assets/images/icons/accent/error.avif'
+import infoIcon from 'assets/images/icons/accent/info.avif'
+import helpIcon from 'assets/images/icons/accent/help.avif'
+import checkIcon from 'assets/images/icons/accent/checkmark.avif'
+import ideaIcon from 'assets/images/icons/accent/idea.avif'
+
+type IconOptions = 'warning' | 'error' | 'info' | 'help' | 'checkmark' | 'idea'
+
+const props = defineProps({
+  type: {
+    type: String as PropType<IconOptions>,
+    default: 'warning',
+  },
+  title: {
+    type: String,
+    default: 'Important',
+  },
+})
+
+const cards = {
+  warning: {
+    color: 'border-warning',
+    icon: {
+      src: warningIcon,
+      alt: 'Warning triangle',
+    },
+  },
+  error: {
+    color: 'border-error',
+    icon: {
+      src: errorIcon,
+      alt: 'Error circle',
+    },
+  },
+  info: {
+    color: 'border-info',
+    icon: {
+      src: infoIcon,
+      alt: 'Information circle',
+    },
+  },
+  help: {
+    color: 'border-help',
+    icon: {
+      src: helpIcon,
+      alt: 'Help circle',
+    },
+  },
+  checkmark: {
+    color: 'border-checkmark',
+    icon: {
+      src: checkIcon,
+      alt: 'Checkmark',
+    },
+  },
+  idea: {
+    color: 'border-idea',
+    icon: {
+      src: ideaIcon,
+      alt: 'Lightbulb',
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
+    <img
+      draggable="false"
+      :src="cards[props.type].icon.src"
+      :alt="cards[props.type].icon.alt"
+      class="w-12 h-12"
+    />
+    <h3 class="whitespace-nowrap mb-0">{{ props.title }}</h3>
+  </div>
+  <div
+    :class="`box p-4 mb-4 ${cards[props.type].color} border-b border-r rounded-xl`"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.tilt {
+  transform: rotate(-2deg);
+}
+</style>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const emit = defineEmits(['copy'])
+
+const clicked = ref<boolean>(false)
+
+function p() {
+  emit('copy')
+
+  if (!clicked.value) setTimeout(() => (clicked.value = false), 2000)
+  clicked.value = true
+}
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col justify-start top-0 left-0 w-full h-full pointer-events-none opacity-0 hover:opacity-100 transition-ease"
+  >
+    <div class="flex flex-row justify-end items-center p-2">
+      <span
+        class="overlay-action flex-grow-0 pointer-events-auto cursor-pointer p-2 border rounded-xl"
+        @click="p"
+      >
+        <Transition name="switch" mode="out-in">
+          <iconify-icon v-if="!clicked" icon="mdi:content-copy" inline />
+          <iconify-icon
+            v-else
+            icon="mdi:check-bold"
+            class="text-green-500"
+            inline
+          />
+        </Transition>
+      </span>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { UseSwipeDirection } from '@vueuse/core'
+import { useSwipe } from '@vueuse/core'
+
+const router = useRouter()
+const route = useRoute()
+const card = ref<HTMLElement | null>(null)
+
+const { pages, reader } = storeToRefs(usePageStore())
+
+const swipe = useSwipe(card, {
+  passive: true,
+  onSwipeEnd: (_touch: TouchEvent, _direction: UseSwipeDirection) => {
+    if (reader.value) return
+
+    const currentPage = pages.value.find(
+      (page) => page.path === route.fullPath,
+    )!
+
+    const currentIndex = pages.value.indexOf(currentPage)
+
+    if (
+      card.value?.offsetWidth &&
+      Math.abs(swipe.lengthX.value) > 1.5 * Math.abs(swipe.lengthY.value) &&
+      Math.abs(swipe.lengthX.value) / card.value?.offsetWidth >= 0.1
+    ) {
+      router.push(
+        toRaw(pages.value)[
+          swipe.lengthX.value > 0
+            ? (currentIndex + 1) % pages.value.length
+            : currentIndex - 1 < 0
+              ? pages.value.length - (currentIndex + 1)
+              : currentIndex - 1
+        ].path,
+      )
+    }
+  },
+})
+
+const animationComplete = ref(false)
+
+onMounted(() => {
+  card.value?.addEventListener(
+    'animationend',
+    () => (animationComplete.value = true),
+  )
+})
+</script>
+
+<template>
+  <main
+    ref="card"
+    class="dimensions accent-background transition-ease overflow-auto flex flex-col gap-4 lm:gap-0 sm:gap-2 py-2 px-6 sm:p-4"
+    :class="{
+      'animate__animated-sm animate__delay-1-5s animate__fadeInDown':
+        !reader && !animationComplete,
+      'animate__animated-sm animate__fadeIn': reader && !animationComplete,
+      'lm:rounded-none sm:rounded-xl sm:mt-8 lm:mt-0 lt:mt-0': !reader,
+      '!max-h-full h-full': reader,
+    }"
+  >
+    <Settings />
+    <Navigation />
+    <slot name="header" />
+    <NuxtPage
+      class="sm:fade-mask flex-grow overflow-y-auto h-full sm:py-4 sm:pe-4"
+    />
+    <slot name="footer" />
+  </main>
+</template>
@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { reader } = storeToRefs(usePageStore())
+
+  reader.value = /\/blog\/(.*)/.test(to.path)
+})
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+const config = useAppConfig()
 const meta = {
-  title: "Enderman's Projects",
+  title: 'Page not found',
  description:
-    "A display of my largest projects. Some of them aren't published on YouTube.",
-  image: 'https://enderman.ch/images/logo.png',
-  url: 'https://enderman.ch/projects',
+    'The page you are looking for does not exist. It might have been removed, had its name changed, or is temporarily unavailable.',
+  image: `${config.url}/images/logo.png`,
+  url: config.url,
 }

 useSeoMeta({
@@ -22,9 +23,9 @@ useSeoMeta({
 })

 useHead({
-  title: 'Projects',
+  title: 'Page not found',
  htmlAttrs: {
-    lang: 'en',
+    lang: config.locale || 'en',
  },
  link: [
    {
@@ -37,9 +38,5 @@ useHead({
 </script>

 <template>
-  <section>
-    <p>This page shall be added in a future release.</p>
-  </section>
+  <NotFound />
 </template>
-
-<style scoped lang="scss"></style>
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { defineRouteRules } from '#imports'
+
+const config = useAppConfig()
+const age =
+  new Date(Number(new Date()) - Number(new Date('2003-09-18'))).getFullYear() -
+  1970
+
+const meta = {
+  title: 'About Me',
+  description: `Nice to meet you!~ I'm Andrew, a ${age}-year-old developer from Kaluga, Russia.`,
+  image: `${config.url}/images/logo.png`,
+  url: `${config.url}/about`,
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'About',
+  htmlAttrs: {
+    lang: config.locale || 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+
+defineRouteRules({
+  sitemap: {
+    changefreq: 'yearly',
+    priority: 0.6,
+  },
+})
+</script>
+
+<template>
+  <section class="page">
+    <h3>About me</h3>
+    <Construction />
+    <p>
+      Nice to meet you! I'm Andrew, a {{ age }}-year-old guy from Kaluga,
+      Russia. I have been developing software since I was 10, and I have always
+      been interested in technology. I'm a middle-senior C/++ developer and a
+      junior full-stack engineer.
+      <sup>1</sup>
+      <br />
+      <small>
+        <sup>1</sup>
+        All titles are based on knowledge and confidence, not on official work
+        experience.
+      </small>
+    </p>
+    <p><strong>Here's a little more about myself:</strong></p>
+    <ul>
+      <li>My favorite season is winter.</li>
+      <li>My favorite bands are Black Sabbath, Metallica and Opeth.</li>
+      <li>My favorite field in mathematics is Algebraic Geometry.</li>
+    </ul>
+    <p>
+      I work on all sorts of projects, most of the time simultaneously, which
+      doesn't help with adhering to deadlines at all. However, you can always
+      check them out!
+    </p>
+    <h5>FAQ</h5>
+    <ul class="list-style-type-faq">
+      <li><strong>Why are you called Endermanch?</strong></li>
+      <li>
+        There's no particular reason to it. When I was rebranding my YouTube
+        channel from Ender's Show to Enderman, the short URL was taken. I went
+        thinking for quite some time, and then concluded that adding «ch» at the
+        end sounded pretty good. I was 14 at the time of making that decision.
+      </li>
+      <li>
+        <strong>
+          When will you make a new video? What happened to your schedule?
+        </strong>
+      </li>
+      <li>
+        One day. Haven't been particularly motivated lately, but life's busy. 🙁
+        I'm alive and well, though.
+      </li>
+    </ul>
+  </section>
+</template>
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { formatDate } from 'date-fns'
+import chestAnimation from 'assets/images/chest.avif'
+import { render } from 'vue'
+import { CodeControls } from '#components'
+
+const config = useAppConfig()
+const router = useRouter()
+const route = useRoute()
+
+let slug = route.params.slug
+
+if (Array.isArray(slug)) slug = slug.join('/')
+
+const { data, status } = await useAsyncData('home', () =>
+  queryContent(`/blog/${slug}`).findOne(),
+)
+
+const meta = {
+  title: data.value ? data.value.title : 'Page not found',
+  description: data.value
+    ? data.value.description
+    : 'The page you are looking for does not exist. It might have been removed, had its name changed, or is temporarily unavailable.',
+  url: `${config.url}/blog`,
+}
+
+// When defineOgImage is used, useSeoMeta must exclude ogImage and twitterImage properties.
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  // ogImage: EXCLUDED
+  ogUrl: meta.url,
+  ogType: 'article',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  // twitterImage: EXCLUDED
+  twitterCard: 'summary_large_image',
+})
+
+const clipboard = (el: HTMLElement) => {
+  if (el.textContent)
+    navigator.clipboard.writeText(el.textContent).catch(() => {
+      console.error(
+        'Failed to copy element data to the clipboard! Element data:',
+        el,
+      )
+    })
+}
+
+const content = ref<Element | null>(null)
+const thumbnail: string =
+  data.value!.thumbnail ??
+  `/images/blog/thumbnails/${data.value!._path!.split('/').at(-1)}.png`
+
+// Generate the article's Open Graph image.
+defineOgImageComponent(
+  'ArticleThumbnail',
+  {
+    title: data.value!.title,
+    description: data.value!.description,
+    logo: '/images/logo.png',
+    sectionLogo: '/images/chest.png',
+    thumbnail,
+    alt: data.value!.title,
+  },
+  {
+    fonts: ['Alexandria:700', 'Lato:700'],
+  },
+)
+
+// Hydrate the rendered items.
+onMounted(() => {
+  if (route.hash)
+    content.value
+      ?.querySelector(route.hash.toLowerCase())
+      ?.scrollIntoView({ behavior: 'smooth' })
+
+  content.value
+    ?.querySelectorAll('code:not(pre *)')
+    .forEach((code: Element) => {
+      if (code instanceof HTMLElement)
+        code.addEventListener('click', () => clipboard(code))
+    })
+
+  content.value?.querySelectorAll('pre').forEach((pre: HTMLPreElement) => {
+    const overlay = h(CodeControls, { onCopy: () => clipboard(pre) })
+
+    render(overlay, pre)
+  })
+
+  content.value?.querySelectorAll('a').forEach((a: HTMLAnchorElement) => {
+    if (
+      a.hash &&
+      a.host === window.location.host &&
+      a.pathname.toLowerCase() === route.path.toLowerCase()
+    )
+      a.addEventListener('click', (e: Event) => {
+        e.preventDefault()
+
+        content.value
+          ?.querySelector(a.hash.toLowerCase())
+          ?.scrollIntoView({ behavior: 'smooth' })
+
+        history.replaceState(history.state, '', a.hash)
+      })
+  })
+})
+
+useHead({
+  title: data.value!.title,
+  htmlAttrs: {
+    lang: config.locale || 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div
+    v-if="!data"
+    class="flex flex-col items-center justify-center gap-4 w-full select-none text-center"
+  >
+    <img draggable="false" :src="chestAnimation" alt="The Ender Chest" />
+    <div>
+      <h1 class="font-enchant">Loading document...</h1>
+      <span class="opacity-0 hover:opacity-100 transition-ease">
+        <em>Loading document...</em>
+      </span>
+    </div>
+  </div>
+  <article
+    v-else-if="data"
+    class="flex-grow post snap-normal fade-mask-sm flex flex-col gap-4 overflow-y-auto sm:py-4 sm:pe-4"
+  >
+    <div class="grid-thumbnail grid max-w-[768px] snap-end">
+      <img
+        draggable="false"
+        :src="thumbnail!"
+        alt="Thumbnail"
+        class="grid-thumbnail-image object-cover object-center rounded-xl aspect-[16/9] select-none"
+      />
+      <NuxtLink to="/blog" class="grid-thumbnail-start button-back p-2">
+        <iconify-icon
+          icon="icon-park-solid:back"
+          width="2em"
+          height="2em"
+          class="drop-shadow text-pink-200"
+        />
+      </NuxtLink>
+      <NuxtLink
+        class="grid-thumbnail-end button-twitter p-2"
+        :href="`https://twitter.com/share?url=${config.url}/blog/${slug}&text=${data.title}&hashtags=${data.tags.slice(0, 3).join(',').replace(/ /g, '')}`"
+        target="_blank"
+      >
+        <iconify-icon
+          icon="logos:twitter"
+          width="2em"
+          height="2em"
+          class="drop-shadow"
+        />
+      </NuxtLink>
+      <div
+        class="grid-thumbnail-title accent-fade w-full rounded-b-lg p-2 mt-16"
+      >
+        <h3 class="mb-1">{{ data.title }}</h3>
+        <div class="flex flex-row flex-wrap gap-x-2 gap-y-0">
+          <small class="flex flex-row items-center gap-1 whitespace-nowrap">
+            <iconify-icon icon="mdi:calendar" inline />
+            <strong>
+              {{ formatDate(data.created, 'HH:mm • LLLL do, y') }}
+            </strong>
+          </small>
+          <small class="flex flex-row items-center gap-1 whitespace-nowrap">
+            <iconify-icon icon="mdi:clock-outline" inline />
+            <strong>
+              {{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
+            </strong>
+          </small>
+        </div>
+      </div>
+    </div>
+    <section ref="content" class="page snap-start">
+      <ContentRenderer :value="data" />
+    </section>
+  </article>
+  <NotFound v-else />
+</template>
+
+<style scoped lang="scss">
+.grid-thumbnail {
+  &-image {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: start center;
+
+    max-width: clamp(1px, 100%, 768px);
+    min-height: 100%;
+  }
+
+  &-title {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: end center;
+  }
+
+  &-start {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: start start;
+  }
+
+  &-end {
+    grid-column: 1;
+    grid-row: 1;
+
+    place-self: start end;
+  }
+}
+</style>
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { formatDate } from 'date-fns'
+import { defineRouteRules } from '#imports'
+
+const config = useAppConfig()
+const meta = {
+  title: 'The Ender Chest',
+  description:
+    'A blog about software development, scientific research and Windows quirks.',
+  image: `${config.url}/images/chest.png`,
+  url: `${config.url}/blog`,
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'The Ender Chest',
+  htmlAttrs: {
+    lang: config.locale || 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+
+defineRouteRules({
+  sitemap: {
+    changefreq: 'monthly',
+    priority: 0.7,
+  },
+})
+</script>
+
+<template>
+  <section>
+    <h3 class="mb-2">The Ender Chest</h3>
+    <p class="mb-4">
+      You're browsing the Ender Chest — a blog about software development,
+      scientific research and Windows quirks.
+    </p>
+    <h4 class="mb-2">Recent posts</h4>
+    <ContentList
+      :query="{
+        path: '/blog',
+        where: [{ draft: false }],
+        limit: 3,
+        sort: [{ created: -1 }],
+      }"
+    >
+      <template #default="{ list }">
+        <div class="grid gap-4">
+          <NuxtLink
+            v-for="post in list"
+            :key="post._path"
+            :to="post._path"
+            class="text-inherit hover:text-inherit no-underline"
+          >
+            <article
+              class="post-box relative flex flex-col md:flex-row gap-4 p-2 border-2 rounded-xl transition-ease"
+            >
+              <img
+                draggable="false"
+                :src="
+                  post.thumbnail ??
+                  `/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
+                "
+                :alt="post.title"
+                class="md:flex-grow-[2] md:basis-0 xl:flex-grow-1 object-cover object-center aspect-[16/9] w-fit md:w-0 xl:w-fit h-full max-h-[300px] rounded-xl"
+              />
+              <div class="md:flex-grow-[3] md:basis-0 xl:flex-grow-1 w-full">
+                <h3 class="post-title md:line-clamp-2 md:overflow-ellipsis">
+                  {{ post.title }}
+                </h3>
+                <p
+                  class="post-description mb-0 md:line-clamp-4 md:overflow-ellipsis"
+                >
+                  {{ post.description }}
+                </p>
+
+                <div class="flex flex-row flex-wrap gap-2 py-2">
+                  <small
+                    v-for="(tag, index) in post.tags.slice(0, 3)"
+                    :key="index"
+                    class="post-tag px-2 py-1 rounded-xl border whitespace-nowrap"
+                  >
+                    {{ tag }}
+                  </small>
+                  <small
+                    v-if="post.tags.length > 3"
+                    class="post-tag px-2 py-1 rounded-xl border whitespace-nowrap"
+                  >
+                    {{ post.tags.length - 3 }} more
+                  </small>
+                </div>
+
+                <div class="post-details py-2">
+                  <div class="flex flex-row items-center gap-2">
+                    <iconify-icon icon="mdi:calendar" />
+                    <small class="whitespace-nowrap">
+                      {{ formatDate(post.created, 'HH:mm • LLLL do, y') }}
+                    </small>
+                  </div>
+                  <div
+                    v-if="post.updated"
+                    class="flex flex-row items-center gap-2"
+                  >
+                    <iconify-icon icon="mdi:pencil" />
+                    <small class="whitespace-nowrap">
+                      {{ formatDate(post.updated, 'HH:mm • LLLL do, y') }}
+                    </small>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                class="post-pocket border-l border-t absolute bottom-0 right-0 uppercase rounded-tl-xl flex flex-row items-center gap-2 p-2"
+              >
+                <iconify-icon icon="mdi:clock-outline" />
+                <small class="whitespace-nowrap font-mono font-small">
+                  {{ post.readingTime.text }}
+                </small>
+              </div>
+            </article>
+          </NuxtLink>
+        </div>
+      </template>
+
+      <template #not-found>
+        <div class="flex flex-col justify-center items-center gap-4">
+          <span>No posts found 🙁</span>
+          <NuxtLink to="/">Back to index</NuxtLink>
+        </div>
+      </template>
+    </ContentList>
+  </section>
+</template>
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { defineRouteRules } from '#imports'
+
+const config = useAppConfig()
 const meta = {
  title: 'Enderman',
-  description:
-    'A software engineer, a malware enthusiast and, most importantly, a weird tall creature.',
-  image: 'https://enderman.ch/images/logo.png',
-  url: 'https://enderman.ch/',
+  description: config.description,
+  image: `${config.url}/images/logo.png`,
+  url: config.url,
 }

 useSeoMeta({
@@ -34,30 +36,36 @@ useHead({
    },
  ],
 })
+
+defineRouteRules({
+  sitemap: {
+    changefreq: 'yearly',
+    priority: 1,
+  },
+})
 </script>

 <template>
-  <section>
-    <h3 class="alex">Welcome 👋</h3>
+  <section class="page">
+    <h3>Welcome 👋</h3>
    <p>
      I'm <strong>Enderman</strong> &ndash; a software engineer, a malware
      enthusiast and most importantly, a weird tall creature. I have over 300K
-      subscribers on
-      <a class="link-hi" href="https://go.enderman.ch/youtube">YouTube</a> and
-      over 20K followers on
-      <a class="link-hi" href="https://go.enderman.ch/twitter">Twitter</a>.
-      Sometimes I wish there were 48 hours in a day.
+      subscribers on <a :href="`${config.shortener}/youtube`">YouTube</a> and
+      over 25K followers on
+      <a :href="`${config.shortener}/twitter`">Twitter</a>. Sometimes I wish
+      there were 48 hours in a day.
    </p>
-    <div class="row g-3">
-      <div class="col-12 col-md-8">
-        <h5 class="alex">What I do</h5>
+    <div class="flex flex-col md:flex-row gap-4">
+      <div class="md:basis-0 md:flex-grow-[2]">
+        <h6>What I do</h6>
        <ul class="list-style-type-do">
          <li>
            I develop cross-platform software. My language of choice is usually
            <strong>C/C++</strong> for desktop applications and any common
            backend stack with framework-loaded TypeScript for web. You can take
            a look at my code on
-            <a class="link-hi" href="https://go.enderman.ch/github">GitHub</a>.
+            <a :href="`${config.shortener}/github`">GitHub</a>.
          </li>
          <li>
            I have the most unnecessary, yet fascinating knowledge about
@@ -70,21 +78,22 @@ useHead({
          <li>
            I research and analyze modern malware, educate computer users about
            it and preserve history. The repository can be found
-            <a class="link-hi" href="https://go.enderman.ch/repository">here</a
-            >.
+            <a :href="`${config.shortener}/repository`">here</a>.
          </li>
          <li>I make videos for you to enjoy!</li>
        </ul>
      </div>
-      <div class="col-12 col-md-4">
-        <h5 class="alex">What I enjoy</h5>
+      <div class="md:basis-0 md:flex-grow-[1]">
+        <h6>What I enjoy</h6>
        <ul class="list-style-type-enjoy">
          <li>Teaching</li>
          <li>Mathematics</li>
+          <li>Technology</li>
+          <li>Video Production</li>
          <li>Philosophy</li>
          <li>Geopolitics</li>
          <li>
-            <a class="link-hi" href="https://go.enderman.ch/chess">Chess</a>
+            <a :href="`${config.shortener}/chess`">Chess</a>
          </li>
          <li>Solitude</li>
        </ul>
@@ -97,5 +106,3 @@ useHead({
    </p>
  </section>
 </template>
-
-<style scoped lang="scss"></style>
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { defineRouteRules } from '#imports'
+
+const config = useAppConfig()
+const projects = [
+  {
+    name: 'MalwareWatch',
+    description:
+      'A website that tracks malware and ransomware attacks in real time.',
+    url: 'https://malwarewatch.org',
+  },
+  {
+    name: 'You Are an Idiot! (dot cc)',
+    description: 'A recreation of the infamous "You Are an Idiot!" virus.',
+    url: 'https://youareanidiot.cc',
+  },
+  {
+    name: 'HURR-DURR (dot cc)',
+    description: 'A recreation of the infamous "HURR-DURR" virus.',
+    url: 'https://hurr-durr.cc',
+  },
+  {
+    name: 'ClickSword',
+    description: 'A clicker game with a sword theme.',
+    url: 'https://clicksword.org',
+  },
+  {
+    name: 'Windows XP Keygen / UMSKT',
+    description: 'A key generator for Windows XP.',
+    url: `${config.shortener}/xpkeygen`,
+  },
+]
+
+const meta = {
+  title: "Enderman's Projects",
+  description:
+    "A display of my largest projects. Some of them aren't published on YouTube.",
+  image: `${config.url}/images/logo.png`,
+  url: `${config.url}/projects`,
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'Projects',
+  htmlAttrs: {
+    lang: config.locale || 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+
+defineRouteRules({
+  sitemap: {
+    changefreq: 'monthly',
+    priority: 0.7,
+  },
+})
+</script>
+
+<template>
+  <section class="page">
+    <h3>Projects</h3>
+    <Construction />
+    <p><strong>My current projects are:</strong></p>
+    <ul>
+      <li v-for="(item, index) in projects" :key="index">
+        <a :href="item.url">
+          {{ item.name }}
+        </a>
+      </li>
+    </ul>
+    <p>
+      The list above is not exhaustive and only includes the most recent and
+      largest projects I remembered while constructing this page.
+    </p>
+  </section>
+</template>
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { defineRouteRules } from '#imports'
+
+const config = useAppConfig()
+const fqdn = config.url.split('//')[1]
+
+const socials = [
+  {
+    name: 'YouTube',
+    url: `${config.shortener}/youtube`,
+    icon: {
+      name: 'logos:youtube-icon',
+      color: 'white',
+    },
+  },
+  {
+    name: 'Andrew',
+    url: `${config.shortener}/andrew`,
+    icon: {
+      name: 'logos:youtube-icon',
+      color: 'white',
+    },
+  },
+  {
+    name: 'Twitch',
+    url: `${config.shortener}/twitch`,
+    icon: {
+      name: 'fa:twitch',
+      color: '#B68CFF',
+    },
+  },
+  {
+    name: 'TikTok',
+    url: `${config.shortener}/tiktok`,
+    icon: {
+      name: 'logos:tiktok-icon',
+      color: 'white',
+    },
+  },
+  {
+    name: 'Twitter',
+    url: `${config.shortener}/twitter`,
+    icon: {
+      name: 'logos:twitter',
+      color: 'white',
+    },
+  },
+  {
+    name: 'Telegram',
+    url: `${config.shortener}/telegram`,
+    icon: {
+      name: 'logos:telegram',
+      color: 'white',
+    },
+  },
+  {
+    name: 'Discord',
+    url: `${config.shortener}/discord`,
+    icon: {
+      name: 'logos:discord-icon',
+      color: 'white',
+    },
+  },
+  {
+    name: 'GitHub',
+    url: `${config.shortener}/github`,
+    icon: {
+      name: 'fa:github',
+      color: 'white',
+    },
+  },
+  {
+    name: 'Steam',
+    url: `${config.shortener}/steam`,
+    icon: {
+      name: 'fa:steam',
+      color: 'white',
+    },
+  },
+]
+
+const meta = {
+  title: 'Enderman Online',
+  description:
+    'Discover me on your favorite social media and find ways to contact me here.',
+  image: `${config.url}/images/logo.png`,
+  url: `${config.url}/projects`,
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'Socials',
+  htmlAttrs: {
+    lang: config.locale || 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+
+defineRouteRules({
+  sitemap: {
+    changefreq: 'yearly',
+    priority: 0.7,
+  },
+})
+</script>
+
+<template>
+  <section class="page">
+    <h3>Online presence</h3>
+    <Construction />
+    <div class="flex flex-col md:flex-row gap-4">
+      <div class="md:basis-0 md:flex-grow-[1]">
+        <h5>Social media</h5>
+        <ul class="list-style-type-none p-0">
+          <li v-for="(page, index) in socials" :key="index">
+            <NuxtLink target="_blank" rel="noopener" :href="page.url">
+              <iconify-icon
+                :icon="page.icon.name"
+                :style="{ color: page.icon.color }"
+                width="1em"
+                height="1em"
+                inline
+              />
+              <span class="mx-2">{{ page.name }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+      <div class="md:basis-0 md:flex-grow-[3]">
+        <h5>Contact me</h5>
+        <p>
+          Personal:
+          <EMail :address="`contact@${fqdn}`" subject="Hey Enderman!" /><br />
+          Manager: <EMail :address="`manager@${fqdn}`" /><br />
+          Abuse: <EMail :address="`abuse@${fqdn}`" />
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,21 @@
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      local: {
+        getItem(item: string) {
+          if (import.meta.client) {
+            return localStorage.getItem(item)
+          } else {
+            return undefined
+          }
+        },
+
+        setItem(item: string, value: any) {
+          if (import.meta.client) {
+            return localStorage.setItem(item, value)
+          }
+        },
+      },
+    },
+  }
+})
@@ -0,0 +1,76 @@
+import aboutIcon from 'assets/images/icons/accent/info.avif'
+import projectIcon from 'assets/images/icons/defrag.avif'
+import socialIcon from 'assets/images/icons/user.avif'
+import blogIcon from 'assets/images/icons/book.avif'
+
+export const usePageStore = defineStore('page', () => {
+  const title: string = 'Enderman'
+  const description: string = 'official website'
+  const keywords: string =
+    'endermanch, enderman, developer, youtuber, filmmaker, artist, engineer'
+
+  const pages = ref([
+    {
+      name: 'Home',
+      path: '/',
+    },
+    {
+      name: 'About',
+      path: '/about',
+      icon: {
+        src: aboutIcon,
+        alt: 'Information',
+      },
+    },
+    {
+      name: 'Projects',
+      path: '/projects',
+      icon: {
+        src: projectIcon,
+        alt: 'Blocks',
+      },
+    },
+    {
+      name: 'Socials',
+      path: '/social',
+      icon: {
+        src: socialIcon,
+        alt: 'Users',
+      },
+    },
+    {
+      name: 'Blog',
+      path: '/blog',
+      icon: {
+        src: blogIcon,
+        alt: 'Book',
+      },
+    },
+  ])
+
+  const reader = ref<boolean>(false)
+  const animate = ref<boolean>(false)
+  const dark = ref<boolean>(false)
+
+  function _autoFetchPages() {
+    while (pages.value.length) pages.value.pop()
+
+    useRouter()
+      .getRoutes()
+      .forEach((route) =>
+        pages.value.push({
+          name: route.path.slice(1)[0].toUpperCase() + route.path.slice(2),
+          path: route.path,
+        }),
+      )
+  }
+
+  return {
+    title,
+    description,
+    keywords,
+    pages,
+    reader,
+    animate,
+  }
+})
@@ -0,0 +1,38 @@
+import packageJSON from './package.json'
+
+interface TitleConfig {
+  full: string
+  short: string
+}
+
+interface BuildConfig {
+  date?: string
+  version: string
+}
+
+type config = {
+  url: string
+  shortener: string
+  name: string
+  title: TitleConfig
+  description: string
+  locale: string
+  build: BuildConfig
+}
+
+export default {
+  url: 'https://enderman.ch',
+  shortener: 'https://go.enderman.ch',
+  name: packageJSON.name || 'app',
+  title: {
+    full: "Enderman's Website",
+    short: 'Enderman',
+  },
+  description:
+    'A software engineer, a malware enthusiast and, most importantly, a weird tall creature. I have over 300K subscribers on YouTube and over 20K followers on Twitter.',
+  locale: 'en',
+  build: {
+    date: new Date().toISOString().split('T')[0],
+    version: packageJSON.version || '0.0.0',
+  },
+} satisfies config as config
@@ -0,0 +1,13 @@
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+import { asSitemapCollection } from '@nuxtjs/sitemap/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection(
+      asSitemapCollection({
+        type: 'page',
+        source: '**/*.md',
+      }),
+    ),
+  },
+})
@@ -0,0 +1,35 @@
+---
+title: Hello World!
+description: I created this post to test @nuxt/content.
+authors: ['Enderman']
+created: 2023-08-12T16:40:09Z
+updated: 2024-02-18T20:31:54Z
+draft: false
+tags: ['hello', 'world']
+---
+
+# Hello!
+
+This is an example piece of content.
+
+Here's some code:
+
+```js
+console.log('Hello, world!');
+```
+
+And here's a list:
+* Item 1
+* Item 2
+* ```css
+    .example {
+        color: red;
+    }
+```
+* `df -h`
+
+And here's a link to [Nuxt.js](https://nuxtjs.org/).
+
+And here's an image:
+![Nuxt.js](https://nuxtjs.org/logos/nuxt-icon.png)
+
@@ -0,0 +1,714 @@
+---
+title: The Windows Context Menu – Is It a Lost Cause?
+description: A deep dive into the Windows context menu API and customization options it offers. Shell components for beginners and context menu cleanup.
+authors: ['Enderman']
+created: 2023-08-13T15:51:19Z
+updated: 2024-02-18T21:32:12Z
+draft: false
+tags: ['windows', 'context menu', 'customization', 'registry', 'windows tweaks', 'shell', 'shell extensions', 'shell components', 'context menu handlers', 'windows 10', 'windows 11']
+---
+
+# The Windows context menu is... poorly made.
+Third-party software developers adding oil into this dumpster fire aren't helping with it.
+**It's not their fault**, though,
+as there is no common standard and almost no documentation for adding entries to the context menu.
+
+It's safe to say that currently, there's no salvation for it.
+At the very least, it's working and serving millions of users.
+The new Windows 11 context menu shows Microsoft keeps pressing onward with their all-time classic:
+writing new, less friendly, less extensible APIs from scratch,
+simultaneously piling up layers upon layers of untested code atop the previous versions they can't entirely get rid of due to deep backwards compatibility problems that will inevitably arise.
+
+I want to dedicate this article to _actually customizing_ the Windows 10
+(incidentally, also 11 Legacy) context menu to your liking
+instead of just complaining about its inner workings.
+After reading this article completely, you should be able to bring your menu from this abomination...
+
+![Before](/images/blog/assets/the-windows-context-menu/before.png)
+
+**...to this!**
+
+![After](/images/blog/assets/the-windows-context-menu/after.png)
+
+Be wary — there's _plenty_ of registry digging involved. And the terrible part is...
+
+**Forget any logic when dealing with registry keys.**
+Nowadays, registry structure is the least of all concerns.
+The idea of using registry as a coherent setting list has long since been abandoned,
+and nobody seems to care about it, as the end user doesn't. 
+If someone does — they know what they're doing, and they will likely not complain,
+because they have abused registry the same way at least once. 😉
+
+Whilst there are layers of abstraction applied to the most Windows settings,
+the context menu is, unfortunately, left aside.
+And much to our dismay, its backend is also janky, terrible and tangled up.
+The only fair question to reader from me is **«Do you really think it's worth your time?»**.
+And if your answer is an astounding **«Hell yeah»**,
+and you are as much of a perfectionist as I am, buckle up and prepare for several hours of pure joy.
+
+::card
+---
+type: warning
+title: Before we begin
+---
+Invoking `sfc /scannow` or `dism /restorehealth` will likely interfere with your context menu,
+as Microsoft is peculiar — they had customization via direct registry manipulation in mind for more granular control,
+but their tools **aren't adapted** to store so meticulously tweaked settings.
+This isn't anything new — that hasn't changed ever since integrity checks were introduced in Windows XP.
+_No need to worry, though!_ The aforementioned tools will keep working; however, some of your tweaks might be reset
+upon execution.
+::
+
+## Context menu components
+There are two main components the context menu is composed of:
+
+* **Shell entries** — provided locally and managed by the registry;
+* **Context menu handlers** — provided and managed by external software.
+
+Neither of them is documented well, but
+there is some developer documentation for handlers available [on Microsoft's website](https://go.enderman.ch/Fm4t3).
+It explains how they work internally, but that doesn't really help our case.
+As for the shell entries, I couldn't find anything.
+
+Certainly a shame! Shell entries are so much more flexible and customizable.
+In fact, **you don't get any customization** with context menu handlers whatsoever,
+unless the developer was paid and bothered enough to read most of the documentation above.
+
+To let you tweak context menu settings directly through their app,
+they have to implement **both the handler and the endpoints** for handler settings,
+which are commonly simple registry values.
+Microsoft hasn't provided any convention for software developers to follow,
+so you're at the mercy of them providing you with a friendly user interface to tweak the handler.
+
+[7-Zip](https://go.enderman.ch/7-zip) serves as a neat example of great software design —
+the developer here allows you to extensively tweak their handler.
+
+![7-Zip Context Menu Settings.png](/images/blog/assets/the-windows-context-menu/7-zip-context-menu-settings.png)
+
+[MobaXterm](https://go.enderman.ch/mobaxterm) also is an illustrative example of the case where you can customize
+the shell integration from the application itself.
+The developers of that software use shell entries instead of context menu handlers, which seems like an odd choice
+for this case.
+_It seems like someone was underpaid!_ 😊
+
+![MobaXterm Context Menu Settings.png](/images/blog/assets/the-windows-context-menu/mobaxterm-context-menu-settings.png)
+
+In conclusion, there are three types of applications in terms of friendliness towards context menu customization:
+
+* **Apps using context menu handlers with customizable settings** — the friendliest;
+* **Apps using shell entries** — customizable through registry hacks;
+* **Apps using context menu handlers without settings** — the entries are uneditable.
+
+The first case is the simplest and isn't worth talking about —
+consult the documentation for the software in question to find all the necessary tweaks.
+**The rest of the cases are discussed in this article.**
+
+### Shell entries
+For starters, all the tweaking happens inside `HKEY_CLASSES_ROOT` — alias for `HKEY_LOCAL_MACHINE\Software\Classes`.  
+That registry key contains all the data about shell components and file extension handlers.
+
+For example, data under the `exefile` key will exclusively apply to files with the `.exe` extension.
+A trusty old method [«companion» viruses](https://go.enderman.ch/Kvo3u) utilized back in the day to «accompany» their victims —
+the executable (`.exe`/`.com`) files was a simple pass-through setup:
+the virus executable was specified as the handler for all other executable files.
+A belarusian virus from 2005, [Neshta.A](https://go.enderman.ch/2WeQ0), worked exactly this way and caused heaps of damage.
+
+Since all the settings inside the `HKCR` key are divided into types,
+editing the context menu for each file type and shell extension manually is unavoidable.
+
+_Yeah..._
+
+This is **abysmal**, and, unfortunately, there is no better approach.
+While you're likely already reconsidering your choices, let me try to pull you back in and explain the basics.
+That way you can at least tweak the menu for the extensions you work with the most
+and bring the most noticeable context menu areas up to par...
+
+There _are_ some minor generalizations present in the key.
+For instance, there are wildcard entries for **every** file system object,
+**every** image, **every** media file and so on.
+Nonetheless, Microsoft has taken a horrible approach with the context menu from the beginning.
+Even though such a disarray always annoyed me, I know full well there's no way for them to fix it now.
+_That's how sometimes life is._
+We'll tackle the generalized keys a bit later, let's start simple.
+
+#### General structure
+The following figure is what seems to be the general structure of an extension registry key:
+
+![EXE File Registry Structure.png](/images/blog/assets/the-windows-context-menu/exe-file-registry-structure.png)
+
+The structure may vary for some extensions, but you can almost be sure you're in the right place if the key contains the `Shell` subkey.
+Children of the `Shell` subkey are the «shell entries» — locally provided customizable entries of the context menu.
+
+::card
+---
+type: info
+title: Clearing up the confusion
+---
+The terminology may be a little confusing, since Microsoft hasn't ever offered a standard nomenclature for the
+context menu. The article tosses plenty of loose terms around, so here's the nomenclature I have resorted to
+for better understanding: 
+* **Shell** is the Windows Explorer;
+* **Shell entry** is a singular entry within the context menu — the atomic component;
+* **Shell integration** is the general footprint of software within the context menu and may consist of one or
+  more shell entries;
+* **Shell extension** is a general term for a plugin for the Windows Explorer — the **context menu handler** is a
+  particular case of a shell extension;
+* **Shell component** is a broad term for a component that helps the shell interact with the system — that includes
+  shell extensions, file extensions, protocols, etc.
+
+If this doesn't show how big of a predicament Microsoft is in with the context menu, I don't know what does.
+I tried my best to keep the technical language as clear as possible. 😒
+::
+
+#### Editing entries
+Locally provided entries always available for a quick and dirty edit are stored under the `Shell` subkey.  
+Entries provided by software — the context menu handlers — are stored under the `ShellEx` subkey.
+
+![Directory.png](/images/blog/assets/the-windows-context-menu/directory.png)
+
+Since registry key names are case-insensitive by design in Windows, capitalization plays no role.
+**The value names, however, are** — keep that in mind, as in some cases it might bite.
+The context menu doesn't seem to care.
+
+_Truly an amazing specification!_
+
+
+#### Executing entries
+A shell entry must contain the `command` subkey to execute commands.
+The **default value** of the subkey controls execution on click of the shell entry and follows Batch syntax...
+_to some extent_. You cannot have «extended» Batch logic in the entries,
+which immeasurably disappointed me, so much so, that I wrote two neat utilities called
+[quiet](https://go.enderman.ch/elevate) and [elevate](https://go.enderman.ch/elevate)<sup>sudo for Windows [anyone](https://go.enderman.ch/XuDXW)?</sup> for that specific purpose.
+
+No matter how hard I tried, I could not find the exact specification of the incomplete Batch logic the default value uses.
+
+![Shell Entry Structure.png](/images/blog/assets/the-windows-context-menu/shell-entry-structure.png)
+
+![Command Verb.png](/images/blog/assets/the-windows-context-menu/command-verb.png)
+
+My suggestion is to treat the default `command` value as **raw command line** (e.g. Run box),
+with an exception to the following two macros:
+* `%1` — the absolute file path without quotes  
+  When the shell entry is executed after a right-click on `C:\Users\bleh\p.txt`,
+  the `%1` in the context of the command line is equivalent to `C:\Users\bleh\p.txt`;
+* `%V` — the absolute directory path without quotes.
+
+::card
+---
+type: error
+title: Inconsistency
+---
+Keep in mind that the `%1` macro is the Batch version of `argv[1]` — the first item in the C argument vector.
+When a context menu is invoked from within, say, a library, the argument vector stops making sense 
+because a library is a Windows Shell feature, meaning it's sophisticated. Opening a library internally
+**requires a [different API](https://go.enderman.ch/KuKR4)** to opening a folder, or even executing a file.
+In such cases, the `%1` macro **does not exist** in the context of the command line. This is also likely
+the reason why libraries are in a separate category to folders in terms of shell entries.
+The directory macro `%V` also sometimes falls flat depending on the shell entry it's being invoked from.
+**Brilliant consistency!**
+::
+
+On rare occasions, the default value is left unset, with `DelegateExecute` alongside it containing a GUID.
+When that's the case, the command handler is implemented through the `IExecuteCommand` COM interface,
+and hence cannot be customized by normal means.
+
+**Why is that a thing?** Ask me a simpler question. It could be a compatibility layer for C, but your guess is as good as mine.
+
+![DelegateExecute.png](/images/blog/assets/the-windows-context-menu/delegateexecute.png)
+
+#### Adding entries
+Making new entries isn't as bad as managing existing ones,
+so I managed to scrabble it into a sort of algorithm, if that makes sense:
+
+1. Locate the target extension.
+2. **Careful!** Some extensions may be buried within other extensions.
+   As an example, the [Folder Background](#folder-background) extension is located under the [Folder](#folder) extension `Directory` key in the `Background` subkey.
+3. Navigate to the `shell` key.
+   If there is none, and you're _confident_ there should be,
+   try creating one — **chances are high** it isn't going to break Windows.<sub>(no, seriously)</sub>
+4. Create a new key, the name **must be alphanumeric**. The name is case-insensitive.
+5. Create the `command` subkey.
+6. Specify the command line you want to execute on click in the **default value**.
+7. The entry should appear in the context menu. If it does not, restart Explorer.
+   If it still doesn't appear, you probably screwed up the procedure — return to step 1.
+   If you verified everything for sure, then the extension is simply **not registered** in the shell.
+
+#### Nesting entries
+You can nest entries too!
+1. Repeat the first 4 steps from [Adding entries](#adding-entries).
+   Don't add the `command` key just yet.
+2. Create another `shell` key.
+3. Inside it, create a subkey **called anything else, but** `command`.
+4. Working within the subkey, repeat steps 5–7.
+5. Navigate back to the root shell entry
+6. Create an empty `REG_SZ` value called `SubCommands`.
+
+![Nested Entries Structure.png](/images/blog/assets/the-windows-context-menu/nested-entries-structure.png)
+
+![SubCommands.png](/images/blog/assets/the-windows-context-menu/subcommands.png)
+
+It's possible to have an entry include a single nested entry as well.
+
+
+![Nested Entries.png](/images/blog/assets/the-windows-context-menu/nested-entries.png)
+
+To control the parent context menu entry, use the outer `Shell` subkey.
+
+![Nested Entries Order.png](/images/blog/assets/the-windows-context-menu/nested-entries-order.png)
+
+To control its children, use the inner `Shell` subkeys.
+
+![Nested Entries Order 2.png](/images/blog/assets/the-windows-context-menu/nested-entries-order-2.png)
+
+#### Customizing entries further
+There are a plethora of options when it comes to customizing the shell entries.
+_Too bad they're all undocumented._
+By default, the context menu items **borrow their names** from the respective shell entries they're owned by.
+
+##### Name
+To override the default name,
+you can either use the default value or specify a `REG_SZ` value called `MUIVerb` inside the respective `shell` key
+for the shell entry.
+MUIVerb takes precedence over the default value.
+
+When it comes to the name, the sky is the limit.
+_Actually, Unicode is the limit._
+Either way, put in anything you want; **it's going to work**.
+
+##### Icon
+To enable the icon for your shell entry,
+you should use the `REG_SZ` value called `Icon` inside the respective `shell` key for the shell entry.
+
+It uses that unmistakably distinct and clumsy **WinAPI resource syntax** to specify a direct link to the icon within
+a file containing resources.
+
+```csv
+PATH_TO_FILE_WITH_ICON_RESOURCES,INDEX
+```
+
+If you want to select the first icon (in that case, the `INDEX` part is 0),
+the `INDEX` part can be omitted completely:
+
+```csv
+PATH_TO_FILE_WITH_ICON_RESOURCES
+```
+
+The following expressions are completely valid and are going to work:
+
+```csv
+"C:\Windows\system32\cmd.exe"
+C:\Windows\regedit.exe
+"C:\Windows\explorer.exe",0
+C:\Windows\system32\cmd.exe,0
+cmd.exe
+shell32.dll,3
+SHELL32.DLL,10
+"C:\Windows\system32\SHELL32.DLL",9
+```
+
+You can omit the quotes and absolute paths depending on the `%PATH%` variable that unholy concoction of an API uses.
+**Spoiler:** they don't match against the system `%PATH%`.
+Only God knows what paths it's able to parse by default.
+`C:\Windows` and `C:\Windows\system32` always work for sure, though.
+
+It's still highly recommended to supply the absolute path, the `%PATH%` variables of the shell icon picker and the
+shell entry **do not seem to correspond**.
+
+::card
+---
+type: idea
+title: Tip
+---
+You can use the Explorer folder icon picker to acquire the icon DLL and visually calculate the offset
+of the desired icon.
+For instance, the one I selected on the screenshot has an index of `5`.
+The indexing begins with 0 and **ascends in columns**.
+::
+
+![Icon Viewer.png](/images/blog/assets/the-windows-context-menu/icon-viewer.png)
+
+It's also possible to pull resource strings from files containing string tables.
+
+![DLL Syntax.png](/images/blog/assets/the-windows-context-menu/dll-syntax.png)
+
+##### Separators
+Another integral part of the context menu, which is hardly documented by anyone.
+Managing them is also rather quirky and takes getting used to.
+Separators in shell entries are relative to the item they're being enabled for and **can overlap** without any issue.
+
+Use `SeparatorBefore` and `SeparatorAfter` empty `REG_SZ` values
+to add a separator before or after the shell entry being edited, respectively.
+
+![Separators.png](/images/blog/assets/the-windows-context-menu/separators.png)
+
+##### Appear in the Shift+Click context menu only
+It's possible to «hide» the shell entry from an ordinary context menu right-click.
+Such a shell entry is called «extended».
+
+Enable that functionality by creating an empty `REG_SZ` value called `Extended` inside the `shell` key for the
+respective shell entry.
+
+##### Hide in safe mode
+To disable the shell entry in safe mode,
+create an empty `REG_SZ` value called `HideInSafeMode` inside the `shell` key for the respective shell entry.
+
+##### Never default
+The bold context menu item shown at the top is considered to be the default action for the file type.
+An example of a default shell entry would be «Open» for folders.
+
+![Media.png](/images/blog/assets/the-windows-context-menu/media.png)
+
+There can be no default entry at all, and that's perfectly fine.
+
+To disable the shell entry from becoming default,
+add an empty `REG_SZ` value called `NeverDefault` inside the `shell` key for the respective shell entry.
+
+##### Pass to context menu handler
+If there is a context handler available for invocation on shell entry click, it's possible to specify a so-called Verb Handler.
+
+Create a new `REG_SZ` value `VerbHandler` inside the `shell` key for the respective shell entry
+and specify the GUID of the context menu handler in the value.
+
+![Context Menu Handler 1.png](/images/blog/assets/the-windows-context-menu/context-menu-handler-1.png)
+
+![Context Menu Handler 2.png](/images/blog/assets/the-windows-context-menu/context-menu-handler-2.png)
+
+##### No working directory
+Disables the working directory from being added to the environmental path in the context of the application being run.
+
+To disable pass-through of the working directory to the application,
+create an empty `REG_SZ` value called `NoWorkingDirectory` inside the `shell` key for the respective shell entry.
+
+##### Other options
+Some options, though might sound obvious, have me scratching the back of my head.
+Please tag me on [Twitter](https://go.enderman.ch/twitter) or [send a mail](mailto:[email protected]) my way if you
+have the knowledge.
+
+**A few examples:**
+* `CanonicalName`;
+* `CommandStateHandler`;
+* `CommandStateSync`;
+* `Description`;
+* `VerbName`.
+
+#### Deleting entries
+Even simpler — it's the opposite of adding one.
+
+1. Locate the target extension.
+2. Navigate to the `shell` subkey.
+3. Find the shell entry to delete. The default value of the `command` key will usually contain the
+   executable name, it's best to verify the target application before deletion.
+4. Delete the key.
+
+**Multiple shell entries** can sometimes correspond to the **same item** in the context menu,
+which might result in the item remaining in place despite the deletion.
+
+#### Sorting entries
+That's easily the most hilarious procedure of them all. I even [tweeted](https://go.enderman.ch/3hcO9) about it.
+
+The only way to sort the context menu items is...
+**by managing the alphabetical order of their respective shell entries in the registry**.  
+Seriously, I am not kidding.
+Let the screenshots speak for themselves.
+
+![Alphabetical Sort 1.png](/images/blog/assets/the-windows-context-menu/alphabetical-sort-1.png)
+
+![Alphabetical Sort 2.png](/images/blog/assets/the-windows-context-menu/alphabetical-sort-2.png)
+
+_Yeah... I'd rather leave all the obscene comments aside._
+
+##### Position override
+Another silly feature with a limited number of use cases
+that's likely been created due to all prior mess Microsoft has created.
+It's possible to manually override the position of a context menu item to be...
+either at the very top, or the very bottom.
+_Still doesn't top off the alphabetical sorting between the registry peers..._
+
+In the `shell` subkey under the respective shell entry, create a `REG_SZ` value called `Position`.  
+To enforce the context menu item to appear at the very top,
+insert `Top` into the value data, otherwise insert `Bottom`.
+
+Sometimes directly enforcing the position happens to be necessary.
+For instance, Microsoft dumps the usual sorting strategy at the very bottom of the context menu,
+where the display and personalization settings reside.
+They simply set the `Bottom` position for each of the entries.
+
+**What happens when there are multiple shell entries enforced to be in a set position?**
+The alphabetical sorting makes a comeback,
+it occurs between the shell entries with overridden positions just the same way.
+
+![Position Override.png](/images/blog/assets/the-windows-context-menu/position-override.png)
+
+### Context menu handlers
+Compared to shell entries, there isn't much to be tweaked via registry in context menu handlers.
+Their general location is the `ContextMenuHandlers` subkey under the `shellex` key in the respective shell entry.
+
+![Context Menu Handler 3.png](/images/blog/assets/the-windows-context-menu/context-menu-handler-3.png)
+
+Most of the time, the only piece of data they contain is a lonely GUID of the respective handler.
+
+![Context Menu Handler 4.png](/images/blog/assets/the-windows-context-menu/context-menu-handler-4.png)
+
+#### Removing handlers
+
+A context menu handler always directly corresponds to some child under the `ContextMenuHandlers` key.
+Therefore, all that has to be done to remove a handler is removal of the **respective child key**.
+
+I strongly suggest writing **the GUID** and **the location** of the removed entry down somewhere,
+so that there is a way to roll back any time later.
+
+![Context Menu Handler 5.png](/images/blog/assets/the-windows-context-menu/context-menu-handler-5.png)
+
+#### Adding handlers
+
+Adding a custom handler is complicated.
+It's not as trivial as adding a shell entry —
+it requires implementing a handler interface using a language
+supporting Windows API or an abstraction layer on top of it.
+C# would be a decent choice precisely for this task.
+
+However, it's just a waste of time to implement a handler for a single shell entry,
+unless there's software to go along with it.
+The idea behind context menu handlers is to **make native application experience nicer** for Windows users.
+
+In other words, Microsoft failed to implement an accessible API for the context menu,
+so they did what they do best — shifted the responsibility to the developers writing third-party software.
+
+This is how a partial implementation of the `IContextMenu` interface in C++ looks like:
+
+```cpp
+STDMETHODIMP CShellExtension::InvokeCommand(LPCMINVOKECOMMANDINFO lpcmi) {
+    BOOL fEx = FALSE;
+    BOOL fUnicode = FALSE;
+
+    if(lpcmi->cbSize == sizeof(CMINVOKECOMMANDINFOEX)) {
+        fEx = TRUE;
+        if (lpcmi->fMask & CMIC_MASK_UNICODE) fUnicode = TRUE;
+    }
+
+    if (!fUnicode && HIWORD(lpcmi->lpVerb)) {
+        if (StrCmpIA(lpcmi->lpVerb, m_pszVerb)) return E_FAIL;
+    }
+    else if (fUnicode && HIWORD(((CMINVOKECOMMANDINFOEX *) lpcmi)->lpVerbW)) {
+        if (StrCmpIW(((CMINVOKECOMMANDINFOEX *)lpcmi)->lpVerbW, m_pwszVerb)) return E_FAIL;
+    }
+    else if (LOWORD(lpcmi->lpVerb) != IDM_DISPLAY) {
+        return E_FAIL;
+    }
+    else {
+        MessageBox(
+            lpcmi->hwnd,
+            "The File Name",
+            "File Name",
+            MB_OK | MB_ICONINFORMATION
+        );
+    }
+
+    return S_OK;
+}
+```
+
+The `InvokeCommand()` method is called when a user clicks a context menu item.
+I've taken that example from [Microsoft](https://go.enderman.ch/TArYX).
+
+That whole thing isn't too bad — the logic is far more robust and understandable
+compared to its surface-level registry counterpart, but it certainly requires getting used to WinAPI.
+
+**By definition, it's a requirement to implement interfaces entirely.**
+However, since we're dealing with Microsoft,
+the «interface» in question is actually an _abstract class_ and can be implemented partially.
+
+The `IContextMenu` interface has three methods: 
+* `GetCommandString()` — retrieves the canonical name of the command (optional);
+* `InvokeCommand()` — handles the command (required);
+* `QueryContextMenu()` — adds items to the context menu (required).
+
+The `IContextMenu` interface is the most common one, but there are others,
+such as `IContextMenu2` and `IContextMenu3`.
+Essentially, this is how the context menu handlers work inside.
+
+While all of this is just a brief overview of the API,
+you can learn everything about them and more in the [Shell Developer's Guide](https://go.enderman.ch/W50xJ).
+
+## Dealing with locked keys
+If the registry key is locked, the user you're logged in as is excluded from the ACL.
+Commonly, when the key is locked, it's owned by `TrustedInstaller`.
+When that's the case, it's necessary to reclaim ownership of the key to allow making edits to the ACL.
+There are plenty of ways to do that, I will list two common ones.
+
+### Using external tools
+The idea here is to run `regedit` — the registry editor as the `TrustedInstaller` user directly.
+You can think of `TrustedInstaller` as the Windows equivalent of `root` in Unix-like systems —
+the superuser.
+
+While Windows generally has more granular control over permissions,
+and the idea of having a superuser — **the ultimate authority of the system** — is less prominent and unannounced,
+`TrustedInstaller` is the closest object to a superuser Windows has.
+
+For those wondering, I've already explained [here](https://go.enderman.ch/o2KGt) why
+«sudo for Windows» makes no sense.
+
+##### Process Hacker <sub>[download](https://go.enderman.ch/process-hacker)</sub>
+![Process Hacker.png](/images/blog/assets/the-windows-context-menu/process-hacker.png)
+
+![Process Hacker 2.png](/images/blog/assets/the-windows-context-menu/process-hacker-2.png)
+
+##### Winaero Tweaker <sub>[download](https://go.enderman.ch/winaero)</sub>
+![winaero-tweaker.png](/images/blog/assets/the-windows-context-menu/winaero-tweaker.png)
+
+[Sergey](https://go.enderman.ch/Dr0iS) makes an entirely valid point in his Winaero Tweaker:
+
+> **Warning!!!**
+> 
+> Running programs under TrustedInstaller privileges, especially a file manager app or Regedit,exe can be
+> VERY risky and harmful for your OS. It is like a God mode in a first-person shooter game, where nothing can
+> stop your actions, so if you execute a malware infected file as TrustedInstaller, it can cause damage to the
+> Windows operating system. Use this mode only if you perfectly understand what you are doing and if there is
+> no simpler way than running it as Trusted Installer.
+
+This is exactly the reason I resort to setting permissions manually.
+It's a bit more time-consuming, but it's safer.
+
+### Setting permissions manually
+The trusty old way to do it is to manually set permissions for the key.  
+Once you get the hang of it, it really isn't that difficult.
+
+![Permissions.png](/images/blog/assets/the-windows-context-menu/permissions.png)
+
+##### General procedure
+1. Navigate to the key you want to claim ownership of;
+2. Open the «Properties» window;
+3. Head over to the «Advanced» tab;
+4. The current owner is shown at the top of the «Advanced Security Settings» window. Click «Change»;
+5. Type out your username in the text area with the «Enter the object name to select (examples)» label;
+6. Click «OK»;
+7. Tick the «Replace owner on subcontainers and objects» checkbox;
+8. Tick the «Replace all child object permission entries» checkbox;
+9. Click «OK»;
+10. Pick `Administrators (PC_NAME\Administrators)` in the group selector and then tick «Full Control» checkbox
+    in the «Permissions» window at the bottom;
+11. You're done! Click «OK» and dismiss any warnings.
+
+## Common registry paths
+Here is a list of the most common registry paths.
+There are as many «sections» as there are extensions, but these are the most common ones.  
+They should cover most of your context menu.
+
+#### Desktop Background — bottom rows
+`Computer\HKEY_CLASSES_ROOT\DesktopBackground`
+
+![Desktop Background.png](/images/blog/assets/the-windows-context-menu/desktop-background.png)
+
+#### Folder Background
+`Computer\HKEY_CLASSES_ROOT\Directory\Background`
+
+![Folder Background.png](/images/blog/assets/the-windows-context-menu/folder-background.png)
+
+#### Folder
+`Computer\HKEY_CLASSES_ROOT\Directory`
+
+![Folder.png](/images/blog/assets/the-windows-context-menu/folder.png)
+
+#### Folder Item
+Extends [Folder](#folder).  
+`Computer\HKEY_CLASSES_ROOT\Folder`
+
+![File Item.png](/images/blog/assets/the-windows-context-menu/file-item.png)
+
+#### Drive
+`Computer\HKEY_CLASSES_ROOT\Drive`
+
+![Drive.png](/images/blog/assets/the-windows-context-menu/drive.png)
+
+#### Library Folder
+`Computer\HKEY_CLASSES_ROOT\LibraryFolder`
+
+![Library Item.png](/images/blog/assets/the-windows-context-menu/library-item.png)
+
+#### Library Background
+Inherits from [Folder Background](#folder-background).  
+`Computer\HKEY_CLASSES_ROOT\LibraryFolder\background`
+
+![Library Background.png](/images/blog/assets/the-windows-context-menu/library-background.png)
+
+Despite the inheritance, it cannot parse the `%V` macro, which results in the following error.
+Blame Microsoft for being as consistent as ever.
+To my knowledge, there is no way to fix that.
+
+![Explorer Error.png](/images/blog/assets/the-windows-context-menu/explorer-error.png)
+
+#### All Files
+`Computer\HKEY_CLASSES_ROOT\*`
+
+![All Files.png](/images/blog/assets/the-windows-context-menu/all-files.png)
+
+#### All Filesystem Objects
+Different from [All Files](#all-files) — it's a further generalization that includes system drives,
+symbolic links and other objects.  
+`Computer\HKEY_CLASSES_ROOT\AllFilesystemObjects`
+
+![All Filesystem Objects.png](/images/blog/assets/the-windows-context-menu/all-filesystem-objects.png)
+
+#### File type associations
+Text: `Computer\HKEY_CLASSES_ROOT\SystemFileAssociations\text`  
+Images: `Computer\HKEY_CLASSES_ROOT\SystemFileAssociations\image`  
+Documents: `Computer\HKEY_CLASSES_ROOT\SystemFileAssociations\document`  
+Audio: `Computer\HKEY_CLASSES_ROOT\SystemFileAssociations\audio`  
+Video: `Computer\HKEY_CLASSES_ROOT\SystemFileAssociations\video`  
+
+## Cleaning up the context menu
+The least fan-favorite default entries can be removed using Winaero Tweaker.
+I suggest using it to make the whole cleanup slightly more bearable.
+
+![Winaero 1.png](/images/blog/assets/the-windows-context-menu/winaero-1.png)
+
+![Winaero 2.png](/images/blog/assets/the-windows-context-menu/winaero-2.png)
+
+### Some extra common areas
+The following are fairly common areas Winaero Tweaker doesn't cover.
+
+::card
+---
+type: idea
+title: Tip
+---
+As a rule of thumb, whenever you're dealing with existing shell entries, I _really_ suggest
+**searching for a way to manage them online** before resorting to any measures I elaborated on in this article.
+Now if you can't find anything useful online, then anything works.
+::
+
+#### Remove «Open PowerShell window here»
+1. Navigate to `Computer\HKEY_CLASSES_ROOT\Directory\shell\Powershell`;
+2. [Unlock the key](#dealing-with-locked-keys);
+3. Create a new `REG_SZ` value called `ProgrammaticAccessOnly` and leave it empty;
+4. Navigate to `Computer\HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell`;
+5. [Unlock the key](#dealing-with-locked-keys);
+6. Create a new `REG_SZ` value called `ProgrammaticAccessOnly` and leave it empty.
+
+#### Remove «Open Linux shell here»
+1. Navigate to `Computer\HKEY_CLASSES_ROOT\Directory\shell\WSL`;
+2. [Unlock the key](#dealing-with-locked-keys);
+3. Remove the key;
+4. Navigate to `Computer\HKEY_CLASSES_ROOT\Directory\Background\shell\WSL`;
+5. [Unlock the key](#dealing-with-locked-keys);
+6. Create a new `REG_SZ` value called `ProgrammaticAccessOnly` and leave it empty.
+
+#### Edit the «Edit» text context menu command
+1. Navigate to `Computer\HKEY_CLASSES_ROOT\SystemFileAssociations\text\shell\edit`;
+2. Replace all mentions of the previous editor in default values with **Notepad++**
+   or any other text editor you prefer.
+
+## Bottom line
+The context menu is a mess, and it's not going to change.
+It's a part of Windows that's been around for a long time and has been left behind by Microsoft.
+Shell entries are like differential equations — there's never a general solution.
+They're a pain to learn, but the acquired skill is worth it.
+
+No matter how terrible the context menu API is in Windows, there's still a way to customize it to your liking.
+Hopefully you learned something new from this article
+and are now able to make your context menu **a bit** more bearable.
+
+**Spotted a mistake?**
+Want to add important details I missed or share extra knowledge on the subject?
+Tag me on [Twitter](https://go.enderman.ch/twitter) or [e-mail me](mailto:[email protected])!
+All contributions welcome. 😉
@@ -0,0 +1,130 @@
+---
+title: The Hidden Features of the Windows OOBE
+description: The Windows 11 OOBE is a mess, but it's excellent for bulk deployment and has some hidden features and customization options!
+authors: ['Enderman']
+created: 2024-03-01T23:30:10Z
+updated: 2024-03-02T15:10:58Z
+draft: false
+tags: ['windows', 'oobe', 'deployment', 'know how', 'secret features', 'protocols', 'features', 'windows 10', 'windows 11']
+---
+
+# The Windows 11 OOBE is a mess...
+The OOBE (Out-of-Box Experience) is the first thing a user sees when they boot up a new Windows device.
+It's the first impression of the operating system, and it's important to get it right.
+At first glance, it seems to be a thing Microsoft surprisingly _has_ gotten right.
+However, once you take a look under the hood, you find a mess of legacy code, hidden features and undocumented APIs...
+and suddenly, you take it all back.
+
+In this article, I aim to take a deep dive into that mess and explore some hidden features and
+customization options it offers.
+
+::card
+---
+icon: warning
+title: Unfinished article
+---
+This post is a **work in progress**, please check back later for more content!
+::
+
+### The OOBE protocol
+
+The OOBE is a web application, and the `ms-cxh://` protocol is a custom handler that defines a couple of shortcuts to
+various pages, seemingly, for internal use.
+
+The list of available protocol strings can be retrieved by scanning Windows binaries for the `ms-cxh://` occurrences.
+Luckily, Hexacorn did all the heavy lifting for us and shared
+his findings in [his blog post](https://go.enderman.ch/18n6n).
+
+The protocol API is **undocumented** by Microsoft, so it's not guaranteed to work in the future.
+In fact, it has already been partially removed or deprecated in Windows 11 without any notice.
+
+Microsoft used acronyms in protocol strings, and some of them are quite cryptic, but there's nothing we can't decode.
+
+
+
+#### Out-of-Box Experience
+FRX stands for «**F**irst **R**un e**X**perience»;  
+RDX stands for «**R**etail **D**emo e**X**perience».
+
+* `ms-cxh://FRX/AAD`
+* `ms-cxh://FRX/INCLUSIVE`
+* `ms-cxh://FRX/INCLUSIVE?start=OobeProvisioningStatus`
+* `ms-cxh://FRX/TEAMEDITION`
+* `ms-cxh://FRXRDXINCLUSIVE`
+
+#### Microsoft Azure
+The AAD acronym is commonly used and refers to «**A**zure **A**ctive **D**irectory»;  
+SSPR stands for «**S**elf-**S**ervice **P**assword **R**eset».
+
+* `ms-cxh://AADPINRESETAUTH`
+* `ms-cxh://AADSSPR`
+* `ms-cxh://AADWEBAUTH`
+
+#### Modern settings
+The MOSET acronym most likely refers to «**Mo**dern **set**tings»;  
+MAM stands for «**M**obile **A**pplication **M**anagement».
+MSA stands for «**M**icro**s**oft **A**ccount».
+
+* `ms-cxh://MOSET/AADLOCAL`
+* `ms-cxh://MOSET/CONNECTTOWORK`
+* `ms-cxh://mosetmamconnecttowork?mode=mdm&username=%s&servername=%s`
+* `ms-cxh://mosetmdmconnecttowork`
+* `ms-cxh://MOSETMSA`
+* `ms-cxh://MOSETMSALOCAL`
+
+#### Microsoft account
+CFL probably stands for «**C**hange **F**irst **L**ogon»?
+
+* `ms-cxh://MSACFLPINRESET`
+* `ms-cxh://MSACFLPINRESETSIGNIN`
+* `ms-cxh://MSACXSIGNINAUTHONLY`
+* `ms-cxh://MSACXSIGNINPINADD`
+* `ms-cxh://MSACXSIGNINPINRESET`
+* `ms-cxh://MSAPINENROLL`
+* `ms-cxh://MSAPINRESET`
+* `ms-cxh://MSARDX`
+* `ms-cxh://MSASSPR`
+
+#### Windows Hello for Microsoft Intune
+NTH stands for «i**NT**une **H**ello»;  
+NGC stands for «**N**ext **G**eneration **C**redential»;  
+ENT stands for «**Ent**erprise»;  
+MDM stands for «**M**obile **D**evice **M**anagement».
+
+* `ms-cxh://NTH`
+* `ms-cxh://NTH/AADRECOVERY`
+* `ms-cxh://NTHAADNGCFIXME`
+* `ms-cxh://NTHAADNGCONLY`
+* `ms-cxh://NTHAADNGCRESET`
+* `ms-cxh://NTHAADNGCRESETDESTRUCTIVE`
+* `ms-cxh://NTHAADNGCRESETNONDESTRUCTIVE`
+* `ms-cxh://NTHAADORMDM?ngc=enabled`
+* `ms-cxh://NTHENTNGCFIXME`
+* `ms-cxh://NTHENTNGCONLY`
+* `ms-cxh://NTHENTNGCRESET`
+* `ms-cxh://NTHENTNGCRESETDESTRUCTIVE`
+* `ms-cxh://NTHENTORMDM`
+* `ms-cxh://NTHENTORMDM?ngc=enabled`
+* `ms-cxh://NTHNGCUPSELL`
+* `ms-cxh://NTHPRIVACY`
+* `ms-cxh://RDXRACSKUINCLUSIVE`
+
+#### Second-chance OOBE
+![personalized-scoobe-test.png](/images/blog/assets/the-windows-oobe/personalized-scoobe-test.png)
+
+* `ms-cxh://SCOOBE`
+* `ms-cxh://SCOOBE%ws`
+* `ms-cxh://SCOOBE/UPGRADE`
+
+#### Cloud settings
+* `ms-cxh://SETADDLOCALONLY`
+* `ms-cxh://SETADDNEWUSER`
+* `ms-cxh://SETCHANGEPWD`
+* `ms-cxh://SETPHONEPAIRING`
+* `ms-cxh://SETPHONEPAIRING?scenarioId=SwiftKeyCloudClipboard`
+* `ms-cxh://setsqsalocalonly`
+
+#### Miscellaneous
+* `ms-cxh://TSET/ADDFAMILY`
+* `ms-cxh://WLT`
+* `ms-cxh://WLTUC`
@@ -0,0 +1,19 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+  rules: {
+    'no-unused-vars': 'warn',
+    'vue/multi-word-component-names': 'off',
+    'vue/max-attributes-per-line': [
+      'warn',
+      {
+        singleline: 3,
+        multiline: 1,
+      },
+    ],
+    'space-in-parens': 'off',
+    'computed-property-spacing': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+})
@@ -0,0 +1,202 @@
+import config from './config'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: config.locale || 'en',
+      },
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/x-icon',
+          href: '/favicon.ico',
+        },
+      ],
+      meta: [
+        {
+          charset: 'utf-8',
+        },
+        {
+          name: 'viewport',
+          content: 'width=device-width, initial-scale=1',
+        },
+        {
+          'http-equiv': 'X-UA-Compatible',
+          content: 'ie=edge',
+        },
+      ],
+    },
+    pageTransition: { name: 'page', mode: 'out-in' },
+    rootId: 'ender-app',
+  },
+
+  colorMode: {
+    preference: 'system',
+    fallback: 'dark',
+    classPrefix: '',
+    classSuffix: '',
+    componentName: 'NuxtTheme',
+    storageKey: 'ecmatheme',
+  },
+
+  compatibilityDate: '2025-01-26',
+
+  components: {
+    dirs: [
+      {
+        path: '~/components',
+        pathPrefix: false,
+        extensions: ['.vue'],
+      },
+    ],
+  },
+
+  content: {
+    markdown: {
+      remarkPlugins: ['remark-reading-time'],
+    },
+    highlight: {
+      theme: {
+        default: 'github-dark',
+        light: 'github-light',
+        sepia: 'monokai',
+      },
+      langs: [
+        'shell',
+        'batch',
+        'vb',
+        'ini',
+        'asm',
+        'c',
+        'cpp',
+        'java',
+        'python',
+        'csv',
+        'xml',
+        'json',
+        'yaml',
+        'html',
+        'css',
+        'sass',
+        'php',
+        'js',
+        'ts',
+        'vue',
+        'md',
+        'mdc',
+        'pascal',
+        'lisp',
+        'sql',
+      ],
+    },
+  },
+
+  css: ['~/assets/styles/main.scss'],
+
+  devtools: {
+    enabled: true,
+  },
+
+  experimental: {
+    inlineRouteRules: true,
+  },
+
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  googleFonts: {
+    download: true,
+    families: {
+      Lato: true,
+      Alexandria: true,
+    },
+  },
+
+  linkChecker: {
+    failOnError: true,
+    report: {
+      html: true,
+      markdown: true,
+    },
+  },
+
+  modules: [
+    '@pinia/nuxt',
+    '@nuxt/image',
+    '@nuxtjs/seo',
+    '@nuxt/content',
+    '@nuxtjs/google-fonts',
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
+    '@nuxt/eslint',
+    ['@nuxtjs/stylelint-module', { failOnError: true, lintOnStart: false }],
+  ],
+
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+      autoSubfolderIndex: true,
+      failOnError: true,
+      routes: ['/robots.txt', '/sitemap.xml'],
+    },
+  },
+
+  plugins: [],
+
+  robots: {
+    enabled: true,
+    blockNonSeoBots: false,
+    credits: false,
+    debug: false,
+    metaTag: true,
+    groups: [],
+    disallow: [' '],
+  },
+
+  site: {
+    env: process.env.NODE_ENV,
+    url: config.url,
+    name: config.name,
+    indexable: true,
+    trailingSlash: false,
+  },
+
+  sitemap: {
+    sources: [
+      /*'/api/__sitemap__/content'*/
+    ],
+    cacheMaxAgeSeconds: 360,
+    exclude: [],
+    credits: false,
+    xslColumns: [
+      { label: 'URL', width: '50%' },
+      { label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
+      { label: 'Priority', select: 'sitemap:priority', width: '12.5%' },
+      {
+        label: 'Change Frequency',
+        select: 'sitemap:changefreq',
+        width: '12.5%',
+      },
+    ],
+    defaults: {
+      lastmod: config.build.date,
+    },
+  },
+
+  tailwindcss: {
+    exposeConfig: true,
+  },
+
+  typescript: {
+    typeCheck: true,
+  },
+
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'iconify-icon',
+    },
+  },
+})
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
endermanch	97c0b7c5ed	Upgrade to Nuxt 4 folder structure	2025-01-27 00:04:14 +03:00
endermanch	ad70bdc5b6	Add nuxt-image and remove old image directory	2024-10-14 13:17:44 +03:00
endermanch	a7c03d2327	Optimize images (PNG → AVIF)	2024-10-14 12:37:16 +03:00
endermanch	673948bce9	Add loading indicator	2024-06-20 00:33:16 +03:00
endermanch	7a3cdcc1da	Wage a war against nuxt-simple-robots. BAD MODULE	2024-06-19 19:21:55 +03:00
endermanch	44469bd9f2	Fix robots & sitemap SEO disaster	2024-06-19 19:05:58 +03:00
endermanch	00060ede92	Bump version to 0.3.8	2024-06-19 18:08:22 +03:00
endermanch	2204709c0e	Fix light theme, fix animation bugs, add programmatic scrolling, improve custom card blog component	2024-06-19 18:06:17 +03:00
endermanch	3e39bda014	Pass component into hyperscript	2024-06-19 02:07:17 +03:00
endermanch	05db0b693e	Fix defineOgImageComponent, remove swipe actions in reader mode, change onClick to addEventListener	2024-06-19 01:19:57 +03:00
endermanch	4543680a92	Bump version, refine element hydration, fix animation, fix title in blog post	2024-06-19 00:45:05 +03:00
endermanch	858142f09a	Unstage cache	2024-06-18 22:00:54 +03:00
endermanch	830c34855c	Clean up styles, fix and improve the blog post card layout	2024-06-18 21:48:50 +03:00
endermanch	a7f2d527dc	% → dvh	2024-06-16 23:18:58 +03:00
endermanch	e72a61b317	Rewrite to TailwindCSS, enhance the DOM, uninstall Vuetify, improve styles	2024-06-16 22:24:01 +03:00
endermanch	9339416c1b	Upgrade to Nuxt 3.12, simplify logic	2024-06-15 13:14:34 +03:00
endermanch	753bdb5c0a	Upload blog post	2024-03-02 16:00:21 +03:00
endermanch	bfeaca5f09	Upload blog post thumbnail	2024-03-02 15:53:47 +03:00
endermanch	10e3a7fc40	Update blog post	2024-03-02 15:50:17 +03:00
endermanch	1ed1d47b07	Update blog	2024-03-02 15:48:39 +03:00
endermanch	d1e249b51d	Fix the 'Page not found' bug	2024-02-20 22:47:01 +03:00
endermanch	7ce8674fea	Add public images for blog	2024-02-20 22:20:04 +03:00
endermanch	36dd770ce4	Version 0.2.1	2024-02-20 22:14:58 +03:00
endermanch	eadc0b119d	Raw blog finished	2024-02-20 21:15:29 +03:00
endermanch	44c60f7069	Blog slowly looming over	2024-02-19 22:49:55 +03:00
endermanch	b58407d358	Added new icons, improved the blog	2024-02-19 01:18:50 +03:00
endermanch	9386c1d158	Remove v-if prop anti-pattern, clean up, add reader mode	2024-02-18 14:36:50 +03:00
endermanch	3853e8fa20	Created blog page, many improvements	2024-02-18 11:30:50 +03:00
endermanch	cfbaf56159	Finished integrating Shadow DOM icons, first steps towards dynamic theme	2024-01-28 21:22:05 +03:00
endermanch	014e64d174	Move over to iconify-icon, wrap around	2024-01-27 23:29:31 +03:00
endermanch	1f7c8f0ed4	Move to appConfig, Vuetify 3	2024-01-27 19:17:30 +03:00
endermanch	4ac1fd9574	Added options, preparing for Quasar rewrite	2024-01-23 23:53:21 +03:00
endermanch	dd084afb61	Fixed minor CSS bugs	2023-11-27 14:49:57 +03:00
endermanch	3c69f73dc6	0.1.3	2023-11-25 20:10:23 +03:00
endermanch	92ad0a50f9	0.1.2	2023-11-25 20:10:21 +03:00
endermanch	4939d24f62	Dockerized the application, fixed fonts, improved SEO, upgraded to Nuxt 3.8.2	2023-11-25 19:52:25 +03:00
endermanch	2bd1e4a512	Took my time to tweak linter configurations	2023-11-23 18:14:23 +03:00
endermanch	2a1bcfc3d2	Added stylelint, improved code readability, implemented swipe controls	2023-11-23 02:53:30 +03:00
endermanch	c509c770f6	0.1.1	2023-11-20 22:20:08 +03:00
endermanch	a76d959431	Slight amendments, remove debug info	2023-11-20 22:19:59 +03:00
endermanch	0cdee66c1d	Conditional rendering, pages updated	2023-11-20 22:14:20 +03:00
endermanch	a39ad3b464	Overall improvements, updated pages	2023-11-20 00:58:47 +03:00
endermanch	099b876032	Added the feedback mechanism	2023-11-19 18:35:27 +03:00
endermanch	b2d297fca8	0.1.0	2023-11-19 17:12:24 +03:00
				`@@ -1 +0,0 @@`
				`{"version":3,"sourceRoot":"","sources":["list-types.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE","file":"list-types.css"}`