.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  plugins: ['svelte3', '@typescript-eslint'],
+  ignorePatterns: ['*.cjs'],
+  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  settings: {
+    'svelte3/typescript': require('typescript'),
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2019,
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  rules: {
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+  },
+}

.gitignore

@@ -1,25 +1,26 @@
 .DS_Store
+/node_modules/
+/src/node_modules/@sapper/
+yarn-error.log
+/cypress/screenshots/
+/__sapper__/
 
-# `dist` folder with the export of SSG
+/.svelte-kit
+/.svelte/
+/build/
+/functions/
+/static/build/
+
+#amplify
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/backend/amplify-meta.json
+amplify/backend/awscloudformation
 dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
 
+/static/**/optimized/
 # Local Netlify folder
 .netlify
-
-# Generated by Cargo
-# will have compiled files and executables
-debug/
-target/
-
-# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
-# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
-Cargo.lock
-
-# These are backup files generated by rustfmt
-**/*.rs.bk
-
-# MSVC Windows builds of rustc generate these, which store debugging information
-*.pdb
-
-# Image generator
-generated_images/

appveyor.yml

@@ -0,0 +1,18 @@
+version: "{build}"
+
+shallow_clone: true
+
+init:
+  - git config --global core.autocrlf false
+
+build: off
+
+environment:
+  matrix:
+    # node.js
+    - nodejs_version: stable
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm install cypress
+  - npm install

axum_server/.gitignore

@@ -0,0 +1,20 @@
+# Generated by Cargo
+# will have compiled files and executables
+debug/
+target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb
+
+# `dist` folder with the export of SSG
+dist/
+
+# Image generator
+generated_images/

axum_server/justfile

@@ -5,15 +5,18 @@ tailwind:
 	npx tailwindcss -i ./styles/input.css -o ./styles/output.css --watch
 
 # svg sprite creation
+# TODO change route on svetle project deletion 
+# TODO #directory-swap
 svgstore:
-   npx svgstore -o templates/icons/sprite.svg src/svg/**.svg
+   npx svgstore -o templates/icons/sprite.svg ../src/svg/**.svg
 
 server_dev: 
 	cargo watch -x run
 
 # CMS server for local dev
+# TODO #directory-swap
 decap_server:
-	npx decap-server
+	cd .. && npx decap-server
 
 # Run dev server in watch mode
 dev: 

axum_server/src/blog_posts/blog_post_model.rs

@@ -3,7 +3,7 @@ use serde::Deserialize;
 
 use crate::post_utils::post_parser::deserialize_date;
 
-pub const BLOG_POST_PATH: &str = "_posts/blog";
+pub const BLOG_POST_PATH: &str = "../_posts/blog";
 
 #[derive(Deserialize, Debug)]
 pub struct BlogPostMetadata {

axum_server/src/main.rs

@@ -31,11 +31,15 @@ async fn main() {
     // build our application with a single route
     let app = router::get_router()
         .nest_service("/styles", ServeDir::new("styles"))
-        .nest_service("/images", ServeDir::new("static/images"))
-        .nest_service("/fonts", ServeDir::new("static/fonts"))
+        .nest_service("/images", ServeDir::new("../static/images"))
+        .nest_service("/fonts", ServeDir::new("../static/fonts"))
         .nest_service("/generated_images", ServeDir::new("generated_images"))
-        .nest_service("/svg", ServeDir::new("static/svg"))
-        .nest_service("/config.yml", ServeDir::new("static/resources/config.yml")); // Decap CMS config
+        .nest_service("/svg", ServeDir::new("../static/svg"))
+        // TODO manifest logos have bad link, #directory-swap
+        .nest_service(
+            "/config.yml",
+            ServeDir::new("../static/resources/config.yml"),
+        );
 
     #[cfg(debug_assertions)]
     let app = app.layer(LiveReloadLayer::new());
@@ -55,4 +59,6 @@ async fn main() {
 // THINK deploy to alula? rather then katelyn? can be change whenever
 // TODO after release
 // OG tags
+// Remove old web completely
+// Restructure repository
 // - projects page

axum_server/src/pages/blog_post_page.rs

@@ -2,7 +2,6 @@ use askama::Template;
 use axum::{extract::Path, http::StatusCode};
 use chrono::{DateTime, Utc};
 
-use crate::blog_posts::blog_post_model::BLOG_POST_PATH;
 use crate::{
     blog_posts::blog_post_model::BlogPostMetadata, components::site_header::Link, filters,
     post_utils::post_parser::parse_post,
@@ -21,7 +20,7 @@ pub struct BlogPostTemplate {
 }
 
 pub async fn render_blog_post(Path(post_id): Path<String>) -> Result<BlogPostTemplate, StatusCode> {
-    let path = format!("{}/{}.md", BLOG_POST_PATH, post_id);
+    let path = format!("../_posts/blog/{}.md", post_id);
     let parse_post = parse_post::<BlogPostMetadata>(&path, true);
     let parsed = parse_post.await?;
 

axum_server/src/pages/project_list.rs

@@ -16,7 +16,7 @@ pub struct ProjectListTemplate {
 }
 
 pub async fn render_projects_list() -> Result<ProjectListTemplate, StatusCode> {
-    let mut project_list = get_post_list::<ProjectMetadata>("_projects").await?;
+    let mut project_list = get_post_list::<ProjectMetadata>("../_projects").await?;
 
     project_list.sort_by_key(|post| post.slug.to_string());
     project_list.retain(|project| project.metadata.displayed);

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -42,8 +42,9 @@ pub fn generate_picture_markup(
     }
     let path_to_generated = get_generated_file_name(orig_img_path);
 
+    // TODO This should get removed when we move the project structure #directory-swap
     let disk_img_path =
-        Path::new("static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
+        Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
 
     let orig_img_dimensions = image_dimensions(&disk_img_path)?;
     let resolutions = get_resolutions(orig_img_dimensions, width, height);

axum_server/src/post_utils/post_listing.rs

@@ -8,6 +8,7 @@ use super::post_parser::{parse_post, ParseResult};
 pub async fn get_post_list<'de, Metadata: DeserializeOwned>(
     path: &str,
 ) -> Result<Vec<ParseResult<Metadata>>, StatusCode> {
+    // let path = "../_posts/blog/";
     let mut dir = read_dir(path)
         .await
         .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;

axum_server/src/post_utils/post_parser.rs

@@ -117,7 +117,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
             }
 
             let dev_only_img_path =
-                Path::new("static/").join(dest_url.strip_prefix("/").unwrap_or(&dest_url));
+                Path::new("../static/").join(dest_url.strip_prefix("/").unwrap_or(&dest_url));
             let img_dimensions = image_dimensions(&dev_only_img_path).unwrap();
 
             let (max_width, max_height) = get_max_resolution(

axum_server/src/projects/featured_projects.rs

@@ -5,7 +5,7 @@ use crate::post_utils::{post_listing::get_post_list, post_parser::ParseResult};
 use super::project_model::ProjectMetadata;
 
 pub async fn get_featured_projects() -> Result<Vec<ParseResult<ProjectMetadata>>, StatusCode> {
-    let project_list = get_post_list::<ProjectMetadata>("_projects").await?;
+    let project_list = get_post_list::<ProjectMetadata>("../_projects").await?;
 
     let featured_projects = project_list
         .into_iter()

cypress.json

@@ -0,0 +1,4 @@
+{
+	"baseUrl": "http://localhost:3000",
+	"video": false
+}

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "michalvankodev",
+  "description": "My personal website with blog",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "prebuild": "npm run svgstore",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "svelte-kit start",
+    "test": "vitest",
+    "svgstore": "svgstore -o src/svg/build/icons-sprite.svg src/svg/**.svg",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.9.2",
+    "@vanilla-extract/sprinkles": "^1.5.1",
+    "@vanilla-extract/vite-plugin": "^3.7.0",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
+    "feed": "^4.2.2",
+    "front-matter": "^4.0.2",
+    "marked": "^3.0.8",
+    "modern-normalize": "^1.1.0",
+    "polished": "^4.2.2",
+    "prismjs": "^1.29.0",
+    "ramda": "^0.28.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^1.0.4",
+    "@sveltejs/kit": "^1.1.1",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/classnames": "^2.3.1",
+    "@types/node": "^18.11.18",
+    "@types/ramda": "^0.28.21",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "~2.8.3",
+    "prettier-plugin-svelte": "^2.9.0",
+    "svelte": "^3.55.1",
+    "svelte-preprocess": "^5.0.0",
+    "svgstore-cli": "^2.0.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vitest": "^0.27.2",
+    "vitest-svelte-kit": "^0.0.6"
+  }
+}

src/app.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#333333" />
+
+    <meta name="description" content="Personal website of @michalvankodev" />
+    <meta name="keywords" content="personal, blog, webdev, tech, programming" />
+    <meta name="robots" content="index, follow" />
+    <link rel="alternate" type="application/rss+xml" title="RSS feed for latest posts" href="https://michalvanko.dev/feed.xml" />
+    <link rel="alternate" title="JSON feed for latest posts" type="application/json" href="https://michalvanko.dev/feed.json" />
+
+    <link rel="stylesheet" href="/print.css" media="print" />
+    <link rel="stylesheet" href="/fonts.css" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="stylesheet" href="/prism.css" />
+
+    <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
+    <link rel="icon" type="image/png" href="/m-logo-192.png" />
+    <!-- This contains the contents of the <svelte:head> component, if
+	     the current page has one -->
+    %sveltekit.head%
+
+  </head>
+  <body>
+    <div style="display: contents">
+      %sveltekit.body%
+    </div>
+  </body>
+</html>

src/global.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

src/lib/articleContent/articleContent.ts

@@ -0,0 +1,38 @@
+import { error } from '@sveltejs/kit'
+import fm from 'front-matter'
+import { readFile } from 'fs'
+import { parseField } from '$lib/markdown/parse-markdown'
+import { promisify } from 'util'
+
+export interface ArticleAttributes {
+  slug: string
+  layout: string
+  segments: string[]
+  title: string
+  published: boolean
+  date: string
+  thumbnail: string
+  tags: string[]
+  body: string
+}
+
+export async function getArticleContent(slug: string) {
+  let postSource: string
+  try {
+    postSource = await promisify(readFile)(`_posts/blog/${slug}.md`, 'utf-8')
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (e: any) {
+    if (e.code === 'ENOENT') {
+      throw error(404, 'Post not found \n' + e.toString())
+    }
+    throw e
+  }
+
+  const parsedPost = fm<ArticleAttributes>(postSource)
+
+  const post = parseField<ArticleAttributes>('body')({
+    ...parsedPost.attributes,
+    body: parsedPost.body,
+  })
+  return post
+}

src/lib/articleContent/articleContentListing.ts

@@ -0,0 +1,58 @@
+import { readdir, readFile } from 'fs'
+import { promisify } from 'util'
+import { basename } from 'path'
+import { pipe, prop, sortBy, reverse, filter } from 'ramda'
+import fm from 'front-matter'
+import marked from 'marked'
+import {
+  filterAndCount,
+  type PaginationQuery,
+} from '$lib/pagination/pagination'
+import type { ArticleAttributes } from './articleContent'
+
+export interface ArticlePreviewAttributes extends ArticleAttributes {
+  preview: string
+}
+
+const { NODE_ENV } = process.env
+export async function getBlogListing(paginationQuery: PaginationQuery) {
+  const files = await promisify(readdir)(`_posts/blog/`, 'utf-8')
+  const filteredFiles = filterDevelopmentFiles(files)
+
+  const contents = await Promise.all(
+    filteredFiles.map(async (file) => {
+      const fileContent = await promisify(readFile)(
+        `_posts/blog/${file}`,
+        'utf-8'
+      )
+      const parsedAttributes = fm<ArticleAttributes>(fileContent)
+
+      const lineOfTextRegExp = /^(?:\w|\[).+/gm
+      const lines = parsedAttributes.body
+        .match(lineOfTextRegExp)
+        .slice(0, 2)
+        .join('\n')
+
+      const preview = marked(lines)
+      return {
+        ...parsedAttributes.attributes,
+        preview,
+        slug: basename(file, '.md'),
+      }
+    })
+  )
+  const filteredContents = pipe(
+    sortBy<ArticlePreviewAttributes>(prop('date')),
+    (items) => reverse(items),
+    filter<(typeof contents)[0]>((article) => article.published),
+    filterAndCount(paginationQuery)
+  )(contents)
+
+  return filteredContents
+}
+
+function filterDevelopmentFiles(files: string[]) {
+  return NODE_ENV !== 'production'
+    ? files
+    : files.filter((file) => !file.startsWith('dev-'))
+}

src/lib/articleContent/onMountScripts.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    onMountScripts?: Array<() => void>
+  }
+}
+export function runOnMountScripts() {
+  window.onMountScripts?.forEach((fn) => {
+    fn()
+  })
+}
+

src/lib/components/Footer.css.ts

@@ -0,0 +1,169 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { radialGradient, rgba, transparentize } from 'polished'
+import { sprinkles } from '$lib/styles/sprinkles.css'
+import {
+  breakpoints,
+  colors,
+  mediaAt,
+  menuBackground,
+  transparent,
+  vars,
+} from '$lib/styles/vars.css'
+
+export const siteFooterClass = style([
+  sprinkles({
+    fontSize: { mobile: 'base', desktop: 'sm' },
+    paddingX: '2x',
+    paddingTop: '1x',
+    color: 'menuLink',
+  }),
+
+  radialGradient({
+    colorStops: [
+      `${menuBackground}  56%`,
+      `${transparentize(0.4, menuBackground)} 100%`,
+    ],
+    extent: '160% 100% at 100% 100%',
+    fallback: transparent,
+  }),
+  {
+    '@media': {
+      [mediaAt(breakpoints.m)]: radialGradient({
+        colorStops: [
+          `${menuBackground} 48%`,
+          `${transparentize(1, menuBackground)} 100%`,
+        ],
+        extent: '140% 100% at 100% 100%',
+        fallback: transparent,
+      }),
+    },
+  },
+])
+
+export const headerClass = sprinkles({
+  fontWeight: 'bold',
+  fontSize: 'base',
+  color: 'menuLink',
+  margin: 'none',
+  lineHeight: '3x',
+  marginBottom: '1x',
+})
+
+export const sectionListsClass = style([
+  sprinkles({
+    display: 'grid',
+    justifyItems: { mobile: 'center', desktop: 'start' },
+    textAlign: { mobile: 'center', desktop: 'start' },
+    maxWidth: 'max',
+    columnGap: '3x',
+    margin: 'auto',
+  }),
+  {
+    '@media': {
+      [mediaAt(breakpoints.l)]: {
+        gridTemplateColumns: 'auto auto auto',
+      },
+    },
+  },
+])
+
+export const sectionListSectionClass = sprinkles({
+  marginY: '3x',
+})
+
+export const listUlClass = sprinkles({
+  listStyle: 'none',
+  padding: 'none',
+  margin: 'none',
+})
+
+export const listLiClass = sprinkles({
+  marginLeft: '1x',
+})
+
+export const nestedListLiClass = style([
+  listLiClass,
+  sprinkles({
+    fontSize: 'sm',
+  }),
+])
+
+export const socialLinkLabelClass = sprinkles({
+  paddingX: '1x',
+})
+
+export const svgClass = style({
+  fill: vars.color.menuLink,
+  height: '1em',
+  width: '1em',
+})
+
+export const strokeSvgClass = style([
+  svgClass,
+  {
+    stroke: vars.color.menuLink,
+    strokeWidth: '2px',
+  },
+])
+
+export const socialLinkClass = sprinkles({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: {
+    mobile: 'center',
+    desktop: 'start',
+  },
+})
+
+export const bottomLineClass = sprinkles({
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginX: 'auto',
+  paddingBottom: '1x',
+  marginTop: '2x',
+  maxWidth: 'max',
+})
+
+export const dateClass = sprinkles({
+  fontSize: 'xs',
+  whiteSpace: 'nowrap',
+})
+
+export const boldClass = sprinkles({
+  fontWeight: 'bold',
+})
+
+export const hrClass = style([
+  sprinkles({
+    marginY: '2x',
+    marginX: '1x',
+  }),
+  {
+    color: rgba(colors.midnightBlue, 0.14),
+    borderWidth: '1px 0 0',
+  },
+])
+
+export const licenceText = sprinkles({
+  textAlign: 'center',
+  width: 'parent',
+  fontSize: 'xs',
+})
+
+export const latestPostsClass = style({})
+
+globalStyle(`${siteFooterClass} a`, {
+  color: vars.color.menuLink,
+})
+
+globalStyle(`${headerClass} a:link, ${headerClass} a:visited`, {
+  color: vars.color.menuLink,
+})
+
+globalStyle(`${siteFooterClass} a:hover`, {
+  color: vars.color.menuLinkHover,
+})
+
+globalStyle(`${latestPostsClass} li a:visited:not(:hover)`, {
+  color: vars.color.linkVisited,
+})

src/lib/components/Footer.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { format } from 'date-fns'
+  import type { ArticlePreviewAttributes } from '$lib/articleContent/articleContentListing'
+  import SvgIcon from './SvgIcon.svelte'
+  import {
+    boldClass,
+    bottomLineClass,
+    dateClass,
+    headerClass,
+    hrClass,
+    latestPostsClass,
+    listLiClass,
+    listUlClass,
+    nestedListLiClass,
+    sectionListsClass,
+    sectionListSectionClass,
+    siteFooterClass,
+    socialLinkClass,
+    socialLinkLabelClass,
+    strokeSvgClass,
+    svgClass,
+    licenceText,
+  } from './Footer.css'
+
+  export let latestPosts: ArticlePreviewAttributes[]
+</script>
+
+<footer class="site-footer navigation-theme {siteFooterClass}">
+  <div class="lists {sectionListsClass}">
+    <section class="site-map {sectionListSectionClass}">
+      <ul class={listUlClass}>
+        <li class={listLiClass}>
+          <a href="/">Introduction</a>
+        </li>
+        <li class={listLiClass}>
+          <a href="/portfolio">Portfolio</a>
+          <ul class={listUlClass}>
+            <li class={nestedListLiClass}>
+              <a href="/portfolio#personal-information">About</a>
+            </li>
+            <li class={nestedListLiClass}>
+              <a href="/portfolio#skills">Skills</a>
+            </li>
+            <li class={nestedListLiClass}>
+              <a href="/portfolio#work-history">Work History</a>
+            </li>
+            <li class={nestedListLiClass}>
+              <a href="/portfolio#projects">Projects</a>
+            </li>
+            <li class={nestedListLiClass}>
+              <a href="/portfolio#education">Education</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+    <section class="latest-posts {sectionListSectionClass} {latestPostsClass}">
+      <h3 class={headerClass}>
+        <a href="/blog">Latest posts</a>
+      </h3>
+      <ul class={listUlClass}>
+        {#each latestPosts as post}
+          <li class={listLiClass}>
+            <a rel="prefetch" href="/{post.segments[0]}/{post.slug}">
+              <span>{post.title}</span>
+              <time class="date {dateClass}" datetime={post.date}>
+                - {format(new Date(post.date), 'do MMM, yyyy')}
+              </time>
+            </a>
+          </li>
+        {/each}
+      </ul>
+      <hr class={hrClass} />
+      <section class="subscribe {boldClass}">
+        <a href="/feed.xml" rel="external" title="RSS feed" class="rss">
+          Subscribe
+          <SvgIcon name="rss" className={svgClass} />
+        </a>
+        <a
+          href="/feed.json"
+          rel="external"
+          title="JSON feed"
+          class="json-feed"
+          aria-label="Subscribe with JSON feed"
+        >
+          <SvgIcon name="json-feed" className={svgClass} />
+        </a>
+      </section>
+    </section>
+    <section class="socials {sectionListSectionClass}">
+      <h3 class={headerClass}>Contact</h3>
+      <ul class="social-links {listUlClass}">
+        <li class="email {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="mailto: michalvankosk@gmail.com"
+            title="E-mail address"
+          >
+            <SvgIcon name="mail" className={svgClass} />
+            <span class={socialLinkLabelClass}>michalvankosk@gmail.com</span>
+          </a>
+        </li>
+        <li class="twitter {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://twitter.com/michalvankodev"
+            title="Twitter profile"
+          >
+            <SvgIcon name="twitter" className={strokeSvgClass} />
+            <span class={socialLinkLabelClass}>Twitter</span>
+          </a>
+        </li>
+        <li class="github {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://github.com/michalvankodev"
+            title="Github profile"
+          >
+            <SvgIcon name="github" className={strokeSvgClass} />
+            <span class={socialLinkLabelClass}>Github</span>
+          </a>
+        </li>
+        <li class="linkedin {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://www.linkedin.com/in/michal-vanko-dev/"
+            title="LinkedIn profile"
+          >
+            <SvgIcon name="linkedin" className={svgClass} />
+            <span class={socialLinkLabelClass}>LinkedIn</span>
+          </a>
+        </li>
+        <li class="twitch {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://twitch.tv/michalvankodev"
+            title="Twitch profile"
+          >
+            <SvgIcon name="twitch" className={svgClass} />
+            <span class={socialLinkLabelClass}>Twitch</span>
+          </a>
+        </li>
+        <li class="instagram {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://www.instagram.com/michalvankodev/"
+            title="Instagram profile"
+          >
+            <SvgIcon name="instagram" className={svgClass} />
+            <span class={socialLinkLabelClass}>Instagram</span>
+          </a>
+        </li>
+      </ul>
+    </section>
+  </div>
+  <footer class={bottomLineClass}>
+    <p
+      class={licenceText}
+      xmlns:cc="http://creativecommons.org/ns#"
+      xmlns:dct="http://purl.org/dc/terms/"
+    >
+      <a
+        property="dct:title"
+        rel="cc:attributionURL"
+        href="https://michalvanko.dev/">michalvanko.dev</a
+      >
+      by
+      <a
+        rel="cc:attributionURL dct:creator"
+        property="cc:attributionName"
+        href="https://michalvanko.dev/">Michal Vanko</a
+      >
+      is licensed under
+      <a
+        href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1"
+        target="_blank"
+        rel="license noopener noreferrer"
+        style="display:inline-block;"
+        >CC BY-NC-ND 4.0<img
+          style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+          src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
+          alt="cc"
+        /><img
+          style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+          src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"
+          alt="by"
+        /><img
+          style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+          src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"
+          alt="nc"
+        /><img
+          style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+          src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"
+          alt="nd"
+        /></a
+      >
+    </p>
+  </footer>
+</footer>

src/lib/components/Nav.css.ts

@@ -0,0 +1,85 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { radialGradient, transparentize } from 'polished'
+import { menuBackground, transparent, vars } from '$lib/styles/vars.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const navigationClass = style([
+  sprinkles({
+    paddingTop: '1x',
+    paddingBottom: '2x',
+    paddingX: '1x',
+    color: 'menu',
+    textShadow: 'menuLinkShadow',
+  }),
+  radialGradient({
+    colorStops: [
+      `${menuBackground} 0%`,
+      `${transparentize(1, menuBackground)} 100%`,
+    ],
+    extent: '120% 100% at 0% 0%',
+    fallback: transparent,
+  }),
+])
+
+export const navigationContentClass = sprinkles({
+  display: 'flex',
+  maxWidth: 'max',
+  marginY: 'none',
+  marginX: 'auto',
+})
+
+export const navigationLinksClass = sprinkles({
+  listStyle: 'none',
+  margin: 'none',
+  padding: 'none',
+  display: 'flex',
+  flex: '1',
+  flexWrap: 'wrap',
+})
+
+export const logoSectionClass = sprinkles({
+  lineHeight: 'none',
+})
+
+export const logoLinkClass = sprinkles({
+  padding: 'none',
+  display: 'block',
+})
+
+globalStyle(`${navigationClass} a:not(${logoLinkClass})`, {
+  color: vars.color.menuLink,
+  padding: vars.space['1x'],
+})
+
+globalStyle(`${navigationClass} a:hover`, {
+  color: vars.color.menuLinkHover,
+})
+
+export const logoImgClass = style({
+  height: vars.space['3x'],
+})
+
+export const selectedClass = sprinkles({
+  textShadow: 'menuActiveLinkShadow',
+})
+
+export const portfolioPageNavigation = style({
+  position: 'sticky',
+  top: '0px',
+  zIndex: 1,
+  width: '100%',
+  fontSize: vars.fontSize.sm,
+  padding: vars.space['1x'],
+  background: vars.color.background,
+  boxShadow: `0px 0.5em 0.5em ${vars.color.background}`,
+})
+
+export const portfolioPageNavigationLinksClass = sprinkles({
+  maxWidth: 'l',
+  marginX: 'auto',
+  marginY: 'none',
+})
+
+export const portfolioPageNavigationLinkClass = sprinkles({
+  padding: '1x',
+})

src/lib/components/Nav.svelte

@@ -0,0 +1,94 @@
+<script>
+  import classNames from 'classnames'
+  import {
+    logoImgClass,
+    logoLinkClass,
+    logoSectionClass,
+    navigationClass,
+    navigationContentClass,
+    navigationLinksClass,
+    portfolioPageNavigation,
+    portfolioPageNavigationLinkClass,
+    portfolioPageNavigationLinksClass,
+    selectedClass,
+  } from './Nav.css'
+  import { page } from '$app/stores'
+
+  $: segment = $page.url.pathname
+
+  let links = [
+    {
+      label: 'Introduction',
+      url: '/',
+    },
+    {
+      label: 'Blog',
+      url: '/blog',
+    },
+    {
+      label: 'Broadcasts',
+      url: '/broadcasts',
+    },
+    // {
+    //   label: "Dev's Cookery",
+    //   url: '/cookery',
+    // },
+    {
+      label: 'Portfolio',
+      url: '/portfolio',
+    },
+  ]
+</script>
+
+<nav class={navigationClass}>
+  <section class={navigationContentClass}>
+    <ul class={navigationLinksClass}>
+      {#each links as link}
+        <li>
+          <a
+            rel="prefetch"
+            class={classNames({ [selectedClass]: segment === link.url })}
+            href={link.url}
+          >
+            {link.label}
+          </a>
+        </li>
+      {/each}
+    </ul>
+
+    <aside class="logo-section {logoSectionClass}">
+      <a class="logo {logoLinkClass}" href=".">
+        <img
+          class={logoImgClass}
+          src="/m-logo.svg"
+          alt="m logo"
+          width="44px"
+          height="44px"
+        />
+      </a>
+    </aside>
+  </section>
+</nav>
+
+{#if segment === '/portfolio'}
+  <section class="page-navigation {portfolioPageNavigation}">
+    <div class={portfolioPageNavigationLinksClass}>
+      <a
+        class={portfolioPageNavigationLinkClass}
+        href="/portfolio#personal-information">About</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#skills"
+        >Skills</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#work-history"
+        >Work History</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#projects"
+        >Projects</a
+      >
+      <a class={portfolioPageNavigationLinkClass} href="/portfolio#education"
+        >Education</a
+      >
+    </div>
+  </section>
+{/if}

src/lib/components/SvgIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import svgSprite from '../../svg/build/icons-sprite.svg'
+  export let className: string
+  export let name: string
+</script>
+
+<svg aria-hidden="true" class={className}>
+  <use xlink:href={`${svgSprite}#${name}`} />
+</svg>

src/lib/components/articles/ArticlePreviewCard/ArticlePreviewCard.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  interface ArticleDetails {
+    title: string
+    slug: string
+    preview: string
+  }
+  export let segment: string
+  export let article: ArticleDetails
+</script>
+
+<article>
+  <header>
+    <h2>
+      <a rel="prefetch" href={`/${segment}/${article.slug}`}>{article.title}</a>
+    </h2>
+  </header>
+  {@html article.preview}
+</article>

src/lib/components/articles/ArticlePreviewFooter/ArticlePreviewFooter.css.ts

@@ -0,0 +1,30 @@
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const tagsListClass = sprinkles({
+  listStyle: 'none',
+  margin: 'none',
+  padding: 'none',
+  display: 'inline',
+})
+
+export const tagsListLiClass = sprinkles({
+  display: 'inline',
+  fontStyle: 'italic',
+})
+
+export const publishedClass = sprinkles({
+  whiteSpace: 'nowrap',
+  fontStyle: 'italic',
+})
+
+export const publishedLabelClass = sprinkles({
+  color: 'tintedText',
+})
+
+export const footerClass = sprinkles({
+  display: 'flex',
+  fontSize: 'sm',
+  justifyContent: 'space-between',
+  paddingTop: '1x',
+  marginTop: '2x',
+})

src/lib/components/articles/ArticlePreviewFooter/ArticlePreviewFooter.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { horizontalBorderTopClass } from '$lib/styles/scoops.css'
+
+  import { format } from 'date-fns'
+  import type { ArticleContent } from '$lib/content/articleContentListing'
+  import {
+    footerClass,
+    publishedClass,
+    publishedLabelClass,
+    tagsListClass,
+    tagsListLiClass,
+  } from './ArticlePreviewFooter.css'
+
+  export let segment: string
+  export let article: ArticleContent
+</script>
+
+<footer class="{footerClass} {horizontalBorderTopClass}">
+  <div class="article-tags">
+    {#if article.tags.length > 0}
+      <span class="lighten">Tags:</span>
+      <ul class={tagsListClass}>
+        {#each article.tags as tag}
+          <li class={tagsListLiClass}>
+            <a href="/{segment}/tags/{tag}">{tag}</a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+  <div class="created-at">
+    <span class={publishedLabelClass}>Published on</span>
+    <time datetime={article.date} class={publishedClass}>
+      {format(new Date(article.date), "do MMMM',' y")}
+    </time>
+  </div>
+</footer>

src/lib/components/articles/ArticlePreviewList/ArticlePreviewList.css.ts

@@ -0,0 +1,20 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { vars } from '$lib/styles/vars.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const postListClass = sprinkles({
+  padding: 'none',
+  lineHeight: '3x',
+  listStyle: 'none',
+})
+
+export const seeAllClass = sprinkles({
+  textAlign: 'end',
+  width: 'parent',
+  maxWidth: 'max',
+  margin: 'auto',
+})
+
+globalStyle(`${postListClass} > li:not(:last-child)`, {
+  marginBottom: vars.space['4x'],
+})

src/lib/components/articles/ArticlePreviewList/ArticlePreviewList.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import ArticleFooter from '$lib/components/articles/ArticlePreviewFooter/ArticlePreviewFooter.svelte'
+  import Paginator from '$lib/components/paginator/Paginator.svelte'
+  import { postListClass } from './ArticlePreviewList.css'
+  import ArticlePreviewCard from '$lib/components/articles/ArticlePreviewCard/ArticlePreviewCard.svelte'
+  import type { PaginationResult } from '$lib/pagination/pagination'
+  import type { ArticleContent } from '$lib/content/articleContentListing'
+
+  export let page: number
+  export let pageSize: number
+  export let filters: Record<string, string>
+  export let posts: PaginationResult<ArticleContent>
+  export let segment: string
+</script>
+
+<header>
+  <Paginator
+    {segment}
+    {page}
+    {pageSize}
+    {filters}
+    totalCount={posts.totalCount}
+  />
+</header>
+<ul class="post-list {postListClass}">
+  {#each posts.items as article (article.slug)}
+    <li>
+      <ArticlePreviewCard {article} {segment} />
+      <ArticleFooter {article} {segment} />
+    </li>
+  {/each}
+</ul>
+<footer>
+  <Paginator
+    {segment}
+    {page}
+    {pageSize}
+    {filters}
+    totalCount={posts.totalCount}
+  />
+</footer>

src/lib/components/paginator/Paginator.css.ts

@@ -0,0 +1,21 @@
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const listClass = sprinkles({
+  listStyle: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+})
+
+export const listItemClass = sprinkles({
+  paddingX: '1x',
+})
+
+export const activePage = sprinkles({
+  //fontStyle: 'italic',
+  fontWeight: 'bold',
+  paddingX: '2x',
+})
+
+export const pageLinkClass = sprinkles({
+  paddingX: '1x',
+})

src/lib/components/paginator/Paginator.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import {
+    activePage,
+    listClass,
+    listItemClass,
+    pageLinkClass,
+  } from './Paginator.css'
+
+  import { getPaginatorPages, createHref } from './paginatorUtils'
+
+  export const Divider = 'divider'
+
+  export let segment: string
+  export let page: number
+  export let pageSize: number
+  export let totalCount: number
+  export let filters: Record<string, string>
+
+  $: paginatorPages = getPaginatorPages({ page, pageSize, totalCount })
+</script>
+
+<ul class={listClass}>
+  {#if page !== 1}
+    <li class="{listItemClass} ">
+      <a class={pageLinkClass} href={createHref(segment, filters, page - 1)}
+        >&lt;</a
+      >
+    </li>
+  {/if}
+  {#each paginatorPages as pageNumber}
+    {#if pageNumber === Divider}
+      <li class={listItemClass}>...</li>
+    {:else if page === pageNumber}
+      <li class="{listItemClass} {activePage}">{pageNumber}</li>
+    {:else}
+      <li class="{listItemClass} ">
+        <a class={pageLinkClass} href={createHref(segment, filters, pageNumber)}
+          >{pageNumber}</a
+        >
+      </li>
+    {/if}
+  {/each}
+  {#if page !== paginatorPages.length}
+    <li class="{listItemClass} ">
+      <a class={pageLinkClass} href={createHref(segment, filters, page + 1)}
+        >&gt;</a
+      >
+    </li>
+  {/if}
+</ul>

src/lib/components/paginator/paginatorUtils.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from 'vitest'
+import { Divider, getPaginatorPages } from './paginatorUtils'
+
+describe('Paginator component', () => {
+  describe('Paginator generates feasable pages to display', () => {
+    test('Page: 1/5', () => {
+      expect(
+        getPaginatorPages({ page: 1, totalCount: 5, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5])
+    })
+    test('Page: 4/7', () => {
+      expect(
+        getPaginatorPages({ page: 4, totalCount: 7, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, 7])
+    })
+    test('Page: 4/8', () => {
+      expect(
+        getPaginatorPages({ page: 4, totalCount: 8, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, Divider, 8])
+    })
+    test('Page: 1/10', () => {
+      expect(
+        getPaginatorPages({ page: 1, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, Divider, 10])
+    })
+    test('Page: 2/10', () => {
+      expect(
+        getPaginatorPages({ page: 2, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, Divider, 10])
+    })
+    test('Page: 5/10', () => {
+      expect(
+        getPaginatorPages({ page: 5, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 3, 4, 5, 6, 7, Divider, 10])
+    })
+    test('Page: 7/10', () => {
+      expect(
+        getPaginatorPages({ page: 7, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
+    })
+    test('Page: 8/10', () => {
+      expect(
+        getPaginatorPages({ page: 8, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
+    })
+    test('Page: 10/10', () => {
+      expect(
+        getPaginatorPages({ page: 10, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
+    })
+  })
+})

src/lib/components/paginator/paginatorUtils.ts

@@ -0,0 +1,51 @@
+import { toParams } from '$lib/pagination/dropTakeParams'
+import { last, range } from 'ramda'
+
+export const Divider = 'divider'
+
+export function getPaginatorPages({
+  page,
+  pageSize,
+  totalCount,
+}: {
+  page: number
+  pageSize: number
+  totalCount: number
+}): (number | typeof Divider)[] {
+  const maxLinksLength = 7
+  const linksAroundActive = 2
+  const totalPages = Math.ceil(totalCount / pageSize)
+  const shownPages = range(1, totalPages + 1).reduce<
+    (number | typeof Divider)[]
+  >((acc, link) => {
+    const isFirst = link === 1
+    const isLast = link === totalPages
+    const isPageOnStart = page <= 3 && link < maxLinksLength
+    const isPageOnEnd =
+      page >= totalPages - 3 && link > totalPages - maxLinksLength + 1
+
+    if ([isFirst, isLast, isPageOnStart, isPageOnEnd].some((value) => value)) {
+      return [...acc, link]
+    }
+
+    if (link < page - linksAroundActive || link > page + linksAroundActive) {
+      if (last(acc) === Divider) {
+        return acc
+      }
+      return [...acc, Divider]
+    }
+
+    return [...acc, link]
+  }, [])
+
+  return shownPages
+}
+
+export function createHref(
+  href: string,
+  filters: Record<string, string>,
+  pageNumber: number
+) {
+  const filtersPath = toParams(filters)
+  return `/${href}/${filtersPath ? filtersPath + '/' : ''}page/${pageNumber}`
+}

src/lib/large-media.ts

@@ -0,0 +1,42 @@
+import { map, multiply } from 'ramda'
+
+export interface ImageOptions {
+  width?: number
+  height?: number
+}
+
+/**
+ * Get the URL for resource with specified parameters for Netlify Large Media trasformation
+ *
+ * @see https://docs.netlify.com/large-media/transform-images/
+ */
+export function getNFResize(href: string, { width, height }: ImageOptions) {
+  return `${href}?nf_resize=fit${height ? `&h=${height}` : ''}${
+    width ? `&w=${width}` : ''
+  }`
+}
+
+export const PIXEL_DENSITIES = [1, 1.5, 2, 3, 4]
+
+function multiplyImageOptions(
+  multiplier,
+  imageOptions: ImageOptions
+): ImageOptions {
+  return map(multiply(multiplier), imageOptions)
+}
+
+/**
+ * Generate `srcset` attribute for all `PIXEL_DENSITIES` to serve images in appropriate quality
+ * for each device with specific density
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
+ */
+export function generateSrcSet(href: string, imageOptions: ImageOptions) {
+  return PIXEL_DENSITIES.map(
+    (density) =>
+      `${getNFResize(
+        href,
+        multiplyImageOptions(density, imageOptions)
+      )} ${density}x`
+  ).join(',')
+}

src/lib/markdown/parse-markdown.ts

@@ -0,0 +1,11 @@
+import marked from 'marked'
+import { renderer } from './renderer-extension'
+
+marked.use({ renderer })
+
+export function parseField<T>(field: keyof T) {
+  return (item: T): T => ({
+    ...item,
+    [field]: marked(item[field]),
+  })
+}

src/lib/markdown/renderer-extension.ts

@@ -0,0 +1,49 @@
+import { generateSrcSet, getNFResize } from '$lib/large-media'
+import Prism from 'prismjs'
+import loadLanguages from 'prismjs/components/index.js'
+
+loadLanguages(['bash', 'markdown', 'json', 'yaml', 'typescript'])
+
+export const renderer = {
+  heading(text: string, level: string) {
+    const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-')
+
+    return `
+      <h${level}>
+        <a name="${escapedText}" class="anchor" href="#${escapedText}">
+          <span class="header-link"></span>
+        </a>
+        ${text}
+      </h${level}>
+    `
+  },
+  image(href: string, title: string, text: string) {
+    const figcaption = title ? `<figcaption>${title}</figcaption>` : ''
+    const isLocal = !href.startsWith('http')
+    const src = isLocal ? getNFResize(href, { height: 800, width: 800 }) : href
+    const srcset = isLocal
+      ? `srcset="${generateSrcSet(href, { width: 800, height: 800 })}"`
+      : ''
+
+    return `
+      <figure>
+        <img
+          alt="${text}"
+          ${srcset}
+          src="${src}"
+        />
+        ${figcaption}
+      </figure>
+    `
+  },
+  code(source: string, lang?: string) {
+    // When lang is not specified it is usually an empty string which has to be handled
+    const usedLang = !lang ? 'shell' : lang
+    const highlightedSource = Prism.highlight(
+      source,
+      Prism.languages[usedLang],
+      usedLang
+    )
+    return `<pre class='language-${usedLang}'><code class='language-${usedLang}'>${highlightedSource}</code></pre>`
+  },
+}

src/lib/pagination/dropTakeParams.test.ts

@@ -0,0 +1,11 @@
+import { describe, test, expect } from 'vitest'
+import { getDropTakeFromPageParams } from './dropTakeParams'
+
+describe('convert search params', () => {
+  test('should convert from page size and page to offset and limit', () => {
+    expect(getDropTakeFromPageParams(7, 2)).toEqual({
+      offset: 7,
+      limit: 7,
+    })
+  })
+})

src/lib/pagination/dropTakeParams.ts

@@ -0,0 +1,42 @@
+import { init, splitEvery } from 'ramda'
+
+export function parseParams(params: string) {
+  let splittedParams = params.split('/')
+  if (splittedParams.length % 2 !== 0) {
+    splittedParams = init(splittedParams)
+  }
+  const splits = splitEvery(2, splittedParams)
+  return Object.fromEntries(splits)
+}
+
+export function toParams(records: Record<string, string>) {
+  return Object.entries(records)
+    .map(([key, value]) => `${key}/${value}`)
+    .join('/')
+}
+
+export interface PaginationParams {
+  pageSize: number
+  page: number
+  filters?: Record<string, string>
+}
+
+export interface DropTakeParams {
+  offset: number
+  limit: number
+}
+
+/**
+ * Convert svelte `load` params into a `offset` and `limit` so they can be used to fetch endpoints with pagination queries
+ */
+export function getDropTakeFromPageParams(
+  pageSize: number,
+  page: number
+): DropTakeParams {
+  const offset = pageSize * (page - 1)
+  const limit = pageSize
+  return {
+    offset,
+    limit,
+  }
+}

src/lib/pagination/pagination.test.ts

@@ -0,0 +1,98 @@
+import { range } from 'ramda'
+import { describe, expect, test } from 'vitest'
+import { filterByPropContains, dropAndTake, filterAndCount } from './pagination'
+
+describe('pagination', () => {
+  test('does not drop any items by default', () => {
+    const items = range(0, 100)
+    expect(dropAndTake({})(items)).toHaveLength(100)
+  })
+
+  test('limits out exact number of items', () => {
+    const items = range(0, 100)
+    expect(dropAndTake({ limit: 10 })(items)).toHaveLength(10)
+    expect(dropAndTake({ limit: 10 })(items)[0]).toBe(0)
+    expect(dropAndTake({ limit: 10 })(items)[9]).toBe(9)
+  })
+
+  test('offset is skipping a number of items from the front', () => {
+    const items = range(0, 100)
+    expect(dropAndTake({ offset: 10 })(items)).toHaveLength(90)
+    expect(dropAndTake({ offset: 10 })(items)[0]).toBe(10)
+  })
+
+  test('is able to combine limit and offset', () => {
+    const items = range(0, 100)
+    expect(dropAndTake({ offset: 10, limit: 10 })(items)).toHaveLength(10)
+    expect(dropAndTake({ offset: 10, limit: 10 })(items)[0]).toBe(10)
+    expect(dropAndTake({ offset: 10, limit: 10 })(items)[9]).toBe(19)
+  })
+
+  test('is able to filter by a field', () => {
+    const items = [
+      {
+        id: 1,
+        prop: ['yes'],
+      },
+      {
+        id: 2,
+        prop: ['yes', 'no'],
+      },
+    ]
+
+    expect(filterByPropContains({ prop: 'no' })(items)).toHaveLength(1)
+    expect(filterByPropContains({ prop: 'no' })(items)[0].id).toBe(2)
+
+    expect(filterByPropContains({ prop: 'yes' })(items)[0].id).toBe(1)
+    expect(filterByPropContains({ prop: 'yes' })(items)).toHaveLength(2)
+  })
+
+  describe('is able to combine limit and offset while filtering by field', () => {
+    const items = [
+      {
+        id: 1,
+        prop: ['yes'],
+      },
+      {
+        id: 2,
+        prop: ['yes', 'no'],
+      },
+      {
+        id: 3,
+        prop: ['yes', 'no'],
+      },
+    ]
+
+    test('combine all parameters', () => {
+      const result = filterAndCount({
+        offset: 1,
+        limit: 1,
+        filters: { prop: 'no' },
+      })(items)
+      expect(result.totalCount).toBe(2)
+      expect(result.items[0].id).toBe(3)
+    })
+
+    test('with 0 offset', () => {
+      const result = filterAndCount({
+        offset: 0,
+        limit: 1,
+        filters: { prop: 'no' },
+      })(items)
+      expect(result.totalCount).toBe(2)
+      expect(result.items[0].id).toBe(2)
+    })
+
+    test('without filter', () => {
+      const result = filterAndCount({ offset: 1, limit: 1 })(items)
+      expect(result.totalCount).toBe(3)
+      expect(result.items[0].id).toBe(2)
+    })
+
+    test('without any params', () => {
+      const result = filterAndCount({})(items)
+      expect(result.totalCount).toBe(3)
+      expect(result.items.length).toEqual(result.totalCount)
+    })
+  })
+})

src/lib/pagination/pagination.ts

@@ -0,0 +1,48 @@
+import { identity, drop, take, pipe } from 'ramda'
+
+export interface PaginationQuery {
+  offset?: number
+  limit?: number
+  filters?: Record<string, string>
+}
+
+export interface PaginationResult<ItemType> {
+  items: ItemType[]
+  totalCount: number
+}
+
+export function dropAndTake<Item>({ offset = 0, limit = Infinity }) {
+  return pipe(drop<Item>(offset), take<Item>(limit)) as (
+    items: Item[]
+  ) => Item[]
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function filterByPropContains<Item extends Record<string, any>>(
+  filters: Record<string, string>
+) {
+  return function (items: Item[]) {
+    return items.filter((item) => {
+      return Object.entries(filters).every(([fieldName, value]) =>
+        item[fieldName].includes(value)
+      )
+    })
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function filterAndCount<Item extends Record<string, any>>({
+  filters,
+  ...dropTakeParams
+}: PaginationQuery) {
+  return function (items: Item[]) {
+    const filterFunction = filters
+      ? filterByPropContains<Item>(filters)
+      : identity
+    const filteredItems = filterFunction(items)
+    return {
+      items: dropAndTake<Item>(dropTakeParams)(filteredItems),
+      totalCount: filteredItems.length,
+    }
+  }
+}

src/lib/styles/article/article.css.ts

@@ -0,0 +1,27 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { vars } from '$lib/styles/vars.css'
+
+export const contentClass = style({})
+
+globalStyle(`${contentClass} ul, ${contentClass} ol`, {
+  lineHeight: vars.lineHeight['2x'],
+})
+
+globalStyle(`${contentClass} li`, {
+  marginBottom: vars.space['2x'],
+})
+
+globalStyle(`${contentClass} img`, {
+  maxHeight: vars.height.image,
+})
+
+globalStyle(`${contentClass} img:only-child`, {
+  display: 'block',
+  margin: '0 auto',
+})
+
+globalStyle(`${contentClass} .video-embed`, {
+  margin: '0 auto',
+  maxWidth: vars.width.image,
+  aspectRatio: vars.aspectRatio.monitor,
+})

src/lib/styles/global.css.ts

@@ -0,0 +1,155 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { breakpoints, colors, vars } from './vars.css'
+
+globalStyle('html', {
+  scrollBehavior: 'smooth',
+})
+
+globalStyle('body', {
+  margin: 0,
+  fontFamily:
+    'cantarell, roboto, -apple-system, blinkmacsystemfont, segoe ui, oxygen, ubuntu, fira sans, droid sans, helvetica neue, sans-serif',
+  fontSize: '16px',
+  lineHeight: 1.65,
+  color: vars.color.articleText,
+  background: vars.color.background,
+  minHeight: '100vh',
+  '@media': {
+    [`screen and (min-width: ${breakpoints.s}px)`]: {
+      fontSize: '18px',
+    },
+    [`screen and (min-width: ${breakpoints.m}px)`]: {
+      fontSize: '24px',
+    },
+    print: {
+      fontSize: '12px',
+    }
+  },
+})
+
+globalStyle('h1, h2, h3, h4, h5, h6', {
+  marginTop: vars.space['2x'],
+  marginBottom: vars.space['1x'],
+  marginLeft: vars.space.none,
+  marginRight: vars.space.none,
+  lineHeight: vars.lineHeight['1x'],
+  color: vars.color.header,
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+})
+
+globalStyle('h1', {
+  fontSize: vars.fontSize['5x'],
+  fontWeight: 800,
+})
+
+globalStyle('h2', {
+  fontSize: vars.fontSize['4x'],
+  fontWeight: 700,
+})
+
+globalStyle('h3', {
+  fontSize: vars.fontSize['3x'],
+})
+
+globalStyle('h4', {
+  fontSize: vars.space['2x'],
+})
+
+globalStyle('a', {
+  textDecoration: 'none',
+  transition: 'color 0.2s',
+})
+
+globalStyle('a:link', {
+  color: vars.color.link,
+})
+
+globalStyle('a:hover', {
+  color: vars.color.linkHover,
+  textDecoration: 'underline',
+})
+
+globalStyle('a:visited', {
+  color: vars.color.linkVisited,
+})
+
+globalStyle('a:visited:hover', {
+  color: vars.color.linkVisitedHover,
+})
+
+globalStyle('main pre, main pre[class*="language-"], main :not(pre) > code', {
+  fontFamily: 'menlo, inconsolata, monospace',
+  backgroundColor: vars.color.codeBackground,
+  paddingTop: vars.space['1x'],
+  paddingBottom: vars.space['1x'],
+  paddingLeft: vars.space['1x'],
+  paddingRight: vars.space['1x'],
+  color: vars.color.code,
+  lineHeight: vars.lineHeight['0x'],
+  boxShadow: vars.boxShadow.codeBoxShadow,
+  borderRadius: 3,
+})
+
+globalStyle('main code, main code[class*="language-"]', {
+  fontSize: vars.fontSize.sm,
+  '@media': {
+    [`screen and (min-width: ${breakpoints.m}px)`]: {
+      fontSize: vars.fontSize.xs,
+    },
+  },
+})
+
+globalStyle('code', {
+  whiteSpace: 'pre-line',
+})
+
+globalStyle('pre code', {
+  whiteSpace: 'pre',
+})
+
+globalStyle('figure', {
+  marginTop: vars.space['2x'],
+  marginBottom: vars.space['2x'],
+  marginLeft: vars.space['1x'],
+  marginRight: vars.space['1x'],
+  textAlign: 'center',
+})
+
+globalStyle('figcaption', {
+  fontSize: vars.fontSize.xs,
+  fontStyle: 'italic',
+})
+
+globalStyle('blockquote', {
+  lineHeight: vars.lineHeight['2x'],
+  margin: vars.space['0x'],
+  paddingLeft: vars.space['2x'],
+  paddingRight: vars.space['0x'],
+  paddingTop: vars.space['1x'],
+  paddingBottom: vars.space['2x'],
+  background: vars.color.quoteBackground,
+  borderRadius: 3,
+  borderLeft: `2px solid ${colors.tearkiss}`,
+  boxShadow: vars.boxShadow.contentBoxShadow,
+  fontSize: vars.fontSize.sm,
+  overflow: 'auto',
+})
+
+globalStyle('blockquote p', {
+  marginTop: vars.space['0x'],
+  marginBottom: vars.space['0x'],
+})
+
+globalStyle('p', {
+  marginTop: vars.space['1x'],
+  marginBottom: vars.space['1x'],
+})
+
+globalStyle('b, strong', {
+  fontWeight: 600,
+})
+
+globalStyle('::selection', {
+  background: vars.color.selection,
+})

src/lib/styles/scoops.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css'
+import { desaturate, transparentize } from 'polished'
+import { colors } from './vars.css'
+
+export const horizontalBorderTopClass = style({
+  borderTop: `1px solid ${transparentize(
+    0.6,
+    desaturate(0.5, colors.tearkiss)
+  )}`,
+})

src/lib/styles/sprinkles.css.ts

@@ -0,0 +1,80 @@
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
+import { breakpoints, vars } from './vars.css'
+
+const responsiveProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { '@media': `screen and (min-width: ${breakpoints.m}px)` },
+    desktop: { '@media': `screen and (min-width: ${breakpoints.l}px)` },
+  },
+  defaultCondition: 'mobile',
+  properties: {
+    display: ['none', 'flex', 'block', 'inline', 'inline-block', 'grid'],
+    position: ['relative', 'absolute', 'fixed'],
+    flexDirection: ['row', 'column'],
+    flexWrap: ['wrap', 'nowrap'],
+    flexShrink: [0],
+    flexGrow: [0, 1],
+    justifyContent: [
+      'stretch',
+      'start',
+      'center',
+      'end',
+      'space-around',
+      'space-between',
+    ],
+    justifyItems: [
+      'stretch',
+      'start',
+      'center',
+      'end',
+      'space-around',
+      'space-between',
+    ],
+    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    flex: ['1'],
+    gap: vars.space,
+    textAlign: ['center', 'justify', 'start', 'end'],
+    textShadow: vars.textShadow,
+    paddingTop: vars.space,
+    paddingBottom: vars.space,
+    paddingLeft: vars.space,
+    paddingRight: vars.space,
+    marginTop: vars.space,
+    marginBottom: vars.space,
+    marginRight: vars.space,
+    marginLeft: vars.space,
+    columnGap: vars.space,
+    fontSize: vars.fontSize,
+    fontFamily: vars.fontFamily,
+    fontWeight: vars.fontWeight,
+    fontStyle: ['italic', 'normal'],
+    lineHeight: vars.lineHeight,
+    whiteSpace: ['normal', 'nowrap'],
+    width: vars.width,
+    maxWidth: vars.width,
+    height: vars.height,
+    listStyle: ['none'],
+    overflow: ['auto'],
+    aspectRatio: vars.aspectRatio,
+  },
+  shorthands: {
+    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    placeItems: ['justifyContent', 'alignItems'],
+    typeSize: ['fontSize', 'lineHeight'],
+    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
+    marginX: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+  },
+})
+
+const colorProperties = defineProperties({
+  properties: {
+    color: vars.color,
+    background: vars.color,
+  },
+})
+
+export const sprinkles = createSprinkles(responsiveProperties, colorProperties)

src/lib/styles/vars.css.ts

@@ -0,0 +1,154 @@
+import { createGlobalTheme } from '@vanilla-extract/css'
+import {
+  darken,
+  desaturate,
+  lighten,
+  mix,
+  modularScale,
+  saturate,
+  tint,
+  transparentize,
+} from 'polished'
+
+export const colors = {
+  tearkiss: '#42a6f0',
+  pinky: '#fea6eb',
+  lightCyan: '#d8f6ff',
+  midnightBlue: '#171664',
+  frenchViolet: '#7332c3',
+}
+
+export const menuBackground = transparentize(0.6, colors.tearkiss)
+export const twitchEmbedBackground = transparentize(0.6, colors.pinky)
+export const background = tint(0.7, colors.lightCyan)
+export const codeBackground = tint(0.2, background)
+export const quoteBackground = darken(0.02, background)
+export const transparent = transparentize(1, '#ffffff')
+const articleText = desaturate(0.16, colors.midnightBlue)
+
+export enum breakpoints {
+  s = 400,
+  m = 700,
+  image = 800,
+  l = 1000,
+  max = 1140,
+}
+
+export function mediaAt(breakpoint: breakpoints) {
+  return `screen and (min-width: ${breakpoint}px)`
+}
+
+const createScale =
+  (base: number, ratio: number, unit = 'em') =>
+  (steps: number) =>
+    `${modularScale(steps, base, ratio)}${unit}`
+
+const spaceScale = createScale(0.2, 2)
+const fontSizeScale = createScale(1, 1.125)
+const lineHeightScale = createScale(1.05, 1.125)
+// const borderRadiusScale = createScale(1.5, 4)
+
+export const vars = createGlobalTheme(':root', {
+  space: {
+    none: '0',
+    auto: 'auto',
+    '0x': spaceScale(0),
+    '1x': spaceScale(1),
+    '2x': spaceScale(2),
+    '3x': spaceScale(3),
+    '4x': spaceScale(4),
+    '5x': spaceScale(5),
+    '6x': spaceScale(6),
+    '7x': spaceScale(7),
+    '8x': spaceScale(8),
+  },
+  color: {
+    articleText,
+    tintedText: tint(0.25, articleText),
+    selection: tint(0.4, colors.pinky),
+    link: saturate(0.2, mix(0.66, colors.tearkiss, colors.midnightBlue)),
+    linkHover: colors.tearkiss,
+    linkVisited: colors.frenchViolet,
+    linkVisitedHover: lighten(0.1, colors.frenchViolet),
+    code: lighten(0.15, articleText),
+
+    menu: colors.midnightBlue,
+    menuLink: colors.midnightBlue,
+    menuLinkHover: lighten(0.15, colors.midnightBlue),
+
+    header: lighten(0.1, colors.midnightBlue),
+    background,
+    codeBackground,
+    quoteBackground,
+    menuBackground,
+  },
+  fontFamily: {
+    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  },
+  fontSize: {
+    xs: fontSizeScale(-2),
+    sm: fontSizeScale(-1),
+    base: fontSizeScale(0),
+    xl: fontSizeScale(1),
+    '2x': fontSizeScale(2),
+    '3x': fontSizeScale(3),
+    '4x': fontSizeScale(5),
+    '5x': fontSizeScale(7),
+    '6x': fontSizeScale(9),
+  },
+  lineHeight: {
+    none: '0',
+    '0x': lineHeightScale(0),
+    '1x': lineHeightScale(1),
+    '2x': lineHeightScale(2),
+    '3x': lineHeightScale(3),
+    '4x': lineHeightScale(4),
+    '5x': lineHeightScale(5),
+  },
+  fontWeight: {
+    thin: 'thin',
+    normal: 'normal',
+    bold: 'bold',
+  },
+  textShadow: {
+    menuLinkShadow: `0.02em 0.02em 0.03em ${transparentize(
+      0.7,
+      colors.midnightBlue
+    )}`,
+    menuActiveLinkShadow: `0.01em 0.01em 0.05em ${transparentize(
+      0.1,
+      colors.midnightBlue
+    )}`,
+  },
+  boxShadow: {
+    contentBoxShadow: `0px 0px 2px 1px ${transparentize(
+      0.5,
+      desaturate(0.5, colors.tearkiss)
+    )}`,
+    codeBoxShadow: `inset 0px 0px 2px 1px ${transparentize(
+      0.8,
+      desaturate(0.5, colors.tearkiss)
+    )}`,
+  },
+  width: {
+    auto: 'auto',
+    s: '400px',
+    m: '700px',
+    image: '800px',
+    l: '1000px',
+    max: '1140px',
+    full: '100vw',
+    parent: '100%',
+    layoutMax: '42rem',
+    headerFooterMax: '52rem',
+    additionalBlockMax: '46rem',
+  },
+  height: {
+    full: '100hw',
+    parent: '100%',
+    image: '640px',
+  },
+  aspectRatio: {
+    monitor: '16 / 9',
+  },
+})

src/params/blogPage.ts

@@ -0,0 +1,4 @@
+/** @type {import('@sveltejs/kit').ParamMatcher} */
+export function match(param: string) {
+  return !['tags', 'page'].some((keyword) => param.startsWith(keyword))
+}

src/routes/+layout.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { LayoutData } from './$types'
+  import Nav from '$lib/components/Nav.svelte'
+  import Footer from '$lib/components/Footer.svelte'
+  import 'modern-normalize/modern-normalize.css'
+  import '$lib/styles/global.css'
+  import { mainContentClass } from './layout.css'
+
+  export let data: LayoutData
+  export let latestPosts = data.latestPosts
+</script>
+
+<div class="app-content">
+  <Nav />
+
+  <main class={mainContentClass}>
+    <slot />
+  </main>
+  <Footer {latestPosts} />
+</div>