Merge pull request #8 from cupcakearmy/rewrite

Rewrite

.env

@@ -0,0 +1 @@
+VITE_API_URL=https://api.nicco.io/graphql

.gitattributes

@@ -0,0 +1 @@
+*.afphoto filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,10 +1,7 @@
-# Node
+.DS_Store
-/node_modules/
+node_modules
-
+/.svelte-kit
-# Sapper
+/package
-/src/node_modules/@sapper/
+/build
-/__sapper__/
+.vercel_build_output
-
 .vercel
-data
-backups

.graphqlrc.yml

@@ -0,0 +1 @@
+schema: "https://api.nicco.io/graphql"

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierrc

@@ -1,7 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "trailingComma": "es5",
-  "singleQuote": true
-}

.vercelignore

@@ -1,10 +0,0 @@
-# Node
-/node_modules/
-
-# Sapper
-/src/node_modules/@sapper/
-/__sapper__/
-
-.vercel
-data
-backups

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
+If you're seeing this, you've probably already done this step. Congrats!
-  - Advanced Custom Fields
+
-  - Custom Post Type UI
+```bash
-  - ACF to REST API
+# create a new project in the current directory
-  - WP Webhooks
+npm init svelte@next
-- Sapper Frontend (Svelte)
+
-- Vercel for static hosting
+# 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.

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

package.json

@@ -1,30 +1,36 @@
 {
   "private": true,
   "scripts": {
-    "dev": "sapper dev",
+    "dev": "svelte-kit dev",
-    "export": "sapper export",
+    "build": "svelte-kit build",
-    "start": "serve __sapper__/export"
+    "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",
+    "dayjs": "^1.10.7",
-    "compression": "^1.7.1",
+    "highlight.js": "^11.3.1",
-    "dayjs": "^1.9.7",
-    "highlight.js": "^10.4.1",
     "lunr": "^2.3.9",
-    "polka": "next",
+    "svelte-cloudinary": "^0.2.4"
-    "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"
   }
 }

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,
-  },
-}

src/app.css

@@ -7,8 +7,8 @@
 }
 
 :root {
-  --ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
+  --ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    Helvetica Neue, sans-serif;
   --ff-alt: 'Playfair Display', serif;
   --clr-light: #ffffff;
   --clr-dark: #010101;

src/app.html

@@ -4,35 +4,14 @@
     <meta charset="utf-8" />
     <meta name="description" content="Designer & Developer" />
     <meta name="keywords" content="Web Agency Blog Articles" />
-    <meta
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,viewport-fit=cover"
-    />
-    <meta name="theme-color" content="#333333" />
 
-    %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
+    %svelte.head%
-	     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%
   </head>
   <body>
-    <!-- The application will be rendered inside this element,
+    <div id="svelte">%svelte.body%</div>
-      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%
 
     <script type="text/javascript">
       var _paq = (window._paq = window._paq || [])
@@ -56,11 +35,7 @@
     </script>
     <noscript
       ><p>
-        <img
+        <img src="//stats.nicco.io/rainbow?idsite=1&amp;rec=1" style="border: 0" alt="" /></p
-          src="//stats.nicco.io/rainbow?idsite=1&amp;rec=1"
-          style="border: 0"
-          alt=""
-        /></p
     ></noscript>
   </body>
 </html>

src/client.js

@@ -1,5 +0,0 @@
-import * as sapper from '@sapper/app';
-
-sapper.start({
-	target: document.querySelector('#sapper')
-});

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} />

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>

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

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 })
+}

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);
   }

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
+    <a rel={external ? 'noopener noreferrer' : ''} {href} target={external ? '_blank' : ''}>
-      rel={external ? 'noopener noreferrer' : ''}
-      {href}
-      target={external ? '_blank' : ''}
-    >
       <li>
         <Icon class="icon" {icon} />
         {name}

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>

src/lib/components/Nav.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
-  import Icon from './Icon.svelte'
+  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}

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>

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>

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>

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},${
+    const path = `M${R},${-50} A${R * 2},${R * 2},0,${center},1,${x},${y} L${R},${R} L${R},${-R}`
-      R * 2
-    },0,${center},1,${x},${y} L${R},${R} L${R},${-R}`
     if (el) el.setAttribute('d', path)
   }
 

src/lib/components/Project.svelte

@@ -1,18 +1,18 @@
-<script>
+<script lang="ts">
-  import dj from 'dayjs'
+  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: GQLBaseProjectFragment
-
-  export let project
 </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>{project.project.description}</b>
-    <b class="date">{dj(project.date * 1000).format('MMM YY')}</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}
+    <a rel="noopener noreferrer" target="_blank" href={project.project.link}
-      >{project.link.replace(/https?:\/\//, '')}</a
+      >{project.project.link.replace(/https?:\/\//, '')}</a
     >
   </div>
 </section>

src/lib/components/SearchResult.svelte

@@ -1,5 +1,12 @@
-<script>
+<script lang="ts" context="module">
-  export let result
+  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
     }

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>

src/lib/components/SpacedLetters.svelte

@@ -1,9 +1,15 @@
-<script>
+<script lang="ts">
-  export let letters = []
+  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>

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

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>

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)

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
+    }
+  }
+}

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)
-}

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))
+}

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))
-}

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 '../app.css'
-  import Nav from '../components/Nav.svelte'
+  import '$lib/actions/cloudinary'
-  import Progress from '../components/Progress.svelte'
 
-  export let segment
+  import dayjs from 'dayjs'
-  let wrapper
+  import customParseFormat from 'dayjs/plugin/customParseFormat.js'
-  let main
+  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)
+    window.addEventListener('resize', resize, false)
-    const scrollFN = main.addEventListener('scroll', updateScroll, false)
+    main.addEventListener('scroll', updateScroll, false)
     resize()
     return () => {
-      window.removeEventListener(resizeFN)
+      window.removeEventListener('resize', resize)
-      main.removeEventListener(scrollFN)
+      main.removeEventListener('scroll', updateScroll)
     }
   })
 </script>
 
 <div bind:this={wrapper}>
-  <Nav {segment} />
+  <Nav />
   <main bind:this={main}>
     <slot />
   </main>

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}

src/routes/about.svelte

@@ -1,16 +1,37 @@
-<script context="module">
+<script lang="ts" context="module">
-  export async function preload() {
+  import type { Load } from '@sveltejs/kit'
-    return this.fetch('/api/pages/about.json').then((res) => res.json())
+
+  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>
+<script lang="ts">
-  import WPAdapter from '../components/WPAdapter.svelte'
+  import WPAdapter from '$lib/components/WPAdapter.svelte'
-  import SimplePage from '../components/SimplePage.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>

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) })
-  }
-}

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 }
+  }
+}

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 }
+}

src/routes/blog/[slug].svelte

@@ -1,20 +1,31 @@
-<script context="module">
+<script lang="ts" context="module">
-  export async function preload({ params }) {
+  import type { Load } from '@sveltejs/kit'
-    return this.fetch(`/api/posts/${params.slug}.json`).then((res) =>
+
-      res.json()
+  export const load: Load = async ({ fetch, page }) => {
-    )
+    return {
+      props: {
+        data: await fetch(`/api/posts/${page.params.slug}.json`).then((r) => r.json()),
+      },
+    }
   }
 </script>
 
-<script>
+<script lang="ts">
-  import SimplePage from '../../components/SimplePage.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'
-  import WPAdapter from '../../components/WPAdapter.svelte'
+  import PostAttributes from '$lib/components/PostAttributes.svelte'
-  import PostAttributes from '../../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>

src/routes/blog/index.svelte

@@ -1,44 +1,29 @@
-<script context="module">
+<script lang="ts" context="module">
-  export async function preload(page) {
+  import type { Load } from '@sveltejs/kit'
-    return this.fetch('/api/posts.json').then((res) => res.json())
+
+  export const prerender = true
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        data: await fetch('/api/posts/*.json').then((r) => r.json()),
+      },
+    }
   }
 </script>
 
-<script>
+<script lang="ts">
-  import { onMount } from 'svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'
-  import SimplePage from '../../components/SimplePage.svelte'
+  import PostPreview from '$lib/components/PostPreview.svelte'
-  import PostPreview from '../../components/PostPreview.svelte'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
 
-  export let data
+  export let data: GQLBasePostFragment[]
-  export let redirected = false
-
-  onMount(() => {
-    redirected = new URL(location.href).searchParams.has('old')
-  })
 </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}
+<SimplePage title="Works">
-    <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}
   {#each data as post}
     <PostPreview {post} />
   {/each}

src/routes/contact.svelte

@@ -1,7 +1,6 @@
-<script>
+<script lang="ts">
-  import IconList from '../components/IconList.svelte'
+  import IconList from '$lib/components/IconList.svelte'
-
+  import SimplePage from '$lib/components/SimplePage.svelte'
-  import SimplePage from '../components/SimplePage.svelte'
 
   const links = [
     {

src/routes/index.svelte

@@ -1,72 +1,100 @@
-<script>
+<script lang="ts" context="module">
-  import SpacedLetters from '../components/SpacedLetters.svelte'
+  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;">
+<div class="wrapper">
-  <h1>
+  <div class="left" style="z-index: 3;">
-    <SpacedLetters letters="Niccolò" even />
+    <h1>
-    <SpacedLetters letters="Borgioli" even />
+      <SpacedLetters letters="Niccolò" even />
-  </h1>
+      <SpacedLetters letters="Borgioli" even />
+    </h1>
 
-  <p>Design & Development</p>
+    <p>Design & Development</p>
-</section>
+  </div>
 
-<section class="right" style="z-index: 2;">
+  <div class="right" style="z-index: 2;">
-  <picture>
+    <img srcset={data.home.srcSet} alt="decoration" class="home" />
-    <source media="(min-width: 60em)" srcset="/images/home@1500.webp" />
+    <img srcset={data.signature.srcSet} alt="signature" class="signature" />
-    <source media="(min-width: 45em)" srcset="/images/home@1000.webp" />
+  </div>
-    <source srcset="/images/home@500.webp" />
+</div>
-    <img src="/images/decoration.jpg" alt="decoration" />
-  </picture>
-</section>
 
 <style>
-  p {
+  .wrapper {
-    font-size: 4vw;
-    margin-top: 0;
-  }
-
-  section {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
     height: 100%;
+    width: 100%;
     display: flex;
-    flex-direction: column;
+    align-items: center;
-    justify-content: center;
+    padding: 1rem;
   }
 
-  section.left {
+  .left {
-    align-items: flex-start;
+    flex: 1 0 auto;
-    padding-left: 1em;
+    max-width: 64vw;
-    width: initial;
   }
 
-  section.right {
+  .right {
-    align-items: flex-end;
+    position: relative;
+    top: 5vh;
   }
 
-  img {
+  p {
+    font-size: 4vw;
+    margin: 0;
+  }
+
+  img.home {
+    width: min(100%, 33vw);
     object-fit: contain;
-    height: 65vh;
+    object-position: left;
-    width: 33vw;
+    max-height: 65vh;
-    transform: translateY(5vh);
+  }
+  img.signature {
+    position: absolute;
+    width: 50%;
+    top: -6%;
+    left: -10%;
+    transform: rotate(-8deg);
   }
 
   @media (max-width: 50em) {
-    img {
+    .wrapper {
-      transform: translateY(15vh);
+      flex-direction: column;
-      height: 60vh;
-      width: 69vw;
     }
 
-    section.left {
+    .left {
-      transform: translateY(-25vh);
+      flex: initial;
+    }
+
+    .right {
+      left: 1rem;
+    }
+
+    img.home {
+      width: auto;
+      height: 100%;
+      max-height: calc(90vh - 35vw - 5vh);
+      max-width: 90%;
     }
   }
 </style>

src/routes/privacy.svelte

@@ -1,16 +1,29 @@
-<script context="module">
+<script lang="ts" context="module">
-  export async function preload() {
+  import type { Load } from '@sveltejs/kit'
-    return this.fetch('/api/pages/privacy.json').then((res) => res.json())
+
+  export const load: Load = async ({ fetch }) => {
+    return {
+      props: {
+        data: await fetch('/api/pages/privacy.json').then((r) => r.json()),
+      },
+    }
   }
 </script>
 
-<script>
+<script lang="ts">
-  import WPAdapter from '../components/WPAdapter.svelte'
+  import WPAdapter from '$lib/components/WPAdapter.svelte'
-  import SimplePage from '../components/SimplePage.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">
+<svelte:head>
-  <WPAdapter content={data.content} />
+  <title>{data.title}</title>
+</svelte:head>
+
+<SimplePage title={data.title} expanded={false}>
+  {#if data.content}
+    <WPAdapter content={data.content} />
+  {/if}
 </SimplePage>

src/routes/projects.svelte

@@ -1,14 +1,21 @@
-<script context="module">
+<script lang="ts" context="module">
-  export async function preload() {
+  import type { Load } from '@sveltejs/kit'
-    return this.fetch('/api/projects.json').then((res) => res.json())
+
+  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 SimplePage from '$lib/components/SimplePage.svelte'
-  import Project from '../components/Project.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>

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))
-}

src/routes/search.svelte

@@ -1,24 +1,31 @@
-<script context="module">
+<script lang="ts" context="module">
-  export async function preload({ query }) {
+  import type { Load } from '@sveltejs/kit'
-    const prebuilt = await this.fetch(`/search.json`).then((res) => res.json())
+
-    return { prebuilt }
+  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 type { SearchResultItem } from '$lib/components/SearchResult.svelte'
-  import SimplePage from '../components/SimplePage.svelte'
+  import SearchResult from '$lib/components/SearchResult.svelte'
+  import SimplePage from '$lib/components/SimplePage.svelte'
 
-  export let prebuilt
+  export let prebuilt: any
-  let needle
+  let needle: string | null = null
-  let results = []
+  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" />
+  <input bind:this={input} bind:value={needle} placeholder="needle" />
-  <ul>
+  {#if needle}
-    {#each results as result (result.ref)}
+    <ul>
-      <SearchResult {result} />
+      {#each results as result (result.ref)}
-    {/each}
+        <SearchResult {result} />
-  </ul>
+      {/each}
+    </ul>
+  {/if}
 </SimplePage>
 
 <style>

src/routes/support.svelte

@@ -1,7 +1,6 @@
-<script>
+<script lang="ts">
-  import IconList from '../components/IconList.svelte'
+  import IconList from '$lib/components/IconList.svelte'
-
+  import SimplePage from '$lib/components/SimplePage.svelte'
-  import SimplePage from '../components/SimplePage.svelte'
 
   const links = [
     {

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>

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>

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>

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)
-  })

static/robots.txt

@@ -1,2 +0,0 @@
-User-Agent: *
-Allow: /

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

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"]
+}