Merge pull request #8 from cupcakearmy/rewrite

Rewrite
2021-12-22 23:47:31 +01:00 · 2021-12-22 23:47:31 +01:00 · c9dc5fadd1
parent d8e58997e4 b3c72786cb
commit c9dc5fadd1
74 changed files with 14436 additions and 3670 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+VITE_API_URL=https://api.nicco.io/graphql
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1 @@
+*.afphoto filter=lfs diff=lfs merge=lfs -text
--- a/.gitignore
+++ b/.gitignore
@ -1,10 +1,7 @@
-# Node
-/node_modules/
-
-# Sapper
-/src/node_modules/@sapper/
-/__sapper__/
-
+.DS_Store
+node_modules
+/.svelte-kit
+/package
+/build
+.vercel_build_output
 .vercel
-data
-backups
--- a/.graphqlrc.yml
+++ b/.graphqlrc.yml
@ -0,0 +1 @@
+schema: "https://api.nicco.io/graphql"
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/.prettierrc
+++ b/.prettierrc
@ -1,7 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "trailingComma": "es5",
-  "singleQuote": true
-}
--- a/.vercelignore
+++ b/.vercelignore
@ -1,10 +0,0 @@
-# Node
-/node_modules/
-
-# Sapper
-/src/node_modules/@sapper/
-/__sapper__/
-
-.vercel
-data
-backups
--- a/README.md
+++ b/README.md
@ -1,13 +1,38 @@
-# [nicco.io](https://nicco.io)
+# create-svelte

-My personal space on the interwebs
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);

-## Stack
+## Creating a project

- Wordpress as Headless CMS
-  - Advanced Custom Fields
-  - Custom Post Type UI
-  - ACF to REST API
-  - WP Webhooks
- Sapper Frontend (Svelte)
- Vercel for static hosting
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+
+```bash
+npm run build
+```
+
+> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
--- a/codegen.yaml
+++ b/codegen.yaml
@ -0,0 +1,14 @@
+schema: https://api.nicco.io/graphql
+documents: "src/**/*.graphql"
+generates:
+  ./src/lib/gql/gen.ts:
+    plugins:
+      - "@graphql-codegen/typescript"
+      - "@graphql-codegen/typescript-operations"
+      - "@graphql-codegen/typescript-graphql-request"
+    config:
+      maybeValue: "T"
+      typesPrefix: GQL
+      immutableTypes: true
+      useTypeImports: true
+      avoidOptionals: true
--- a/design/About.afphoto
+++ b/design/About.afphoto
--- a/design/About.png
+++ b/design/About.png
--- a/design/Home.afphoto
+++ b/design/Home.afphoto
--- a/design/Home.png
+++ b/design/Home.png
--- a/design/Signature.afphoto
+++ b/design/Signature.afphoto
--- a/design/Signature.png
+++ b/design/Signature.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,30 +1,36 @@
 {
  "private": true,
  "scripts": {
-    "dev": "sapper dev",
-    "export": "sapper export",
-    "start": "serve __sapper__/export"
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "generate": "graphql-codegen",
+    "ci": "pnpm run generate && pnpm run check && pnpm run build"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@graphql-codegen/cli": "^2.3.0",
+    "@graphql-codegen/typescript": "^2.4.1",
+    "@graphql-codegen/typescript-graphql-request": "^4.3.2",
+    "@graphql-codegen/typescript-operations": "^2.2.1",
+    "@sveltejs/adapter-static": "next",
+    "@sveltejs/kit": "next",
+    "@types/lunr": "^2.3.4",
+    "graphql": "^15.8.0",
+    "graphql-request": "^3.7.0",
+    "graphql-tag": "^2.12.6",
+    "svelte": "^3.44.3",
+    "svelte-check": "^2.2.11",
+    "svelte-preprocess": "^4.10.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4"
  },
  "dependencies": {
-    "axios": "^0.21.1",
-    "compression": "^1.7.1",
-    "dayjs": "^1.9.7",
-    "highlight.js": "^10.4.1",
+    "dayjs": "^1.10.7",
+    "highlight.js": "^11.3.1",
    "lunr": "^2.3.9",
-    "polka": "next",
-    "sirv": "^1.0.9",
-    "svelte-cloudinary": "^0.2"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.2.0",
-    "npm-run-all": "^4.1.5",
-    "rollup": "^2.34.2",
-    "rollup-plugin-svelte": "^6.1.1",
-    "rollup-plugin-terser": "^7.0.0",
-    "sapper": "^0.29.0",
-    "sapper-environment": "^1.0.1",
-    "svelte": "^3.35.0"
+    "svelte-cloudinary": "^0.2.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/rollup.config.js
+++ b/rollup.config.js
@ -1,75 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import commonjs from '@rollup/plugin-commonjs'
-import svelte from 'rollup-plugin-svelte'
-import { terser } from 'rollup-plugin-terser'
-import config from 'sapper/config/rollup.js'
-import pkg from './package.json'
-
-const mode = process.env.NODE_ENV
-const dev = mode === 'development'
-
-const onwarn = (warning, onwarn) =>
-  (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
-  (warning.code === 'CIRCULAR_DEPENDENCY' &&
-    /[/\\]@sapper[/\\]/.test(warning.message)) ||
-  onwarn(warning)
-
-export default {
-  client: {
-    input: config.client.input(),
-    output: config.client.output(),
-    plugins: [
-      replace({
-        'process.browser': true,
-        'process.env.NODE_ENV': JSON.stringify(mode),
-        preventAssignment: true,
-      }),
-      svelte({
-        dev,
-        hydratable: true,
-        emitCss: true,
-      }),
-      resolve({
-        browser: true,
-        dedupe: ['svelte'],
-      }),
-      commonjs(),
-
-      !dev &&
-        terser({
-          module: true,
-        }),
-    ],
-
-    preserveEntrySignatures: false,
-    onwarn,
-  },
-
-  server: {
-    input: config.server.input(),
-    output: config.server.output(),
-    plugins: [
-      replace({
-        'process.browser': false,
-        'process.env.NODE_ENV': JSON.stringify(mode),
-        preventAssignment: true,
-      }),
-      svelte({
-        generate: 'ssr',
-        hydratable: true,
-        dev,
-      }),
-      resolve({
-        dedupe: ['svelte'],
-      }),
-      commonjs(),
-    ],
-    external: Object.keys(pkg.dependencies).concat(
-      require('module').builtinModules
-    ),
-
-    preserveEntrySignatures: 'strict',
-    onwarn,
-  },
-}
--- a/static/global.css
+++ b/static/global.css
@ -7,8 +7,8 @@
 }

 :root {
-  --ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+    Helvetica Neue, sans-serif;
  --ff-alt: 'Playfair Display', serif;
  --clr-light: #ffffff;
  --clr-dark: #010101;
--- a/src/template.html
+++ b/src/template.html
@ -4,35 +4,14 @@
    <meta charset="utf-8" />
    <meta name="description" content="Designer & Developer" />
    <meta name="keywords" content="Web Agency Blog Articles" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,viewport-fit=cover"
-    />
-    <meta name="theme-color" content="#333333" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />

-    %sapper.base%
-
-    <link rel="stylesheet" href="global.css" />
    <link rel="icon" type="image/png" href="/images/monogramm.png" />

-    <!-- Sapper generates a <style> tag containing critical CSS
-	     for the current page. CSS for the rest of the app is
-	     lazily loaded when it precaches secondary pages -->
-    %sapper.styles%
-
-    <!-- This contains the contents of the <svelte:head> component, if
-	     the current page has one -->
-    %sapper.head%
+    %svelte.head%
  </head>
  <body>
-    <!-- The application will be rendered inside this element,
-      because `src/client.js` references it -->
-    <div id="sapper">%sapper.html%</div>
-
-    <!-- Sapper creates a <script> tag containing `src/client.js`
-        and anything else it needs to hydrate the app and
-        initialise the router -->
-    %sapper.scripts%
+    <div id="svelte">%svelte.body%</div>

    <script type="text/javascript">
      var _paq = (window._paq = window._paq || [])
@ -56,11 +35,7 @@
    </script>
    <noscript
      ><p>
-        <img
-          src="//stats.nicco.io/rainbow?idsite=1&amp;rec=1"
-          style="border: 0"
-          alt=""
-        /></p
+        <img src="//stats.nicco.io/rainbow?idsite=1&amp;rec=1" style="border: 0" alt="" /></p
    ></noscript>
  </body>
 </html>
--- a/src/client.js
+++ b/src/client.js
@ -1,5 +0,0 @@
-import * as sapper from '@sapper/app';
-
-sapper.start({
-	target: document.querySelector('#sapper')
-});
--- a/src/components/ImageFrame.svelte
+++ b/src/components/ImageFrame.svelte
@ -1,33 +0,0 @@
-<script context="module">
-  import { initialize } from 'svelte-cloudinary'
-
-  initialize({ cloud_name: 'cupcakearmy' })
-</script>
-
-<script>
-  import { image } from 'svelte-cloudinary'
-
-  export let src
-  export let alt
-
-  $: cleaned = src.replace('https://api.nicco.io', '/nicco')
-</script>
-
-<style>
-  img {
-    width: calc(100% - 0.25em);
-    object-fit: cover;
-    object-position: center;
-    border: 0.125em solid var(--clr-primary);
-    transition: var(--animation);
-    transform: scale(1);
-    margin: 0;
-  }
-
-  img {
-    transform: scale(1.1);
-    margin: 1em 0;
-  }
-</style>
-
-<img use:image={{ src: cleaned, bind: { width: true }, lazy: true }} {alt} />
--- a/src/components/Work.svelte
+++ b/src/components/Work.svelte
@ -1,61 +0,0 @@
-<script>
-  import dj from 'dayjs'
-  import ImageFrame from '../components/ImageFrame.svelte'
-  import Icon from '../components/Icon.svelte'
-
-  export let work
-</script>
-
-<a href={work.link} target="_blank" rel="noopener">
-  <div class="horizontal">
-    <div class="title regular">{work.title}</div>
-    <div>
-      <Icon icon="link-outline" />
-      <span>{work.link.replace(/https?:\/\//, '')}</span>
-    </div>
-  </div>
-
-  <ImageFrame
-    src={work.image.sizes.medium_large}
-    alt={work.image.description}
-  />
-</a>
-<div class="horizontal regular">
-  <div>{work.role}</div>
-  <div>{dj(work.date * 1000).format('MMM YY')}</div>
-</div>
-<p>
-  {@html work.content}
-</p>
-
-<style>
-  .title {
-    font-size: 2em;
-    line-height: 1;
-  }
-
-  .horizontal {
-    display: flex;
-    justify-content: space-between;
-    align-items: end;
-  }
-
-  .regular {
-    font-weight: 400;
-  }
-
-  p {
-    margin-bottom: 6em;
-  }
-
-  a {
-    font-family: monospace;
-  }
-
-  @media (max-width: 30em) {
-    .horizontal {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-</style>
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />
--- a/src/lib/actions/cloudinary.ts
+++ b/src/lib/actions/cloudinary.ts
@ -0,0 +1,8 @@
+import { initialize, image } from 'svelte-cloudinary'
+
+initialize({ cloud_name: 'cupcakearmy', secure: true })
+
+export function cdn(el: HTMLImageElement, src: string) {
+  const cleaned = src.replace('https://api.nicco.io', '/nicco')
+  return image(el, { src: cleaned, bind: { width: true }, lazy: true })
+}
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@ -1,13 +1,12 @@
-<script>
+<script lang="ts">
  import { onMount } from 'svelte'
-  export let icon
+  export let icon: string

  $: src = `/icons/${icon}.svg`

-  let html = null
+  let html: string | null = null

  onMount(async () => {
-    console.log(src)
    html = await fetch(src).then((res) => res.text())
  })
 </script>
@ -27,7 +26,6 @@
    width: 1em;
    height: 1em;
    contain: strict;
-    /* fill: currentcolor; */
    box-sizing: content-box;
    transform: translateY(0.2em);
  }
--- a/src/lib/components/IconList.svelte
+++ b/src/lib/components/IconList.svelte
@ -1,9 +1,15 @@
-<script>
+<script lang="ts">
  import Icon from './Icon.svelte'

-  export let links = []
+  type Link = {
+    href: string
+    name: string
+    icon: string
+  }

-  function isExternal(link) {
+  export let links: Link[] = []
+
+  function isExternal(link: string) {
    return /^https?\:\/\//.test(link)
  }

@ -15,11 +21,7 @@

 <ul>
  {#each list as { href, name, icon, external }}
-    <a
-      rel={external ? 'noopener noreferrer' : ''}
-      {href}
-      target={external ? '_blank' : ''}
-    >
+    <a rel={external ? 'noopener noreferrer' : ''} {href} target={external ? '_blank' : ''}>
      <li>
        <Icon class="icon" {icon} />
        {name}
--- a/src/lib/components/ImageFrame.svelte
+++ b/src/lib/components/ImageFrame.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+  import { cdn } from '$lib/actions/cloudinary'
+
+  export let src: string
+  export let alt: string
+</script>
+
+<img use:cdn={src} {alt} />
+
+<style>
+  img {
+    width: calc(100% - 0.25em);
+    object-fit: cover;
+    object-position: center;
+    border: 0.125em solid var(--clr-primary);
+    transition: var(--animation);
+    transform: scale(1);
+    margin: 0;
+  }
+
+  img {
+    transform: scale(1.1);
+    margin: 1em 0;
+  }
+</style>
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@ -1,7 +1,7 @@
-<script>
-  import Icon from './Icon.svelte'
+<script lang="ts">
+  import { page } from '$app/stores'

-  export let segment
+  import Icon from './Icon.svelte'

  const routes = [
    { name: 'About', href: '/about' },
@ -10,13 +10,11 @@
    { name: 'Blog', href: '/blog' },
    { name: 'Contact', href: '/contact' },
  ]
-
-  let nav
 </script>

-<nav bind:this={nav}>
+<nav>
  <a href="/">
-    <h1 class:active={segment === undefined}>NB</h1>
+    <h1 class:active={$page.path === '/'}>NB</h1>
  </a>
  <ul>
    <li>
@ -28,7 +26,7 @@
      <li>
        <a {href}>
          <span>{name}</span>
-          <div class:active={href.slice(1) === segment} />
+          <div class:active={$page.path.startsWith(href)} />
        </a>
      </li>
    {/each}
--- a/src/lib/components/PageTitle.svelte
+++ b/src/lib/components/PageTitle.svelte
@ -1,19 +1,19 @@
-<script>
+<script lang="ts">
  import SpacedLetters from './SpacedLetters.svelte'

  export let title = ''
  export let readable = false
 </script>

+<div>
+  <h1>
+    <SpacedLetters letters={title} {readable} />
+  </h1>
+</div>
+
 <style>
  div {
    margin-top: calc(28vh - 3em);
    margin-bottom: 3em;
  }
 </style>
-
-<div>
-  <h1>
-    <SpacedLetters letters={title} {readable} />
-  </h1>
-</div>
--- a/src/lib/components/PostAttributes.svelte
+++ b/src/lib/components/PostAttributes.svelte
@ -1,11 +1,12 @@
-<script>
+<script lang="ts">
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
+  import { readingTimeInMinutes } from '$lib/utils'
  import dj from 'dayjs'
-  import { readingTimeInMinutes } from '../lib/readingTime'

-  export let post
+  export let post: GQLBasePostFragment
  export let full = false

-  function format(date) {
+  function format(date: string) {
    return dj(date).format('MMM D, YYYY')
  }

@ -13,6 +14,16 @@
  $: modified = format(post.modified)
 </script>

+<div class="attributes">
+  <div>
+    {created}
+    {#if full && created !== modified}<br /> <small>Last update: {modified}</small>{/if}
+  </div>
+  {#if post.content}
+    <div>~ {readingTimeInMinutes(post.content)} min</div>
+  {/if}
+</div>
+
 <style>
  .attributes {
    display: flex;
@ -21,11 +32,3 @@
    margin-top: -0.125em;
  }
 </style>
-
-<div class="attributes">
-  <div>
-    {created}
-    {#if full && created !== modified}<br /> <small>Last update: {modified}</small>{/if}
-  </div>
-  <div>~ {readingTimeInMinutes(post.content)} min</div>
-</div>
--- a/src/lib/components/PostPreview.svelte
+++ b/src/lib/components/PostPreview.svelte
@ -1,10 +1,22 @@
-<script>
+<script lang="ts">
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
+
  import ImageFrame from '../components/ImageFrame.svelte'
  import PostAttributes from '../components/PostAttributes.svelte'

-  export let post
+  export let post: GQLBasePostFragment
 </script>

+<a href={`blog/${post.slug}`} class:without={!post.post.featured}>
+  {#if post.post.featured}
+    <ImageFrame src={post.post.featured.sourceUrl} alt={post.post.featured.altText} />
+  {/if}
+  <PostAttributes {post} />
+  <h2>
+    {@html post.title}
+  </h2>
+</a>
+
 <style>
  a {
    display: block;
@ -41,13 +53,3 @@
    transform: translateX(-5%);
  }
 </style>
-
-<a href={`blog/${post.slug}`} class:without={!post.featured}>
-  {#if post.featured}
-    <ImageFrame src={post.featured.url} alt={post.featured.description} />
-  {/if}
-  <PostAttributes {post} />
-  <h2>
-    {@html post.title}
-  </h2>
-</a>
--- a/src/lib/components/Progress.svelte
+++ b/src/lib/components/Progress.svelte
@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
  import { spring } from 'svelte/motion'
+  import { scroll } from '$lib/stores'

-  import { scroll } from '../lib/scroll'
+  let el: SVGElement

-  let el
  const springed = spring(
    { scroll: 0 },
    {
@ -12,7 +12,7 @@
    }
  )

-  function updateState(value) {
+  function updateState(value: number) {
    const max = 359.99999
    const R = 50
    let alpha = (360 / 1) * value
@ -21,9 +21,7 @@
    const x = R + R * Math.cos(a) * 2
    const y = R - R * Math.sin(a) * 2
    const center = alpha > 180 ? 1 : 0
-    const path = `M${R},${-50} A${R * 2},${
-      R * 2
-    },0,${center},1,${x},${y} L${R},${R} L${R},${-R}`
+    const path = `M${R},${-50} A${R * 2},${R * 2},0,${center},1,${x},${y} L${R},${R} L${R},${-R}`
    if (el) el.setAttribute('d', path)
  }

--- a/src/lib/components/Project.svelte
+++ b/src/lib/components/Project.svelte
@ -1,18 +1,18 @@
-<script>
-  import dj from 'dayjs'
+<script lang="ts">
+  import type { GQLBaseProjectFragment } from '$lib/gql/gen'
+  import dayjs from 'dayjs'
+  import Icon from './Icon.svelte'

-  import Icon from '../components/Icon.svelte'
-
-  export let project
+  export let project: GQLBaseProjectFragment
 </script>

 <section>
-  <a href={project.link} target="_blank" rel="noopener">
+  <a href={project.project.link} target="_blank" rel="noopener">
    <h2>{project.title}</h2>
  </a>
  <div class="subtitle">
-    <b>{project.description}</b>
-    <b class="date">{dj(project.date * 1000).format('MMM YY')}</b>
+    <b>{project.project.description}</b>
+    <b class="date">{dayjs(project.project.date, 'X').format('MMM YY')}</b>
  </div>

  <p>
@ -21,8 +21,8 @@

  <div class="link">
    <Icon icon="link-outline" />
-    <a rel="noopener noreferrer" target="_blank" href={project.link}
-      >{project.link.replace(/https?:\/\//, '')}</a
+    <a rel="noopener noreferrer" target="_blank" href={project.project.link}
+      >{project.project.link.replace(/https?:\/\//, '')}</a
    >
  </div>
 </section>
--- a/src/lib/components/SearchResult.svelte
+++ b/src/lib/components/SearchResult.svelte
@ -1,5 +1,12 @@
-<script>
-  export let result
+<script lang="ts" context="module">
+  export type SearchResultItem = {
+    ref: string
+    score: number
+  }
+</script>
+
+<script lang="ts">
+  export let result: SearchResultItem

  const [type, slug] = result.ref.split('/')
  let href = '/'
@ -7,13 +14,15 @@
  $: {
    switch (type) {
      case 'works':
+        href = `${type}/${slug}`
+        break
      case 'projects':
        href = `${type}`
        break
-      case 'post':
+      case 'posts':
        href = `/blog/${slug}`
        break
-      case 'page':
+      case 'pages':
        href = `/${slug}`
        break
    }
--- a/src/lib/components/SimplePage.svelte
+++ b/src/lib/components/SimplePage.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import PageTitle from './PageTitle.svelte'

  export let title = ''
@ -6,6 +6,12 @@
  export let readable = false
 </script>

+<PageTitle {title} {readable} />
+
+<section class:expanded>
+  <slot />
+</section>
+
 <style>
  section {
    max-width: 30em;
@ -16,9 +22,3 @@
    margin-top: 5em;
  }
 </style>
-
-<PageTitle {title} {readable} />
-
-<section class:expanded>
-  <slot />
-</section>
--- a/src/lib/components/SpacedLetters.svelte
+++ b/src/lib/components/SpacedLetters.svelte
@ -1,9 +1,15 @@
-<script>
-  export let letters = []
+<script lang="ts">
+  export let letters: string = ''
  export let even = false
  export let readable = false
 </script>

+<div class:even class:readable>
+  {#if even}
+    {#each letters as letter}<span>{letter}</span>{/each}
+  {:else}{letters}{/if}
+</div>
+
 <style>
  span {
    width: 1em;
@ -28,9 +34,3 @@
    font-size: 2.25rem;
  }
 </style>
-
-<div class:even class:readable>
-  {#if even}
-    {#each letters as letter}<span>{letter}</span>{/each}
-  {:else}{letters}{/if}
-</div>
--- a/src/lib/components/WPAdapter.svelte
+++ b/src/lib/components/WPAdapter.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import 'highlight.js/styles/github.css'
  import hljs from 'highlight.js/lib/core'
  import javascript from 'highlight.js/lib/languages/javascript'
@ -23,9 +23,9 @@

  import { onMount } from 'svelte'

-  export let content
+  export let content: string

-  function encodeTextToUrl(text) {
+  function encodeTextToUrl(text: string): string {
    return text
      .replace(/[^A-Za-z ]/, '')
      .replace('/ +/', ' ')
@ -35,14 +35,14 @@
  onMount(() => {
    hljs.highlightAll()

-    const selector = [1, 2, 3, 4, 5, 6]
-      .map((i) => `div.adapter h${i}`)
-      .join(', ')
+    const selector = [1, 2, 3, 4, 5, 6].map((i) => `div.adapter h${i}`).join(', ')
    const elements = window.document.querySelectorAll(selector)
-    for (const el of elements) {
-      const hash = encodeTextToUrl(el.textContent)
-      el.innerHTML = `<a class="target-link" name="${hash}" href="${window.location.pathname}#${hash}">${el.innerHTML}</a>`
-    }
+    elements.forEach((el) => {
+      if (el.textContent) {
+        const hash = encodeTextToUrl(el.textContent)
+        el.innerHTML = `<a class="target-link" name="${hash}" href="${window.location.pathname}#${hash}">${el.innerHTML}</a>`
+      }
+    })
  })
 </script>

--- a/src/lib/components/Work.svelte
+++ b/src/lib/components/Work.svelte
@ -0,0 +1,65 @@
+<script lang="ts">
+  import Icon from '$lib/components/Icon.svelte'
+  import ImageFrame from '$lib/components/ImageFrame.svelte'
+  import type { GQLBaseWorkFragment } from '$lib/gql/gen'
+  import dayjs from 'dayjs'
+
+  export let work: GQLBaseWorkFragment
+</script>
+
+<section>
+  <a href="/works/{work.slug}">
+    <div class="horizontal">
+      <div class="title regular">{work.title}</div>
+      <div>
+        <a href={work.work.link} target="_blank" rel="noopener">
+          <Icon icon="link-outline" />
+          <span>{work.work.link.replace(/https?:\/\//, '')}</span>
+        </a>
+      </div>
+    </div>
+
+    <ImageFrame src={work.work.image.sourceUrl} alt={work.work.image.altText} />
+  </a>
+  <div class="horizontal regular">
+    <div>{work.work.role}</div>
+    <div>{dayjs(work.work.date, 'X').format('MMM YY')}</div>
+  </div>
+  {#if work.content}
+    <p>
+      {@html work.content}
+    </p>
+  {/if}
+</section>
+
+<style>
+  .title {
+    font-size: 2em;
+    line-height: 1;
+  }
+
+  .horizontal {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+
+  .regular {
+    font-weight: 400;
+  }
+
+  section {
+    margin-bottom: 6em;
+  }
+
+  a {
+    font-family: monospace;
+  }
+
+  @media (max-width: 30em) {
+    .horizontal {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+</style>
--- a/src/lib/gql/gen.ts
+++ b/src/lib/gql/gen.ts
--- a/src/lib/gql/index.ts
+++ b/src/lib/gql/index.ts
@ -0,0 +1,5 @@
+import { GraphQLClient } from 'graphql-request'
+import { getSdk } from './gen'
+
+const client = new GraphQLClient('https://api.nicco.io/graphql')
+export const SDK = getSdk(client)
--- a/src/lib/gql/root.graphql
+++ b/src/lib/gql/root.graphql
@ -0,0 +1,145 @@
+fragment BaseMediaItem on MediaItem {
+  srcSet
+  altText
+  sourceUrl
+}
+
+query MediaItemsMany {
+  mediaItems(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseMediaItem
+    }
+  }
+}
+
+query MediaItemsOne($slug: ID!) {
+  mediaItem(id: $slug, idType: URI) {
+    ...BaseMediaItem
+  }
+}
+
+fragment BasePage on Page {
+  id
+  slug
+  title
+  content
+  status
+}
+
+query PagesMany {
+  pages(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BasePage
+    }
+  }
+}
+
+query PagesOne($slug: ID!) {
+  page(id: $slug, idType: URI) {
+    ...BasePage
+  }
+}
+
+fragment BaseWork on Work {
+  id
+  slug
+  title
+  content
+  status
+  work {
+    date
+    image {
+      ...BaseMediaItem
+    }
+    link
+    role
+  }
+}
+
+query WorksMany {
+  works(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseWork
+    }
+  }
+}
+
+query WorksOne($slug: ID!) {
+  work(id: $slug, idType: URI) {
+    ...BaseWork
+  }
+}
+
+fragment BaseProject on Project {
+  id
+  slug
+  title
+  content
+  status
+  project {
+    date
+    link
+    description
+  }
+}
+
+query ProjectsMany {
+  projects(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseProject
+    }
+  }
+}
+
+query ProjectsOne($slug: ID!) {
+  project(id: $slug, idType: URI) {
+    ...BaseProject
+  }
+}
+
+fragment BasePost on Post {
+  id
+  slug
+  title
+  content
+  status
+  date
+  modified
+  post {
+    featured {
+      ...BaseMediaItem
+    }
+  }
+}
+
+query PostsMany {
+  posts(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BasePost
+    }
+  }
+}
+
+query PostsOne($slug: ID!) {
+  post(id: $slug, idType: URI) {
+    ...BasePost
+  }
+}
+
+query Search {
+  posts(first: 100) {
+    nodes {
+      ...BasePost
+    }
+  }
+  projects(first: 100) {
+    nodes {
+      ...BaseProject
+    }
+  }
+  works(first: 100) {
+    nodes {
+      ...BaseWork
+    }
+  }
+}
--- a/src/lib/readingTime.js
+++ b/src/lib/readingTime.js
@ -1,6 +0,0 @@
-export function readingTimeInMinutes(text, options = {}) {
-  options = Object.assign({ wpm: 200 }, options)
-  const cleaned = text.replace(/(<.*?>)|(\\n)|(&#\d*?;)/g, '')
-  const words = cleaned.split(' ').length
-  return Math.round(words / options.wpm)
-}
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,5 @@
+export function readingTimeInMinutes(text: string, options: { wpm?: number } = {}): number {
+  const cleaned = text.replace(/(<.*?>)|(\\n)|(&#\d*?;)/g, '')
+  const words = cleaned.split(' ').length
+  return Math.round(words / (options.wpm ?? 200))
+}
--- a/src/lib/wp.js
+++ b/src/lib/wp.js
@ -1,50 +0,0 @@
-import axios from 'axios'
-
-const isDev = process.env.NODE_ENV !== 'production' && false
-axios.defaults.baseURL = `${isDev ? 'http://localhost' : 'https://api.nicco.io'}/wp-json/wp/v2`
-
-function normalize(post) {
-  return {
-    ...post,
-    ...post.acf,
-    id: post.id,
-    title: post.title.rendered,
-    content: post.content.rendered,
-  }
-}
-
-function combineUrlAndParams(url, params) {
-  const p = new URLSearchParams({
-    per_page: 100,
-    ...params,
-  }).toString()
-  return `${url}?${p}`
-}
-
-export async function getOne(url, params = {}) {
-  const { data } = await axios(combineUrlAndParams(url, params))
-  if (!data.length) return null
-  else return normalize(data[0])
-}
-
-export async function getAll(url, params = {}) {
-  const { data, headers } = await axios(combineUrlAndParams(url, params))
-  const totalPages = parseInt(headers['x-wp-totalpages'])
-  const results = [...data]
-  if (totalPages > 1) {
-    for (let page = 2; page <= totalPages; page++) {
-      const { data } = await axios(combineUrlAndParams(url, { ...params, page }))
-      results.push(...data)
-    }
-  }
-  return results.map(normalize)
-}
-
-export function sortByDate(data) {
-  return data.sort((a, b) => parseInt(b.date) - parseInt(a.date))
-}
-
-export function respond(res, body) {
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify(body))
-}
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -1,22 +1,26 @@
-<script>
+<script lang="ts">
  import { onMount } from 'svelte'
-  import { stores } from '@sapper/app'
+  import { page } from '$app/stores'

-  import { scroll } from '../lib/scroll'
-  import Nav from '../components/Nav.svelte'
-  import Progress from '../components/Progress.svelte'
+  import '../app.css'
+  import '$lib/actions/cloudinary'

-  export let segment
-  let wrapper
-  let main
+  import dayjs from 'dayjs'
+  import customParseFormat from 'dayjs/plugin/customParseFormat.js'
+  dayjs.extend(customParseFormat)
+
+  import { scroll } from '$lib/stores'
+  import Nav from '$lib/components/Nav.svelte'
+  import Progress from '$lib/components/Progress.svelte'
+
+  let wrapper: HTMLDivElement
+  let main: HTMLElement

  function resize() {
    wrapper.style.height = `${window.innerHeight}px`
  }

-  const { page } = stores()
  let last = ''
-
  $: {
    const { host, path } = $page
    const full = host + path
@ -26,25 +30,25 @@
    }
  }

-  function updateScroll(e) {
+  function updateScroll(e: any) {
    const el = e.target
    const percentage = el.scrollTop / (el.scrollHeight - el.offsetHeight)
    scroll.set(isNaN(percentage) ? 0 : percentage)
  }

  onMount(() => {
-    const resizeFN = window.addEventListener('resize', resize, false)
-    const scrollFN = main.addEventListener('scroll', updateScroll, false)
+    window.addEventListener('resize', resize, false)
+    main.addEventListener('scroll', updateScroll, false)
    resize()
    return () => {
-      window.removeEventListener(resizeFN)
-      main.removeEventListener(scrollFN)
+      window.removeEventListener('resize', resize)
+      main.removeEventListener('scroll', updateScroll)
    }
  })
 </script>

 <div bind:this={wrapper}>
-  <Nav {segment} />
+  <Nav />
  <main bind:this={main}>
    <slot />
  </main>
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@ -1,28 +0,0 @@
-<script>
-  export let status
-  export let error
-
-  const dev = process.env.NODE_ENV === 'development'
-</script>
-
-<style>
-  h1 {
-    font-size: 8vw;
-  }
-
-  p {
-    margin: 1em auto;
-  }
-</style>
-
-<svelte:head>
-  <title>{status}</title>
-</svelte:head>
-
-<h1>{status}</h1>
-
-<p>{error.message}</p>
-
-{#if dev && error.stack}
-  <pre>{error.stack}</pre>
-{/if}
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@ -1,16 +1,37 @@
-<script context="module">
-  export async function preload() {
-    return this.fetch('/api/pages/about.json').then((res) => res.json())
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        data: await fetch('/api/pages/about.json').then((r) => r.json()),
+        image: await fetch('/api/media/about-2.json').then((r) => r.json()),
+      },
+    }
  }
 </script>

-<script>
-  import WPAdapter from '../components/WPAdapter.svelte'
-  import SimplePage from '../components/SimplePage.svelte'
+<script lang="ts">
+  import WPAdapter from '$lib/components/WPAdapter.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import type { GQLBaseMediaItemFragment, GQLBasePageFragment } from '$lib/gql/gen'
+  import { cdn } from '$lib/actions/cloudinary'

-  export let data
+  export let data: GQLBasePageFragment
+  export let image: GQLBaseMediaItemFragment
 </script>

+<svelte:head>
+  <title>{data.title}</title>
+</svelte:head>
+
+<SimplePage title={data.title} expanded={false}>
+  {#if data.content}
+    <WPAdapter content={data.content} />
+    <img use:cdn={image.sourceUrl} alt="decoration" />
+  {/if}
+</SimplePage>
+
 <style>
  img {
    position: absolute;
@ -34,13 +55,3 @@
    }
  }
 </style>
-
-<svelte:head>
-  <title>About</title>
-</svelte:head>
-
-<SimplePage title="About" expanded={false}>
-  <WPAdapter content={data.content} />
-  <!-- {@html data.content} -->
-  <img src="/images/about.jpg" alt="decoration" />
-</SimplePage>
--- a/src/routes/api/[...slug].json.js
+++ b/src/routes/api/[...slug].json.js
@ -1,13 +0,0 @@
-import { respond, getAll, getOne, sortByDate } from '../../lib/wp'
-
-export async function get(req, res) {
-  const [type, slug] = req.params.slug
-
-  if (slug) {
-    const data = await getOne(type, { slug })
-    respond(res, { data })
-  } else {
-    const data = await getAll(type)
-    respond(res, { data: sortByDate(data) })
-  }
-}
--- a/src/routes/api/[type]/[slug].json.ts
+++ b/src/routes/api/[type]/[slug].json.ts
@ -0,0 +1,60 @@
+import { SDK } from '$lib/gql'
+import type { ServerRequest } from '@sveltejs/kit/types/hooks'
+
+export async function get(args: ServerRequest) {
+  const { type, slug } = args.params
+  const all = slug === '*'
+
+  switch (type) {
+    case 'pages': {
+      if (all) {
+        const data = await SDK.PagesMany()
+        return { body: data.pages?.nodes }
+      } else {
+        const data = await SDK.PagesOne({ slug })
+        return { body: data.page }
+      }
+    }
+    case 'works': {
+      if (all) {
+        const data = await SDK.WorksMany()
+        return { body: data.works?.nodes }
+      } else {
+        const data = await SDK.WorksOne({ slug })
+        return { body: data.work }
+      }
+    }
+    case 'projects': {
+      if (all) {
+        const data = await SDK.ProjectsMany()
+        return { body: data.projects?.nodes }
+      } else {
+        const data = await SDK.ProjectsOne({ slug })
+        return { body: data.project }
+      }
+    }
+
+    case 'media': {
+      if (all) {
+        const data = await SDK.MediaItemsMany()
+        return { body: data.mediaItems?.nodes }
+      } else {
+        const data = await SDK.MediaItemsOne({ slug })
+        return { body: data.mediaItem }
+      }
+    }
+
+    case 'posts': {
+      if (all) {
+        const data = await SDK.PostsMany()
+        return { body: data.posts?.nodes }
+      } else {
+        const data = await SDK.PostsOne({ slug })
+        return { body: data.post }
+      }
+    }
+
+    default:
+      return { status: 404 }
+  }
+}
--- a/src/routes/api/search.json.ts
+++ b/src/routes/api/search.json.ts
@ -0,0 +1,30 @@
+import { SDK } from '$lib/gql'
+import type { GQLBasePageFragment } from '$lib/gql/gen'
+import lunr from 'lunr'
+
+function removeHTML(s: string) {
+  return s.replace(/<.*?>|\s+|&#\d+;/g, ' ').trim()
+}
+
+function convertForIdx(type: string, items: GQLBasePageFragment[]) {
+  const keys: (keyof GQLBasePageFragment)[] = ['title', 'content', 'slug']
+  return items.map((item) => ({
+    url: `${type}/${item.slug}`,
+    data: keys.map((field) => removeHTML(item[field] ?? '')).join(' '),
+  }))
+}
+
+export const get = async () => {
+  const { __typename, ...all } = await SDK.Search()
+  const converted = Object.entries(all)
+    .map(([type, data]) => convertForIdx(type, data.nodes))
+    .flat()
+
+  const idx = lunr(function () {
+    this.ref('url')
+    this.field('data')
+    converted.forEach((doc) => this.add(doc))
+  })
+
+  return { body: idx }
+}
--- a/src/routes/blog/[slug].svelte
+++ b/src/routes/blog/[slug].svelte
@ -1,20 +1,31 @@
-<script context="module">
-  export async function preload({ params }) {
-    return this.fetch(`/api/posts/${params.slug}.json`).then((res) =>
-      res.json()
-    )
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch, page }) => {
+    return {
+      props: {
+        data: await fetch(`/api/posts/${page.params.slug}.json`).then((r) => r.json()),
+      },
+    }
  }
 </script>

-<script>
-  import SimplePage from '../../components/SimplePage.svelte'
-  import WPAdapter from '../../components/WPAdapter.svelte'
-  import PostAttributes from '../../components/PostAttributes.svelte'
+<script lang="ts">
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import PostAttributes from '$lib/components/PostAttributes.svelte'
+  import WpAdapter from '$lib/components/WPAdapter.svelte'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'

-  export let data
+  export let data: GQLBasePostFragment
 </script>

-<SimplePage title={data.title} expanded={false} readable>
+<svelte:head>
+  <title>Blog - {data.title}</title>
+</svelte:head>
+
+<SimplePage title={data.title} readable>
  <PostAttributes post={data} full />
-  <WPAdapter content={data.content} />
+  {#if data.content}
+    <WpAdapter content={data.content} />
+  {/if}
 </SimplePage>
--- a/src/routes/blog/index.svelte
+++ b/src/routes/blog/index.svelte
@ -1,44 +1,29 @@
-<script context="module">
-  export async function preload(page) {
-    return this.fetch('/api/posts.json').then((res) => res.json())
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const prerender = true
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        data: await fetch('/api/posts/*.json').then((r) => r.json()),
+      },
+    }
  }
 </script>

-<script>
-  import { onMount } from 'svelte'
-  import SimplePage from '../../components/SimplePage.svelte'
-  import PostPreview from '../../components/PostPreview.svelte'
+<script lang="ts">
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import PostPreview from '$lib/components/PostPreview.svelte'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'

-  export let data
-  export let redirected = false
-
-  onMount(() => {
-    redirected = new URL(location.href).searchParams.has('old')
-  })
+  export let data: GQLBasePostFragment[]
 </script>

-<style>
-  div {
-    margin-bottom: 6em;
-    background-color: var(--clr-error);
-    padding: 1em;
-  }
-</style>
-
 <svelte:head>
  <title>Blog</title>
 </svelte:head>
-<SimplePage title="Blog">
-  {#if redirected}
-    <div>
-      <h2>You have been redirected 🔄</h2>
-      <p>
-        Probably you are coming form my old blog (blog.nicco.io)
-        <br />
-        The article you were looking for is down here 👇
-      </p>
-    </div>
-  {/if}
+
+<SimplePage title="Works">
  {#each data as post}
    <PostPreview {post} />
  {/each}
--- a/src/routes/contact.svelte
+++ b/src/routes/contact.svelte
@ -1,7 +1,6 @@
-<script>
-  import IconList from '../components/IconList.svelte'
-
-  import SimplePage from '../components/SimplePage.svelte'
+<script lang="ts">
+  import IconList from '$lib/components/IconList.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'

  const links = [
    {
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -1,72 +1,100 @@
-<script>
-  import SpacedLetters from '../components/SpacedLetters.svelte'
+<script lang="ts" context="module">
+  import type { GQLBaseMediaItemFragment } from '$lib/gql/gen'
+
+  type Data = Record<'signature' | 'home', GQLBaseMediaItemFragment>
+  export const load: Load = async ({ fetch }) => {
+    const signature: GQLBaseMediaItemFragment = await fetch('/api/media/signature.json').then((r) => r.json())
+    const home: GQLBaseMediaItemFragment = await fetch('/api/media/home.json').then((r) => r.json())
+    return { props: { data: { signature, home } } }
+  }
+</script>
+
+<script lang="ts">
+  import SpacedLetters from '$lib/components/SpacedLetters.svelte'
+  import type { Load } from '@sveltejs/kit'
+
+  export let data: Data
 </script>

 <svelte:head>
-  <title>Niccolo Borgioli</title>
+  <title>Niccolò Borgioli</title>
 </svelte:head>

-<section class="left" style="z-index: 3;">
-  <h1>
-    <SpacedLetters letters="Niccolò" even />
-    <SpacedLetters letters="Borgioli" even />
-  </h1>
+<div class="wrapper">
+  <div class="left" style="z-index: 3;">
+    <h1>
+      <SpacedLetters letters="Niccolò" even />
+      <SpacedLetters letters="Borgioli" even />
+    </h1>

-  <p>Design & Development</p>
-</section>
+    <p>Design & Development</p>
+  </div>

-<section class="right" style="z-index: 2;">
-  <picture>
-    <source media="(min-width: 60em)" srcset="/images/home@1500.webp" />
-    <source media="(min-width: 45em)" srcset="/images/home@1000.webp" />
-    <source srcset="/images/home@500.webp" />
-    <img src="/images/decoration.jpg" alt="decoration" />
-  </picture>
-</section>
+  <div class="right" style="z-index: 2;">
+    <img srcset={data.home.srcSet} alt="decoration" class="home" />
+    <img srcset={data.signature.srcSet} alt="signature" class="signature" />
+  </div>
+</div>

 <style>
-  p {
-    font-size: 4vw;
-    margin-top: 0;
-  }
-
-  section {
+  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
-    width: 100%;
    height: 100%;
+    width: 100%;
    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    align-items: center;
+    padding: 1rem;
  }

-  section.left {
-    align-items: flex-start;
-    padding-left: 1em;
-    width: initial;
+  .left {
+    flex: 1 0 auto;
+    max-width: 64vw;
  }

-  section.right {
-    align-items: flex-end;
+  .right {
+    position: relative;
+    top: 5vh;
  }

-  img {
+  p {
+    font-size: 4vw;
+    margin: 0;
+  }
+
+  img.home {
+    width: min(100%, 33vw);
    object-fit: contain;
-    height: 65vh;
-    width: 33vw;
-    transform: translateY(5vh);
+    object-position: left;
+    max-height: 65vh;
+  }
+  img.signature {
+    position: absolute;
+    width: 50%;
+    top: -6%;
+    left: -10%;
+    transform: rotate(-8deg);
  }

  @media (max-width: 50em) {
-    img {
-      transform: translateY(15vh);
-      height: 60vh;
-      width: 69vw;
+    .wrapper {
+      flex-direction: column;
    }

-    section.left {
-      transform: translateY(-25vh);
+    .left {
+      flex: initial;
+    }
+
+    .right {
+      left: 1rem;
+    }
+
+    img.home {
+      width: auto;
+      height: 100%;
+      max-height: calc(90vh - 35vw - 5vh);
+      max-width: 90%;
    }
  }
 </style>
--- a/src/routes/privacy.svelte
+++ b/src/routes/privacy.svelte
@ -1,16 +1,29 @@
-<script context="module">
-  export async function preload() {
-    return this.fetch('/api/pages/privacy.json').then((res) => res.json())
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        data: await fetch('/api/pages/privacy.json').then((r) => r.json()),
+      },
+    }
  }
 </script>

-<script>
-  import WPAdapter from '../components/WPAdapter.svelte'
-  import SimplePage from '../components/SimplePage.svelte'
+<script lang="ts">
+  import WPAdapter from '$lib/components/WPAdapter.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import type { GQLBasePageFragment } from '$lib/gql/gen'

-  export let data
+  export let data: GQLBasePageFragment
 </script>

-<SimplePage title="Privacy Policy">
-  <WPAdapter content={data.content} />
+<svelte:head>
+  <title>{data.title}</title>
+</svelte:head>
+
+<SimplePage title={data.title} expanded={false}>
+  {#if data.content}
+    <WPAdapter content={data.content} />
+  {/if}
 </SimplePage>
--- a/src/routes/projects.svelte
+++ b/src/routes/projects.svelte
@ -1,14 +1,21 @@
-<script context="module">
-  export async function preload() {
-    return this.fetch('/api/projects.json').then((res) => res.json())
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        data: await fetch('/api/projects/*.json').then((r) => r.json()),
+      },
+    }
  }
 </script>

 <script lang="ts">
-  import SimplePage from '../components/SimplePage.svelte'
-  import Project from '../components/Project.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import Project from '$lib/components/Project.svelte'
+  import type { GQLBaseProjectFragment } from '$lib/gql/gen'

-  export let data
+  export let data: GQLBaseProjectFragment[]
 </script>

 <svelte:head>
--- a/src/routes/search.json.js
+++ b/src/routes/search.json.js
@ -1,34 +0,0 @@
-import lunr from 'lunr'
-
-import { getAll } from '../lib/wp'
-
-function removeHTML(s) {
-  return s.replace(/<.*?>|\s+|&#\d+;/g, ' ').trim()
-}
-
-async function convertForIdx(type, fields = []) {
-  const items = await getAll(type)
-  const keys = ['title', 'content', 'slug', ...fields]
-  return items.map((item) => ({
-    url: `${item.type}/${item.slug}`,
-    data: keys.map((field) => removeHTML(item[field])).join(' '),
-  }))
-}
-
-export async function get(req, res) {
-  const all = await Promise.all([
-    convertForIdx('projects', ['description']),
-    convertForIdx('pages'),
-    convertForIdx('posts'),
-    convertForIdx('works', ['role']),
-  ])
-
-  const idx = lunr(function () {
-    this.ref('url')
-    this.field('data')
-
-    all.flat().forEach((doc) => this.add(doc))
-  })
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify(idx))
-}
--- a/src/routes/search.svelte
+++ b/src/routes/search.svelte
@ -1,24 +1,31 @@
-<script context="module">
-  export async function preload({ query }) {
-    const prebuilt = await this.fetch(`/search.json`).then((res) => res.json())
-    return { prebuilt }
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        prebuilt: await fetch('/api/search.json').then((r) => r.json()),
+      },
+    }
  }
 </script>

-<script>
+<script lang="ts">
  import lunr from 'lunr'
  import { onMount } from 'svelte'

-  import SearchResult from '../components/SearchResult.svelte'
-  import SimplePage from '../components/SimplePage.svelte'
+  import type { SearchResultItem } from '$lib/components/SearchResult.svelte'
+  import SearchResult from '$lib/components/SearchResult.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'

-  export let prebuilt
-  let needle
-  let results = []
+  export let prebuilt: any
+  let needle: string | null = null
+  let results: SearchResultItem[] = []
+  let input: HTMLInputElement

  const idx = lunr.Index.load(prebuilt)

-  async function search(needle) {
+  async function search(needle: string) {
    if (!needle || !idx) {
      results = []
    } else {
@ -28,25 +35,28 @@
    }
  }

-  $: if (needle) {
+  $: if (needle !== null) {
    if (typeof window !== 'undefined') {
-      window.history.replaceState(null, null, `/search?q=${needle || ''}`)
+      window.history.replaceState(null, '', `/search?q=${needle ?? ''}`)
    }
    search(needle)
  }

  onMount(() => {
    needle = new URLSearchParams(window.location.search).get('q')
+    input.focus()
  })
 </script>

 <SimplePage title="Search" expanded={false}>
-  <input bind:value={needle} placeholder="needle" />
-  <ul>
-    {#each results as result (result.ref)}
-      <SearchResult {result} />
-    {/each}
-  </ul>
+  <input bind:this={input} bind:value={needle} placeholder="needle" />
+  {#if needle}
+    <ul>
+      {#each results as result (result.ref)}
+        <SearchResult {result} />
+      {/each}
+    </ul>
+  {/if}
 </SimplePage>

 <style>
--- a/src/routes/support.svelte
+++ b/src/routes/support.svelte
@ -1,7 +1,6 @@
-<script>
-  import IconList from '../components/IconList.svelte'
-
-  import SimplePage from '../components/SimplePage.svelte'
+<script lang="ts">
+  import IconList from '$lib/components/IconList.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'

  const links = [
    {
--- a/src/routes/works.svelte
+++ b/src/routes/works.svelte
@ -1,22 +0,0 @@
-<script context="module">
-  export async function preload() {
-    return this.fetch('/api/works.json').then((res) => res.json())
-  }
-</script>
-
-<script>
-  import SimplePage from '../components/SimplePage.svelte'
-  import Work from '../components/Work.svelte'
-
-  export let data
-</script>
-
-<svelte:head>
-  <title>Works</title>
-</svelte:head>
-
-<SimplePage title="Works">
-  {#each data as work}
-    <Work {work} />
-  {/each}
-</SimplePage>
--- a/src/routes/works/[slug].svelte
+++ b/src/routes/works/[slug].svelte
@ -0,0 +1,27 @@
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch, page }) => {
+    return {
+      props: {
+        data: await fetch(`/api/works/${page.params.slug}.json`).then((r) => r.json()),
+      },
+    }
+  }
+</script>
+
+<script lang="ts">
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import Work from '$lib/components/Work.svelte'
+  import type { GQLBaseWorkFragment } from '$lib/gql/gen'
+
+  export let data: GQLBaseWorkFragment
+</script>
+
+<svelte:head>
+  <title>Works</title>
+</svelte:head>
+
+<SimplePage title="Works">
+  <Work work={data} />
+</SimplePage>
--- a/src/routes/works/index.svelte
+++ b/src/routes/works/index.svelte
@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        data: await fetch('/api/works/*.json').then((r) => r.json()),
+      },
+    }
+  }
+</script>
+
+<script lang="ts">
+  import type { GQLBaseWorkFragment } from '$lib/gql/gen'
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import Work from '$lib/components/Work.svelte'
+
+  export let data: GQLBaseWorkFragment[]
+</script>
+
+<svelte:head>
+  <title>Works</title>
+</svelte:head>
+
+<SimplePage title="Works">
+  {#each data as work}
+    <Work {work} />
+  {/each}
+</SimplePage>
--- a/src/server.js
+++ b/src/server.js
@ -1,15 +0,0 @@
-import sirv from 'sirv'
-import polka from 'polka'
-import compression from 'compression'
-import * as sapper from '@sapper/server'
-
-const { PORT, NODE_ENV } = process.env
-const dev = NODE_ENV === 'development'
-
-polka()
-  .use(compression({ threshold: 0 }))
-  .use(sirv('static', { dev }))
-  .use(sapper.middleware())
-  .listen(PORT, (err) => {
-    if (err) console.log('error', err)
-  })
--- a/static/images/about.jpg
+++ b/static/images/about.jpg
--- a/static/images/decoration.jpg
+++ b/static/images/decoration.jpg
--- a/static/images/home@1000.webp
+++ b/static/images/home@1000.webp
--- a/static/images/home@1500.webp
+++ b/static/images/home@1500.webp
--- a/static/images/home@500.webp
+++ b/static/images/home@500.webp
--- a/static/robots.txt
+++ b/static/robots.txt
@ -1,2 +0,0 @@
-User-Agent: *
-Allow: /
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,13 @@
+import preprocess from 'svelte-preprocess'
+import adapter from '@sveltejs/adapter-static'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: preprocess(),
+  kit: {
+    adapter: adapter(),
+    target: '#svelte',
+  },
+}
+
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "module": "es2020",
+    "lib": ["es2020"],
+    "target": "es2019",
+
+    "noImplicitAny": true,
+    "alwaysStrict": true,
+    "strictNullChecks": true,
+    /**
+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+			to enforce using \`import type\` instead of \`import\` for Types.
+			*/
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+			To have warnings/errors of the Svelte compiler at the correct position,
+			enable source maps by default.
+			*/
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "allowJs": true,
+    "checkJs": true,
+    "paths": {
+      "$lib/*": ["src/lib/*"]
+    }
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}
				`@ -0,0 +1 @@`
				`*.afphoto filter=lfs diff=lfs merge=lfs -text`